Introduction 人机交互介绍

Design principles and usability principles 设计原则与可用性原则

Conceptualizing Interaction 概念化交互

Identifying needs and establishing requirements 确定需要并建立需求

Prototyping 原型

Interaction design models 交互设计模型


  • 为什么人机交互值得学习?

HCI is worth studying because it aligns both human interests and economic interests.


  • 人机交互学科(discipline)包括什么的学习?

The use and context of computers 计算机的使用与上下文

Human characteristics 人类的特点

Computer system and interface architecture 计算机系统与界面架构

The development process 发展过程


  • Interaction design is not just a software interface on a desktop monitor. Designing interactive products to support people in their everyday and working lives. ——Jennifer Preece, Yvonne Rogers, Helen Sharp


  • Goals of interaction Design 交互设计的目标

Allow users to carry out tasks Safely, effectively, efficiently and enjoyably.



  • Two crucial errors 两个关键性的错误

Assume all users are alike 假设所有的用户都是相似的

Assume all users are like the designer 假设所有的用户都是设计者


  • History of HCI:

Five stages:人机交互的五个阶段:

Manual work 狭义的手工作业阶段,如算盘

Command line 第一次人机交互革命 命令行


Network UI

Multi-model UI 第二次人机交互革命,使用了Natural Use Interface(NUI), 通过多模态(各种感官通道)形成与计算机的自然交互 Intelligent use interface(IUI)


  • Input/Output devices 输入输出设备:

(keyboards and terminals are just artifacts of today’s technologies, new input/outputdevices will change the way we interact with computers)

1970  Keyboard, alphanumeric display, text  键盘,字母数字显示, 文本显示

1985  Keyboard/mouse, graphic display, icons  键盘/鼠标,图形界面显示,图标显示

2000  Handwriting/speech recognition, speech synthesis, multimodal  手写或语音识别,语音合成,多模态

2015  Position sensing/eye tracking, stereo audio/video, 3d virtual reality  位置识别/眼动识别,立体声/视频,3d虚拟现实


Vannevar Bush(1890-1974)

Identified the information storage and retrieval problem: new knowledge doesn’t reach the people who could benefit from it.


Publication has been extended far beyond our present ability to make real use of the record


Bush’s achievement:

Conceiving Hypertext and the World Wide Web


A device where individuals store all personal books, records, communication

Items retrieved rapidly through indexing, keywords, cross references

Bush’s Memex based on microfilm recorder



J.C.R. licklider(1915-1990)  "Computing's Johnny Appleseed"

His ideas foretold of graphical computing, point-and-click interfaces, digital libraries, e-commerce, online banking, and software that would exist on a network and migrate to wherever it was needed.


Ivan Surherland’s SketchPad



Douglas Engelbart

A Conceptual Framework for Augmenting Human Intellect


  • The development of HCI

Multi-modal interaction 多模态交互

VR & 3D interaction 虚拟现实与3D交互

Ubiquitous computing 普适计算

Smart space & Intelligent UI 智能空间与智能UI

Standards 标准


  • Multi-modal interaction 多模态交互

Physiology any of the various types of sensaiton, such as vision and hearing



Pen-centric computing (handwriting recognition)

Voice Recognition

Gesture Language Recognition

Gaze tracking 眼动识别

BCI 直接使用脑信号进行解读


  • VR & 3D interaction  虚拟现实与3D交互

3DUI Interaction: Human-computer interaction in which the user’s tasks are performed directly in a 3D spatial context.



3D interaction is relevant to real world tasks

The technology behind 3D interaction is becoming mature

3D interaction is difficult

Current 3D interaction is either simple or lack usability

3D UI design is an area ripe for further work


  • Ubiquitous computing 普适计算


  • Smart space & Intelligent UI 智能空间与智能UI

Smart City

Facilities for age

Industry App

Daily Life


  • Up-and-Coming Areas

Gesture Recognition 手势识别

Multi-Media 多媒体


Virtual Reality and Augmented Reality

Computer Supported Coorperative Work 计算机支持的协同工作

Natural language and speech 自然语言处理


  • What is Interaction Design

Designing interactive products to support people in their everyday and working lives



  • EEAC Execution/Evaluation Action Cycle  执行/评估行动周期

The structure of an action has four basic part:

Goals: We begin with some idea of what we want to happen, this is our goal

Execution: We must then execute an action in the world

World: To execute and action, we must manipulate objects in the world

Evaluation: Finally we must validate our action and compare the results with our goal

Goals do not specify particular actions

Goals and intentions do not have one-to-one relationship



例:删除一段文本的goal:对应1:intention to edit menu 2:intention to delete key

Goal > intention > Actions > Execution

Evaluate Result:

Perceive new state  感知新的状态

Interpret what we perceive  解释我们的感知

Evaluate new state with goal  用目标评估新的状态

Perceive > Interpret > Evaluate


  • Seven stages of actions

The seven stages form a cycle

The cycle can be initiated at any point

Some goals are data-driven:initiated when an environmental event is perceived

Others are goal-driven: initated when the person thinks of a new goal


  • Interaction Framework

System(S): Uses its core language (computational attributes related to system state)  与系统状态相关的计算属性

User(U): Uses its task language(psychological attributes related to user state)  与用户状态相关的心理属性

Input(I): Uses its input language

Output(O): Uses its output language


  • General idea of a user Interface

  • General Idea of a User Interface

A computer system involves communication from a Designer to a User.

The model intended by the designer is perceived by the user


  • User Interface Design Requires

Knowledge of people

Knowledge about the task

Knowledge about computers

其中  knowledge of people requires knowledge of:

Cognitive psychology  认知心理学

Physical characteristics  身体特征

Human perceptual abilities  人类感性能力

Language skills

Learning ability

Social interactions


  • Goal in HCI: Universal Usability  通用可用性

Address the needs of all users(满足所有用户的需求)

The computer is incidental to the design(计算机是设计的附带物)

Achieve usability by considering humans and human needs as the driving force behind a design(通过将人类和人类需求视为设计背后的驱动力来实现可用性)


  • Usability  可用性的特点

Usability is a quality measure for a system


It is a dynamic, unpredictable process which requires understanding of who the users are and their knowledge, goals and tasks.


It is measured by different types of evaluation


  • Attempts to define usability

Usability is one measure of software quality:

The degree to which user tasks are supposed for achieving user goals.


Usability may be assessed in terms of:


Effectiveness (speed of use/frequency of errors)

Learnability (time to reach a specified performance level)。

Flexibility (range of tasks supported)

Attitude of users (reflecting acceptability, effort, etc.)

Principles of usability may inform design



  • 业务流程改进的五步循环法:DMAIC







  • Some Criteria for measuring Usability(一些衡量可用性的标准)

Time to complete a task

Percent of task completed

Percent task complete per unit time

Ratio of success to failure

Time spent in errors

Percent or number of errors

Percent or number of competitors better than it

Number of commands used


  • Measurement Operation

Ask user to perform a specific task

Monitor users during interaction


Interview users

  • Usability engineering is a process

  • Usability Engineering——Design Methods

Usability Engineering is a kind of software engineering

Pitfalls to avoid:

Too easy to jump into a detailed design that is:

founded on incorrect requirements

not easily used

never tested until it is too late


Users request changes, overlook tasks

Users do not always understand their own requirements

Technology issues


  • How to Design

Who the users are

What activities are being carried out

Where the interaction is taking place




Match the users activities and needs


  • Analyzing Interaction Paradigms 分析交互范式

Interaction paradigm: A model or pattern of human-computer interaction that includes all aspects of interaction, including physical, virtual, perceptual(感性), and cognitive(认知).


An interaction paradigm defines the "who, what, where, when, why, and how" (5W+H) of computer system use.


  • Principal interaction paradigms (主交互范式)

Large-scale computing(大规模计算)

Personal computing

Networked computing

Mobile computing


  • Why use the 5W+H heuristic(启发式) to define existing interaction paradigms?

Help to give us an understanding of

how the interactive systems work

how to apply that knowledge to the development of future systems


  • How to understand users Needs:

Take into account what users 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

Employ tried and tested user-based methods


  • Core characteristics of interaction design

Users should be involved through the whole development of the product


Specific usability and user experience goals need to be indentified, clearly documented and agreed at the beginning of the project.


Iteration is needed throughout the whole activities



  • What is involved in the process of interaction design?

Identify needs and establish requirements

Develop alternative designs  开发替代设计

Build interactive prototypes that can be communicated and assessed


Evaluate what is being built throughout the process



  • Usability Goals  可用性目标

Effectiveness  Effective to use  效用

Efficiency  Efficient to use  效率

Safety  Safe to use  安全性

Utility  Have a good utility  实用性

Learnability  Easy to learn  可学习性

Easy to remember hou to use  Memorability  可记忆性


  • Effectiveness中最重要的两方面:Accuracy & Completeness

Safety: 防止误操作,可以回滚

Learnability: Nelson’s 10-minute rule


how eay a system is to remember how to use, once learned.

especially for those used only infrequently

Use meaning icons, command names, and menu options

Structing options and icons so they are placed in relevant categories of options.


  • User Experience Goals  用户体验目标








Compelling(引人注目的)——which may mean it is not necessarily easy to learn. Instead, the user can gain satisfaction from learning.


  • Usability Goals vs User Experience Goals

Usability goals are central to interaction design and are operationalized through specific criteria.


User experience goals are more subjective and less clearly defined



  • Framework for Design Principles

Comprehensibility Barrier: If the presentation is comprehensible, the comprehensibility barrier will be superseded(取代). This depends on the degree of efficiency/usability in the interface design.

Learnability Barrier: If the interface is comprehensible it will be learnable, there is a direct relationship

Effectiveness/Usefulness: If the user can learn the interface he can take advantage of the functionality and the interface will be useful.


  • Principles of Interaction Design

Effectiveness/Usefulness:  有效性





Efficiency/Usability:  效率






  • Interaction Design Principles

Don Norman 1988 The design of Everyday Things

Visibility: Don’t hide buttons

Feedback: don’t need to re-hit btns

Constraints: grey-out options in different modes

Mapping: between controls and effects

Consistency: right mouse click always behaves same

Affordances: give a clue as to the use  (给出使用的线索)


  • 10 Usability Principles (Nielsen 2001)

Visibility of system status


Match between system and real


User control and freedom


Consistency and standards


Help users recognize, diagnose and recover from errors


Error prevention


Recognition rather than recall


Flexibility and efficiency


Aesthetic and minimalist design


Help and documentation



  • A framework for analysing the problem space

Are there problems with an existing product?

What are they? List them explicitly!

Why do you think there are problems?

You had them? Everybody has them?

Why do you think your proposed ideas might be useful?

Faster? Easier? More comfortable?

How would you see people using it with their current way of doing things?


How will it support peope in their activities?

Will it really help them?


  • Assumptions: realistic or wish-list?

People want to be kept informed of up-to-date news wherever they are - reasonable

Peope want to interact with information on the move - reasonable

People are happy using a very small display and using an extremely restricted interface - not reasonable

Peoplr will be happy doing this on a smart phone that they normally do on their PCs (e.g. surf the web, read email, shop, bet, play video games) - reasonable only for a very select bunch of users


  • Conceptual model

A conceptual model is a high level of description of:

the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like,that will be understandable by the users


Many kinds and ways of classifying them

Here we describe them in terms of core activities and objects

Also in terms of interface metaphors(界面隐喻)


  • Conceptual models based on activities

Giving instructions

issuing commands using keyboard and function keys and selecting options via menus



interacting with the system as if having a conversation

Manipulating and navigating

acting on objects and interacting with virtual objects

Exploring and browsing

finding out and learning things

1 Giving instrucitons

Where users instruct the system and tell it what to do

tell the time, print a file, save a file

Very common conceptual model, underlying a diversity of devices and systems

e.g. CAD, word processors, vending machines


Main benefit is that instructing supports quick and efficient interaction

good for repetitive kinds of actions performed on multiple objects


2 Conversing

Underlying model of having a conversation with another human

Range from simple voice recognition menu-driven systems to more complex 'natural language' dialogues

Examples include timetables, search engines, advice-giving systems, help systems

Recently, much interest in having virtual agents at the interface, who converse with you.

3 Manipulating and navigating

Involves dragging, selecting, opening, closing and zooming actions on virtual objects

Exploit's users' knowledge of how they move and manipulate in the physical world

Exemplified by (i) what you see is what you get (WYSIWYG) and (ii) the direct manipulation approach (DM)

Shneiderman (1983) coined the term DM, came from his fascination with computer games at the time

4 Exploring and browsing

Similar to how people browse information with existing media (e.g. newspapers, magazines libraries, pamphlets)

Information is structured to allow flexibility in way user is able to search for information


  • Interface metaphors

Interface designed to be similar to a physical entity but also has own properties


e.g. desktop metaphor, web portals

Can be based on activity, object or a combination of both

Use the user's familiar knowledge, helping them to understand 'the unfamiliar'


Conjures up the unfamiliar activity, enabling users to take advantage of this to understand more aspects of the unfamiliar functionality



  • Benefits of interface metaphors

Makes learning new systems easier

Helps users understand the underlying conceptual model(潜在的概念模型)

Can be very innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users



  • Conceputal models: from interaction mode to style

Interaction mode:

What the user is doing when interacting with the system, eg instructing, talking, browsing or other.

Interaction style:

The kind of interface used to support the mode, eg speech, menu-based, gesture.


  • Many kinds of interaction styles available

Command line

Menu-based interface

Form fill-in

Question and answer

Direct Manipulation


Web Navigation

Three-Demensional Environments

Zoomable Interface

Natural Language


  • Identifying needs  识别需求

Understand as much as possible about the users, their work, and the context of that work, so that the system under development can support them in achieveing their goals.


关键词:user, task = their work, situation = context


  • Establishing requirements

Produce a stable set of requirements that form a basis to move forward into thinking about design.



Not necessarily a major document nor a set of rigid prescriptions, but you need to be sure that it will not change radically in the time it takes to do some design and get feedback on the ideas. 



  • How to achieve needs identifying and requirements establishment:

Beginning: we know that we have a lot to find out and to clarify.


Data gathering activities

Data analysis activities

Expression as "requirements"

capturing the finding in a form that can be expressed as requirement

End: have a set of stable requirements.


  • What are requirements?

A requirement is a statement about an intended product that specifies what it should do or how it should perform.


Should be specific, unambiguous, and clear.


E.g. time to download any complete page is less than 5 seconds.


E.g. Teenage girls should find the site appealing.

是user needs,仍需要转述为requirements->重要的一步


  • Different Kinds of Requirements

Functional Requirements

Data Requirements

Environmental Requirements

Physical requirements

Social rea uirements

Organizational requirements

Technical requirements

User Requirements

Usability Requirements


  • Different Kinds of Requirements explaination

Functional requirements

What the product should do

E.g. smart fridge

Understanding the functional requirements for an interactive product is crucial.

Historically the main focus of requirements activities


Data requirements

Capture the type, size/amount, persistence, accuracy, and value of the amounts of the required data.

What kinds of data need to be stored?

How will they be stored?

Share-dealing: up-to-date and accurate, likely to change many times a day.

Personal banking: accurate, persist over many months and probably years, very valuable, ...

Environmental requirements or context of use

refer to the circumstances in which the interactive product will be expected to operate.

Physical environment

How much lighting, noise, and dust is expected?

Will users need to wear protective clothing?

How crowded?

Might affect the choice of interaction paradigm (e.g. ATM in very public physical environment, speech?)

Social environment

collaboration and coordination

sharing of files, of displays, (Synchronous vs.asynchronous)

across great distances

work individually

privacy for clients

Organisational environment

hierarchical management

IT department's attitude and remit (宽恕,免除,缓和,汇出,传送)

user support -- good? Easily obtained?

communications infrastructure -- stable?

availability of training

Technical environment

What technologies will the product run on and need to be compatible with

What technological limitations might be relevant?

User requirements

User requirements: capture the characteristics of the intended user group.

Users: Who are they?

Characteristics: ability, background, attitude to computers

System use: novice, expert, casual, frequent

Novice: step-by-step (prompted), constrained, clear information

Expert: flexibility, access/power

Frequent: short cuts

Casual/Infrequent: clear Instructions, e.g. menu paths

The collection of attributes for a 'typical user' is called a user profile. Any one device may have a number of different user profiles.

Usability requirements

capture usability goals and associate measures for a particular product.

learnability, throughput(生产量), flexibility, attitude

Related to other kinds of requirement we must establish, such as the kinds of users expected to interact with the product.


  • Data gathering techniques

Essentially a small number of basic techniques for data gathering



focus groups and workshops

naturalistic observation

studying documentation

Data gathering techniques are flexible and can be combined and extended in many ways.


  • Data interpretation and analysis  数据解释与分析

Different approaches emphasize different elements

class diagrams for object-oriented systems

entity-relationship diagrams for data intensive systems

The requirements activity iterates a number of times before a set of stable equirements evolves

As more interpretation and analysis techniques are applied, a deeper understanding of requirements will emerge and the requirements descriptions will expand and clarify.



  • Task discription

Business Scenarios

commonly used as the basis for acceptance testing

Task descriptions are used throughout development, from early requirements activities through prototyping, evaluation, and testing due to the emphasis on involving users earlier in the development lifecycle

Different flavors of task descriptions


Use cases

Essential use cases

may be used to describe either existing tasks or envisioned tasks with a new device.

not mutually exclusive


  • Task Analysis

Task descriptions are often used to envision new systems or devices

Task-analysis is used mainly to investigate an existing situation

It is important not to focus on superficial activities, but to analyze the underlying rational and purpose of what people are doing:

What are people trying to achieve?

Why are they trying to achieve it?

How are they going about it?

Task analysis is an umbrella term that covers techniques for investigating cognitive processes and physical actions, at a high level of abstraction and in minute detail

Many techniques, the most popular is Hierarchical Task Analysis (HTA)

Another well-known task analysis technique called GOMS (goals, operations, methods, and selection rules) models procedural knowledge.


  • Compromises in prototyping

All prototypes involve compromises

For software-based prototyping maybe there is a slow response? sketchy icons? limited functionality?

Two common types of compromise

'horizontal': provide a wide range of functions, but with little detail

'vertical': provide a lot of detail for only a few functions

Compromises in prototypes mustn't be ignored. Product needs engineering


  • Prototype summary

Different kinds of prototyping are used for different purposes and at different stages

Prototypes answer questions, so prototype appropriately

Construction: the final product must be engineered appropriately

Conceptual design(the first step of design)

Physical design: eg menus, icons, screen design, information display

Prototypes and scenarios are used throughout design


  • Prototyping cultures

The culture of an organization has a strong influence on the quality of the innovations that the organization can products

Primarily two kinds of organizational culture for innovation: specification culture and prototyping culture.

Specification culture: new products and development are driven by written specifications

Prototyping culture: understanding requirements and developing the new product are driven by prototyping

Organizations wanting to be innovative need to move to a prototyping-driven culture.


  • Three perspectives for a conceptual model

Which interaction mode?

How the user invokes actions

Activity-based: instructing, conversing, manipulating and navigating, exploring and browsing.

Object-based: structured around real-world objects

Which interaction paradigm?

Is there a suitable metaphor?

Interface metaphors combine familiar knowledge with new knowledge in a way that will help the user understand the product.

Three steps: understand functionality, identify potential problem areas, generate metaphors

Evaluate metaphors:

How much structure does it provide?

How much is relevant to the problem?

Is it easy to represent?

Will the audience understand it?

How extensible is it?


  • Interaction design models: Physical Models

Physical models can predict efficiency based on the physical aspects of a design

They calculate the time it takes to perform actions such as targeting a screen object and clicking on it

Fitts’ law:

Fitts’ law states that the time it takes to hit a target is a function of the size of the target and the distance to that target.

Maxim: Fitts’ law can be used to determine the size and location of a screen object.

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
钱包余额 0