Nielsen总结的程序设计10宗罪

设计复杂的应用程序(包含桌面应用程序和web应用程序,手机app暂时没有纳入本文研讨范围)是一项具有挑战性的任务。构建既能深入支持复杂任务又能直观清楚地说明如何完成任务的应用程序是一个巨大的挑战。在我们的网页和应用程序设计课程中,我们花了一整天的时间在这个主题上,但是我们可以很容易就花掉一个月的时间来对用户研究中遇到的问题进行分类。

我们很难就常见的应用程序设计问题提出一般性建议,因为我们观察到的许多问题都是局限在特定领域的。11年前,当这篇文章的第1个版本出炉时,情况就是这样,时至今日依然如此。

因此,我们的第1个建议是,与你的目标受众一起进行用户研究:

  • 从任务分析和情景研究开始,了解用户的需求和工作流程。
  • 借助低保真原型,粗略搭建应用程序的基本结构和功能,无需花费大量资源来去实现那些在观察用户会随时修改或放弃的想法。
  • 进行迭代设计,并让少量用户测试每一处迭代。迭代次数越多,应用程序就会越好。

尽管大多数应用程序的可用性问题都具有领域局限性,但在整个行业中我们经常看到这10个常见错误。 其中有5个问题(#1、2、3、4和6)也在本文的原始第1版中,这也表明可用性指南的历久弥新。原始第1版中的所有10条指南仍然是正确的,但有5个错误相比之前较少出现了(很幸运),它们被本文中的另外5个问题(#5、7、8、9和10)所取代。

下面是我们列出的应用程序设计的10宗罪(错误),这些错误都是极其严重和常见的。希望在未来的11年里,当我们编写这篇文章的下1个版本时,大多问题将不再普遍。

1、糟糕的系统反馈

提高应用程序的可用性最基本的准则之一就是提供清晰的反馈:

  • 向用户显示系统的当前状态
  • 告诉用户,他们的指令和动作是如何被理解的
  • 告诉用户发生了什么

保持沉默的应用程序会让用户猜测,一般来说,他们都会猜错。

好的反馈可以告诉用户很多事情ーー例如,系统是否正确地将他们点击的按钮理解为“点击” ,系统现在会做些什么吗?当前选择或正在进行的活动是什么?

体现反馈必要性的场景之一是,应用程序进入编辑模式来修改信息的情况。用户必须明确当前哪些内容是可编辑的,因为不同应用程序在编辑模式的操作范围上会有所不同ーー例如,一些应用程序会合并可编辑单个单元格或行的数据表,另一些应用程序则会使整个表可编辑。适当的、清晰的反馈可以向用户传达可编辑的范围;好的反馈可以通过多种方式实现,例如使用不同背景来识别当前可编辑的区域,或是改变与编辑相关的按钮样式以明确其功能。

Nielsen总结的程序设计10宗罪

图1:在编辑模式下,telerik.com 为当前可编辑的表格行添加了一个灰色背景,并且改变单元格的样式,使它们看起来像表单字段。将编辑和删除按钮改为更新和取消的同时,使用不同的布局和外观。调整按钮的位置和颜色是这个反馈中额外的重要标志,因为降低了用户在编辑之后点错按钮的可能性,特别是如果他们分心或依赖肌肉记忆的话。这种级别的反馈清楚地表明了系统正在发生什么,以及它如何响应用户输入。

1.1 缺少进度条让人抓狂

缺乏反馈的另一个情况是是系统没有告知用户当前操作需要很长时间才能完成。用户通常认为营养程序已经崩溃,或者开始点击其他目标。

如果指令无法在建议时间限度内得到响应,那么就说出来,让用户通过进度指示器知道正在发生什么:

  • 如果一个指令需要2到10秒,建议此时显示一个等待动画,比如“ 旋转动效” 这种类型的进度指示器告诉用户耐心等待,在正常状态的光标返回之前不要点击其他任何东西
  • 如果一个命令花费的时间超过10秒,那么建议创建一个明确的进度条,最好是完成百分比指示器 (除非你真的无法预测在操作完成之前还剩下多少工作)

2、不一致

记住双D原则:差别化对于用户来说,是难度的提升(differences are difficult.)。当用户对某些东西的行为方式或达成目标有所期望时,偏离这些期望就会导致困惑、沮丧,并增加用户试图解决问题时的认知负荷。人类的大脑渴望一致性。

有几种类型的不一致在功能综合的应用程序中特别常见,甚至会使经验丰富的用户完全陷入困惑:

  • 同一动作使用不同说法或命令
  • 多个地方放置相同功能的控件
  • 控件看起来彼此相似(从用户视角) ,但是可以在不同的地方触发(例如,一个在工具栏中,另一个在菜单中,第三个在首选项对话框中)
  • 操作流程相似,但页面交互差异特别大
  • 数据输入规则不一致: 有时允许输入,有时则标记为无效,缺少比如“为什么会发生这种情况”等的反馈
  • 某个功能是否可用飘忽不定,有时可用,有时却因神秘原因不可用(并未告之用户)
  • UI元素或控件四处移动,违背空间一致性

在我们的研究中,一位建筑师有多年AutoCAD的使用经验,她努力尝试理解什么情况下可以将各种浮动面板固定在屏幕的一边,什么情况下又不可以如此操作。在一次会议中,她多次尝试让一个浮动面板停靠在左侧,但都没有成功。原因是,由于隐藏参数设置,这个特定面板无法被固定,但是这个约束条件并没有明确的告诉用户。这个隐藏的设置是为了让高级用户能够更好地定制界面布局,但是由于缺少反馈,我们的这位调研对象不能理解为什么面板的固定有时可行,有时不可行。这类不一致即便是经验丰富的用户也会感到沮丧的主要原因。

Nielsen总结的程序设计10宗罪

图2:AutoCAD 并不总是允许我们的调研对象将面板“停靠”在屏幕的一侧。即使是有经验的用户也不明白为什么这个功能在某些面板上起作用,而在其他面板上不起作用。(原因是因为这个面板的一个隐藏参数被关闭了。)

3、糟糕的错误提示

错误提示是一种特殊的反馈形式: 它们告诉用户某些地方出错了。“错误提示指南”已经出现将近30年了,但是仍然有许多应用程序违反了这些内容。

最常见的违反准则的情况是:错误提示仅仅告诉用户当前发生了错误,而没有解释原因和修复方法。这样的信息让用户束手无策。

这个问题在过去的几年里越来越严重,很大程度上是由于网页版应用程序: 用户被提示发生了一些问题。然后重试。接着是没有详细说明原因或如何修复的错误提示。至少过去的桌面应用程序曾经告诉人们问题是什么(通常用技术术语说明,外行用户很难弄清楚问题所在)。

Nielsen总结的程序设计10宗罪

图3:一系列模糊的错误提示,来自 Quicken (图中左上)、 Dropbox (图中右上)、 IBM Verse (图下) : 这些都没有描述这个核心点:1)到底出了什么问题;2)如何避免问题出现的细致说明;3)用户的工作进度是否因此而丢失。

提供信息的错误提示不仅可以帮助用户解决当前的问题,而且还可以作为一个接受教育的时刻。虽然人们不会花时间去阅读和学习应用程序的特性,但是如果你解释清楚了,用户会努力去理解,因为他们想要解决眼下错误。

4、缺少默认值

默认值在诸多方面可以帮助用户。最重要的是:

  • 如果默认值正好适用,用户则无须键入特定值,进而提升操作效率
  • 提供了一个参考示例,可以指导用户参照填写
  • 让新手的小白用户在懵圈情况下接受默认配置,引导他们进行一个安全或通用的操作

默认值可以省去用户在重复性任务中的大量操作,例如多次填写同样的表单。表单字段的确切关键值可以提高生产力并减少挫败感。数据分析可以帮助你了解是否有特定内容可作为最常用选项。

下拉菜单是最需要添加默认设置并因此受益的。许多应用程序使用 “请选择” (根本没有选择任何有效选项值)作为默认选项,迫使每个用户都必须点击下拉菜单并选择一个值。如果预先选择一个选项(最好是最常见的选项) ,至少有些用户根本不需要操作。

在填写数字的表单中,如果用户预期与默认值(例如,“数字” 字段)偏差较小,可以使用步进器控件来方便用户调整数字而不是键盘输入(但是仍然允许用户通过键盘输入不同的值)。步进程序有2个好处: 它们降低了操作成本,并为仍在学习系统的新用户提供了一个可接受的起点。

Nielsen总结的程序设计10宗罪

图4:个人理财产品 Mint 有一个功能,可以帮助用户查找匹配他们需求的信用卡。该向导采用了很好的默认设置,它可以自动输入用户信用卡的每月平均支出金额,这个表单的引导使用了合适的默认值,并为用户提供了简便的方法来修改数字:键入数字或点击递增/递减按钮(步进器控件)。

5、图标缺少文字标签

为了便于用户更好理解,很少有图标是单独出现而不需要文字标签(用于注释)的。

即使是看起来通用的常见图标(比如汉堡包菜单),对于用户来说也不像大多数设计师所预期的那样熟悉。如果你的应用程序使用了样式独特的图标,情况会更糟,用户很难正确理解这些独特图标的含义。请记住尼尔森定律: “用户会把大部分时间花在其他网站上。”这意味着对于大多数图标而言,除非它们旁边带有文本标签(text label),否则用户将很难或无法理解。

给图标配上文字标签有4个好处:

  • 增加了整个图标的尺寸(根据菲茨定律,这样可以减少用户点击控件所需的时间)
  • 缩短了识别命令的时间: 2个提示元素(图标+文本)优于只有1个(图标)
  • 与上一条相关,还可以促进界面熟悉(同一个命令建立多个关联)
  • 帮助用户在视觉上区分相邻放置的多个命令

Nielsen总结的程序设计10宗罪

图5:在我们最近的研究中,从各种桌面应用程序中选择了一些没有文字说明的图标::所有这些都是非标准、无法清晰表述用途的图标。你能猜出它们代表什么操作吗?至少在我们的研究中,被试者无法猜到。

6、难以识别并点击的对象

在人机交互中,任何可以单击(或点击)的东西都称为对象:所有“激活状态(active)”的UI元素都是对象。用户要捕获对象,他们必须能够:(1)识别对象;(2)准确地点击它。在当下很多应用程序界面中,这两方面都会出现问题。

6.1 弱指示符(Signifiers)

“示能”(Affordance,也称作“功能可见性”)是指用户可以对一个目标对象进行操作。例如,一个复选框可以开启和关闭,而滑块可以上下滑动。指示符是一种视觉元素,可以帮助用户在使用之前通过观察对象来理解示能(如果是一个物理设备而非屏幕上的UI元素,用户还可以触摸感受它)。这些概念在唐纳德 · 诺曼的《设计心理学》一书中有所讨论。(译者注:门把手提供了一种『可被推开』的功能,是一种示能。门上贴有的“推”的标示,是一种指示符,明确地告知用户该怎么操作。)

指示符在UI设计中尤为重要,因为所有屏幕像素都是可以被点击的,即使有时点击后什么也不会发生。屏幕上有太多可见信息,所以用户没有时间像玩扫雷游戏一样四处点击,去找到一些可操作的东西。(例外: 小孩子有时喜欢四处点击屏幕)

在现代应用中,最糟糕的设计之一是“超扁平化设计”。很多扁平化设计的指示符都很弱: 人们很难区分文字和按钮,因为按钮缺乏惯有的3D立体痕迹。

弱指示符的常见“症状”:

  • 用户说:“我在这里能做什么? ”
  • 用户并没有靠近到那个能帮助他们的功能周围
  • 试图通过屏幕上的超长文本说明解决上述2个问题。(更糟糕的是,在用户执行多个步骤的第一个操作之后冗长的操作说明就消失了。)

6.2 可点击目标的区域过小

与此相关的问题是,当单击一个尺寸过小的对象时,用户很可能错过目标的响应区域,甚至误触其他目标。即便用户原本正确地理解了指示符,此时也很可能改变他们的想法,开始怀疑操作的可行性,因为他们发现点击之后什么也没有发生。
(过小的点击区域对于老年人和有运动技能障碍的用户是一个需要特别关注的问题。)

7、过度使用模态窗口

许多应用程序使用模态窗口来实现数据交互操,包括编辑当前数据项、添加新数据项、删除或展示有关数据项的附加细节信息。模态窗口出现在当前界面的最上层,背景通常是灰度处理(变暗)的(这样可以减少干扰,帮助用户专注于当前的任务)。不幸的是,这种设计选择遮挡了用户在填写表单时可能需要引用的信息,从而阻止了用户对上下文的参考。(请注意,即使被遮挡的页面不包含当前编辑所需的信息,用户通常也会复制和粘贴先前键入的内容,或者简单利用其它条目作为模板来解决当前的任务。)

Nielsen总结的程序设计10宗罪

图6:在 Airtable中,编辑表格行会弹出一个模态窗口,弹窗会遮盖表单中的大部分信息,并阻止用户引用。

8、无意义的信息

长字符串的字母和数字,例如数据库中自动生成的id,经常用于唯一性标记应用程序中的数据项。这些字符串对于用户来说是完全没有意义的,但是它们通常被非常显眼地显示为表格的第1列,迫使用户不得不略过第1列来找寻他们所需的信息。虽然这些无意义的字符串在后端很重要,但并非用户所必须参考的关键信息。特别是在高信息密度的页面上,可以提供一些人们可读的信息作为主要的展示内容,并把id放到一个不那么突出的位置。

编码信息经常被错误使用在医疗领域的应用程序、CRM系统(用户经常需要为每一次的客户销售设定1个编码)、会计软件和企业级应用中。在所有这些应用程序中,对用户有意义的信息都以短代码进行展示,以使页面布局更加紧凑。一个短代码可能比一个完整的句子更适合放在一个微小区域,但是会给用户带来更高的认知门槛。他们需要翻译编码信息以理解它们,而人类的记忆是有限的。即使是训练有素的专业人员也不可能记住每一个代码,而这仍然需要他们花费大量的精力在脑海中进行这种翻译。

Nielsen总结的程序设计10宗罪

图7:此表的第1列是豪无意义的ID信息;NETCODE(网络代码)和 LOCATION CODE(位置代码)两个字段还包含旨在匹配紧凑空间中的复杂信息编码。LOCATION NAME是唯一一个对用户而言有意义的内容 ; 为了理解其他的列的内容,用户必须凭借记忆或者不得不参考一个代码对照表。

9、存放垃圾功能的抽屉菜单(Junk-Drawer Menus)

如果应用程序有成百上千的功能,设计者必须把这些功能的控件放置在页面上合理的位置,并基于优先级考虑对他们进行排序和分类,这样用户可以更容易地找到并点选最重要的功能。这种做法经常会导致菜单中会出现“更多”选项: 最常用的选项会直接显示在主工具栏上,最后一个选项标记为“更多”(操作或工具),或者最糟糕的是… 包含了所有其它不适合直接展示在工具栏的选项。

这些菜单的标签指示性很弱,只有一个胡乱存放垃圾功能的抽屉:放置所有无法分类、但又不想舍弃的东西的地方。它们的出现通常是因为设计团队有一些必备功能,但是又不知道放在哪里更合适,或者是在迭代过程中,原有应用程序的一些不能删去的、但很少使用的旧功能。“更多”菜单的问题在于,就像家里堆放无用杂物的抽屉一样,没有人知道里面可能放了什么。换句话说,这限制了“更多”选项中包含的功能的可发现性和可查找性,因为大多数用户没有任何理由去主动查看这些菜单。

Nielsen总结的程序设计10宗罪

图8:Airtable: 一个存放垃圾功能的抽屉菜单“…” 信息线索非常弱。用户很难预测菜单中的内容。

Nielsen总结的程序设计10宗罪

图9:Salesforce: 一个存放垃圾功能的抽屉菜单“More”

10、 “取消/删除/放弃”和“确认/保存”按钮离得太近

将类似保存的操作放在诸如“取消/删除/放弃”等破坏性操作旁边,这是一个很常见的设计方式,但这会给用户带来很多麻烦。虽然从逻辑上讲,这种摆放通常是有原因的(例如,保存和删除是相关的,因为都决定了一个项目的结果) ,但这也容易让用户去点击错误的按钮或图标——特别是当用户在匆忙中、频繁完成重复动作或有操作困难时。这种无意中用一个动作代替另一个动作的行为被称为“手抖”。

Nielsen总结的程序设计10宗罪

如10:Veeam 是一个企业级的备份软件,它提供了一个多步骤向导来创建新的备份任务。在我们的研究中,一个用户花了将近20分钟来浏览这个向导,由于“Finish”和“Cancel”两个按钮过于接近,差一点选择了最后一步页面上的“Cancel”按钮而不是“Finish”。如果这个用户点击取消,之前20分钟的投入算是白折腾了。

Nielsen总结的程序设计10宗罪

图11:Microsoft outlook “待办”按钮(小红旗)置于“删除”和“存档”图标的右侧。这些图标用于完全相反的用户意图,但这3个图标按钮尺寸都很小,而且放置紧密,很容易被用户在匆忙中点错。

总结

应用程序设计与其所属的特定行业高度相关,因此,在领域A一个可用、高效和令人愉悦的应用程序在另一个领域B可能是个十足的灾难。设计一个好用的应用程序离不开深度的用户研究,用以确定用户的任务流程、功能特性、以及目标用户的认知模型和期望。

这里列出的10个应用程序的设计错误代表了我们在一系列行业研究中观察到的共性问题,涉及到创意、金融、企业、医疗保健、工程等领域。

作者:UXRen社区,微信公众号:UXRen,本文版权归:UXRen翻译组所有。

原文链接:https://www.nngroup.com/articles/top-10-application-design-mistakes/(2019.02.17)

本文由 新媒体之家 作者: UXRen 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
1

发表评论