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个可用性违规列表,这些违规是特别恶化,并且经常在各种应用中看到。


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."


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

我们的测试用户在不停地点击了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丢失的客户数量增加了



2. Inconsistency


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

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


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

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.



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

即使人们最终使用正确的日历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.


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.)



  • 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.




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进度条优选地作为百分比的指标(除非您真正无法预测,直到操作完成,否则剩下了多少工作)。


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.



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.


对于关键任务应用程序,您通常可以假设大多数用户以前多次尝试了应用程序。您还可以常常认为新用户在自己看到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.


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.)