如何實現用戶控制和自由?

0 評論 4564 瀏覽 4 收藏 16 分鐘

編輯導語:一款產品,無論是對于年輕人還是老年人來說,能夠給其帶來輕松的使用體驗,方便其進行探索,這樣才能使用戶不斷學習產品的功能,同時提高對于產品的滿意度和銷售量。那么,UI設計如何考慮到這些因素,并且實現用戶控制和自由呢?

Jakob Nielsen對用戶界面設計的第三種可用性啟發是用戶控制和自由度,該原則指出:

用戶控制和自由(返回、關閉、取消和撤銷)

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

輕松解決疑問,鼓勵探索,這有助于用戶學習和發現產品的功能。還可以提高功能模塊的整體使用率和銷售量。相反,當UI不支持這些操作時,用戶會感到受困,并且通常會表達出不滿。

以下UI控件可以使人們返回到系統的先前狀態:

  • 返回:返回用戶之前的頁面;
  • 取消:允許用戶退出一個任務或多步過程;
  • 關閉:允許用戶關閉新開的頁面;
  • 撤銷選項(和相應的重做選項):允許用戶回溯到改變的UI元素。

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

每當用戶點擊控件跳轉到新頁面時,他們應該始終能夠返回其來源。用戶在網站的可用性測試中依靠“返回”按鈕回到上一頁,我們經常看到一些用戶在瀏覽網站時默認使用瀏覽器的“返回”按鈕,而不是使用網站的導航(例如面包屑)。

這就是為什么我們建議不要一味地在網站中選擇新開頁面的原因之一,因為有些用戶不會注意到他們位于新頁面中導致很難返回。

某些網站故意通過禁用瀏覽器的“返回”按鈕,阻止用戶離開網站。如果您也使用這種策略,雖然用戶會在您的網站上停留幾秒鐘(因為他們無法離開),但您很快就會感到沮喪。

畢竟這種設計選擇通常是優先考慮數據指標不是用戶體驗目標的結果。網站不應通過禁用“返回”按鈕來誘捕用戶,而應向用戶提供有價值的內容,讓他們主動想留下來。

我們會在某些表單上看到“返回”按鈕無法正常使用的情況,因為“返回”可能會破壞該表單的底層邏輯。

在某些情況下,用戶點擊表單的“返回”按鈕,他們會收到超時提醒并丟失掉已完成的操作,而不是正常的返回上一頁,通常產品應該提供給用戶正常使用的“返回”按鈕。

如果設計無法做到這一點,請在用戶點擊“返回”按鈕時警告用戶,并為他們提供取消此操作的機會。設計師還應該嘗試提供可點擊的多步驟進度條,以幫助用戶在不丟失已完成操作的情況下找回表單。

用戶控制和自由(返回、關閉、取消和撤銷)

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

在這種情況下,“返回”無法正常運行,因為它不允許用戶向后移動一步。相反,“返回”充當了“取消”的功能。像這樣迫使人們不愿探索其他的航班,其銷售量可能會受到影響。

二、使用“返回”時應滿足用戶的期望

當頁面上顯示彈窗時,用戶通常會迷失方向,并認為自己在新頁面上-尤其是彈窗層占據了整個頁面。

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

在最近的移動設備可用性測試會話中,一位參與者使用了全屏彈窗上的“返回”按鈕,并從該彈窗和他打算返回的頁面中退出了。參與者評論說:“我不希望被帶出該頁面(…)。如果我點擊了’返回’,應該回到我想回到的上一頁。但它并沒有帶我回到彈窗出現前的頁面?!?/p>

當用戶有可能將彈窗誤認為是新頁面時(無論是在臺式機還是在移動設備上),請確?!胺祷亍卑粹o與“關閉”按鈕具有相同的效果。

用戶控制和自由(返回、關閉、取消和撤銷)

在ASOS.com上,當用戶在詳情頁選擇“免費送貨與退貨”時,會出現全屏彈窗。輕擊瀏覽器的“后退”按鈕可將用戶返回到商品列表,而不是詳情頁。

用戶控制和自由(返回、關閉、取消和撤銷)

在Wayfair.com上,在產品x詳情頁單擊“評論”會跳出一個浮層,該浮層會展開占據全屏?!胺祷亍卑粹o(網站和瀏覽器的)都將用戶帶到初始產品詳情頁,這是用戶所期望的。用戶還可以從左向右滑動以關閉浮層。

用戶更期望移動端應用與他們對PC網站的“返回”使用期望一致:即“返回”即是后退一步。不幸的是,通常設計人員將其視為提升應用程序信息層級的一種方式。結果,用戶很容易迷失方向。

用戶控制和自由(返回、關閉、取消和撤銷)

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

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

三、使“關閉”易于發現

就像在物理空間中一樣,“出口”應該易于發現并且指向清晰,以便在需要時可以發現它們。在設計“關閉”、“退出”、“取消”時,應遵循設計標準,以便用戶可以按照期望的位置找到它們。例如,在浮層彈窗上上,用戶通常期望彈窗的右上角有一個“ X”圖標。

用戶控制和自由(返回、關閉、取消和撤銷)

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

除了把“關閉”按鈕放置在用戶預期的位置之外,還請使用通用圖標,以便用戶了解“關閉”的作用。帶有文本的圖標或純文本的替換圖標會更好理解。例如:使用“返回”,而不是“<”;使用“關閉”,而不是“X”。

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

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

用戶控制和自由(返回、關閉、取消和撤銷)

當用戶開始撰寫tweet,他們可以很容易地取消,通過選擇任務然后在頁面的左上角選擇取消。選擇取消后Twitter向用戶提供了刪除消息或保存草稿的選項。此選擇可確保用戶不會意外丟失已編輯的內容。

在移動設備上,一些設計師嘗試通過使用“X”圖標(而不是Cancel)來節省空間。不幸的是,有時“X”可能被誤認為是“Close”而不是“Cancel”。

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

用戶控制和自由(返回、關閉、取消和撤銷)

從Wealthfront的應用程序中的投資帳戶轉移資金時,用戶在順序屏幕上遵循幾個步驟。

在頁面頂部,用戶可以使用“<”箭頭返回上一步,或者選擇“X”取消傳輸。但是,選擇“X”是“保存傳輸參數”還是“完全取消傳輸”不夠明確。因此使用“取消”文字標簽會更好。

五、支持撤銷

當用戶更改系統狀態時,他應該能夠輕松撤銷該操作。想象一下,不小心刪除了整個文本段落而無法找回它有多可怕!

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

用戶控制和自由(返回、關閉、取消和撤銷)

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

用戶控制和自由(返回、關閉、取消和撤銷)

iOS更改通知設置時,用戶可以使用切換按鈕和復選框來撤銷更改。

用戶控制和自由(返回、關閉、取消和撤銷)

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

如果用戶可能會很快的執行許多操作,請支持多次撤銷和重置。僅僅對最后的一步操作的撤銷通常是不夠的。對于臺式機用戶,為高級用戶支持標準鍵盤快捷鍵也是一個好主意(高不來:例如ps的Ctrl+Alt+Z)。

六、確保撤銷是可發現的

還記得iOS中的“搖動撤銷”功能嗎?眾所周知,此功能未得到充分利用,因為它很難發現。

對于臺式機設計,不要以為您的用戶會知道他們可以使用鍵盤快捷鍵。最好給用戶一個可見的選項,以撤銷對UI的操作來說,該功能應在用戶通常期望的位置。

在文字處理程序和設計軟件等所見即所得的應用程序中,撤銷通常位于工具欄或應用程序菜單中。在沒有chrome的基于Web的應用程序上,“撤銷”選項通常是上下文相關的-它可能出現在臨時的snackbar中或上下文菜單中。

用戶控制和自由(返回、關閉、取消和撤銷)

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

如果“撤銷”選項是上下文相關的,請確保它在用戶界面中具有良好的可見性。

用戶控制和自由(返回、關閉、取消和撤銷)

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

七、結論

為了確保用戶對使用您的產品有一種自由感和控制感,他們應該能夠輕松地放棄任務,退后一步并撤銷對系統狀態所做的更改。通過仔細地設計清晰的退出點和撤銷功能,您可以讓用戶感覺到對體驗的控制權,而不是由產品來控制用戶。

 

原文作者:Maria Rosala;

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

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

本文由 @高不來 翻譯發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!