user centered design

Download User Centered Design

Post on 27-Jan-2015




0 download

Embed Size (px)


A crush course in user-centered design, usability and GUI development.


  • 1. Eran Toch A Crush Course in Usabilityand User Centered Design Spring 2007

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 AppleiPhone 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. Usability vs. Specification Initiation Requirement Design Specification Implementation Testing Is it too late? Intro| UI Design | Usability | User-centered We design the user interface hereWe test them here 11. 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!

UI Design + Testing Initiation Requirement Intro| UI Design | Usability | User-centered Design Specification Implementation Testing 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 Computer input Computation output Intro |UI Design| Usability | User-centered 14. Types of User Interfaces Graphical UserInterface (GUI) Command Line Voice activatedinterfaces Intro |UI Design| Usability | User-centered 15. GUI Model Computer input Computation output Mouse : {x 0..1024, y 0..768} Keyboard : {I {A..Z, 1..0,...}} Screen : {(x,y) Z 2 } Intro |UI Design| Usability | User-centered 16. GUI Components: Simple Input

  • What is the type of information received by each input field?
  • Whats the effect?

Intro |UI Design| Usability | User-centered Text field Button Text area Link 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?

Intro |UI Design| Usability | User-centered Combo box Slider Radio button Checkbox 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 Context Task 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 notnecessarily 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 beSCARY Sometimes an innocent user gets into a state she dont want to be in And then, the terror!!! Intro | UI Design |Usability| User-centered 35. Solution

  • Provide a way to go back to acheckpointof the user's choice.

The "Home" buttonand 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 ComponentApplication 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

  • Introducti