編輯導(dǎo)語：一款產(chǎn)品，無論是對于年輕人還是老年人來說，能夠給其帶來輕松的使用體驗(yàn)，方便其進(jìn)行探索，這樣才能使用戶不斷學(xué)習(xí)產(chǎn)品的功能，同時(shí)提高對于產(chǎn)品的滿意度和銷售量。那么，UI設(shè)計(jì)如何考慮到這些因素，并且實(shí)現(xiàn)用戶控制和自由呢？

Jakob Nielsen對用戶界面設(shè)計(jì)的第三種可用性啟發(fā)是用戶控制和自由度，該原則指出：

出色的用戶體驗(yàn)的一部分是培養(yǎng)用戶對他們正在使用的界面的控制感。用戶應(yīng)該能夠快速糾正錯(cuò)誤或回退所做的選擇。

輕松解決疑問，鼓勵(lì)探索，這有助于用戶學(xué)習(xí)和發(fā)現(xiàn)產(chǎn)品的功能。還可以提高功能模塊的整體使用率和銷售量。相反，當(dāng)UI不支持這些操作時(shí)，用戶會(huì)感到受困，并且通常會(huì)表達(dá)出不滿。

以下UI控件可以使人們返回到系統(tǒng)的先前狀態(tài)：

• 返回：返回用戶之前的頁面；
• 取消：允許用戶退出一個(gè)任務(wù)或多步過程；
• 關(guān)閉：允許用戶關(guān)閉新開的頁面；
• 撤銷選項(xiàng)（和相應(yīng)的重做選項(xiàng)）：允許用戶回溯到改變的UI元素。

一、始終允許用戶返回上一步

每當(dāng)用戶點(diǎn)擊控件跳轉(zhuǎn)到新頁面時(shí)，他們應(yīng)該始終能夠返回其來源。用戶在網(wǎng)站的可用性測試中依靠“返回”按鈕回到上一頁，我們經(jīng)?？吹揭恍┯脩粼跒g覽網(wǎng)站時(shí)默認(rèn)使用瀏覽器的“返回”按鈕，而不是使用網(wǎng)站的導(dǎo)航（例如面包屑）。

這就是為什么我們建議不要一味地在網(wǎng)站中選擇新開頁面的原因之一，因?yàn)橛行┯脩舨粫?huì)注意到他們位于新頁面中導(dǎo)致很難返回。

某些網(wǎng)站故意通過禁用瀏覽器的“返回”按鈕，阻止用戶離開網(wǎng)站。如果您也使用這種策略，雖然用戶會(huì)在您的網(wǎng)站上停留幾秒鐘（因?yàn)樗麄儫o法離開），但您很快就會(huì)感到沮喪。

畢竟這種設(shè)計(jì)選擇通常是優(yōu)先考慮數(shù)據(jù)指標(biāo)不是用戶體驗(yàn)?zāi)繕?biāo)的結(jié)果。網(wǎng)站不應(yīng)通過禁用“返回”按鈕來誘捕用戶，而應(yīng)向用戶提供有價(jià)值的內(nèi)容，讓他們主動(dòng)想留下來。

我們會(huì)在某些表單上看到“返回”按鈕無法正常使用的情況，因?yàn)椤胺祷亍笨赡軙?huì)破壞該表單的底層邏輯。

在某些情況下，用戶點(diǎn)擊表單的“返回”按鈕，他們會(huì)收到超時(shí)提醒并丟失掉已完成的操作，而不是正常的返回上一頁，通常產(chǎn)品應(yīng)該提供給用戶正常使用的“返回”按鈕。

如果設(shè)計(jì)無法做到這一點(diǎn)，請?jiān)谟脩酎c(diǎn)擊“返回”按鈕時(shí)警告用戶，并為他們提供取消此操作的機(jī)會(huì)。設(shè)計(jì)師還應(yīng)該嘗試提供可點(diǎn)擊的多步驟進(jìn)度條，以幫助用戶在不丟失已完成操作的情況下找回表單。

在達(dá)美航空的應(yīng)用程序上，一旦選擇了航班，用戶將無法返回到航班列表，而不必重新開始搜索。

在這種情況下，“返回”無法正常運(yùn)行，因?yàn)樗辉试S用戶向后移動(dòng)一步。相反，“返回”充當(dāng)了“取消”的功能。像這樣迫使人們不愿探索其他的航班，其銷售量可能會(huì)受到影響。

二、使用“返回”時(shí)應(yīng)滿足用戶的期望

當(dāng)頁面上顯示彈窗時(shí)，用戶通常會(huì)迷失方向，并認(rèn)為自己在新頁面上-尤其是彈窗層占據(jù)了整個(gè)頁面。

因此，要返回上一頁，用戶通常使用瀏覽器的“返回”按鈕，而不是點(diǎn)擊彈窗上的“關(guān)閉”或X圖標(biāo)。此操作的作用是使用戶退回兩個(gè)步驟，而不是一個(gè)步驟，從而引起混亂和迷失方向。

在最近的移動(dòng)設(shè)備可用性測試會(huì)話中，一位參與者使用了全屏彈窗上的“返回”按鈕，并從該彈窗和他打算返回的頁面中退出了。參與者評論說：“我不希望被帶出該頁面（…）。如果我點(diǎn)擊了’返回’，應(yīng)該回到我想回到的上一頁。但它并沒有帶我回到彈窗出現(xiàn)前的頁面?！?/p>

當(dāng)用戶有可能將彈窗誤認(rèn)為是新頁面時(shí)（無論是在臺(tái)式機(jī)還是在移動(dòng)設(shè)備上），請確保“返回”按鈕與“關(guān)閉”按鈕具有相同的效果。

在ASOS.com上，當(dāng)用戶在詳情頁選擇“免費(fèi)送貨與退貨”時(shí)，會(huì)出現(xiàn)全屏彈窗。輕擊瀏覽器的“后退”按鈕可將用戶返回到商品列表，而不是詳情頁。

在Wayfair.com上，在產(chǎn)品x詳情頁單擊“評論”會(huì)跳出一個(gè)浮層，該浮層會(huì)展開占據(jù)全屏?！胺祷亍卑粹o（網(wǎng)站和瀏覽器的）都將用戶帶到初始產(chǎn)品詳情頁，這是用戶所期望的。用戶還可以從左向右滑動(dòng)以關(guān)閉浮層。

用戶更期望移動(dòng)端應(yīng)用與他們對PC網(wǎng)站的“返回”使用期望一致：即“返回”即是后退一步。不幸的是，通常設(shè)計(jì)人員將其視為提升應(yīng)用程序信息層級的一種方式。結(jié)果，用戶很容易迷失方向。

在上面的示例中，用戶可以從右向左滑動(dòng)以閱讀BBC新聞應(yīng)用程序中的另一個(gè)新聞故事（順序與他們在新聞列表頁面上垂直列出的方式相對應(yīng)）。

但是，用戶無法使用“返回”按鈕通過滑動(dòng)來返回他們訪問過的故事。使用“返回”按鈕可將用戶返回至文章列表頁面，而不是他們訪問的上一篇文章。

三、使“關(guān)閉”易于發(fā)現(xiàn)

就像在物理空間中一樣，“出口”應(yīng)該易于發(fā)現(xiàn)并且指向清晰，以便在需要時(shí)可以發(fā)現(xiàn)它們。在設(shè)計(jì)“關(guān)閉”、“退出”、“取消”時(shí)，應(yīng)遵循設(shè)計(jì)標(biāo)準(zhǔn)，以便用戶可以按照期望的位置找到它們。例如，在浮層彈窗上上，用戶通常期望彈窗的右上角有一個(gè)“ X”圖標(biāo)。

在Harper’s Bazaar的網(wǎng)站上，彈出窗口邀請用戶考慮訂閱?！瓣P(guān)閉”按鈕出現(xiàn)在覆蓋的左下角附近，這種不尋常的位置，加上與背景的對比差，很難看清（高不來：很多APP的開屏廣告點(diǎn)擊范圍極小的流氓式“跳過”按鈕也同理）。

除了把“關(guān)閉”按鈕放置在用戶預(yù)期的位置之外，還請使用通用圖標(biāo)，以便用戶了解“關(guān)閉”的作用。帶有文本的圖標(biāo)或純文本的替換圖標(biāo)會(huì)更好理解。例如：使用“返回”，而不是“<”；使用“關(guān)閉”，而不是“X”。

四、允許用戶輕松取消操作

無論用戶是開始購買，轉(zhuǎn)賬還是進(jìn)行大量下載，他都應(yīng)能夠隨時(shí)取消該任務(wù)。該“取消”的選擇應(yīng)該很容易找到并快速執(zhí)行。即使在多步驟過程中，用戶可以使用“返回”鏈接代替“取消”，最好還是提供“取消”以避免不必要的操作。

當(dāng)用戶開始撰寫tweet，他們可以很容易地取消，通過選擇任務(wù)然后在頁面的左上角選擇取消。選擇取消后Twitter向用戶提供了刪除消息或保存草稿的選項(xiàng)。此選擇可確保用戶不會(huì)意外丟失已編輯的內(nèi)容。

在移動(dòng)設(shè)備上，一些設(shè)計(jì)師嘗試通過使用“X”圖標(biāo)（而不是Cancel）來節(jié)省空間。不幸的是，有時(shí)“X”可能被誤認(rèn)為是“Close”而不是“Cancel”。

在某些界面中，區(qū)分兩者之間的差異很重要，以避免用戶出錯(cuò)。如果“X”表示“關(guān)閉并“取消”，則需要使用顯式文本“取消”或向用戶提供警告對話框，以避免用戶丟失已完成的操作。

從Wealthfront的應(yīng)用程序中的投資帳戶轉(zhuǎn)移資金時(shí)，用戶在順序屏幕上遵循幾個(gè)步驟。

在頁面頂部，用戶可以使用“＜”箭頭返回上一步，或者選擇“X”取消傳輸。但是，選擇“X”是“保存?zhèn)鬏攨?shù)”還是“完全取消傳輸”不夠明確。因此使用“取消”文字標(biāo)簽會(huì)更好。

五、支持撤銷

當(dāng)用戶更改系統(tǒng)狀態(tài)時(shí)，他應(yīng)該能夠輕松撤銷該操作。想象一下，不小心刪除了整個(gè)文本段落而無法找回它有多可怕！

界面上可以多種方式支持撤銷操作，而不僅僅是通過簡單的撤銷按鈕來完成。例如：如果用戶錯(cuò)誤地將商品添加到購物車，那他們應(yīng)該能夠通過刪除該商品來撤銷該錯(cuò)誤的操作。

在電子商務(wù)站點(diǎn)上，就像上面CVS中的示例一樣，用戶可以通過選擇Remove來撤銷將商品添加到購物籃中的操作。

iOS更改通知設(shè)置時(shí)，用戶可以使用切換按鈕和復(fù)選框來撤銷更改。

房屋建筑商Mattamy在其網(wǎng)站上提供了交互式平面圖，使用戶可以探索幾種可能的結(jié)構(gòu)變化。為了撤銷編輯，用戶可以從左側(cè)窗口取消已選中的結(jié)構(gòu)來更改。不幸的是，重置按鈕（突出顯示）很容易被誤認(rèn)為撤銷按鈕。

如果用戶可能會(huì)很快的執(zhí)行許多操作，請支持多次撤銷和重置。僅僅對最后的一步操作的撤銷通常是不夠的。對于臺(tái)式機(jī)用戶，為高級用戶支持標(biāo)準(zhǔn)鍵盤快捷鍵也是一個(gè)好主意（高不來：例如ps的Ctrl+Alt＋Z）。

六、確保撤銷是可發(fā)現(xiàn)的

還記得iOS中的“搖動(dòng)撤銷”功能嗎？眾所周知，此功能未得到充分利用，因?yàn)樗茈y發(fā)現(xiàn)。

對于臺(tái)式機(jī)設(shè)計(jì)，不要以為您的用戶會(huì)知道他們可以使用鍵盤快捷鍵。最好給用戶一個(gè)可見的選項(xiàng)，以撤銷對UI的操作來說，該功能應(yīng)在用戶通常期望的位置。

在文字處理程序和設(shè)計(jì)軟件等所見即所得的應(yīng)用程序中，撤銷通常位于工具欄或應(yīng)用程序菜單中。在沒有chrome的基于Web的應(yīng)用程序上，“撤銷”選項(xiàng)通常是上下文相關(guān)的-它可能出現(xiàn)在臨時(shí)的snackbar中或上下文菜單中。

與許多其他WYSIWYG應(yīng)用程序一樣，在Microsoft Word中，用戶可以從“編輯”菜單中找到“撤銷”和“重做”選項(xiàng)。還向用戶顯示了這些操作的鍵盤快捷鍵。

如果“撤銷”選項(xiàng)是上下文相關(guān)的，請確保它在用戶界面中具有良好的可見性。

在在Google云端硬盤中，僅當(dāng)用戶執(zhí)行操作后，“撤銷”選項(xiàng)才可用。操作完成后，它在屏幕底部顯示為snackbar，但在幾秒鐘后消失。用戶需要知道他們想要撤銷并迅速采取行動(dòng)，才能使用此功能（也可以使用鍵盤快捷鍵，但這些快捷鍵未在用戶界面中列出）。

七、結(jié)論

為了確保用戶對使用您的產(chǎn)品有一種自由感和控制感，他們應(yīng)該能夠輕松地放棄任務(wù)，退后一步并撤銷對系統(tǒng)狀態(tài)所做的更改。通過仔細(xì)地設(shè)計(jì)清晰的退出點(diǎn)和撤銷功能，您可以讓用戶感覺到對體驗(yàn)的控制權(quán)，而不是由產(chǎn)品來控制用戶。

原文作者：Maria Rosala；

原文鏈接：https://www.nngroup.com/articles/user-control-and-freedom/

延伸閱讀：https://www.nngroup.com/articles/overuse-of-overlays/

本文由 @高不來 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議