Design principles and usability principles 设计原则与可用性原则
Conceptualizing Interaction 概念化交互
Identifying needs and establishing requirements 确定需要并建立需求
Interaction design models 交互设计模型
HCI is worth studying because it aligns both human interests and economic interests.
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:
Manual work 狭义的手工作业阶段，如算盘
Command line 第一次人机交互革命 命令行
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虚拟现实
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
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
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
Multi-modal interaction 多模态交互
Physiology any of the various types of sensaiton, such as vision and hearing
Pen-centric computing (handwriting recognition)
Gesture Language Recognition
Gaze tracking 眼动识别
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
Facilities for age
Gesture Recognition 手势识别
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
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
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 人类感性能力
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 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
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
Ask user to perform a specific task
Monitor users during interaction
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
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 (主交互范式)
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
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
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
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
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
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
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 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
What the user is doing when interacting with the system, eg instructing, talking, browsing or other.
The kind of interface used to support the mode, eg speech, menu-based, gesture.
Many kinds of interaction styles available
Question and answer
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
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.
Different Kinds of Requirements
Social rea uirements
Different Kinds of Requirements explaination
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
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.
How much lighting, noise, and dust is expected?
Will users need to wear protective clothing?
Might affect the choice of interaction paradigm (e.g. ATM in very public physical environment, speech?)
collaboration and coordination
sharing of files, of displays, (Synchronous vs.asynchronous)
across great distances
privacy for clients
IT department's attitude and remit (宽恕，免除，缓和，汇出，传送)
user support -- good? Easily obtained?
communications infrastructure -- stable?
availability of training
What technologies will the product run on and need to be compatible with
What technological limitations might be relevant?
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.
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
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.
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
Essential use cases
may be used to describe either existing tasks or envisioned tasks with a new device.
not mutually exclusive
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
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
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
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 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.