User Centered Design

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    19 Favorites

    User Centered Design - Presentation Transcript

    1. Eran Toch http://www.technion.ac.il/~erant A Crush Course in Usability and 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 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. Usability vs. Specification Initiation Requirement Design Specification Implementation Testing Is it too late? Intro | UI Design | Usability | User-centered We design the user interface here We 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 User Interface (GUI) Command Line Voice activated interfaces 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?
      • What’s 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 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 Requirement Design Specification Implementation Testing Classic : User is involved here UCD : User is involved here 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
          • ...
      Intro | UI Design | Usability | User-centered Taken from http :// www . w3 . org / WAI / redesign / personas
    47. Evaluation at the requirements stage Intro | UI Design | Usability | User-centered Cognitive Walkthrough The user “imagines” the system, by going with the interviewer through its stages and actions Focus Group The ideas of the new system are presented to a group of potential users.
    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 Guided Walkthrough Guiding and questioning the users while they perform specific tasks. Usability Lab Testing the prototypes by actual users. Good for: finding unexpected problems and process refinement.
    51. 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 information
      Intro | UI Design | Usability | User-centered Taken from http :// www . clickdensity . com
    52. 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
    53. References
      • Bad design:
        • http :// homepage . mac . com / bradster / iarchitect / shame . htm
      • Patterns:
        • http://www.welie.com/patterns/index.php
        • COMMON GROUND: A Pattern Language for Human-Computer Interface Design, Jenifer Tidwell, http:// www.mit.edu/~jtidwell/common_ground_onefile.html
      • Interaction Design:
        • User Interface Design, Prototyping, and Evaluation ( UC Berkeley Extension Summer Engineering Institute ) http://guir.berkeley.edu/courses/SummerHCI02/
        • http://www.interaction-design.org/
        • http://www.useit.com/

    + Eran  TochEran Toch, 3 years ago

    custom

    3252 views, 19 favs, 1 embeds more stats

    A crush course in user-centered design, usability a more

    More info about this document

    CC Attribution License

    Go to text version

    • Total Views 3252
      • 3226 on SlideShare
      • 26 from embeds
    • Comments 0
    • Favorites 19
    • Downloads 309
    Most viewed embeds
    • 26 views on http://useroriented.wordpress.com

    more

    All embeds
    • 26 views on http://useroriented.wordpress.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories