1. 3.1 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Week 4 Usability: User Needs Analysis Thossaporn Thossansin. BS.c, MS.c e-mail: thossaporn.piu@gmail.com

2. 3.2 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Agenda Introduction User Interface Design –GUI building blocks –GUI structures Usability –Good design / bad design –Usability levels User-centered design –Principles and ideals –The process

3. 3.3 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall What is Usability? ISO 9241 usability definition The effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in particular environments.

4. 3.4 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Why is Usability Important? 1.The fate of the world 2. The Apple iPhone

5. 3.5 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall The Fate of the World The 2001 Florida Ballot Incident Bush won Florida by a 537-vote margin in official results

6. 3.6 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall The Florida Ballot 5,330 Palm Beach County residents invalidated their ballots by punching for Gore and Reform Party candidate Pat Buchanan. Almost half of them were 65 or older and Democrats.

7. 3.7 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall The Apple iPhone

8. 3.8 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Focus on Usability and Design

9. 3.9 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall The implications of usability

10. 3.10 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Usability vs. Specification Initiation Requirement Design Specification Implementation Testing We design the user interface here We test them here Is it too late?

11. 3.11 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall User Centered Design UI Design + Testing Initiation Requirement Design Specification Implementation Testing Therefore, we need a crush course in: –UI Design –Usability principles –User-centered design Note, these issues will be discussed in a very shallow manner. Each of these issues deserve a course

12. 3.12 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Agenda Introduction User interface design –GUI building blocks –GUI structures Usability –Good design / bad design –Usability levels User-centered design –Principles and ideals –The process

13. 3.13 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Basic Model of HCI Computer input Computation output

14. 3.14 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Types of User Interfaces Graphical User Interface (GUI) Command LineVoice activated interfaces

15. 3.15 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall GUI Model Computer input Computation output Mouse : {x  0..1024, y  0..768} Keyboard : {I  {A..Z, 1..0,...}} Screen : {(x,y)  Z 2 }

16. 3.16 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall GUI Components: Simple Input What is the type of information received by each input field? What’s the effect? Text field Button Text area Link

17. 3.17 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Simple GUI components: Choosers What is the difference between a radio button and a check box? What is the choice domain and the choice range of each component? Combo box Slider Radio button Checkbox

18. 3.18 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Larger Constructs Pages (in Web-based systems) Windows (in Desktop-based systems)

19. 3.19 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Composing components Tabs Areas of reference List

20. 3.20 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Actions Context Task Consequences

21. 3.21 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Designing Interface Elements (top-down) 1.User flow: take the user aspect with the use-case model 2.Storyboard: Find compositions of actions / information Find relations between compositions 3.Detailed view: Refine each composition to the component level 4.Check and integrate Use Case

22. 3.22 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall The use case model

23. 3.23 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall User flow Integrate use-case scenarios from the user perspective

24. 3.24 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Storyboard

25. 3.25 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Detailed View

26. 3.26 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Agenda Introduction User interface design –GUI building blocks –GUI structures Usability –Good design / bad design –Usability levels User-centered design –Principles and ideals –The process

27. 3.27 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Good UI design vs. bad design What makes a good design different from a bad design? In order to answer this question we will define the concept of usability.

28. 3.28 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Which of these apps is easy to use?

29. 3.29 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Good design Recognizable Simple Clear purpose Learnable Safe Flexible Robust Good Metaphors...

30. 3.30 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Recognizable interfaces Pretty, or smart, is not necessarily Usable

31. 3.31 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Patterns Design patterns in HCI are a good way to explore suggestions for good design We would look at some patterns: –Wizard (for simplicity) –Contextual help (for learnable interface) –Go back to a safe place –Shortcuts (for flexible) –Undo (for robustness)

32. 3.32 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Wizard Problem: –The user wants to achieve a single goal but several decisions need to be made. Solution: –Take the user through the entire task one step at the time.

33. 3.33 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Contextual Help Problem: –Users may need help regarding specific tasks, but would spend a lot of energy searching for it. Solution: –Place help in the context of the given task.

34. 3.34 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Computers can be SCARY Sometimes an innocent user gets into a state she don’t want to be in… And then, the terror!!!

35. 3.35 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Solution Provide a way to go back to a checkpoint of the user's choice. The "Home" button and the “Back” Clicking the Logo in Web sites

36. 3.36 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Shortcuts Problem: –Power users need faster ways to execute operations than novice users Solution: –Create shortcuts for power operations, using keyboard, combinations, icons, special menus etc...

37. 3.37 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Undo Problem: –The user might regret executing some operation. –Asking the user for confirmation after executing each operation will make the interaction unusable. Solution: –Enable the user to undo her operations, after they were executed.

38. 3.38 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Usability levels Component Application Project

39. 3.39 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Component Level Familiar to use Gives feedback Reduces errors Satisfies a given task Readable Self explaining

40. 3.40 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Application Level Accessible Gives sense of place Easy to navigate in Handles errors Realistic Scenarios Personalized

41. 3.41 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Project Level Answers real needs Answers current needs Generates value Communicate with all organization's units

42. 3.42 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Agenda Introduction User interface design –GUI building blocks –GUI structures Usability –Good design / bad design –Usability levels User-centered design –Principles and ideals –The process

43. 3.43 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall User Centered Design The objective is to create a design process that would increase the usability of the product Three principles: –Finding the user’s context of the product –Iterative process, including ongoing tests and revisions –Participatory Design - Users become members of the design team Initiation Requirement Design Specification Implementation Testing Classic: User is involved here UCD: User is involved here

44. 3.44 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Where are the differences Requirements gathering stage: –Talk / view users –Identifying personas Specification stage: –Interface prototyping –Usability expert analysis –Heuristic Evaluation Design / Implementation –Usability Lab –Log Analysis

45. 3.45 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Requirements stage Talk to users –Interview them in order to discover user’s culture, requirements, expectations, etc. Watch the users –At work –See how they use their existing systems –See what they do not use

46. 3.46 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Identifying Personas Personas are hypothetical archetypes of actual users By identifying a small set of personas, we can: –make the users seem more real –Judge the importance of features –Look at the: Usage frequency Competency... Taken from http://www.w3.org/WAI/redesign/personas

47. 3.47 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Evaluation at the requirements stage Focus Group The ideas of the new system are presented to a group of potential users. Cognitive Walkthrough The user “imagines” the system, by going with the interviewer through its stages and actions

48. 3.48 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Prototyping Brainstorm Rough interface design Application walkthrough Specification Low fidelity paper prototypes

49. 3.49 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Prototyping – Intermediate Stages Fine tune interface design Screen design Heuristic evaluation and redesign Design Medium fidelity prototypes

50. 3.50 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Evaluation at the specification / design Usability Lab Testing the prototypes by actual users. Good for: finding unexpected problems and process refinement. Guided Walkthrough Guiding and questioning the users while they perform specific tasks.

51. 3.51 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Evaluation with the actual system Log analysis may be used to: –Identifying actual usage patterns –Effectiveness of processes, and components Benefits: –Real statistical information –Real-time informa tion Taken from http://www.clickdensity.com

52. 3.52 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall Summary Usability is important: –Changing the registration interface at eBay had increased success rate from 16% to 68%. Sales went up in 84M$. User interface design –Components, storyboard, maps Usability –Familiar, rules, patterns User-centered design –Involve the users –Evaluate early and often