comp 7450 ui

Chuck的复习手记

Chapter 1 Introduction

Outline
- Introduction
- Interaction types
- Usability and user experience goals

common problem:
1. xxx all look the same (容易混淆)
2. codes for xxx (界面里需要代码，普通人不方便)
3. help is the way to find out, but not obvious （帮助按钮不明显）
4. xxx and yyy are too close, it is easy to click “xxx” by mistake instead of the "YYY" (删除功能与其他操作太接近)

Principle KISS： [K]eep [I]t [S]imple and [S]tupid!

Goals of User Interface Design：

1. Develop usable products

Usability means easy to learn, effective to use and provide an enjoyable experience

1. Involve users in the design process

   • Use user-centered methods
   • Need to take into account what people are good and bad at
   • Consider what might help people in the way they currently do things
   • Listen to what people want and get them involved

Human-Computer Interaction (HCI)

User goal: find the info and accomplish something with minimal effort and time

Variation at knowledge level：
Novices - (totally new to the system, and have not used similar systems before)
Knowledgeable, intermittent（间歇性） users - (know what the system is about, but not so familiar with its interfaces)
Knowledgeable frequent users -(very familiar with the system)

Four Interaction Types

• Instructing 指令

  • pros
    
    • Interaction is efficient, precise and fast
    • Good for repetitive kinds of actions performed on multiple objects
  • cons
    
    • Large overhead to learn set of commands

• Conversing 对话

  • is a two-way communication process

• Manipulating 操作

  • pros
    
    • Novices can learn the basic functionality quickly
    • Error messages rarely needed
    • Users can immediately see if their actions are furthering their goals and if not do something else
    • Users experience less anxiety
    • Users gain confidence and mastery and feel in control
  • cons
    
    • Not all tasks can be described by objects and not all actions can be done directly
    • Some tasks are better achieved through issuing commands

• Exploring 探索

  • pros
    
    • create new and highly engaging user experiences

speech interfaces

• pros
  
  • Allows users, especially novices and technophobes, to interact with the system in a way that is familiar to them
  • Makes them feel comfortable, at ease and less scared
• cons
  
  • Misunderstandings can arise when the system does not know how to parse what the user says

sunmary:
Instructing 适合重复的事情
Conversing 适合孩子或者害怕电脑的人或特定服务
Manipulating 适合操作任务比如画图，驾驶

Usability goals

1. effectiveness [how good]
2. efficiency [how fast]
3. safety [Prevent error/ Provide recovery]
4. utility 效用
5. learnability [how much time]
6. memorability [how easy remember]

chapter2 User Interface Design Process

Basic steps
Three parts:
1. Establishing requirements
2. Designing prototype
3. Evaluation

user-centered Three principles

1. Early focus on users and tasks: directly studying cognitive, behavioral & attitudinal characteristics
2. Empirical measurement: users’ reactions and performance to scenarios, manuals, simulations & prototypes are observed, recorded and analysed
3. Iterative design: when problems are found in user testing, fix them and carry out more tests

Establishing requirements

1. State what the product is (product statement);
2. Perform population analysis;
3. Establish personas;
4. Design needs assessment questionnaire and interview people;
5. Establish task model (hierarchical task analysis and use case);
6. Write task scenario for each main user task

Persona

Scenarios

a short story, to characterize what happens when users perform typical tasks

Novice: step-by-step (prompted), clear instructions/documentation, familiar language, informative feedback and error message
Casual/infrequent: clear instructions, consistent display, recognition than recall, e.g., menu paths
Expert and frequent: short cuts, strings of commands, abbreviations, accelerators, rapid response time

interview

Contextual interview： Researchers watch and listen as users work in the user’s own environment
Individual interview： Take place face-to-face, by phone or video conference, or via instant messaging system

Hierarchical task model

Designing prototype

Interface metaphor: Use familiar things or image to describe less familiar, abstract computer-based actions
- Benefits:

• Help users understand and learn how to use a new system easier
• Provide familiar entities that enable people to readily understand the underlying conceptual model and know what to do at an interface
• Can be innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users

Prototype: concrete representations of a design
- Pros

• Get feedback from users faster
• Fix problems before code is written
• Experiment with alternative designs
• Keep the design centered on the user

Low-fidelity Benefits

• simple, cheap, and quick to produce and modify (takes only a few hours)
• helpful in early stage of development for exploring alternative designs and ideas, which helps provoke innovation and improvement
• when using rough sketches, users may feel more comfortable suggesting changes

Hi-Fi Benefits

• A true representation of the user interface
• Be much more effective in collecting true human performance data (e.g., time to complete a task), and in demonstrating actual products to clients and others

Heuristic Evaluation VS Usability Testing 启发式评价VS可用性测试
Heuristic Evaluation

is much faster
1-2 hours each evaluator (HE) vs. days-weeks (UT)
HE doesn’t require interpreting user’s actions
HE may miss problems & find “false positives”

Usability Testing

Usability testing is far more accurate (by definition)
Takes into account actual users and tasks
Know how typical users, especially first-time users, will behave

Nielsen’s 10 heuristics

1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, recover from errors
10. Help and documentation

Task Scenarios

Organize problems by scope and severity

Example
1. Users complain that the login procedure requires too many steps: eight dialog boxes and passwords
==> few scope, small impact

chapter 3 User Interface Design Issues

Outline
- Layout design
- Color design
- Widgets design
- Menu and icon design
- Web interface design
- Mobile interface design

Four Design Principles

• Proximity 把相关的东西分组放在一起
• Alignment 不要孤立，找点东西和它对齐
• Consistency 用相同的词表示相同的功能
• Contrast 突出需要强调的内容

More principles:
- Less is More
- Hide advanced options, but make them easy to find!

Color Wheel
3 primary colors: red, yellow, blue
3 secondary colors:orange, green, purple
6 tertiary colors

radio，seleter 和 checkbox

• 如果只有是否，用checkbox 代替 radio
• 下拉要考虑是否提供 all选项
• checkbox grop 要提供select all 选项
• 选项数量固定就用radio而不是seleter

弹框dialog

• 要尽量小
• 要容易被注意到
• 要和相关的东西在一起，但不要覆盖
• 有些对话框要允许被放在一边，待会用

Three Mobile Contexts
- Bored 长时间使用，会中断
- Busy 支持单手操作，完成任务要迅速，关键信息要加粗
- Lost 离线支持，省电，初步定位

** Responsive design**

Optimize the content
- Smaller image size
- Remove lower priority content
- Reduce the page size and load time

Single column layout
- Use up the whole width of the screen
- Only scroll vertically

chapter 4 Human Factors

Outline
-Memory
-Human Professor Model

"Seven plus or minus two chunks" of information can be held in short-term memory for 15 to 30 seconds

People are much better at recognizing things than recalling things

Design Guidelines for Memory
- Do not overload users’ memories with complicated procedures for carrying out tasks
- Users should not be required to remember information from one screen for use on another screen

Movement time MT to move the hand to target size W which is distance D away is given by:
MT = a + b log2 (1+D/W)
a approximates the start/stop time in seconds for a given device (it is a constant)
b measures the inherent speed of the device (e.g., mouse) a and b need to be determined experimentally for each device
D is the distance from the starting point to the center of the target
W is the width of the target measured along the axis of motion
For example, if a = 300 milliseconds, b = 200 msec/bit, D = 14 cm, W = 2 cm
Answer: MT = 300+200log2(1+14/2) = 900 milliseconds

Pie menu (bigger targets & shorter distance)