Your SlideShare is downloading. ×
User Centered Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

User Centered Design

10,749
views

Published on

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

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

Published in: Business, Technology

0 Comments
40 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,749
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
913
Comments
0
Likes
40
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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/

    ×