gdi+ 中发生一般性错误。_应用设计的十大错误

本文列举了应用设计中常见的十大错误,包括缺乏反馈、信息不一致、不合格的错误信息、缺少默认值、未标注的图标、难以理解的目标、过度使用弹出窗口、无意义的信息、垃圾菜单和高风险操作与确认按钮相距过近。提供清晰的反馈、保持信息一致性、提供有意义的默认值等策略可以显著提升应用的可用性。
摘要由CSDN通过智能技术生成

41604cda8916d45a27d0e12272be1649.png

摘要:高可用性程序的UI会帮助用户完成他们的操作流程。

作者语:设计一个复杂的应用是充满挑战性的。构建一个既支持复杂的任务,又能直观说明如何完成流程的应用则更甚。对常见的应用程序的设计问题提出一般性建议很困难,因为我们发现很多问题都是针对特定的领域的。11年前写这篇文章的第一个版本时是如此,现在也是如此。

因此,我们的首要要做的是,对你的目标受众进行用户研究:

1. 从任务分析和实地研究(filed studies)开始,去了解用户的所需和工作流程。

2. 制作并测试低保真模型(low-fidelity),来勾勒出您的应用的基本结构和功能,而不是把资源浪费在废案上(从用户那里得到的、需要修改或放弃的方案)

3. 进行迭代设计(iterative design),并且对每一个版本进行小范围的内侧. 迭代次数越多,您的应用就会越完善。

尽管大多数apps的可用性问题有着特定领域的性质,但是我们经常能在各个行业的应用中看到10个常见错误。

以下是我们目前列出的十大应用设计的错误,这些错误既令人震惊又很常见。我们希望在下一个11年我们重新撰写这篇文章时,这些问题会得以减少。

1. 缺乏反馈

提升应用可用性的最基本的原则之一就是提供清晰明确的反馈:

  • 向用户展示系统当前的状态。
  • 告诉用户他们的命令和操作是如何被回应的。(这里猜测笔者的意思是利用微交互来反馈操作,比如按钮的点击动效)
  • 告诉用户发生了什么。

缺乏反馈和指引的app会让用户猜测。(发生了什么,或是该怎么做)通常他们会猜错。

良好的反馈会告诉用户很多东西——例如,他们点击的按钮是否会被系统正确地解释为“点击”,系统现在会做什么?当前选中的或当前的行为是什么?

举个例子,当程序处于编辑模式时,用户必须清楚当前可编辑的内容,因为在编辑模式下会与常规有所不同——比如,有些应用是表格中的某个单元格或某一行可编辑,另一些应用是整个表格可编辑。所以应当清晰地反馈并告诉用户可编辑的范围;好的反馈有很多方式,从使用不同的背景去标识当前可编辑区域,到改变相关按钮的状态,都能清楚的显示其功能。

16df8574544b66935dbae2a2b6c17da4.png
图中,这个来自http://telerik.com应用在可编辑的框下面加了灰色的阴影,更改单元格以使其看起来像是表单,并将“edit”和“delete”按钮更换为“update”和“cancel”,使用不同的布局和样式。改变按钮的位置和颜色是此反馈中的一个重要的信号,它降低了用户在编辑后点击错误按钮的可能性。这种反馈清楚地表明了系统发生了什么,以及它如何响应用户的输入。

1.a. 没有进度指示器(progress indicator)的加载

另一种缺乏反馈的情况是,系统没有告知用户需要长时间去完成一个行为。用户经常会认为程序是不是出错了,有可能他们会点击其他目标。

所以当程序加载需要时间时,请说明这一点,并让用户通过进度指示器随时了解情况

  • 如果一个命令需要等待2到10秒,显示一个等待的动效,例如一个“旋转的圆圈”,这种类型的进度指示器会告诉用户耐心一点,而不是在光标返回正常前点击其他的东西。
  • 如果命令需要等待超过10秒,请放置一个进度指示条(progress bar),最好是带有百分比的。(除非你真的无法预测在完成之前还有多少工作要做)

2. 信息不一致

记住一个原则:差异使人感到困惑。当用户对某些事物的使用方式和访问的位置已经有了一个基本预期时,偏离这些预期会导致混乱和沮丧,并且会增加人们的认知负荷,人们渴望思维的一致性。

在一个复杂的应用中,有些不一致性的例子非常典型,甚至那些老练的用户也会感到困惑。

  • 把不同的词用在一个相同的操作中。
  • 把一个相同功能的控件放在许多不同的位置。
  • 控件看起来彼此相似 (从用户的角度)但是要从不同的位置才能找到。(比如,控件1在工具栏,控件2在菜单,控件3在首选项中访问)
  • 类似的操作流程却要在界面的不同部分进行交互。
  • 输入数据正确规则不一致:有时候允许这么输入,有时候却又被标记无效,没有任何反馈告知用户为什么会这样。
  • 一个特性有时候是可用的,有时候出于一些神秘的原因不可用。
  • 飘忽不定UI控件,违反了空间的一致性(spatial consistency)

在我们的研究中,有一位建筑师有多年的AutoCAD使用经验,她很难搞懂如何把界面上各种浮动面板固定到界面的一侧。在一次使用中, 她多次尝试将浮动面板固定在左侧,但无济于事,事实证明,由于隐藏的参数设置,这个特定的面板无法固定,但这个限制并没有告知用户。隐藏的设置旨在让高端用户能随心所欲自定义界面。但是,由于反馈不佳,我们的研究对象无法弄清为什么有时可以有时不行。即使对有经验的用户来说,这种不一致也是会令人沮丧的。

e605c7ec51a30538f656ffca4deb7024.png
AutoCAD 始终没有告诉用户如何把面板放在屏幕的一侧。即使是经验丰富的用户也不知道为什么此功能会在这个面板上而不是其他的面板。(原来是一个隐藏参数关闭了这个面板)

3. 不合格的错误信息

错误信息是一个特殊的反馈:它告诉用户他们做了哪些错误的操作。

最常见的例子就是错误信息只提示出错了,并没有解释为什么出错,以及如何解决问题。这类信息会使用户困惑。

这个问题近年来变得更加严重,尤其是网页应用:用户看到了报错和重试按钮。但给出的信息没有解释原因或如何修复错误。至少以前的桌面应用会告诉用户问题是什么(通常是技术术语,也不指望一般用户会明白)

9cc8af658456833e9f405cf9d1a7e824.png
一些含糊不清的错误信息 Quicken (左上), Dropbox (右上), IBM Verse (底部): 它们都没有告诉用户如何避免这些问题,以及用户的数据是否在这个错误中丢失了。 一个好的错误信息不仅要能为用户解决当前问题,而且还可以教导用户。虽然人们很少花时间了解应用的功能,但如果你清楚的解释了,用户会去理解哪里出错了,因为他们会想要解决问题。

4. 没有默认值(default values)

默认值可以很好的帮助用户,比如:

  • 如果该默认值是用户接受的,那么可以省去很多事。
  • 提供一个事例教导用户如何使用应用
  • 新手用户往往不知道做什么,默认值可以帮助他们正常使用。

默认值可以在重复性任务中为用户节省很多工作量,比如多次填写相同的表单(form)。识别并自动填写这些值可以提高生产效率并减少挫败感。

尤其是下拉列表(dropdown menus)更受益于默认值。许多应用强制用户打开下拉列表并选择一个选项。如果你预先提供一个选项,很多用户则可以不用打开下拉列表。

如果是数字表单,可以使用数值调整按钮来调整数字(仍然允许用户键入数字)。使用按钮有两个好处:降低交互成本(interaction cost),并为仍在学习系统的新手提供合理的起点。

d3392a028369d64d91be2d504889b5d1.png
个人理财应用Mint有帮助用户找到符合其需求的信用卡的功能,该向导通过自动导入用户的平均每月信用卡消费,并提供给用户一个简单的方法去修改这个数字。

5. 未标注的图标

图标单独存在是非常罕见的,大多数用户不能立刻理解他们。即使是看似普通的图标(比如汉堡菜单)也不一定被用户所熟知。如果你的应用只有图标,则会变得更糟;用户很可能不会理解这个图标。记住一条定律 “用户将更多的时间花在其他网站上。” 这意味着大多数单独的图标用户不会理解,除非你有文字标注。

图标配文字有四个好处:

1. 增加目标的大小(减少用户寻找和点击的时间)

2. 减少识别时间:两个信息(图标和文字)优于一个

3. 促进界面的学习

4. 帮助用户在视觉上区分彼此相邻的几个命令

768dd64cd7df0e30c82c0df028c230dd.png
我们在研究中选择了一些没有标注的应用图标,这些都是非标准图标且未明确指出其用途。你能猜出它们代表什么吗?反正我们的研究对象不能。

6. 难以理解的目标

在人机交互中,任何可以点击的东西都称为目标:所有活动的UI元素都是目标。用户要获取目标,他们必须能够(1)识别;(2)点击。而这两个方面都会引发一些问题。

6a. 缺乏指示

"功能可见性(Affordance)" 指的是你能做什么。举个例子,一个复选框可以打开和关闭,一个滑块可以上下移动。能指(signifiers)是一种视觉元素,这种指示性元素可以让你在使用产品之前了解它可以做什么。(关于Affordance和signifiers的概念是作者Don Norman在《The Design of Everyday Things》中提出的,对于这两个的概念知乎上的回答比较易懂)

Signifier 和 affordance 的区别是什么?​www.zhihu.com

UI设计中,指示符非常重要,因为整块屏幕都是可以点击的。如果没有指示性的元素,用户就会像在玩扫雷一样乱点一通看哪里是可以点的。

在当今的应用中最明显违反这一点的是超扁平(ultra flat)设计。许多扁平化设计(flat design)的指示性太弱了,因为按钮缺乏传统的3D线索,人们很难从按钮中分辨出文字。

指示缺乏导致的几种常见情况:

  • 用户:“我在这儿干嘛呢?”
  • 用户没有用到真正能帮到他们的功能
  • 为了解决上面两个问题,用大量的文本去解释

6b. 点击目标太小

目标太小的话,用户可能会忽视掉,或者点击到了其他的区域。即使用户看到了目标,也可能会觉得这不是他们要访问的地方,因为他们认为点击它并且也不会发生什么。

7. 过度使用弹出窗口(modal windows)

许多应用使用弹出窗口去执行数据的交互——编辑现有项目、添加新项目、删除或是查看某个项目的详细信息。弹出窗口通常出现在页面的最上层,背景内容通常变暗。(背景变暗会减少干扰,让用户专注于窗口中的任务). 但是,这种设计方式会在用户填写表格(table)时掩盖住它们可能希望参考的信息。(请注意,即使被遮盖的窗口不包含编辑所需要的信息,用户也会经常利用他们完成之前的工作,复制和粘贴以前的输入,甚至只使用以前的条目作为模板来编辑当前的任务)

bcf0f5e8f39b6feed4b39c8452836486.png
在Airtable(一种图表制作工具),编辑一个图表会打开一个弹出窗口,覆盖了底下最重要的信息,阻止用户引用那些信息。

8. 无意义的信息

长字母和数字字符串(例如数据库中自动生成的ID)经常用于应用中某项目的唯一标识。这些字符串对用户来说没有任何意义,但它们通常显示在表格的第一列,迫使人们去看这一行然后查找他们关心的信息。虽然这串字符对后端很重要,但他们不应该是用户必须参考的主要信息,尤其是在高信息密度的屏幕中,应当提供一些人们可读的信息,并将字符代码放到不太突出的位置。

医疗应用程序经常使用大量的编码信息,还有CRM系统(客户关系管理系统,是管理客户数据的一套方案,用户经常在和他们的顾客进行销售交互时选择这些代码)、会计软件和企业应用程序。在所有这些应用中,通过短代码总结对人有意义的信息,以使其更紧凑。短代码可能比整个代码更适合小区域,但对用户的认知负担更高。他们需要翻译编码信息以理解它。即使是专业人员也无法记住每一个代码,而且他们仍要花很多功夫翻译。

4c219a56ced83d377b98d976cb107cc3.png
该表把无意义的长代码放到第一列,里面的LOCATION NAME是唯一对人们有意义的一列。

9. 垃圾菜单

如果你的应用有成百上千的功能,则必须在某处对这些功能进行控制,此外,你需要对其进行优先级排序,以便用户可以轻松找到并快速访问最重要的功能。弄一个溢出菜单是最常见的方式:最常见的操作显示在工具栏中,其他的标记为“更多操作”或“工具”。更夸张一点,可以放进所有不常用的操作。

这些菜单标签的信息线索很低,只是个放置所有你无法分类但又不想扔掉的东西的地方,是个垃圾抽屉。这种抽屉经常出现是因为项目团队有一个必须功能的列表,但又不知道该放在哪里;或者是他们不舍得删除那些食之无味,弃之可惜的功能。溢出菜单就像是你家的垃圾桶一样,没人知道你会放什么放。换句话说,他限制了功能的可发现性可查找性,因为大多数用户没有理由去查看这些菜单。

a3e22f35e68952e7c98e6d3c307e3336.png
还是那个图表应用Airtable里面的一个垃圾抽屉菜单,几乎没有信息线索.用户可没有时间去猜测菜单里面有什么。

c5eb93bb37ac6d1757e6b93a1ecd4d3f.png
营销应用Salesforce中的垃圾抽屉菜单。

10. 高风险操作和确认相距太近

将“保存”这一类的操作放的与高风险的操作旁边的情况非常常见,这会给用户带来很多麻烦。虽然逻辑上这个位置通常是有意义的(例如 保存 和 删除 是相关的,因为他们决定了整个项目的存留)但也很容易点击到错误的按钮——特别是当用户在匆忙之时。

3eb5d462e9b3479e5424e43fc687a881.png
企业备份应用Veeam有多步向导来帮助用户备份,在我们的研究中,用户花了将近20分钟来完成此向导,并且由于两个按钮很接近。如果这个用户不小心点了 取消,那么这20分钟就打了水漂。

7882b5b2ee92f6158f934cc95888c6e9.png
微软Outlook 将“Follow-up”按钮放在存“存档”和“删除”图标旁边。这些图标的功能和意图相反,又小又排列紧密,很容易被用户匆忙误解。

总结

不同的应用适于不同领域,因此对于一个行业而言,可用,高效且令人愉快的应用在另一个行业领域中是一种彻底的灾难。创建可用的应用需要和你的用户一起研究,以确定他们的工作流程、需要的功能,以及他们的期望。

此文列出的10个应用程序的错误代表了我们在各行各业的研究中观察到的共同主题,包括创意、金融、企业、医疗保健、工程等行业。非常具有代表性,希望大家引以为戒。

专业词汇

field study 实地研究

prototype 原型

low-fidelity 低保真

iterative design 迭代设计

progress indicator 迭代设计

progress bar 进度条

spatial consistency 空间一致性

default value 默认值

form 表单

dropdown menus下拉菜单

interaction cost 交互成本

affordance 示能

signifier 能指,意符

ultra flat 超扁平

flat design 扁平化设计

modal windows 模态窗口,可理解为弹出对话框

table 表格

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值