SIMS 213: User Interface Design & Development

1. SIMS 213: User Interface Design & Development Marti Hearst Thurs, Jan 24, 2002

2. Announcements • Sign up for the is213 mailing list • Mail to majordomo@sims • “subscribe is213” • Do the necessary email exchanges • Today: • 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-4 people • Team structure • Students will assess amount of work being done by others in the group

5. 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 vs. Managed Groups Teams & good performance are inseparable Slide adapted from James Landay

6. design (visual & interaction) software user testing 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 • group manager (coordinate big picture) • documentation (writing) Slide adapted from James Landay

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 5th (< 2 weeks) • We’ll give feedback and might ask you to revise it.

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

9. How to do good design

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

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

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

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

14. Amazon’s use of tabs last year What are the motivations?

15. Amazon’s current use of tabs • What are the motivations? • More or less effective than earlier?

16. Amazon’s current use of tabs • What are the motivations? • More or less effective than earlier?

17. Metaphor in User Interfaces

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

19. Metaphor • Lakoff & Johnson • “...the way we think, what we experience, and what we do every day is very much a matter of metaphor.'' • in our language & thinking - “argument is war” • …he attacked every weak point ... criticisms right on target ... if you use that strategy • We can use metaphor to highlight certain features & suppress others • There is some systematicity to the transference Slide adapted from James Landay

20. What are some example interface metaphors?

21. Direct Manipulation uses a Metaphor • Metaphor • Computer objects as visible, moveable objects • Consequences • Items represented as icons • Items can be “picked up” and “moved” on a surface • Items can be “thrown out” • Items can be “copied” • Do we really want to have to drag them to a photocopier? • How much is too much?

22. Direct Manipulation Metaphor • DLITE makes heavy use of direct manipulation metaphors • But it isn’t supposed to be just like in the real world • Retain what works, omit the rest

23. The Desktop Metaphor • Started at Xerox PARC • Xerox Star (see video) • Bitmapped screens made it possible • Not meant to be a real desktop • Idea is to organize information in a way to allow people to use it in the way they user information on their desktops • Allow windows to overlap – make the screen act as if there were objects on it • Apple took it farther • Waste basket, etc • Microsoft took it to extremes • Microsoft Bob – a recognized failure

24. Macintosh Desktop

25. Caldera’s Desktop

26. Microsoft Bob’s Desktop Metaphor

27. Microsoft Bob’s Livingroom –Almost not a metaphor anymore!

28. Selection Dialog Boxes • How are they using metaphors? • How are they breaking them? • Do they work well or is there a better alternative?

29. SPSS Selection Dialog

30. SPSS Selection Dialog

31. Identify the mis-matched metaphors(from the Interface Hall of Shame) The classic (from the mac desktop) • To eject a disk you drag it to the trashcan

32. Identify the mis-matched metaphors(from the Interface Hall of Shame) VCR buttons to control a printer??

33. Identify the mis-matched metaphors(from the Interface Hall of Shame) Using tabs to make arbitrary groups