SIMS 213: User Interface Design & Development

1. SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 3, 2004

2. Participatory Design • A subset of user-centered design • User actively participates in design of the system • Pros: • 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 Slide adapted from Ben Shneiderman

3. 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 Slide adapted from Ben Shneiderman

4. User-Centered Design Overview • Needs 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 this • Evaluation • Test interface by “walking through” tasks • Do this before implementation

5. Example: Student Course Enrollment:How to Help Students Achieve their Goals? achieve lifetime of success become successful IT manager learn to build useful systems enroll in sims 213

6. 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?

7. 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

8. User-centered Design Example Problem Statement

9. User-centered Design Example Participants

10. 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.

11. 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? Slide adapted from James Landay

12. 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? Slide adapted from James Landay

13. User-centered Design Example • Needs assessment techniques: • Observation • Interviews • Study existing successful designs

14. 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.

15. User-centered Design Example • Interview Participants: Graduate - 1stYearMastersGraduate - PhDUndergrad - Freshman1Undergrad - Freshman2Undergrad - Junior-TransferUndergrad - Senior-TransferUndergrad - Senior

16. User-centered Design Example Interview Questions & Summary Results

17. User-centered Design Example Interview Questions & Summary Results

18. User-centered Design Example

19. User-centered Design Example Interview Questions & Summary Results

20. User-centered Design Example

21. User-centered Design Example Interview Questions & Summary Results

22. User Centered Design Example • Create the Personas from these results • Next time

23. Task Analysis • Characterize what happens when users perform typical tasks • Tools: • table of user communities vs. tasks • Who x What • table of task sequences • flowchart or transition diagram • videotape depicting scenario Slide adapted from Ben Shneiderman

24. How Often Do Users Perform the Tasks? • Frequent users remember more details • Infrequent users may need more prompting • Which function is performed • most frequently? • by which users? • optimize system for tasks that will improve perception of its performance Slide adapted from James Landay's

25. User-Centered Design Example • Task Analysis Table

26. User-Centered Design Example • Task Analysis Table

27. User-Centered Design Example • Task Analysis Table

28. Augment Table with Percentages(What percentage of the is this task done by this person)(Numbers are only suggestive, adapted from Shneiderman 98)

29. 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

30. 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.