Web应用程序设计中常见的10种错误

2012-03-03 17:54:12来源:gamerboom作者:

撰写有关应用程序设计错误的文章是件很困难的事情,因为最糟糕的错误往往具有领域专门性和特殊性。通常情况下,应用程序的失败有以下3种原因:解决了错误的问题;目标问题正确,但使用的是错误的功能;功能设计正确

撰写有关应用程序设计错误的文章是件很困难的事情,因为最糟糕的错误往往具有领域专门性和特殊性。通常情况下,应用程序的失败有以下3种原因:解决了错误的问题;目标问题正确,但使用的是错误的功能;功能设计正确,但过于复杂使得用户难以理解。

这3个错误都可能导致应用的失败,而我却还无法告诉你怎么做才是正确的。什么才是正确的问题?什么是正确的功能?何种程度的功能复杂性才恰当?对于各个领域和用户类别来说,这些问题的答案都有所不同。

以下是唯一能够提供的通用建议:你应当以用户研究为基础来做出决定,而不是依靠自己的主观猜测和臆想。

1、在决定应用的功能前,先开展领域研究和任务分析。

2、在进行更为细节化的设计前,先在纸上构建初始想法的原型。这可以避免资源的浪费,因为你在获得用户反馈后还可能修改想法。

3、不断改良设计,通过多轮的快速用户测试来润色应用功能。

当然,开发者们都知道他们需要测试应用UI,需要将半成品提供给真正的用户来查看应用程序的运转情况。

通常的想法是,程序员应当待在房间里竭尽全力地编程。我的观点刚好相反:参与应用开发和制作的所有人都应当花点时间来观察最终用户的行为。

无论你喜欢怎么做,至少要保证做到这点:不要只根据“用户代表”或“商业分析师”的意见来设计应用功能。让应用可用性产生偏差的最普遍错误做法是,只倾听用户的说法而没有亲眼看到他们的做法。用户需求说明并不总是对的。你必须快速地根据需求构建出原型,向用户展现某些具体的东西,由此来探究他们真正需要的东西。

web-design-mistakes(from pelfusion.com)
web-design-mistakes(from pelfusion.com)

 

以下是我总结的10种常见的可用性设计错误:

1、非标准GUI控制

基础GUI部件组成对话设计词典的词汇单位,包括指令链接和按钮、单选按钮和检验栏、滚动条和检验栏。如果你改变了这些单位的外观或行为,就好比忽然在母语交谈中插入外语词汇,这会让交流者感到困惑。

出于某些原因,设计中最普遍出现问题的是滚动条。多年以来,我们在研究中遇到过许多非标准滚动条,它们往往会让用户忽视某些选项。

30年来,世界上最棒的互动设计师已经润色了GUI控制的标准外观和功能,完美地通过了数千个小时的用户测试。所以说,你在周末两天时间就能够发明出更好的按钮,这几乎是不可能的。

但是,假设你自行设计的控制比标准控制更加优越,但依然会与整个世界显得格格不入。毕竟用户已习惯于多年所使用的标准GUI,他们使用你的对话框控制方式时仍会感到不适——用户对标准GUI控制方式的使用经验要比对新设计的使用多数千倍。

如果UI运行控制方式这样基本的内容同用户预期有所偏差,那么用户很可能无法适应这种新应用。即便他们能够成功使用,那么也需要耗费大量的脑力来执行本该极为简单的操作。最好让用户的认知资源放在理解应用功能如何帮助他们实现目标上。

1.1、伪GUI控制方式

相反,在某些设计中,有些设计并非GUI控制方式,但是却模仿GUI来设计,这对可用性的影响更加严重。我们经常会看到看似链接的文字和标题(游戏邦注:比如使用不同颜色或下划线),但是却无法点击。当用户点击这些内容后发现什么也没发生,他们会认为这个站点存在错误。所以,请遵守视觉化链接的设计指导。

同样的问题还包括,看似按钮的东西无法产生动作,或看似单选按钮却无法进行选择。在本轮研究中,我们发现了一个这样的例子。

要在Liste Rouge Paris上设计自行裁剪的衬衫,你必须提供尺寸。正如以下截屏所显示的那样,这里的应用已经设计了两种不同的路径,客户可以根据裁缝是否已记录自身尺寸来做出选择。

customer choices(from useit)
customer choices(from useit)

 

我们的测试用户会不停点击“新顾客”按钮,由此来表明他确实是个新顾客。不幸的是,该屏幕元素并不是个按钮,只是个无法点击的标题而已。

他是唯一测试这个站点的用户,因为他是在用户自行选择访问站点(游戏邦注:通常来自于搜索引擎列表)的任务中碰巧遇到这个站点的。在这种情况下,该用户最终解除了困惑,继续输入自己的尺寸。如果我们测试更多的用户,很可能有小比例用户会在这种情况下放弃。对话设计中的每个小错误只会对其使用造成些许影响,但是多数UI中包含大量的错误,流失的顾客数量也就会逐渐攀升。

除此之外,这个屏幕还错误地使用了单选按钮。从理论上来说,这5个选择是不能共存的,所以才会用上单选按钮。但是在用户理解工作流程的心智模型中,这个界面却要同时解决两个问题:1)新顾客和老顾客;2)如何提供尺寸。应当只针对用户要解决的当前问题提供一套单选按钮。

所以,在上文所示范例中,较好的设计应该是,首先让用户选择是新顾客还是老顾客,然后根据他们的选项提供相应的单选按钮。

2、不一致性

非标准化GUI控制是不一致性设计普遍问题的特殊案例。

当应用程序在相同的功能中使用不同的词汇或命令,或者当应用程序中相同词汇在不同部分代表不同概念时,困惑就会产生。同样,当事物违反呈现惯例时,用户也会感到困惑。

在同一个应用中,使用相同的名称来指代相同的功能,会让应用的使用变得更为简单。

谨记以下规则:差异就等同于困难。

以下是我们当前研究中发现的例子:Expedia在用户指定旅程的出发或返回日期时会跳出两个月的历表。以下截屏显示的是在2月份时计划3月10日出发和3月15日返回的旅程的呈现情况。

expedia-inconsistent-calendar(from useit)
expedia-inconsistent-calendar(from useit)

 

在第2个弹出窗口中,3月移到了左边,右边显示的是4月。这似乎看起来是个高明的举动,因为旅程出发日期是3月,所以返回时间不可能是2月。

但事实上,用户会习惯于在右边的日历中寻找3月15日。

在我们的测试中,第2个弹出窗口中的月份位置变化会使用户感到困惑和延迟,但用户最终都能够明白过来。我们只用这个站点测试了为数不多的用户,但是如果你观察用户测试中这种几乎被忽视的错误,就会发现确实有可能在使用中犯错。

返回日期设定的错误可能导致严重的后果,顾客到达机场后却发现自己没有乘坐计划航班的机票。如果该站点有良好的确认邮件系统,用户可能会在出门前发现问题,但是这依然会使顾客感到愤怒,导致其不得不费力解决这种尴尬处境。

即便用户最终能够正确地使用日历,因不一致性设计而浪费的时间也要多于点击下个月按钮所需的时间。

这种设计只能够节省那些已经熟练操作此类UI的用户时间。所以,专业旅行社的应用程序或许可以使用类似Expedia的日历设计。针对普通消费者的站点则不提倡采用这种方法。

3、缺乏预知可用功能

“可用功能”指你能够使用对象来做的事情。比如,检验栏可用来打开和关闭页面,滚动条可用来上下移动页面。“预知可用功能”指你在使用前只需看到对象就理解的动作。

预知可用功能在UI设计中特别重要,因为所有的屏幕像素都可以点击,即便有些区域在点击后毫无变化。电脑屏幕上有这么多的可见内容,用户不可能有足够的时间一一尝试来寻找可以产生动作的选项。有时候小孩子喜欢点击屏幕上的内容来探索各种功能,这属于例外情况。

就拖动和放置设计而言,如果能够被拖动的事物或能够被放置的地方设计得不明显,那往往会成为最易冒犯用户的设计。相比之下,简单的检查栏和命令按钮已经足以显示用户可点击的内容。

常见的预知可用功能缺乏现象如下所示:

(1)用户说:“我能在这里做什么?”

(2)用户完全没有发现对他们有所帮助的功能。

(3)试图使用丰富的屏幕文字来解决这两个问题(游戏邦注:更糟糕的是,在你完成前面数个操作时,原先冗长而多级的操作指示就消失了)。

我在20世纪80年代测试首批Macintosh应用程序时,用户往往会对打开MacWrite等应用后呈现出的空白屏幕感到手足无措。我要用这个应用程序来做什么呢。首个步骤应当是创建新文件,但是这个命令并没有呈现在屏幕上,除非你碰巧下拉了“文件”菜单。随后,该应用程序发布更新,在打开程序所呈现的屏幕上添加打开空白文件的选项,用闪烁的光标来呈现“开始输入”的预知可用功能。

3.a、点击目标很小

这里还有个问题,就是点击目标过小,导致用户无法精确点击到合适的区域。即便用户正确地察觉到了相关可用功能,他们常常也会改变想法,开始认为这些功能是不存在的,因为他们点击后什么事情也没发生。对老年用户或有肢体技能障碍的用户来说,点击区域过小的问题特别严重。

4、缺乏反馈

就对话框可用性的提升而言,最基本的指导意见之一就是提供反馈:

(1)向用户展示系统的当前状态。

(2)告诉用户他们的命令已经被执行。

(3)告诉用户正在发生的事情。

如果站点保持沉默,用户便会开始猜测,而他们的猜测往往都是错误的。

有关反馈情况不良的实例,可以参考VW的汽车配置页面。因为用户无法分辨自己选择的是何种轮胎,所以在设计自己偏好的汽车时会遇到问题。

关键词:web设计

赞助商链接: