sims 213: user interface design & development marti hearst tues, feb 3, 2004
Post on 20-Dec-2015
218 views
TRANSCRIPT
![Page 1: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/1.jpg)
SIMS 213: User Interface Design & Development
Marti HearstTues, Feb 3, 2004
![Page 2: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/2.jpg)
Slide adapted from Ben Shneiderman
Participatory Design
A subset of user-centered designUser actively participates in design of the systemPros:– potentially more accurate information about the tasks– more opportunity for users to influence the design
decisions– buy-in from sense of participation– potential greater acceptance of final system
![Page 3: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/3.jpg)
Slide adapted from Ben Shneiderman
Participatory Design
Cons (potential):– more costly– lengthier implementation period– antagonism from those whose suggestion are not
incorporated– force designers to compromise design– exacerbate personality conflicts between designers and users– highlight organizational politics
![Page 4: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/4.jpg)
User-Centered Design OverviewNeeds assessment– Find out
• who users are• what their goals are• what tasks they need to perform
– Task Analysis• Characterize what steps users need to take• Create scenarios of actual use• Decide which users and tasks to support
Design based on thisEvaluation– Test interface by “walking through” tasks– Do this before implementation
![Page 5: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/5.jpg)
Example: Student Course Enrollment:How to Help Students Achieve their Goals?
enroll in sims 213
learn to build useful systems
become successful IT manager
achieve lifetime of success
![Page 6: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/6.jpg)
Help Users Achieve Goals
Example: Course Enrollment Software– What matters from the programmers’ point of view?– What matters from users’ point of view?– What about the course administrators?
![Page 7: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/7.jpg)
User-Centered Design Example
Course Registration (Tele-bears re-design)SIMS 213, Spring 2003
Group Manager: Amy TodenhagenDocumentation Manager: Kimberley ChambersSoftware Manager: Nadine FiebrichDesign Manager: Zhanna ShamisUser Testing Manager: Anna Teplitskaya
![Page 8: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/8.jpg)
User-centered Design Example
Problem Statement
![Page 9: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/9.jpg)
User-centered Design Example
Participants
![Page 10: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/10.jpg)
User-Centered Design Example
Needs Assessment Procedure:– Answer the needs assessment questions– Make a table showing
• user types• tasks• (guesses about) relative frequencies of tasks
– Decide which of the new tasks users may perform using the new interface.
• Make note of which ideas you decided to drop based on your interviews.
![Page 11: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/11.jpg)
Slide adapted from James Landay
Needs Assessment Questions
Who is going to use the system?What tasks do they now perform?What tasks are desired?How are the tasks learned?Where are the tasks performed?What is the relationship between the user and the data?
![Page 12: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/12.jpg)
Slide adapted from James Landay
Needs assessment Questions
What other tools does the user have?How do users communicate with each other?How often are the tasks performed?What are the (time) constraints on the task?What happens when things go wrong?What happens when things go wrong?
![Page 13: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/13.jpg)
User-centered Design Example
Needs assessment techniques:– Observation– Interviews– Study existing successful designs
![Page 14: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/14.jpg)
User-Centered Design Example
Interview– Prepare a list of questions about how people do their task
now and what they would like to have be different.– Interview at least three people
• Try to identify people with different needs and preferences, with respect to their attitudes about using online ordering systems.
– Ask them what, if anything, must be in the system in order for them to prefer it over the current system
• Refer to needs assessment questions shown above.– Go look at existing interfaces for the goal and see how
they handle the necessary tasks.
![Page 15: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/15.jpg)
User-centered Design Example
Interview Participants:Graduate - 1stYearMastersGraduate - PhDUndergrad - Freshman1Undergrad - Freshman2Undergrad - Junior-TransferUndergrad - Senior-TransferUndergrad - Senior
![Page 16: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/16.jpg)
User-centered Design Example
Interview Questions & Summary Results
![Page 17: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/17.jpg)
User-centered Design Example
Interview Questions & Summary Results
![Page 18: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/18.jpg)
User-centered Design Example
![Page 19: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/19.jpg)
User-centered Design Example
Interview Questions & Summary Results
![Page 20: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/20.jpg)
User-centered Design Example
![Page 21: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/21.jpg)
User-centered Design Example
Interview Questions & Summary Results
![Page 22: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/22.jpg)
User Centered Design Example
Create the Personas from these results– Next time
![Page 23: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/23.jpg)
Slide adapted from Ben Shneiderman
Task Analysis
Characterize what happens when users perform typical tasksTools:– table of user communities vs. tasks
• Who x What– table of task sequences– flowchart or transition diagram– videotape depicting scenario
![Page 24: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/24.jpg)
Slide adapted from James Landay's
How Often Do Users Perform the Tasks?
Frequent users remember more detailsInfrequent users may need more promptingWhich function is performed– most frequently?– by which users?– optimize system for tasks that will improve
perception of its performance
![Page 25: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/25.jpg)
User-Centered Design Example
Task Analysis Table
![Page 26: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/26.jpg)
User-Centered Design Example
Task Analysis Table
![Page 27: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/27.jpg)
User-Centered Design Example
Task Analysis Table
![Page 28: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/28.jpg)
Augment Table with Percentages(What percentage of the is this task done by this person)(Numbers are only suggestive, adapted from Shneiderman 98)
J ob Title Query by Patient Update Data Query acrossPatients
Add Attributes
Nurse 14% 11%
Physician 6% 4%
Supervisor 1% 1% 4%
Appointmentadministrator
26%
Clinical researcher 8%
Databaseprogrammer
2% 2%
![Page 29: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/29.jpg)
User-Centered Design Example
Scenarios– Use Task Matrix to Create Scenarios– Scenarios indicate the sequence of steps the
personas go through to complete certain tasks
![Page 30: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004](https://reader036.vdocuments.us/reader036/viewer/2022062320/56649d4e5503460f94a2d675/html5/thumbnails/30.jpg)
User-Centered Design Example
Sketch an initial design– Explain how the system will work.
• Either a textual description or a flow chart (or both) showing the sequences of steps that will be allowed in the system.
• Provide rough sketches showing at least three of the important screens.
– Walk through at least one of the scenarios you developed and show how it can be handled by the interface.