1. SIMS 213: User Interface Design & Development Marti Hearst Thurs, Jan 23, 2003

2. Announcements Sign up for the is213 mailing list –Mail to majordomo@simsmajordomo@sims – “subscribe is213” –Do the necessary email exchanges Monday, 2pm, Room 205: –Jon Conhaim, E-Berkeley –Several candidate class projects

3. Readings Do indicated readings before the class Required: –Course Reader (available early next week) –Jakob Nielsen’s Usability Engineering –Jeff Johnson, GUI Bloopers For next Tuesday: –Read Bloopers Ch. 1 –Read Nielsen Chs. 3 and 4

4. Class Projects Design, prototype, and evaluate an interface –Iterate four times –Emphasis on web-based interfaces –Ok to redesign an existing interface MUST work in groups of 3-5 people –Team structure –Students will assess amount of work being done by others in the group Last year’s: –http://www.sims.berkeley.edu/courses/is213/s02/projects.htmlhttp://www.sims.berkeley.edu/courses/is213/s02/projects.html

5. Slide adapted from James Landay Teams vs. Managed Groups Managed Groups – strong leader – individual accountability – organizational purpose – individual work products – efficient meetings – measures performance by influence on others – delegates work Teams – shared leadership – individual & mutual accountability – specific team purpose – collective work products – open-ended meetings – measures performance from work products – does real work together Teams & good performance are inseparable

6. Slide adapted from James Landay Team Action Items Meet and get used to each other Figure out strengths of team members Assign each person a role –responsible for seeing work is organized & done –not responsible for doing it themselves Roles –design (visual & interaction) –software –user testing –group manager (coordinate big picture) –documentation (writing)

7. Assignment: Project Proposal Decide on project goals and members –Use class list to exchange ideas Recommendations: –Find a project for which you have ready access to people who would be real users of the system –Look at the projects from last time to get a feeling for the scope. Due date: –Proposals due Tuesday Feb 4 th (< 2 weeks) –We’ll give feedback and might ask you to revise it.

8. Slide by James Landay What is HCI? A discipline concerned with –design –evaluation –implementation of interactive computing systems for human use The study of major phenomena surrounding the interaction of humans with computers.

9. What is HCI? HumansTechnology Task Design Organizational & Social Issues

10. What is an Interface? Difficult to define The window through which the human interacts with some application on the computer. But … –really it is more complex than this –part of a larger context of interacting with other applications, other people, and the physical world.

11. Slide by James Landay Who builds UIs? A team of specialists (ideally) –graphic designers –interaction / interface designers –technical writers –marketers –test engineers –software engineers

12. Slide by James Landay An Iterative Process Design Prototype Evaluate

13. Slide by James Landay User-centered Design Take into account –Cognitive abilities –Organizational constraints –Customs and precendent Keep users involved throughout project

14. User-centered Design Standard Approach: –Needs assessment –Task analysis –Initial design More modern approach (from Cooper’s Inmates book): –Needs assessment –Persona creation –Goal creation –Scenario and task creation –Initial design

15. Using Personas Focus on specific aspects of a specific user’s characteristics, needs, and goals –The persona becomes as understandable as a character in a book or movie Avoid “elastic user” Design for the center of the distribution –The perpetual intermediates –Don’t focus on the edge cases

16. Designing for Goals Goals are what one wants to do Goals seldom change Tasks are steps to get to the goals –Tasks change with the technology –Sometimes tasks are the opposite of goals To get agreement, the lawyer argues To achieve peace, the country sends in troops Focusing on technology results in designing for tasks rather than goals.

17. Slide by James Landay Rapid Prototyping Build a mock-up of design Low fidelity techniques –paper sketches –cut, copy, paste –video segments Interactive prototyping tools –Visual Basic, HyperCard, Director, Flash, etc.

18. Evaluation Test with real users (participants) –Formally or Informally “Discount” techniques –expert evaluation (heuristic evaluation) –walkthroughs Build models –Less common

19. Why is Usability Important? Good design promotes –Effectiveness and efficiency –Feelings of satisfaction, enjoyment Bad design threatens –Safety –Accuracy

20. Good vs. Bad Design It is important to avoid bad design –It is often easy to detect a bad design – just try it with a few users –It can be fun to spot the flows UI Hall of Shame http://www.iarchitect.com/mshame.htmhttp://www.iarchitect.com/mshame.htm UI’s Greatest Bloopers It is much harder to teach / learn good design –Look at & appreciate good examples –Follow best practices –Be willing to redesign –Get lots of practice!

21. Good vs. Bad Design UI design is humbling –Your attempt may work right, look great –But … users may not be able to use it –Don’t take it personally! That’s why we iterate!

22. Studying Good Examples Some sites just do things well –Amazon has pioneered many excellent interaction designs for the web Suggesting related products in an effective way Useful and timely content Tabs to organize main kinds of content 1-click purchasing Good checkout mechanism –Yahoo also (although the structure of the hierarchy is now broken) –Epicurious.com – an excellent recipe site

23. Amazon’s use of tabs in 2001 What are the motivations?

24. Amazon’s use of tabs in 2002 What are the motivations? More or less effective than earlier?

25. Amazon’s current use of tabs Hasn’t changed much … found a good balance?

26. Studying Good Examples Good design ideas can be taken too far …

27. Metaphor in User Interfaces

28. Metaphor and Analogy Metaphor –L. metaphora, fr. to carry over, transfer; meta: beyond, over –The transference of the relation between one set of objects to another set for the purpose of brief explanation (Webster’s revised) Analogy –A resemblance of relations; an agreement or likeness between things in some circumstances or effects, when the things are otherwise entirely different. (Webster’s revised) –1. Similarity in some respect between things that are otherwise dissimilar: "the operation of a computer presents an interesting analogy to the working of the brain“ (WordNet) – 2: (logic) inference that if things agree in some respects they probably agree in others (WordNet)