简体繁体 English

UI是否应显示不可用的操作？

[英]Should a UI display actions that are not available?

原文 2009-02-27 07:42:44 6 11 user-interface/ usability

What is currently regarded as best practice in UI design for displaying actions that are not available in the current context. 目前在UI设计中被视为最佳实践，用于显示当前上下文中不可用的操作。

For example, A page displays customers who can have many associated contracts. 例如，页面显示可以拥有许多相关合同的客户。 I do not wish to allow the user to delete a customer if there are active contracts. 如果有活动合同，我不希望允许用户删除客户。 From a usability and UI perspective what is considered the best for the user experience. 从可用性和UI角度来看，最适合用户体验的是什么。

Always show the delete option but warn the user when he selects it that the option is unavailable because there are active contracts. 始终显示删除选项，但在用户选择该选项时因为存在活动合同而警告用户。
Show the delete option but grey it out. 显示删除选项但灰显。
Do not show the delete option at all 根本不显示删除选项

Always showing the option has the benefit of consistency and the relevant actions are consistently in the same place etc, but conversely what is the point of showing them something they can't do. 始终显示选项具有一致性的好处，相关操作始终在同一个地方等，但相反，向他们展示他们不能做的事情的重点是什么。

Greying the option out still has consistency but does not allow them to select the action that they can not perform. 使选项变灰仍然具有一致性，但不允许他们选择他们无法执行的操作。

Not showing the option at all lacks consistency but will perhaps not be so confusing. 没有显示选项缺乏一致性，但可能不会那么令人困惑。

Before yesterday I would not have even asked the question and would have gone straight for option 2 (Greying out) however having watched a user try to click on the greyed out image many times and eventually asking me why they couldn't click on the button I am no longer sure what the best option is. 在昨天之前我甚至不会问这个问题，并且会直接选择选项2（灰色显示）然而看到用户尝试多次点击灰色图像并最终问我为什么他们无法点击按钮我不再确定最好的选择是什么。

What do people with usability and UI testing experience feel is the best option? 具有可用性和UI测试经验的人最喜欢什么？

11 个解决方案

My approach (and recommendation) would be that the button be grayed out as per your option #2. 我的方法（和建议）是按钮按照你的选项＃2 变灰。

When the UI is sparse and sufficient real-estate is available, having inline (up-front) contextual hints (such as the question mark approach suggested by Freddy, next to the button, detailing the problem in-line eg always display under the disabled button "No users to delete. Add some by going to (link)this tab(/link)!") can be desirable. 当UI稀疏并且有足够的空间可用时，具有内联（前期）上下文提示（例如Freddy建议的问号方法，在按钮旁边，详细说明问题在线，例如始终在残疾人下显示）按钮“没有用户删除。通过转到（链接）此选项卡（/链接）添加一些！”）是可取的。

However, such inline hints or question marks that appear occasionally can complicate layout or hamper the effectiveness of the interface when real-estate is at a premium. 然而，当房地产非常宝贵时，偶尔出现的这种内联提示或问号可能会使布局复杂化或妨碍界面的有效性。 In such cases it may be better to have an overlaid hint (a baloon or tool-tip) that appears when hovering over the disabled button as well as when clicking on the disabled button (ie the user manifests intent by approaching the disabled button with his/her cursor); 在这种情况下，当将鼠标悬停在禁用按钮上时以及单击禁用按钮时（或者用户通过接近禁用按钮表现出意图）时，可能会更好地显示重叠提示 （气球或工具提示）。 /她的光标）; the tip should explain why the button is disabled and grayed out, ie "There are no users to delete." 该提示应解释为什么按钮被禁用并变灰，即“没有用户要删除”。

The above should take care of all (typical as well as pathological) cases. 以上应该照顾所有（典型的和病理的）病例。 It combines the advantages of your #2 and #3 options, with hopefully none of the disadvantages. 它结合了＃2和＃3选项的优点，希望没有任何缺点。

Raymond Chen (of The Old New Thing fame) provides good guidelines: Raymond Chen（The Old New Thing成名）提供了很好的指导方针：

When do you disable an option and when do you remove it? 什么时候禁用选项，什么时候删除它？

From the blog entry: 来自博客文章：

Experiments have shown that if something is shown but disabled, users expect that they will be able to get it enabled if they tinker around enough. 实验表明，如果某些内容被显示但已被禁用，则用户希望如果他们足够修补就可以启用它。 So leave a menu item shown but disabled if there is something the user can do to cause the operation to become available. 因此，如果用户可以执行某些操作以使操作可用，则保留显示但禁用的菜单项。 For example, in a media playback program, the option to stop playback is disabled if the media file is not playing. 例如，在媒体播放程序中，如果未播放媒体文件，则禁用停止播放的选项。 But once it starts playing, the option becomes available again. 但是一旦它开始播放，该选项再次可用。

On the other hand, if the option is not available for a reason the user has no control over, then remove it. 另一方面，如果由于某个原因导致用户无法控制该选项，则将其删除。 Otherwise the user will go nuts looking for the magic way to enable it. 否则，用户将疯狂地寻找启用它的神奇方式。 For example, if a printer is not capable of printing color, don't show any of the color management options, since there's nothing the user can do with your program to make that printer a color printer. 例如，如果打印机无法打印颜色，请不要显示任何颜色管理选项，因为用户无法使用您的程序将该打印机变为彩色打印机。

I was always taught that removing objects from the UI was far more disconcerting for a user than disabling. 我总是被告知，从用户界面删除对象比禁用用户更令人不安。 Don't design for the .01% who cannot be helped! 不要设计为无法帮助的.01％！

You want your UI to be consistent, whatever the particular state. 无论特定状态如何，您都希望UI保持一致。 A lot of users rely on visual memory to remember the location of commands. 许多用户依赖可视内存来记住命令的位置。 Having to search for particular action every time is too much effort and is drawing the users attention from their main work in the app. 每次都必须搜索特定的操作是非常费力的，并且正在吸引用户对他们在应用程序中的主要工作的关注。

Thus, it's best to show the action to keep it in the visual context. 因此，最好显示将其保持在视觉上下文中的操作。 However, visibly indicate that the state of this action is modified. 但是，明显表示此操作的状态已被修改。 This will give the user feedback that the action exist while still suggesting some condition needs to be met to allow the user to undertake the command. 这将向用户反馈该操作存在，同时仍然建议需要满足某些条件以允许用户执行该命令。

Changing the color saturation is the most common approach to representing the disabled state. 更改颜色饱和度是表示禁用状态的最常用方法。 It makes the UI element to fade out in the background. 它使UI元素在后台淡出。

I suggest option 1). 我建议选项1）。 I'll tell you why. 我会告诉你原因。

Option 3) (Worst) "Do not show the delete option at all" This doesn't even make the user aware that there is even such a feature existing. 选项3）（最差） “根本不显示删除选项”这甚至不会让用户意识到甚至存在这样的功能。 So it is the worse way to deny. 所以这是更糟糕的拒绝方式。

Option 2) "Show the delete option but grey it out" 选项2） “显示删除选项但灰显了”

Better than 3) but user may keep wondering why he is denied the functionality. 优于3）但是用户可能会一直想知道为什么他被拒绝了这个功能。 He may also start to think that he is not a priviledged user and is lacking rights. 他也可能开始认为他不是一个特权用户，而且缺乏权利。

Option1) "Always show the delete option but warn the user when he selects it that the option is unavailable because there are active contracts." 选项1） “始终显示删除选项，但在用户选择它时警告用户选项不可用，因为有活动合同。”

This will clearly tell the user what is missing and educate him about the exact functionailty. 这将清楚地告诉用户缺少什么，并教育他确切的功能。 Users are always happy to work on a transparent system which doesn't throw them puzzles. 用户总是乐于在一个透明的系统上工作，而这个系统不会让他们陷入困境。

For this particular case, option 2 is the best choice. 对于这种特殊情况，选项2是最佳选择。 When deciding whether to hide something or disable it, the general rule I follow is: 在决定是否隐藏某些内容或禁用它时，我遵循的一般规则是：

If the user cannot perform an operation and there is something they can do to enable it, then it should be disabled. 如果用户无法执行操作并且可以执行某些操作来启用它，则应禁用它。

If the user cannot perform an operation and there is nothing they can do to enable it, then it should be hidden. 如果用户无法执行操作并没有什么可以做，以启用它，那么它应该是隐藏的。

In your example, if the user gets rid of the active contracts then they can delete the customer. 在您的示例中，如果用户摆脱了活动合同，那么他们可以删除客户。 So the delete operation should be disabled since they have control over enabling it. 因此，应禁用删除操作，因为它们可以控制启用它。 However, say the user could not delete the customer because they did not have the “delete customers” permission. 但是，假设用户无法删除客户，因为他们没有“删除客户”权限。 In this case, the delete operation should be hidden since there is nothing the user could do that would allow them to be able to delete the customer (they cannot give themselves the permission). 在这种情况下，应该隐藏删除操作，因为用户无法做任何事情可以让他们能够删除客户（他们不能给自己许可）。

Whenever an option is disabled, it should be clear what needs to be done to enable it. 每当禁用一个选项时，应该清楚启用它需要做什么。 In this example, when the user moves the mouse over the delete button, they should see a tooltip explaining why the operation is disabled. 在此示例中，当用户将鼠标移到删除按钮上时，他们应该看到工具提示，解释禁用操作的原因。

On a side note…if users are trying to click your disabled buttons, it may not be obvious enough that the buttons are disabled. 另外注意......如果用户试图点击禁用的按钮，则禁用按钮可能不够明显。 Try changing the style of the buttons so there is a greater distinction between enabled and disabled (assuming you are not using standard controls). 尝试更改按钮的样式，以便在启用和禁用之间有更大的区别（假设您没有使用标准控件）。

For that scenario use 2, but add a question mark besides that explains why it is disabled. 对于该场景，请使用2，但除此之外还添加一个问号，以解释为何禁用它。 Update 1: Notice that it gives you the opportunity to be really clear on when it will be active/disabled. 更新1：请注意，它使您有机会清楚它何时处于活动/禁用状态。

I prefer showing the options, but greyed out. 我更喜欢显示选项，但是显得灰暗。 Here is why. 这就是原因。 If an action is sometimes available and sometimes not, the UI gets confusing. 如果某个操作有时可用且有时不可用，则UI会让人感到困惑。 It seems like magic that I can sometimes see the delete and sometimes not. 我有时会看到删除有时看起来像魔术，有时候看不到。 On the other hand, if it is greyed out, at least I know where to look for the option later. 另一方面，如果它是灰色的，至少我知道以后在哪里寻找选项。

Just apply the Principle of Least Surprise : don't do anything unexpected. 只应用最小惊喜原则 ：不要做任何意想不到的事情。

A greyed out option clearly mean that it's not available in the current context. 灰色选项显然意味着它在当前环境中不可用。
A missing option could mean anything. 缺少选项可能意味着什么。

One area where you would consider completely removing UI elements from sight would be when your application provides multiple levels of accessibility (for instance, Novice, Intermediate, Expert) or when user accounts follow some security roles where a 'guest' user isn't meant to access the full interface that a 'manager' user would for instance. 您可以考虑从视觉中完全删除UI元素的一个区域是，当您的应用程序提供多个级别的可访问性（例如，新手，中级，专家）或用户帐户遵循某些安全角色时，其中“访客”用户不是例如，访问“经理”用户的完整界面。

There are times when removing toolbar buttons is the correct way, but generally. 有时候删除工具栏按钮是正确的方法，但一般情况下。

Removing it just makes the user wonder where it is. 删除它只是让用户想知道它在哪里。 Whereas, disabling lets the user know where it is, but that it's not available. 然而，禁用允许用户知道它在哪里，但它不可用。 So instead of wasting time trying to see where the option is, they can spend the time finding out why it's not available. 因此，他们可以花时间找出无法使用的原因，而不是浪费时间去查看选项的位置。

The second option, greying out the delete option should be enough. 第二个选项，灰色删除选项应该足够了。 Adding a questionmark to explain, as suggested, seems like a good idea to me. 正如所建议的，添加一个问号来解释对我来说似乎是一个好主意。 Otherwise, the user probably has no idea why he can delete some customers, some not. 否则，用户可能不知道为什么他可以删除一些客户，有些则不然。

But you always have to consider the possibility that while user A has already opened the UI, with the delete option enabled, user B enters a new active contract. 但是，您始终必须考虑这样的可能性：当用户A已经打开UI时，如果启用了删除选项，则用户B将输入新的活动合同。 So if user A wants to delete the client, you still need to check that there are no active contracts, and show an error message if there are. 因此，如果用户A想要删除客户端，您仍需要检查没有活动合同，并显示错误消息。 In other words, you still have to implement everything the first option requires. 换句话说，您仍然必须实现第一个选项所需的所有内容。 For that reason, I'd likely choose the first option, always show leave the delete option visible and active, to avoid duplication of code and to offer the most consistent behaviour. 出于这个原因，我可能会选择第一个选项，始终显示删除选项可见和活动，以避免重复代码并提供最一致的行为。