10条你永远不能打破的交互设计原则

在生活中,有些规则是你永远不能打破的。一旦你打破了,那就要付出惨重的代价。在用户界面设计中,也有一些规则需要遵循。它们被称为“启发式”或提高用户界面可用性的通用原则。这些都是经过反复测试的可复用模式,可帮助用户进行界面导航。一个设计良好的界面总是考虑以下原则。而一个设计不当的界面肯定会缺少这些原则中的一个或多个。作为UI设计师的你为什么要打破这些规则而使用户感到头疼呢?

这个列表改编自尼尔森诺曼集团的10种用户界面设计的启发式方法。

1. 系统状态可见性

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
系统应该在适当的时间内做出适当的反馈,告知用户当前的系统状态;

始终向用户提供适当的信息、提示和上下文情境,以便他们随时知道自己在系统中的位置。这使得用户能够感受到到一切都在自己的掌控之中,并知道下一步该做什么。该商品是否已添加到购物车?编辑的内容被保存了吗?这个过程需要多长时间?我的订单状态如何?当前发生了什么?总是为用户回答这样的问题,永远不要让他们猜测或蒙在鼓里。

2. 系统与现实世界相匹配

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
系统应该使用用户的语言,使用用户熟悉的单词、短语和概念,而非系统术语。遵循现实世界的惯例,使信息以自然和逻辑的顺序出现。

使用用户熟悉的词汇和语言。措辞不要过于复杂。屏幕上的单词或图标的含义应该清晰易懂,以便于目标受众理解。人们会使用自己的心理模型和经验来解释模式。

当图形用户界面被引入时,技术上最大的进步之一就出现了。在GUI出现之前,计算机屏幕仅限于晦涩难懂的文本命令,需要你在每次执行操作时记忆并重复这些指令。之后一切都变了。屏幕上显示了文件夹、文件和一个手型光标的小图标。这些都是人们立刻就能理解的视觉符号。 无需解释,因为它引用了现实世界中的心理模型。

3. 一致性和标准化

Users should not have to wonder whether different words, situations, or actions mean the same thing.
使用者不应被不同的文字、状态和动作是否包含相同的意思而感到混淆。

有两种类型的一致性:内部一致性和外部一致性。内部一致性是指网站或应用程序中的模式。这很容易理解,比如在所有页面上使用相同的链接颜色,或者在每个屏幕上使用相同的图标来实现相同的概念,比如表示主页的Home图标。外部一致性是指大多数人使用的其他软件和系统中所使用的约定,例如购物车。大多数人都熟悉购物车的工作原理。因此你不需要重新发明轮子。如果你不这样做,可能会让你的用户更难了解你的购物车是如何工作的。保持一致性,避免引起用户不必要的混乱。

4. 用户控制和自由

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
用户在使用产品时经常会误操作,因此需要一个非常明确的“紧急出口”,而不需要经过长时间的对话来帮助他们快速脱离困境,系统需要提供“撤销”与“重做”操作;

始终提供一条出路。不要强迫用户执行他们不需要的功能,也不要把他们引向死胡同。例如,如果你正在设计结帐流程,请让用户根据需要继续购物。如果他们尝试在某个应用上执行操作,请让不确定的用户能够在最后时刻也可以取消操作。

5. 预防错误

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
比起提供给用户精心设计的错误提示信息,更好的方式是让用户一开始就预防错误。可以减少错误导向的状况或是在用户操作之前提供一个确认的选项。

当系统操作非常重要时,例如删除文件或向1000个收件人发送电子邮件活动,请确保用户知道他们将会做的事情的重要性。向他们展示一个确认对话或提供一些额外的信息,清楚地说明在采取行动之前会发生什么。如果他们不确定自己的行动会,这将阻止他们走得更远。这也避免让他们造成很多遗憾。

6. 识别而不是回忆

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
通过使对象、操作和选项可见,来最小化用户的记忆负担。用户不必记住对话中从一个部分到另一个部分的信息。系统的使用说明应是可见的,或在适当的时候易于检索。

作为用户界面设计师,我们的目标之一是减少用户的认知负荷。精神记忆是一个巨大的资源消耗。记忆有两种方式:识别和回忆。识别是你一瞬间熟悉的反应。就像一个人的脸,你看着一个朋友的脸,立刻就知道你以前见过他。而回忆的工作机制不同,这是你必须从记忆中找回的东西,比如一个人的名字。回忆通常需要更多的时间和工作,因为你的大脑必须处理更多的信息来破译它所看到的。另一方面,识别是瞬间发生的。我们希望在用户界面中使用更多的识别,减少回忆。一原则的一个很好的UI示例是使用普遍可识别的按钮和图标来创建功能,例如用于首页的房屋或用于编辑的铅笔。如果你必须为你的用户界面设计一个大多数人以前从未见过的新图标,那么可以使用文本描述来阐释并减轻认知负担。

7. 灵活性和使用效率

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
加速器-新手用户看不见-但经常能提升专家用户的交互效率,从而使系统可以同时满足有经验和没有经验的用户,允许用户定制高频动作.

当某些任务在你的应用程序或系统中反复出现时,你可能想让用户的交互变得更高效。例如,使用滑动手势保存或删除移动app的列表中的项目。删除项目的通常方法是打开一个项目,然后按Delete键。专家的方法(也是更有效的方法)是简单地滑动并立即从列表中删除当前项。

8. 极简设计和美学

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
对话中不应包含无关紧要或很少需要的信息。 对话中每增加一个信息单元都会与相关信息单元竞争,从而降低它们的相对可见性。

当我们为了艺术而设计时,如果我们选择巴洛克风格,在屏幕上填充手工艺品、纹理和图像,那些都无关紧要。但是,当设计用于交互时,我们的目标是降低信噪比,这样做让我们的用户界面更易于理解。你可以通过简单地将显示在屏幕上的内容(图像或文本)减少到最低限度来应用此原则,从而使用户可以专注于手头的任务而不会分散注意力。

9. 帮助用户识别、诊断并从错误中恢复

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
错误信息应该用简单的语言(无需代码)来表达,准确地指出问题所在,并建设性地提出解决方案。

错误总会发生,那是不可避免的。 但用户遇到错误后发生的事情是UI设计师的责任。因此,我们可以通过设计可理解的错误页面和警告信息来帮助用户,并提供解决问题的选项或解决方案。例如,让我们看看无处不在的404页面。作为设计师,我们知道404页面的错误意味着什么,但用户通常不知道。为了帮助用户,我们必须把404翻译成简单的语言,添加一些文案,让它清楚地表明刚才发生的事情,比如:”对不起,我们找不到您要找的页面,以下是一些内容相似网页的建议……“

10. 帮助和说明文档

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
即使可以在没有文档的情况下使用系统会更好,但可能仍需要提供帮助和说明文档。 任何此类信息都应该易于搜索,着眼于用户的任务,列出要执行的具体步骤,并且不要太大。

始终提供易于访问的帮助信息。将其放在顶部栏或主导航区域的显著位置。当用户遇到问题而无法轻松找到解决方案时,必须将他们引导到他们可以找到的地方。这可以通过采取一个常见问题(FAQ)页面的形式,其中有一个提供可能的建议的搜索框和答案。如果实在没有答案,系统必须可以通过支持工单系统或直接电子邮件或电话直接联系支持人员的方式以获得额外帮助。


作者:Cristian Bosch
原文:https://uxdesign.cc/10-interaction-design-rules-you-must-never-break-82a048b0240e
本文已获得原作者授权:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,992评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,212评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,535评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,197评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,310评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,383评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,409评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,191评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,621评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,763评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,403评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2 351