在本文底部下载Jakob的可用性启发式#3的免费海报。

Jakob Nielsen’s thirdusability heuristicfor user interface design is用户控制和自由. This principle states:

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Part of a great user experience is nurturing users’ feeling of control over the user interface (UI) they happen to be using.Users should be able to quickly correct mistakes or backtrack on choices made. The ability to easily get out of trouble encourages exploration, which facilitates learning and discovery of features. It also increases overall use and sales (in the case of exploring a product space). Conversely, when the UI doesn’t support these actions, users feel trapped and typically report dissatisfaction.

该re are several UI controls that typically allow people togo back to the previous state of the system:

  • A背部link which returns users to a previous page or screen
  • A取消链接允许用户退出任务或多步骤
  • ACloselink which allows users to close a new view
  • An撤消option (and a corresponding redo option) to allow users to backtrack on a change to a UI element

始终允许用户返回一步

Whenever users click a link to open a new page, screen or view, they should always be able to go back to where they came from. On the web, users rely on the browser’s背部button to navigate to the previous page in usability testing, we often see some users defaulting to the browser’s背部button when navigating a website, rather than using the website’s own navigation (such as breadcrumbs). This is one of the reasons why we recommendnot to open links in new tabs indiscriminately因为有些用户没有注意到它们在一个新的标签中并挣扎回去。

Never stop users from leaving your site by disabling the browser背部按钮。有些网站故意使其网站粘性,防止用户返回搜索引擎。虽然用户将在您的网站上贴在您的网站上,但如果使用此策略这种设计选择往往是优先考虑的结果vanity metricsover tangible UX goals. Instead of trapping users by disabling the背部button, sites should offer users valuable content to make them want to stay.

Nonfunctioning browser背部纽扣也可以在某些在线表单上找到,因为向后移动可能会破坏底层逻辑。在某些情况下,用户可以使用浏览器背部按钮但不是返回上一个屏幕,他们收到超时消息并失去工作。在可能的情况,build forms where userscanuse the browser's背部button. If the design makes this impossible, warn users when they click the browser’s背部按钮并为他们提供有机会取消此操作。设计师还应该探索创建一个背部链接或a clickable progress bar that help users move back through the form without losing work.

Four screenshots from Delta's mobile app are displayed. The first screen shows several available flights for a search from Detroit to Honolulu. The second screen shows one flight has been selected. There is a back button at the top of the screen. When the back button is pressed, a overlay message is displayed (shown on screen 3) which asks the user if they want to continue booking or search for a new flight. Selecting search for a new flight takes the user back to the beginning where they have to enter their search criteria, rather than to the previous list of all available flights.
On Delta’s app, once a flight is selected, there’s no way for the user to move back to the list of the flights without having to begin the search all over again. In this case, the背部link doesn’t function as expected, because it doesn’t allow the user to move one-step backward. Instead, the背部链接用作“取消”链接。像这样的人让他们犹豫不决探索潜在航班,从而可能会降低销售额。
Two screenshots from Delta's mobile app are displayed. On the first screen, the user has a selected a flight to view. When the back button is pressed, an overlay message is displayed (shown on screen 2) which asks the user if they want to continue booking this flight by staying on the page or whether they'd like to search for a new flight.
On Delta’s app, once a flight is selected, there’s no way for the user to move back to the list of the flights without having to begin the search all over again. In this case, the背部link doesn’t function as expected, because it doesn’t allow the user to move one-step backward. Instead, the背部链接用作“取消”链接。像这样的人让他们犹豫不决探索潜在航班,从而可能会降低销售额。

Meet Users’ Expectations When Using a背部Link

当呈现时overlay or lightbox, users often get disoriented and think they are on a new page — especially where overlays take up the whole screen. Therefore, to return to the previous screen, users often use the browser’s背部button instead of tapping aClose链接或X图标。此动作具有将用户带回两步,而不是一个,导致混淆和迷失方向的效果。

In a recent mobile usability-testing session, a participant used the browser’s背部button on a full-screen overlay and was taken out of the overlayand出于返回的页面。参与者评论说:“我不希望被带出那个页面(......)如果我点击回来,它会把我带出我的页面。它不会让我回到我弹出的页面。“

When it’s possible that users mistake the overlay for a new screen — whether on desktop or mobile —ensure the背部button has the same effect as aCloselink.

A gif shows Asos.com, a clothing retailer. When a user selects a pair of shoes from the product listings page, and selects a link from within that page to view shipping information, a fullscreen overlay appears. Using the browser's back button (rather than the close icon) takes the user back to the product listings, rather than to the product overview page for the pair of shoes the user selected.
On ASOS.com, when a user selects the免费送货和退货link, a full-screen overlay appears. Tapping the browser’s Back button returns the user to the product listings, rather than the product-overview page.
Two screenshots from Wayfair.com are presented. A product overview page for an armchair is shown on screen 1. Underneath the product's title is the average rating (4.5) and a link to read the reviews. Clicking on the link opens up a drawer which fills the full screen. A back link appears at the top of the page to take the user back to the screen they were looking at before clicking the reviews link.
On Wayfair.com, clicking on the评论链接打开一个抽屉,该抽屉展开占用全屏。返回按钮(网站和浏览器)将用户带到初始产品概述页面,这是用户期望的。用户也可以从左到右向右滑动以关闭抽屉。

In mobile apps, users tend to transfer their knowledge of the背部button from their experience with the web and have the same expectation for it: that is a way to move back a step (from whichever direction the user came). Unfortunately, often designers mean it as a way of moving up in the application’s IA. As a result, users can easily get disoriented. In the example below, a user can swipe right to left to read another news story in BBC News’ app (the order corresponds to the way they’re listed vertically on the news listing page). However, users can’t use the背部button to return to a story they visited by swiping; using the背部button returns users one step up in the IA to the article-listings page, rather than to the previous article they visited.

A gif of the BBC News app shows a user clicking on a story from the main page and then swiping from right to left to move through stories. When the user selects the back button in the app, they are returned to the main page where all stories were listed.
After users click on a news story on the BBC News app, they can swipe through other articles in the list. The Back button takes the user one step up in the IA (back to the listing page), rather than to the article the user previously visited.

让退出链接轻松发现

Like in a physical space,exits should be easy to find and well signpostedso that they will be discovered when needed.

Follow设计标准when positioningClose,出口or取消迹象,这样用户可以很容易地找到它们they typically expect them. For example, on a lightbox overlay, users typically expect an ‘X’ icon in the top right corner of the overlay.

An image of an article on Harper's Bazaar's website. On top of the article appears a modal overlay. The close link appears outside of the modal overlay and is easily missed because it lacks contrast to the background, which is the article's image.
在哈珀的集市的网站上,apopup邀请用户考虑订阅。该Closelink appears in the bottom left corner outside of the overlay. This unusual placement, together with thepoor contrast to the background, makes it difficult to see.

除了放置出口signs in expected places, useuniversal iconsso users understand what the link does.Accompany icons with text labelsor substitute icons with plain text. For example, use背部instead of < andCloseinstead ofX.

Allow Users to Easily Cancel an Action

Whether a user is beginning a purchase, a transfer of money, or a large download, she should be able to cancel that task at any point. The取消选项应该易于查找和快速执行。即使在MultiSep流程中,用户也可以使用背部links in the place of取消, it’s best to provide a取消link to avoid unnecessary clicks.

A screenshot of a user beginning to compose a tweet on Twitter. The cancel link has been tapped which generates a dialogue asking the user whether they'd like to delete the draft or save it. Another cancel link appears to allow the user to undo the action.
When users begin to compose a tweet, they can easily cancel the task by selecting取消在屏幕的左上角。在这样做时,笨蛋ter presents the user with the option to delete the message or save a draft. This choice ensures users don’t accidentally lose work.

在移动设备上,一些设计师试图通过使用的空间来节省空间Xicon, instead of取消. Unfortunately, sometimesXcan be mistaken forClose, rather than取消. In some interfaces, it’s important to distinguish the difference between the two to avoid user error. IfX手段Closeand取消, then use an explicit text label (取消)or provide the user with a warning dialogue to avoid losing users’ work.

的截图Wealthfront应用(金融学pp) is shown. The user has begun a multi-step process to transfer money from an investment account to a current account. The user is provided the option to finalize the transfer, cancel the transfer through an 'X' icon and go back a step in the transfer process by clicking on a back arrow icon.
从HealthFront应用程序中的投资账户转移资金时,用户遵循续纹屏幕上的几个步骤。在屏幕顶部,用户可以使用箭头返回一步或选择Xto cancel the transfer. However, it’s not completely clear whether pressingXwill save the transfer arguments or cancel the transfer completely. In this case, it cancels the transfer entirely, so a取消label would have been better.

Support撤消

When a user makes a change to the status of a system, he should be able to easily undo that. Imagine accidentally deleting a whole paragraph of text and not being able to get it back!

撤消can be supported in many ways on an interface, not just through a simple撤消按钮。For example, if users add an item mistakenly to a shopping basket, they should be able to undo that change by removing the item.

An image of the shopping basket from the CVS pharmacy website. Some allergy relief eye drops have been added to the basket. A remove link appears below the item to allow the user to remove the item from the basket.
在电子商务网站上,如上从上面的CVS中,用户可以通过选择来撤消向购篮子添加项目Remove.
BBC新闻应用程序的IOS通知设置的屏幕截图。允许用户打开或关闭通知和声音的选项,也可以选择和取消选择通知的通知方式(例如,在通知中心或横幅中的锁定屏幕上)。
在更改通知设置时,用户可以使用删除和复选框撤消更改。
An interactive floorplan is shown from Mattamy's site. The user has made some changes to the floorplan by selecting additions from a panel that appears on the left of the page. On the right of the floorplan itself, several icons are shown with no labels. One icon is a backward facing arrow which has been highlighted in this image by the author.
家庭建设者哑铃提供了在其网站上的互动模式计划,为用户提供了一种探索几种可能的结构变化的方法。为了撤消编辑,用户取消选中左窗格的结构变化。不幸的是,这Resetbutton (highlighted) can easily be mistaken for an undo button.

If users are likely to make many actions in short succession, support multiple撤消andRedo. Undoing the last action is often not enough. For desktop users, it’s also a good idea to supportstandard keyboard shortcuts for power users.

Ensure撤消Is Discoverable

记住这一点shake-to-undo feature in iOS?这个功能是众所周知的,因为它很难发现。

For desktop designs, don’t assume your users will know that they can use a keyboard shortcut. It’s a good idea to give users a visible option to undo an action on the UI. This feature should be where users typically expect it. In WYSIWYG (What-You-See-Is-What-You-Get) applications like word processors and design software,撤消is usually in the toolbar or in the app’s menus. On web-based applications with nochrome, an撤消选项通常是上下文 - 它可能出现在瞬态零食栏或中contextual menu.

An image of Microsoft Word's toolbar. The edit menu category has been opened and the Undo Typing menu item has been selected. Alongside the menu items prompts to the user appears to show them that it's possible to activate this command by using keyboard shortcuts.
In Microsoft Word – like in many other WYSIWYG applications – users can find撤消andRedooptions from within the编辑menu. Users are also shown keyboard shortcuts for those actions.

If an撤消option is contextual, ensure it has good visibility in the UI. On Google Drive, when a user makes a change to a file, a snackbar appears in the bottom left corner of the window to confirm the change has been made and to provide an option to undo. Unfortunately, the message only appears for a few seconds. Users would need to know they want to undo and act quickly in order to make use of this feature. (It’s also possible to use keyboard shortcuts, but these are not listed in the UI.)

An image of the content of a Google Drive folder. Two documents are contained in this folder and a notification appears below to tell the user that a document has been successfully renamed. In this notification is a link to undo the action.
In Google Drive, an撤消仅当用户采取动作时,才可使用选项。在操作完成后,它显示为屏幕底部的小吃栏,但几秒钟后消失。

Conclusion

为确保用户使用您的产品具有自由和控制感,他们应该能够轻松放弃一项任务,返回一步,并撤消他们对系统状态所做的更改。通过思考仔细制作清除出口点和撤消功能,您可以让用户控制体验,而不是在您的设计中的怜悯。