# What is HCI?
Human computer interaction (HCI) is an interdisciplinary field in which computer scientists, engineers, psychologists, social scientists, and design professionals play important roles. The goal of HCI is to solve real problems in the design and use of technology, making computer-based systems easier to use and more effective for people and organizations. Ease of use and effectiveness are critical to the success of any systems that interact with people, including software systems, home, office and factory appliances, and web and phone applications.
# What is "Usability"?
- Quality!
- Learnability
- Efficiency
- Productivity
- Memorability
- Little "re-learning" required
- Errors
- Satisfaction
- Pleasurable
# History
# SRI and the Mouse
SRI 和鼠标
- Stanford Research Institute (SRI) 斯坦福研究所
- Bill English and Doug Engelbartcredited with the invention of the mouse
- W.K. English, D.C. Engelbartand M.L. Berman. "Display Selection Techniques for Text Manipulation," IEEE Transactions on Human Factors in Electronics. Mar, 1967. HFE-8(1).
凭借鼠标的发明获得了认可
- W.K. English, D.C. Engelbartand M.L. Berman. "Display Selection Techniques for Text Manipulation," IEEE Transactions on Human Factors in Electronics. Mar, 1967. HFE-8(1).
- NLS, or the "oN-Line System" NLS 或 “oN 线系统”
- "The Mother of All Demos" on December 9, 1968 at the Spring Joint Computer Conference in San Francisco
- Never really had a decent user interface
从未真正有过像样的用户界面
# Xerox PARC
- Palo Alto Research Center (PARC)
帕洛阿尔托研究中心 - Founded by Xerox in 1970
由施乐公司于 1970 年成立- Still exists today, as a semi-autonomous research lab
今天仍然存在,是一个半自治的研究实验室
- Still exists today, as a semi-autonomous research lab
- Incredible collection of talent
难以置信的人才储备- Hired many people from SRI, and many researchers and engineers
雇用了许多来自 SRI 的人,以及许多研究人员和工程师
- Hired many people from SRI, and many researchers and engineers
- Incredible collection of inventions, 1970-1982
1970 年至 1982 年的发明创造令人难以置信- Hardware 硬件
- Invented workstations, laser printing, the Ethernet
发明工作站,激光打印,以太网 - Only part that Xerox made money on
施乐只有一部分可以赚钱 - Bitmapped displays
位图显示
- Invented workstations, laser printing, the Ethernet
- Software 软件
- Invented many of the standard OS and systems principles
发明了许多标准的操作系统和系统原理 - Object oriented programming (Smalltalk)
面向对象的编程(Smalltalk) - Model-View-Controller architecture
模型 - 视图 - 控制器架构 - Interpress, a resolution-independent graphical page-description language and the precursor to PostScript
Interpress 一种与分辨率无关的图形页面描述语言,是 PostScript 的前身
- Invented many of the standard OS and systems principles
- User Interfaces
用户界面
- Hardware 硬件
# Xerox Alto Machine
- Everyone else at the time was using mainframes or "mini computers" that were shared
当时其他所有人都在使用共享的大型机或 “小型计算机”- "Time Sharing"
时间共享
- "Time Sharing"
- Alto was one of the first "personal workstations"
Alto 是最早的 “个人工作站” 之一- Starting about 1973
从 1973 年开始
- Starting about 1973
- No operating system – each program had its own libraries and low-level access mechanisms
没有操作系统 —— 每个程序都有自己的库和低级访问机制 - Three button mouse with two opposing roller wheels
三键鼠标,两个相对的滚轮- Red, Yellow, Green vertically
红色,黄色,绿色垂直 - Later replaced with left, middle, right, with single metal roller
后来用左,中,右,单个金属辊代替
- Red, Yellow, Green vertically
- Was secret for a long timebut later distributed to manyuniversities
很长一段时间是秘密的,后来又分发给许多大学
# Apple
- Xerox wanted to invest in Apple
施乐想投资苹果 - In exchange, Steve Jobs got the right to use all of Xerox’s ideas
作为交换,史蒂夫・乔布斯有权使用施乐的所有创意 - Steve & his team (Bill Atkinson) were given a demo of various Alto programs in 1979
1979 年,Steve 和他的团队(Bill Atkinson)被演示了各种 Alto 程序- Mouse
鼠标 - Smalltalk –overlapping windows
重叠窗口 - Bravo WYSIWYG editing
所见即所得编辑
- Mouse
- Apple hired Larry Tesler & others, 1980
1980 年,苹果聘请了 Larry Tesler 等人
# Apple "Lisa"
1983
- Original design for desktop
桌面的原始设计- Bill Atkinson & others
- Novel pull-down menus (at top of screen)
新颖的下拉菜单(位于屏幕顶部) - Dialog boxes
对话框 - Many other UI innovations
许多其他 UI 创新 - Doesn't look or work like the Star
看起来或工作方式不像 Star - One button mouse
一键鼠标 - Amazing programming expertise to get it to work on a tiny, inexpensive machine
出色的编程专业知识,使其可以在小型、廉价的机器上工作
# Original Macintosh
1984
- Much cheaper than Lisa
便宜很多 - No harddisk–just one floppy
无硬盘 - 仅一张软盘 - 128 k-bytes of memory
128k 字节的内存 - Much of code re-implemented in assembly
在汇编中重新实现了很多代码 - Famous 1984 Super Bowl ad by Ridley Scott
1984 年 Ridley Scott 著名的 Super Bowl 超级杯广告
# PCs & Windows
- IBM PC – 1981
- (IBM had missed the "minicomputer" phase dominated by DEC)
IBM 错过了 DEC 主导的 “微型计算机” 阶段
- (IBM had missed the "minicomputer" phase dominated by DEC)
- Used Microsoft's DOS 1.0 and shipped with VisiCalc
与 VisiCalc 一起提供 - Windows 1.0 released in Nov, 1985 as DOS extension
作为 DOS 扩展发行- Tiled window manager
平铺的窗口管理器
- Tiled window manager
- Windows 2.0 was overlapping 1987
- Windows 3.0 in 1990, 3.1 in 1992
- Was a real operating system
是真正的操作系统 - Added virtual memory, protected multiple processing, etc.
添加了虚拟内存,保护了多个进程,等等。
- Was a real operating system
# Main Principles
重要原则
# Affordances 功能可见性
- "Perceived and actual properties of the thing, primarily those fundamental properties that determine how the thing could possibly be used." (Norman DOET book, p. 9)
“事物的感知属性和实际属性,主要是那些决定如何使用事物的基本属性。”- "When affordances are taken advantage of, the user knows what to do just by looking."
“利用功能可见性,用户只要看一下就知道该怎么做”
- "When affordances are taken advantage of, the user knows what to do just by looking."
- Helps people understand what to do with the control
帮助人们了解如何使用控件
# Visual Affordances
- Perceived and actual fundamental properties of an object that determine how it could be used how it could be used
对象的感知和实际基本属性,决定了如何使用对象- Chair is for sitting
椅子是用来坐的 - Ball is for throwing
球是用来投掷的 - Button is for pushing
按钮是用来推动的 - Knob is for turning
旋钮是用来转的 - Slider is for sliding
滑块用于滑动
- Chair is for sitting
- Complex things may need explanation, but simple things should not. If a simple thing requires instructions and pictures, it is likely a failed design
复杂的事物可能需要解释,而简单的事物则不需要。 如果简单的事情需要说明和图片,则可能是设计的失败。
# Conceptual Model 概念模型
Designer can help user foster an appropriate conceptual model in Appearance, instructions, behavior...
设计者可以帮助用户在外观、说明、行为等方面建立适当的概念模型。
# Example
FAUCETS 重点
Are the two functions of setting hot/cold and adjusting pressure –clear from the designs?
设计中是否清楚热 / 冷设置和调节压力的两项功能?
# Visibility 可见布局
When functionality is hidden, problems in use occur
隐藏功能时,使用中会发生问题
When capabilities are visible, it does not require memory of how to use
当功能可见时,它不需要记忆如何使用
# Example
Example of an electric outlet socket.
电源插座示例。
What if both sides were “big” and you had to remember which side the “small” one went into?
如果双方都是 “大方”,而您必须记住 “小方” 是哪一方呢?
# Mapping 映射
Relationship between two objects, between control and action/result
两个对象之间的关系,控制与动作 / 结果之间的关系
- Good
- Car, various driving controls
汽车,各种驾驶控制 - Mercedes Benz seat adjustment example
奔驰座椅调整示例
- Car, various driving controls
- Bad
- Car stereo Knob for front/back speakers
前置 / 后置扬声器的汽车立体声旋钮
- Car stereo Knob for front/back speakers
# Example
Stove 火炉
Layout of controls which lend themselves to better correlation with the burners.
控件的布局可以更好地与燃烧器关联。
# Feedback 反馈
Let someone know what just occurred.
让某人知道发生了什么。
- Can be sound that is made (beep)
可以发出声音(哔声) - Can be change in physical state
可以改变身体状态
# Constraints 约束
Limitations on what can be done
可以做什么的局限性
- Physical – Keys
物理约束 - 键 - Semantic – Menu graying
语义约束 – 菜单变灰 - Cultural – Colors
文化约束 - 色彩 - Logical – When all above don't apply
逻辑约束 - 如果以上所有条件均不适用
# Individual Differences
个体差异
- Whom do you design for?
为谁设计?- Everyone -Impossible
所有人 - 不可能 - Average -miss half audience
平均错失半数观众 - 90% -Still may miss a lot
90%- 仍然可能会错过很多机会
- Everyone -Impossible
- Designers are not representative of the user population for whom they are designing
设计师不能代表他们要设计的用户群 - Don't expect users to think and act like you
不要指望用户像您一样思考和行动 - People vary in both physical and mental/cognitive attributes
人们的身体和心理 / 认知属性各不相同
# Principles applied
- Affordances - Insert something into holes
功能可见性 - 将某些东西插入孔中 - Constraints - Bigger hole for several fingers, small for thumb
约束 - 多个手指的孔较大,拇指的孔较小 - Mapping - How to insert fingers into holes suggested by visible appearance
映射 - 如何将手指插入可见外观建议的孔中 - Conceptual model - Suggested by how parts fit together and move
概念模型 - 通过零件如何组装和移动来建议