交互设计基本原则

这是来自Bruce Tognazzini的文章,他是苹果的第66号员工,也是人机交互“梦之队”Nielsen Norman Group的第三任负责人,从事人际交互30多年。本片文章是Bruce Tog先生2014年修订的版本。内容非常多,这篇文章,我会以多次发布的方式翻译。下面让我们一起拜读。

注意:因为原文是按照字母顺序编辑的,我们按照原文顺序翻译,后续会给代价制作一个文内连接,方便查阅。

简介

有效的界面在视觉上是清晰和宽容的,并为用户灌输了控制感。用户可以快速查看选项的宽度,了解实现目标的方式,并能安心工作。有效的界面不会让用户关心系统的内部工作原理。它们工作认真,并持续保存,并给用户充分的选择权,可以在任何时间撤销任何行为。有效的应用或服务可发挥最大化作用,并向用户要求最少的信息。

因为应用和服务是用在网络或者移动设备上的,所有这些原则不会改。如果有改变的话,使用这些原则——所有原则——变得更加重要。

我爱苹果,但它并不完美

我在这里使用了很多苹果产品的例子,通常是糟糕界面实践的例子。苹果在交互技术方面创造了很多革命性突破,我预料这种趋势一定会继续。他们也犯了很多错误,不多,但因为我几乎只用苹果产品,我每天都在遭受这些痛苦。我使用各种苹果产品写这个文档,所以很自然我会从我看到的东西上寻找例子。

请不要因为这个文档帮我看成某种程度的苹果黑。在1978年,在Steve Jobs 招聘之后,我设计了苹果的第一个用户界面。我伴随着个公司走过了14年。我几乎购买了在Day One上发布的所有苹果产品并用我的很多退休金投资苹果股票。我爱苹果,支持苹果,但我希望它更好。

 

下面是第一期翻译,所有提纲,后续会逐步补全

 

美学(Aesthetics)

原则:美学设计应该流程那些受过专业教育并应用的非常娴熟的人:图形/视觉设计师

原则:时尚不应该超越可用性

通过时尚创造过时的人工制品是历史悠久的,而且是售卖各种东西的有效方式,不管是衣服还是汽车。新时尚不应该也没必要削弱用户表现:可以在既不影响生产力或明显提升它的情况下实施大量视觉甚至行为的改变。

原则:要像测试行为设计一样,让用户彻底测试视觉设计

在适当的情况下,在美学改变后,新设计应该基于旧设计进行基准测试。要确保可学性、满意度以及生产力都会提升,或者至少保证不变。如果不是这样,就需要重新思考这些导致问题的新增的美学表现。

可预期(Anticipation)

原则:为用户提供流程每一步所需要的所有信息和工具

软件和硬件系统应该尝试预测用户的期望和需求。不要指望用户会离开当前界面去搜索或者收集必须要的信息。提供的信息必须到位而且必要的工具需要存在并可以被看到。

 

自主权

原则:计算机、界面及任务环境都“属于”用户,但是用户自治权并不意味着我们放弃规则

原则:让用户自己做决定,即使是那些审美很差或者行动效率不高的人

原则:锻炼可靠的控制

原则:使用状态机制使用户持续意识和了解状态变化

原则:保持状态信息及时最新并简单已读

原则:确保状态信息准确

色彩(Color)

色盲(Color-Blindness)

原则:任何时候你在界面中使用色彩传递信息的时候,你应该也要使用清晰、次级的线索将这些信息传达给那些看不到颜色的人。

原则:测试网站查看色盲人员看到的内容

颜色是核心的界面元素(Color as a vital interface element)

原则:

原则:

一致性(Consistency)

1)一致性等级(Levels of Consistency)

原则:保持严格一致性的重要性随等级改变。

1.顶级一致性

平台一致性:

内部一致性:

2.系列产品的一致性,如微软的office
3.单个应用、服务的整体外观与感受——启动画面,设计元素等
4.小的视觉框架,如图标、符号、按钮、滑动条等。
5.无可见的框架
6.用户行为的解释

案例分析:苹果“控制键”修改值

2)诱导的不一致性(Induced Inconsistency)

原则:对象的行为不同时使用不一致的视觉表现与行为相同时使用一致的视觉表现一样重要。

3)连续性(Continuity)

原则:随着时间的推移,要努力保持连续性而不是统一性。

4)与用户期望的一致性(Consistency with User Expectation)

原则:“最重要的一致性是与用户期望的一致性”——William Buxton

案例研究:施乐之星拖拽规则

默认值(Defaults)

规则:输入域内的默认值应该很容易被“清除”

规则:默认值应该是“智能的”和“响应的”

原则:使用更有意义的或响应的词汇代替“默认”这个词

原则:你使用的词汇和视觉设计必须传达恢复的范围

可发现性(Discoverability)

原则:任何隐藏复杂性的尝试都会增加复杂

案例研究:看不到的Mac滑动条

原则:如果你选择隐藏复杂性,请只在陈列室里这么做

原则:如果用户找不到信息,它就不存在

案例分析:Mac的Safari

原则:使用主动发现(Active Discovery)引导人们发现更高级的功能

案例研究:iPhone的GroceryIQ应用

原则:软件的成功使用所需要的控件和其他对象在视觉上应该一直可访问

原则:对于可发现性而言,没有“优雅”的例外

原则:除了小型移动设备,控件不应该处于内容区域的中心

案例按钮:苹果的反向应用程序

原则:用视觉图解传达你的手势词汇

原则:寻求平衡

原则:测试可发现性

用户的效率(Efficiency of the User)

原则:考虑用户而不是电脑的生产力

原则:保持用户一直在工作

原则:为了最大化商业或其他组织的效率,你必须最大化每个人的效率,而不仅仅是IT部门或类似部门的效率

原则:软件领域最大的效率突破是是系统的基础架构,而不是界面的表层设计

原则:错误信息应该真的有帮助

可探索的界面(Explorable  Interfaces)

原则:给用户清晰明显的道路和路标,然后让他们自己上路吧(four wheel drive)

原则:有时你不得不给出更明确的指引(deep ruts)

原则:给用户稳定的知觉线索以获得“回家”的感觉

原则:使行为可逆

原则:总是允许“撤销”

原则:总是允许退出

原则:使界面简单而有趣,以吸引人留下

菲茨定律(Fitts’s Law)

原则:选取目标的时间是距离目标的距离及目标大小的函数

原则:获取多个目标的时间是单个目标时间的总和

原则:无论对于指向目标还是自然目标,菲茨定律都有效

原则:菲茨定律需要秒表测试(stop watch test)

人机界面对象

原则:人机界面对象可以被看到、听到、感觉并感知到

原则:人机界面对象有标准的操作/控制方式

原则:人机界面对象应该可理解、自一致性并稳定

原则:如果你想用户换一种方式与界面交互或者界面产生不同的行为,请使用新的对象

减少延迟(Latency Reduction)

原则:有可能的话,使用多线程将延迟推到后台

原则:减少用户的延迟体体验

>确保所有按钮点击可以在50毫秒内有视觉或听觉反馈

>捕捉同一个按钮或对象 的多次点击

原则:到碰到延迟时,要让用户知道

原则:让开始的时候快一些

可学习性(Learnability)

原则:限制取舍

原则:避免只测试可学习性

隐喻的使用(Use of Metaphors)

原则:选择那些可以让用户立即抓住概念模型最好细节的隐喻

原则:通过吸引人们的感知(视觉、听觉、触觉及本能反应/肌肉记忆)让隐喻“活”起来,并触发他们的记忆

案例分析:苹果的HyperCard浏览器

原则:超越现实世界对象的里面解释

原则:如果隐喻阻碍了你,请抛弃

案例研究:Dish Pointer 地图

保护用户的工作(Protect User’s Work)

原则:确保用户不会丢失已输入的数据

可读性(Readability)

原则:必须阅读的文本应该具有更高对比度

原则:使用足够大的字体,以保证标准显示器的可读性

原则:与标签或说明相反,对于你想强调的真实数据。要特别使用更大字符

原则:菜单和按钮标签应该有关键词,形成独特标签

原则:使用用户群中的最老用户测试你的所有设计

原则:通常字体的“漂亮”程度与其可读性反相关

简洁(Simplicity)

原则:平衡易于安装与易于使用的关系

原则:避免“简单的假象”

原则:使用渐进式展示(Prgoressive Revelation)拉平学习曲线

原则:不要通过消除必要的功能进行简化

状态(State)

原则:因为很多基于浏览器的产品存在与无状态的环境中,我们有责任追踪必要的状态

原则:当用户退出时,状态信息应该以编码的形式存储在服务器上

原则:弄清楚你要存储什么&保护用户的信息

可见导航(Visible Navigation)

原则:使导航可见

原则:使用覆盖层限制屏幕计数

 

关注下方公众号二维码或搜索公众号:Forbetterworld, 内容同步更新,

欢迎留言讨论,转载请注明出处,观点归原作者所有。

英文版地址First Principles of Interaction Design (Revised & Expanded)

发布者

是观

交互设计师,对用户研究、情感化设计、游戏化设计、服务设计及行为改变等用户体验过相关领域及其感兴趣,欢迎大家一起讨论学习。

发表评论

电子邮件地址不会被公开。 必填项已用*标注