1 / 53

Eran Toch technion.ac.il/~erant

Spring 2007. A Crush Course in Usability and User Centered Design. Eran Toch http://www.technion.ac.il/~erant. Agenda. Introduction User Interface Design GUI building blocks GUI structures Usability Good design / bad design Usability levels User-centered design Principles and ideals

charlotte-davis
Download Presentation

Eran Toch technion.ac.il/~erant

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related