Eran Toch technion.ac.il/~erant - PowerPoint PPT Presentation

eran toch http www technion ac il erant n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Eran Toch technion.ac.il/~erant PowerPoint Presentation
Download Presentation
Eran Toch technion.ac.il/~erant

play fullscreen
1 / 53
Eran Toch technion.ac.il/~erant
172 Views
Download Presentation
charlotte-davis
Download Presentation

Eran Toch technion.ac.il/~erant

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Spring 2007 A Crush Course in Usability and User Centered Design Eran Toch http://www.technion.ac.il/~erant

  2. 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 Intro | UI Design | Usability | User-centered

  3. What is Usability? ISO 9241 usability definition The effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in particular environments. Intro | UI Design | Usability | User-centered

  4. Why is Usability Important? • The fate of • the world 2. The Apple iPhone Intro | UI Design | Usability | User-centered

  5. 1. The Fate of the World Bush won Florida by a 537-vote margin in official results The 2001 Florida Ballot Incident Intro | UI Design | Usability | User-centered

  6. 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. Intro | UI Design | Usability | User-centered

  7. 2. The Apple iPhone Intro | UI Design | Usability | User-centered

  8. Focus on Usability and Design Intro | UI Design | Usability | User-centered

  9. The implications of usability Intro | UI Design | Usability | User-centered

  10. We design the user interface here We test them here Usability vs. Specification Initiation Requirement Specification Design Implementation Is it too late? Testing Intro | UI Design | Usability | User-centered

  11. Specification Design Implementation Testing User Centered Design • 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 (actually, in our faculty, there are two courses on these issues). Take them! Initiation Requirement UI Design + Testing Intro | UI Design | Usability | User-centered

  12. 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. Basic Model of HCI Computation input Computer output Intro | UI Design | Usability | User-centered

  14. Types of User Interfaces Graphical User Interface (GUI) Command Line Voice activated interfaces Intro | UI Design | Usability | User-centered

  15. GUI Model input Computation Keyboard : {I{A..Z, 1..0,...}} Mouse : {x0..1024, y0..768} Computer output Screen : {(x,y)Z2} Intro | UI Design | Usability | User-centered

  16. 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 Intro | UI Design | Usability | User-centered

  17. 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 Checkbox Radio button Intro | UI Design | Usability | User-centered

  18. Larger Constructs Pages (in Web-based systems) Windows (in Desktop-based systems) Intro | UI Design | Usability | User-centered

  19. Composing components Tabs Areas of reference List Intro | UI Design | Usability | User-centered

  20. Actions Task Context Consequences Intro | UI Design | Usability | User-centered

  21. Designing Interface Elements (top-down) • User flow: take the user aspect with the use-case model • Storyboard: • Find compositions of actions / information • Find relations between compositions • Detailed view: • Refine each composition to the component level • Check and integrate Use Case Intro | UI Design | Usability | User-centered

  22. The use case model Intro | UI Design | Usability | User-centered

  23. User flow • Integrate use-case scenarios from the user perspective Intro | UI Design | Usability | User-centered

  24. Storyboard Intro | UI Design | Usability | User-centered

  25. Detailed View Intro | UI Design | Usability | User-centered

  26. 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. 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. Intro | UI Design | Usability | User-centered

  28. Which of these apps is easy to use? Intro | UI Design | Usability | User-centered

  29. Good design • Recognizable • Simple • Clear purpose • Learnable • Safe • Flexible • Robust • Good Metaphors • ... Intro | UI Design | Usability | User-centered

  30. Recognizable interfaces Pretty, or smart, is not necessarily Usable Intro | UI Design | Usability | User-centered

  31. 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) Intro | UI Design | Usability | User-centered

  32. 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. Intro | UI Design | Usability | User-centered

  33. 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. Intro | UI Design | Usability | User-centered

  34. Computers can be SCARY Sometimes an innocent user gets into a state she don’t want to be in… And then, the terror!!! Intro | UI Design | Usability | User-centered

  35. 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 Intro | UI Design | Usability | User-centered

  36. 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... Intro | UI Design | Usability | User-centered

  37. 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. Intro | UI Design | Usability | User-centered

  38. Usability levels Component Application Project Intro | UI Design | Usability | User-centered

  39. Component Level • Familiar to use • Gives feedback • Reduces errors • Satisfies a given task • Readable • Self explaining Intro | UI Design | Usability | User-centered

  40. Application Level • Accessible • Gives sense of place • Easy to navigate in • Handles errors • Realistic Scenarios • Personalized Intro | UI Design | Usability | User-centered

  41. Project Level • Answers real needs • Answers current needs • Generates value • Communicate with all organization's units Intro | UI Design | Usability | User-centered

  42. 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. 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 UCD: User is involved here Requirement Specification Design Implementation Classic: User is involved here Testing Intro | UI Design | Usability | User-centered

  44. 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 Intro | UI Design | Usability | User-centered

  45. 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 Intro | UI Design | Usability | User-centered

  46. 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 Intro | UI Design | Usability | User-centered

  47. Evaluation at the requirements stage Intro | UI Design | Usability | User-centered

  48. Prototyping • Brainstorm • Rough interface design • Application walkthrough Specification Low fidelity paper prototypes Intro | UI Design | Usability | User-centered

  49. Prototyping – Intermediate Stages • Fine tune interface design • Screen design • Heuristic evaluation and redesign Design Medium fidelity prototypes Intro | UI Design | Usability | User-centered

  50. Evaluation at the specification / design Intro | UI Design | Usability | User-centered