1. Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 8: Generating Designs

2. UI Hall of Fame or Shame? Spring 20116.813/6.831 User Interface Design and Implementation2 Ghostview Acrobat

3. UI Hall of Fame or Shame? Spring 20116.813/6.831 User Interface Design and Implementation3 Xerox Star scrollbar original Macintosh scrollbar current Macintosh scrollbar

4. Nanoquiz closed book, closed notes submit before time is up (paper or web) we’ll show a timer for the last 20 seconds Spring 201146.813/6.831 User Interface Design and Implementation

5. 1.A persona is: (choose one best answer) A. a member of the design team pretending to be a user B. a user joining the design team to help with the design C. a fictional person who represents a user D. a user in a domain analysis diagram 2.Which of the following are likely to be tasks (or subtasks) in a task analysis of an online calendar (e.g. Google Calendar)? (choose all good answers) A. log in B. compute the hash code of the username C. edit an appointment D. print calendar 3.In a domain diagram, which elements have multiplicities? (choose all good answers) A. preconditions B. user classes C. tasks D. relations E. entities 2019181716151413121110 9 8 7 6 5 4 3 2 1 0 Spring 201156.813/6.831 User Interface Design and Implementation

6. Today’s Topics Design techniques –Sketching –Scenarios –Storyboards Design patterns Simplicity Spring 20116.813/6.831 User Interface Design and Implementation6

7. Sketching Designs Draw your ideas –By hand, not by drawing program –Paper or whiteboard Generate many ideas Design in a group Spring 20116.813/6.831 User Interface Design and Implementation7

8. Examples of Design Sketches Spring 20116.813/6.831 User Interface Design and Implementation8

9. Examples of Design Sketches Spring 20116.813/6.831 User Interface Design and Implementation9

10. Examples of Design Sketches Spring 20116.813/6.831 User Interface Design and Implementation10

11. Scenarios Scenario is a story about a user using the system –Concrete, realistic, but fictional –Involves a user with a goal –Follows how the user achieves the goal Spring 20116.813/6.831 User Interface Design and Implementation11

12. Storyboards Sequence of sketches illustrating a scenario First prototype of a design –Shows how the design can actually be used to satisfy a goal Spring 20116.813/6.831 User Interface Design and Implementation12

13. Using Information from Analysis Are important tasks covered? Which usability aspects matter most? How large does the data get? Spring 20116.813/6.831 User Interface Design and Implementation13

14. Design Patterns Patterns are good solutions to common problems –General GUI patterns: Tidwell, Salaakso –Web collections: Yahoo, Welie Pattern kinds –Structural –Navigation –Widgets Spring 20116.813/6.831 User Interface Design and Implementation14

15. Structural Patterns Spring 20116.813/6.831 User Interface Design and Implementation15 Wizard Center Stage

16. Navigation Patterns Spring 20116.813/6.831 User Interface Design and Implementation16 breadcrumbs pagination

17. Widgets Spring 20116.813/6.831 User Interface Design and Implementation17

18. Widgets for 1-of-N Choices Spring 20116.813/6.831 User Interface Design and Implementation18 Radio buttons Drop-down menu Single-selection listbox Toggle buttons

19. Widgets for 1-of-2 Choices Widgets for 1-of-N choices (with N=2), plus: Avoid: Spring 20116.813/6.831 User Interface Design and Implementation19 Checkbox Toggle button

20. Widgets for K-of-N Choices Spring 20116.813/6.831 User Interface Design and Implementation20 N checkboxes Multiple-selection listbox

21. Widgets for Window Organization Spring 20116.813/6.831 User Interface Design and Implementation21 Tab widgetAccordion widget Table of contents

22. The Dreaded Nested Scrollpanes Spring 20116.813/6.831 User Interface Design and Implementation22

23. Widgets for Dialogs Modal dialog box Modeless dialog box Sidebar Spring 20116.813/6.831 User Interface Design and Implementation23 modal sheet modeless sidebars

24. Pros & Cons of Widgets Advantages –External consistency –Saves development effort Coding, testing, debugging, maintenance Iteration and evaluation Disadvantages –Widgets may constrain designer ’ s thinking –Widgets encourage menu & forms style, rather than richer direct manipulation style –Widgets may be used inappropriately Spring 20116.813/6.831 User Interface Design and Implementation24

25. Simplicity Spring 20116.813/6.831 User Interface Design and Implementation25 Source: Alex Papadimoulis

26. Simplicity, 2003 Spring 20116.813/6.831 User Interface Design and Implementation26

27. Simplicity, 2011 Spring 20116.813/6.831 User Interface Design and Implementation27

28. Techniques for Simplicity: Reduction Remove inessential elements Spring 20116.813/6.831 User Interface Design and Implementation28

29. Techniques for Simplicity: Double-Duty Combine elements for leverage –Find a way for one element to play multiple roles Spring 20116.813/6.831 User Interface Design and Implementation29 title bar scrollbar thumb help prompt breadcrumbs pagination

30. Let’s Simplify This Spring 20116.813/6.831 User Interface Design and Implementation30

31. Let’s Simplify This Spring 20116.813/6.831 User Interface Design and Implementation31

32. Summary Generate many ideas Capture your ideas with sketches, scenarios, and storyboards Study design patterns and use them wisely Keep it simple Spring 20116.813/6.831 User Interface Design and Implementation32