Human Computer Interaction
Gathering Information for UI Design 10 Focus of investigation
Domain User User characteristics Tasks characteristics Physical environment Organizational Environment Qualitative usability aspects Quantitative usability goals Constraints Trade-off
Chapter 18
Evaluation - Planning, WHO WHAT WHEN & WHERE
Chapter 4
Finding out about task and work
Chapter 3
Finding out about the users and the domain
Relationship between a goals, tasks and actions
Goal: An end result to be achieved - Communicating with a friend by writing a letter by hand Task: A structure set of related activities - that are undertaken in some sequences - Obtaining some writing paper and a pen Action: An individual operation/step - that need to be undertaken as part of the task - Writing the individual letters of the alphabet to form the appropriate words
Chapter 2
How to Gather Requirements
Differentiate between scenario and use cases
Used for evaluation and usability testing of the system being developed Use case: A methodology used in system analysis - to identify, clarify and organize system requirements Scenario: Involve a situation - that have single/multiple actors - that give a given functionality/path to resolve the scenario. Types of scenarios and use case - Task scenario (Problem and difficulty included) - Concrete use case (Detailed feature, UI behaviors) - Essential use case (Simple and general description, no assumptions about the type of UI or technology to be used)
Chapter 22
Variation and more complex evaluations
CHapter 8
Work reengineering and Conceptual Design
7 Principles for website design
1. High quality content 2. Often Updated 3. Importance of updating varies 4. Minimal Download TIme 5. Ease of use 6. Relevant to user's needs 7. Unique to the online medium Net-centric corporate culture
Iteraction styles
Command line Menu selection Form-fill Direct manipulation Anthropomorphic
Possible qualitative data to collect
1. Effective: User's views of whether the task was finished correctly or not 2. Efficient: Views whether the task was easy or difficult 3. Engaging: User satisfaction surveys/qualitative interview - to gauge user acceptance and attitudes 4. Easy to learn: Novice user's reports about the level of confidence in using the interface 5. Error tolerant: User's reports of confidence in interface even if made mistakes
5 phrases framework for search user interface
1. Formulation - Express the search 2. Initiation of action - Launching the search 3. Review of results - Reading messages and outcomes 4. Refinement - Formulating the next step 5. Use - Compiling or disseminating insight
How to use image effectively
1. Choose the most appropriate type of image (picture, diagram or chart/graph). 2. Design the image so that it meets the requirements of the task as closely as possible. 3. Follow any relevant conventions to ensure consistency with other images of that type. 4. Combining text and images can be particularly effective. 5. Take the user's screen resolution into account. 6. Large images may take a long time to download for web pages so they should provide significant benefits for the users carrying out their task.
4 things to do when produce Content Diagram (DIIR)
1. Derive the concrete use case - from essential use case 2. Identify the primary task objects, attributes, and action 2. Identify the different containers and the task object that goes into each one 4. Link the container to show navigation flow
Usability Dimensions
1. Effective 2. Efficient 3. Engaging 4. Easy to learn 5. Error tolerant
Possible quantitative data to collect
1. Effective: Task completed accurately 2. Efficient: Counting clicks/keystrokes/Analysis of nav.path 3. Engaging: Numeric measures of satisfaction 4. Easy to learn: Number of "false starts", Time spend in incorrect route, time spent by experienced vs novice to complete tasks 5. Error tolerant: Level of accuracy achieved in tasks compared to time spent
Color blindness
Deuteranopia: Difficult to distinguish red/green Protanopia: Difficult to distinguish red/green Tritanopia: blue/yellow
2 types of knowledge needed for UI design
1. Information gathering activities - Analyzes the form part - of the UI design and development process 2. User Interface Design knowledge Comes from: - Theory, field of cognitive psycology - Experience, studying designs that are currently working well for users
6 techniques used to gather requirement
1. Interviews 2. Questionnaire 3. Observation 4. Document or Procedure analysis 5. Joint Application Development 6. Prototyping
How the UI enables the user to develop an Accurate Mental Model?
1. Matching the user's expectations 2. Shaping the user's model 3. Flexibility
How to make effective use of color
1. Number of color - Limit the color, too much will be confusing on the main point 2. Design for monochrome - Design in black and white - to focus attention on the layout of the UI 3. Color preparation - For color blind - Different people will have different perception of colors - Red, orange and green often confused 4. Color reinforcement - x used in isolation - Used together with other colors effectively
Available choices
1. Observe - Direct obseration - Indirect observation - Examples: Video recordings, one way mirror, eye tracking, software over the Internet, retrospective protocol 2. Listen - Think aloung protocol - Cognitive walkthrough questions - Post-seesion interview - Retrospective protocols - Asking user's opinion - Questionnaire 3. Measure - Post-session questionnaires (to measure satisfaction) - Measure whether interface allowd user to complete task successfully - Make sure time taken to do task - Measure metrics 4. Compare - User personal concept of - what constitute a good interface - Design principles, guideline, usability standards, customized style guide
Elements of UI evaluation
1. Observe 2. Listen 3. Measure 4. Compare
User-observation choices
1. Observe - Evaluator observes the participants 2. Listen - Think aloud ore retrospective protocol 3. Measure - Timing tasks, Obtain satisfaction ratings 4. Compare - Participant's personal standard of a good interface
Heuristic Inspection choice
1. Observe - Inspector observes themselves 2. Listen - Inspectors ask themselves posed by the hue 3. Measure - Number of time heuristics are violated 4. Compare - List of heuristics
How to use image effectively
1. Pictures - Provides information that is difficult to be describe - Photographs, drawing, and cartoon 2. Diagrams - Maps or other representation betwwen object (Venn diagram/Family tree) - Illustrate relationship and process 3. Graphs and charts - Visual representation of number - Pie chart, histogram, line chart, bar chart
5 Basic steps of interviews
1. Selecting Interviews 2. Designing the Interview Guide 3. Preparing the Interview 4. Conducting the Interview 5. Post-Interview Follow-up
4 Design Principles (SSCT)
1. Simplicity 2. Structure 3. Consistency 4. Tolereance
Design principles proposed by Norman (1998)
1. Simplicity 2. Versatility 3. Pleasurability
Perceive a structure layout
1. The law of proximity 2. The law of similarity 3. THe law of closure 4. The law of continuity 5. The law of symmetry
3 principles from experience
1. The principle of visibility 2. The priniciple of affordance 3. The principle of feedback
Nielson's Heuristics
1. Visibility of system status 2. Match between system and the real world 3. Use control and freedom 4. Consistency and standards 5. Error prevention
Chapter 12
Choosing Interaction Device
How to use color effectively
Color factor White: Highest intrinsic brightness Medium gray, red, green: MEdium intrinsic brightness Black: None intrinsic brightness Intrinsic brightness implication 1. Sufficient contrast - between the brightness of background and foreground colors for text to be legible 2. Bright color for large areas of the screen - tiring to looking at 3. Contrasts in the brightness - x too extreme - lead to a visual vibrating effect
CHapter 16
Designing for the web
Chapter 17
Desing Embedded Computer System
CHapter 7
Desing Guidance and Design Rationale
Imformation Appliacnes (IA)
Information appliance - Specialized in information: Knowledge, facts, graphics, image, video and sound - Designed to perform a specific activity (Music, photography) - Ability to share information among themselves
Chapter 14
Information search
Chapter 9
Interaction defisn, Interaction style, and Mobile HCI design
Chapter 5
Knowledge of UI design
Differentiate between low-fidelity and high-fidelity prototype
Low-fidelity: Cna be created by hand drawing package - Paprt-based, screen mockup, Storyboards - Used to illustrate design ideas, screen layout and design alternatives. High-fidelity: UI layout and its navigation - Provide functional vevrsion of the system - System that user can interact with Usability testing can be undertaken
Chapter 21
Nielsen's Heuristics
Define persona
Precise description of a user and what he/she wishes to do when using a system
Describe primary users and secondary users of stakeholders
Primary Users: People in an organization who use the application directly Secondary users: People who are not primary users, but who are affected or influenced in some way by the computer system or who affect or influnce its development
Chapter 6
Thinking about requirement and describing them
What is content diagram
To generate or represent a project structure and relations between them 1. Container (Box) - An abstract representation of a part of the user's work - The functions that are required to do that part of work 2. Link (Arrow) - Process flow