It's hard to write a general article about application design mistakes because the very最糟糕的错误是具体领域的and idiosyncratic. Usually, applications fail because they (a) solve the错误的问题,(b)有错误的功能for the right problem, or (c) make the right features too复杂让用户了解。

Any of these three mistakes will doom your app, and yet I still can't tell you what to do. What's the right problem? What are the right features? What complicating curlicues can safely be cut from those features? For each domain and user category, these questions have specific and very different answers.

唯一的普遍建议是:而不是依靠自己最好的猜测base your decisions on user research

  • Conduct field studies and task analysis before deciding what your app should do.
  • 纸原型your initial ideas before doing any detailed design — and definitely before wasting resources implementing something you'd have to change as soon as you get user feedback.
  • 迭代设计那conducting many rounds ofquick user testingas you refine your features.

当然,人们不想听到我说他们需要测试their UI. And they definitely don't want to hear that they have to actually move their precious butts to a customer location to watch real people do the work the application is supposed to support.

一般想法似乎是真正的程序员不能让他们的笼子出来。我的观点恰恰相反:除非他们花一天,否则允许任何人在申请上工作,除非他们一天观察一些最终用户。

(无论你做什么,至少答应我:不仅仅是从“用户代表”或“业务分析师”的功能请求。获得可用性的最常见方法是听取用户而不是实际看他们要求规格总是错误。You must prototype the requirements quickly and show users something concrete to find out what they really need.)

All that said, there are still plenty of general guidelines for application UIs — so many, in fact, that we have a hard time cramming the most important into ourfull-day course on application UX。这是我的10个可用性违规列表,这些违规是特别恶化,并且经常在各种应用中看到。

1.非标准GUI控件

Basic GUI widgets —命令链接and buttons,单选按钮和复选框滚动栏,关闭盒子,等等 - 是表单的词汇单位对话框设计的词汇表。如果您更改这些单位的外观或行为,就像突然将外来词注入自然语言通信一样。DetviregøreLæserneforvirede(或者,恢复英文:Doing so will confuse readers)。

For some reason, homemade design's most common victims are滚动栏。For years, we've encountered non-standard scrollbars in our studies, and they almost always cause users to忽略了一些选项。是seeing this again this year,在研究中我们正在进行更新我们的课程Fundamental Guidelines for Web Usability。(链接文章包括违规滚动控制的屏幕截图。)

一些世界上最优秀的交互设计师甲型肝炎e refined the standard look-and-feel of GUI controls over 30 years, supported by thousands of user-testing hours. It's unlikely that you'll invent a better button over the weekend.

But even if your homemade design, seen in isolation, were hypothetically better than the standard, it'snever seen in isolation在现实世界。与经营标准GUI经验多年经验的人员将使用您的对话控制。

如果雅各布的法律is "用户花了大部分时间其他websites,“ 然后Jakob's Second Lawis even more critical: "Users have several thousand times more experience with standard GUI controls than with any individual new design."

如果您偏离对操作UI的控件的基本的预期,用户很可能会失败。而且,即使他们没有失败,他们也会花费大量的脑力试图运营不应该需要第二次思想的东西。用户的认知资源更好地了解应用程序的功能如何帮助他们实现目标。

1.a. Looking Like a GUI Control Without Being One

The opposite problem — having something that looks like a GUI control when it isn't one — can reduce usability even more. We often see text and headlines that look like links (by being有色orunderlined例如,但不可点记。当用户点击这些外观时,没有任何反应,他们认为该网站被打破了。(所以请遵守指导方针visualizing links。)

A similar problem occurs when somethinglooks like a button but doesn't initiate an action,或看起来像单选按钮,但不是一个选择。我们在目前的研究中找到了一个例子。

To design a custom-tailored shirt on Liste Rouge Paris, you must provide your measurements. As the following screenshot shows, there are two different paths through the application here, depending on whether your measurements are already on file with the tailor.

Partial screenshot of ordering process for custom-tailored shirts at www.listerouge-paris.com

我们的测试用户在不停地点击了New Customer按钮表示他确实是一个新的客户。不幸的是,这个屏幕元素根本不是一个按钮,而是一个不可点球的标题。

He was the only user to test this site because he encountered it during a task in which users could choose a site to visit (usually from a search listing). In this case, the user eventually overcame the confusion and proceeded to enter his measurements. If we had tested more users, a small percentage would have likely failed at this point. Each small error in dialog design reduces usage only by a small amount, but most UIs contain捆绑错误那and the丢失的客户数量增加了

除此之外,此屏幕还使用无线电按钮不正确。从理论上讲,所有五种选择都是相互排斥的,这会呼叫单选按钮。但在用户的工作流的心理模型中,实际上存在两个问题这里:(a)新的与旧客户,以及(b)如何为您的情况提供测量。只有在用户选择单个问题的选项之间时,您应该使用单个单选按钮。

因此,在上面的情况下,更好的设计将首先要求用户决定新/现有的客户问题,然后显示他们选择的选项的相关单选按钮。

2. Inconsistency

非标准GUI控件是一个特殊的设计问题的特殊情况。

当应用程序使用不同的单词或命令时,或者当它们在应用程序的不同部分中使用相同的单词时,当它们使用相同的单词时,会使应用程序使用不同的单词。同样,当事情迁移时,用户会混淆,违反display inertia

Using the相同的名称一样的在同一个地方让事情变得容易。

记住双D规则:差异很难

Another example from our current study: Expedia pops up a two-month calendar view when users specify the departure or return date for a trip. The composite screenshot below was taken in February and shows what happens when you want to book a trip that starts on March 10 and ends on March 15.

Two screenshots of date-selection widget (calendar) at Expedia.com

In the second pop-up, the month of March has moved to the left, leaving room for April to appear on the right. This may seem like a convenient shortcut, since there's no way the user would want a February return date when traveling out in March.

然而,实际上,用户在第一个弹出日历中出现的同一位置寻找3月15日:在最右侧的列中。

在我们的测试中,第二个弹出窗口在第二个月内的不一致位置导致了混乱和延误,但用户最终想到了它。我们只使用这个网站测试了一些用户,但如果您观察到这种情况几乎是错误的错误在用户测试中,通常是一个符号,即一些用户在实际使用期间将为真实错误。

预订错误的退货日期可能会产生灾难性的后果 - 客户可以在没有票证的情况下到达机场。如果网站有良好的确认电子邮件,用户可能会在出发前发现问题,但即使这将导致恶化和昂贵的客户支持调用来解决这种情况。

即使人们最终使用正确的日历ly, ittakes more time to ponder the inconsistent designthan the time users save by not having to click the next-month button for April departures.

在学习如何有效地操作UI的这一部分的非常频繁的用户,围绕周围移动的捷径仅节省了时间。因此,专业旅行社的应用可能应该使用Expedia的日历设计。目标均不应该是平均消费者的网站。(另见:更多日期输入UX。)

3. No Perceived Affordance

"Affordance" means what you can do to an object. For example, a checkbox affords turning on and off, and a slider affords moving up or down. "Perceived随力“是你刚才理解的行动看着at the object, before you start using it (or feeling it, if it's a physical device rather than an on-screen UI element). All of this is discussed in Don Norman's bookThe Design of Everyday Things

Perceived affordances are especially important in UI design, because all screen pixels afford clicking — even though nothing usually happens if you click. There are so many visible things on a computer screen that users don't have time for amine sweeping游戏,点击围绕希望找到可操作的东西。(例外:小孩子sometimes like to explore screens by clicking around.)

Drag-and-drop设计往往是最糟糕的罪犯,当它不明显,可以拖动某些东西或可以删除​​某些东西。(或者如果拖放或删除,会发生什么。)相比之下,简单的复选框和命令按钮通常会使它痛苦明显,您可以单击。

Common症状缺乏感知的能力是:

  • Users say, "What do I do here?"
  • 用户不会靠近一个帮助它们的功能。
  • 屏幕文本的级别尝试克服这两个问题。(更糟糕的是冗长,在您执行第一个操作后消失的多级指令。)

When I tested some of the first Macintosh applications in the mid-1980s, users were often stumped by the empty screen that appeared when they launched, say, MacWrite.What do I do here那indeed. The first step was supposed to be to create a new document, but that command was not shown anywhere in the otherwise highly visible Macintosh UI unless you happened to pull down theFile菜单。稍后的应用程序版本在屏幕上打开了一个空白文档,旨在邀请,闪烁的插入点,为“开始打字”提供了感知的可供选择。

3.a. Tiny Click Targets

An associated problem here is click targets that are so small that users miss and click outside the active area. Even if they originally perceived the associated affordance correctly, users often change their mind and start believing that something isn't actionable because they think they clicked it and nothing happened.

(Small click zones are a particular problem for老用户和有机技能的用户残疾人。)

4.No Feedback

提高对话框可用性的最基本指南之一是提供反馈:

  • 向用户显示系统的当前状态。
  • 告诉用户他们的命令是如何解释的。
  • Tell users what's happening.

保持安静的网站留下用户猜测。经常,他们猜错了。

(有关反馈不佳问题的示例,请参阅最近的屏幕截图VW的汽车配置关于我们当前的测试的文章报告:因为用户无法判断哪个轮胎被选中,所以他们遇到了他们首选的汽车。)

4.A.没有进度指标的午餐

A variant on lack of feedback is when a system fails to notify users that it's taking a long time to complete an action. Users often think that the application is broken, or they start clicking on new actions.

如果你不能满足推荐的response time limits,如此,并让用户了解正在发生的事情:

  • 如果命令超过1 second那show the"busy" cursor。This tells users to hold their horses and not click on anything else until the normal cursor returns.
  • 如果命令超过10秒那put up an explicit进度条优选地作为百分比的指标(除非您真正无法预测,直到操作完成,否则剩下了多少工作)。

5.错误的错误消息

Error messages are a special form of feedback: they tell users that something has gone wrong. We've known theguidelines for error messages近30年来,然而许多应用仍然违反了它们。

最常见的准则违规是当错误消息只是说出错时,没有解释原因和如何用户可以解决问题。这些消息将用户搁置。

Informative error messages not only help users fix their current problems, they can also serve as a教育时刻。Typically, users won't invest time in reading and learning about features, but they will spend the time to understand an error situation if you explain it clearly, because they want to overcome the error.

On the Web, there's a second common problem with error messages: people overlook them on most Web pages because they're buried in masses of junk. Obviously, having simpler pages is one way to alleviate this problem, but it's also necessary to使错误消息更加突出in Web-based UIs.

6. Asking for the Same Info Twice

用户不必多次输入相同的信息。毕竟,计算机非常擅长记住数据。用户必须重复自己的唯一原因是因为程序员懒惰,不要将答案从应用程序的一部分传输到另一个。

7. No Default Values

Defaults help users in many ways. Most importantly, defaults can:

  • speed upthe interaction by freeing users from having to specify a value if the default is acceptable;
  • teach, by example那the type of answer that is appropriate for the question; and
  • direct novice userstoward a safe or common outcome, by letting them accept the default if they don't know what else to do.

Because I used Liste Rouge Paris as a bad example under Mistake #1a, I thought I'd play nice and use them as a good example here. The tailor offers 15 different collar styles (among many other options) for people ordering custom-designed shirts. Luckily, they also provide good defaults for each of the many choices. In testing, this proved helpful to our first-time user, because the defaults steered him toward the most common or appropriate options when he didn't have a particular preference.

衬衫设计应用中的定制屏幕部分屏幕截图www.listerouge-paris.com
对话框在www.listerouge-paris.com上指定衬衫项圈(显示3个样式中的3个)。

8.将用户倾倒到应用程序中

Most Web-based applications areephemeral applications用户遇到他们冲浪的副产品。即使用户故意寻找一个新的应用程序,他们常常在没有a的情况下接近它conceptual modelof how it works. People don't know the workflow or the steps, they don't know the expected outcome, and they don't know the basic concepts that they'll be manipulating.

对于传统应用程序,这不太问题。即使有人从未使用过PowerPoint,他们也可能看过幻灯片演示。因此,在第一次双击图标之前,新的PowerPoint用户通常至少具有对应用程序的理解。

对于关键任务应用程序,您通常可以假设大多数用户以前多次尝试了应用程序。您还可以常常认为新用户在自己看到UI之前会获得一些培训。至少,他们通常会有附近的同事,他们可以在基础上给他们几个指针。一个好老板将给新雇用一些背景信息whythey're being asked to use the application andwhatthey're supposed to accomplish with it.

Sadly, none of these aides to understanding apply for most Web-based applications. They don't even apply for many ephemeralIntranet应用程序

可用性遭遇用户直接转换为应用程序的胆量而无需任何设置,以便让他们了解将发生的事情。不幸的是,最重要的是users won't reada lot of upfront instructions, so you might have to offer them in a short bulleted list or through a single image that lets them grok the application's main point in one view.

As an example, our test user who was trying to order a custom-tailored shirt was highly confused when the first screen in Hamilton Shirts' "Create Your Shirt" process displayed a fully designed shirt with an "Add to Bag" button. This screen mixed two metaphors: a configurator and an e-commerce product screen.

Screenshot of the upper part of the screen for the first step of Hamilton's shirt-design application

这是一个默认值没有有用的情况:想要设计自己衬衫的人不太可能想在第一个屏幕上购买预先设计的衬衫。

(此屏幕也遭受了错误#1:非标准GUI控件。除了没有的选项卡式对话框中的非标准下拉选择菜单look enough like tabs那the screen has a non-standard way of paging through additional fabric swatches. Users are less likely to understand how to select fabrics when the controls are presented in this manner.)

我们的测试用户永远不会理解在本网站上设计自己的衬衫,并最终将他的业务置于其他地方。

9. Not Indicating How Info Will Be Used

通过工作流程迫使用户的最糟糕的实例而不使结果清除值得单独出现单独的错误:要求用户输入信息而无需告诉他们您将使用它。

经典示例是公告板应用程序注册过程中的“昵称”字段。许多用户没有意识到昵称将用于在其余的永恒的帖子中识别它们 - 所以他们经常进入一些不合适的东西。

As another example, we once tested an e-commerce site that smacked users with a demand for their ZIP code before they could view product pages. This was a big turn-off and many users left the site due to privacy concerns. People hate snoopy sites. An alternative design worked much better: It explained that the site needed to know the user's location so it could state shipping charges for the very heavy products in question.

10.以系统为中心的功能

Too many applications expose their dirty laundry, offering features that reflect the system's internal view of the data rather than users' understanding of the problem space.

In our current study, one user wanted to reallocate her retirement savings among various investments offered by her company's plan (for example, to invest more in bonds and less in stocks). She thought she did this correctly, but in fact she had changed only the allocation offuture additionsto her retirement account. Her existing investments remained unchanged.

As far as the mutual funds company is concerned, new investments and current investments are treated differently. Reallocating future additions means changing the funds they'll buy when the employer transfers money into the account. Reallocating current investments means selling some of the holdings in existing mutual funds and using the proceeds to buy into other funds.

这里的主要见解?

  • Our test user didn't have this distinction between new and old money; she simply wanted her retirement savings allocated according to her revised investment strategy.
  • Even users who understand the distinction between new and old money might prefer to treat their retirement savings as a single unit rather than make separate decisions (and issue separate commands) for the new and old money.

It would probably be better to offer a prominent feature for changing the entire account's allocation, and useprogressive disclosure透露想要在两类金钱之间更详细地进行更详细的用户的专家设置。

Bonus Mistake:Reset网页形式上的按钮

This mistake relates to Web forms, but because so many applications are rich in forms, I'll mention it here: It's almost alwayswrong to have aReset网络形式的按钮

重置按钮清除用户的整个输入并将表单返回到其原始状态。只有当它们重复完成具有完全不同数据的相同表单时,用户才希望它才能才能完全不同,这几乎从未发生在网站上。(呼叫中心运营商是一个不同的物质。)

让用户轻松实现在单击中销毁他们的工作violates one of the most basic usability principles, which is to respect and protect the user's work at almost any cost. (That's why you needconfirmation dialogsfor the most destructive actions.)