# 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).
    凭借鼠标的发明获得了认可
• 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
    今天仍然存在，是一个半自治的研究实验室
• Incredible collection of talent
  难以置信的人才储备
  • Hired many people from SRI, and many researchers and engineers
    雇用了许多来自 SRI 的人，以及许多研究人员和工程师
• Incredible collection of inventions, 1970-1982
  1970 年至 1982 年的发明创造令人难以置信
  • Hardware 硬件
    • Invented workstations, laser printing, the Ethernet
      发明工作站，激光打印，以太网
    • Only part that Xerox made money on
      施乐只有一部分可以赚钱
    • Bitmapped displays
      位图显示
  • 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 的前身
  • User Interfaces
    用户界面

# Xerox Alto Machine

• Everyone else at the time was using mainframes or "mini computers" that were shared
  当时其他所有人都在使用共享的大型机或 “小型计算机”
  • "Time Sharing"
    时间共享
• Alto was one of the first "personal workstations"
  Alto 是最早的 “个人工作站” 之一
  • Starting about 1973
    从 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
    后来用左，中，右，单个金属辊代替
• 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
    所见即所得编辑
• 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 主导的 “微型计算机” 阶段
• 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
    平铺的窗口管理器
• 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.
    添加了虚拟内存，保护了多个进程，等等。
    

# 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."
    “利用功能可见性，用户只要看一下就知道该怎么做”
• 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
    滑块用于滑动
• 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
    奔驰座椅调整示例
• Bad
  • 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％- 仍然可能会错过很多机会
• 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
  概念模型 - 通过零件如何组装和移动来建议