1 / 52

Week 4

Week 4. Thossaporn Thossansin . BS.c , MS.c. Usability: User Needs Analysis. e-mail: thossaporn.piu@gmail.com. Introduction User Interface Design GUI building blocks GUI structures Usability Good design / bad design Usability levels User-centered design Principles and ideals

gary-oconnor
Télécharger la présentation

Week 4

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. Week 4 ThossapornThossansin. BS.c, MS.c Usability: User Needs Analysis e-mail: thossaporn.piu@gmail.com

  2. Introduction User Interface Design GUI building blocks GUI structures Usability Good design / bad design Usability levels User-centered design Principles and ideals The process Agenda

  3. ISO 9241 usability definition What is Usability? The effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in particular environments.

  4. Why is Usability Important? • The fate of • the world 2. The Apple iPhone

  5. Bush won Florida by a 537-vote margin in official results The Fate of the World The 2001 Florida Ballot Incident

  6. 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. The Florida Ballot

  7. The Apple iPhone

  8. Focus on Usability and Design

  9. The implications of usability

  10. We design the user interface here We test them here Usability vs. Specification Initiation Requirement Specification Design Implementation Is it too late? Testing

  11. 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 Specification Design Implementation Testing User Centered Design Initiation Requirement UI Design + Testing

  12. Introduction User interface design GUI building blocks GUI structures Usability Good design / bad design Usability levels User-centered design Principles and ideals The process Agenda

  13. Basic Model of HCI Computation input Computer output

  14. Types of User Interfaces Graphical User Interface (GUI) Command Line Voice activated interfaces

  15. GUI Model input Computation Keyboard : {I{A..Z, 1..0,...}} Mouse : {x0..1024, y0..768} Computer output Screen : {(x,y)Z2}

  16. What is the type of information received by each input field? What’s the effect? GUI Components: Simple Input Text field Button Text area Link

  17. What is the difference between a radio button and a check box? What is the choice domain and the choice range of each component? Simple GUI components: Choosers Combo box Slider Checkbox Radio button

  18. Larger Constructs Pages (in Web-based systems) Windows (in Desktop-based systems)

  19. Composing components Tabs Areas of reference List

  20. Actions Task Context Consequences

  21. 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 Designing Interface Elements (top-down) Use Case

  22. The use case model

  23. Integrate use-case scenarios from the user perspective User flow

  24. Storyboard

  25. Detailed View

  26. Introduction User interface design GUI building blocks GUI structures Usability Good design / bad design Usability levels User-centered design Principles and ideals The process Agenda

  27. What makes a good design different from a bad design? In order to answer this question we will define the concept of usability. Good UI design vs. bad design

  28. Which of these apps is easy to use?

  29. Recognizable Simple Clear purpose Learnable Safe Flexible Robust Good Metaphors ... Good design

  30. Recognizable interfaces Pretty, or smart, is not necessarily Usable

  31. 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) Patterns

  32. 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. Wizard

  33. 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. Contextual Help

  34. Computers can be SCARY Sometimes an innocent user gets into a state she don’t want to be in… And then, the terror!!!

  35. Provide a way to go back to a checkpoint of the user's choice. Solution The "Home" button and the “Back” Clicking the Logo in Web sites

  36. 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... Shortcuts

  37. 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. Undo

  38. Usability levels Component Application Project

  39. Familiar to use Gives feedback Reduces errors Satisfies a given task Readable Self explaining Component Level

  40. Accessible Gives sense of place Easy to navigate in Handles errors Realistic Scenarios Personalized Application Level

  41. Answers real needs Answers current needs Generates value Communicate with all organization's units Project Level

  42. Introduction User interface design GUI building blocks GUI structures Usability Good design / bad design Usability levels User-centered design Principles and ideals The process Agenda

  43. 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 User Centered Design Initiation UCD: User is involved here Requirement Specification Design Implementation Classic: User is involved here Testing

  44. Requirements gathering stage: Talk / view users Identifying personas Specification stage: Interface prototyping Usability expert analysis Heuristic Evaluation Design / Implementation Usability Lab Log Analysis Where are the differences

  45. 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 Requirements stage

  46. 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 ... Identifying Personas Taken from http://www.w3.org/WAI/redesign/personas

  47. Evaluation at the requirements stage

  48. Brainstorm Rough interface design Application walkthrough Prototyping Specification Low fidelity paper prototypes

  49. Fine tune interface design Screen design Heuristic evaluation and redesign Prototyping – Intermediate Stages Design Medium fidelity prototypes

  50. Evaluation at the specification / design

More Related