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