首頁 > 網頁教程 > 設計分享 > 3 個技巧幫你區分「取消」與「關閉」的設計差異

昂热大学读研究生手续:3 個技巧幫你區分「取消」與「關閉」的設計差異

時間:2019-10-04    來源:Aurora Harley

法国昂热国立音乐学院 www.sxrkbx.com.cn

區分取消與關閉,可以很大程度上避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改,使用文本標簽而不是「X」圖標,并在破壞性操作之前提供確認對話框。

讓人迷惑的「X」圖標

很久以前,「X」這個符號是用在地圖上,標記「寶藏的藏身地」。但在今天的數字化界面中,「X」符號不再用來標記位置,而是被用來取消進程,或者關閉某個臨時頁面/彈框。但是如何確定「X」代表的是「取消」 還是「關閉」?有的時候可以確定,有時卻模糊不清難以界定。

其實,主要的問題在于「X」圖標缺少了文本標簽。當同一個圖標在不同的界面,卻代表不同的含義,該圖標的可用性就會受到影響,因為用戶判斷不了到底是什么含義。

為什么要區分「取消」與「關閉」

當用戶單擊/點擊「X」按鈕來關閉模態彈框或視圖時,系統會完全取消該過程并清空之前所有操作,這讓人沮喪,甚至抓狂。因為用戶通常認為「X」圖標表示取消或者關閉,所以區分這兩種可能性對于交互的成功至關重要。

在某些情況下,區分取消 or 關閉并不重要。當一個彈窗占據你的大部分屏幕時,點擊「X」按鈕(盡可能快地),既可以關閉該模態,也可以取消它可能觸發的任何進程。

但是,如果頁面中包含正在運行的計時器,正在播放的音頻,正在選擇多個選項標簽,或其他類型未保存的內容,那就很有必要說明「X」圖標所代表的意義。因為用戶可能打算讓計時器或音頻繼續運行,或者希望立刻應用這些選好的選項標簽,或保存正在進行的工作,同時希望關閉該視圖繼續其他操作。

例如:絲芙蘭在結賬過程中,使用模態窗口來展示用戶可以添加到購物車的免費商品。在以下示例中,單擊「 ADD(添加)」按鈕選擇商品后, 該按鈕直接被變成了「 Remove(移除)」,看起來似乎商品已經被添加到購物車中了。但是,實際上當用戶單擊右上角的「X」圖標后,該商品并不在購物車中。他需要再重復這個步驟,最后點擊「Done(完成)」按鈕,商品才會被加入購物車。

Sephora:單擊右上角的「X」會取消選擇這些試用商品整個過程。用戶必須先單擊「ADD」,再單擊「Done」才能將商品添加到購物車。

如何避免丟失用戶正在操作的內容

要避免丟失用戶正在操作的內容,首先需要確定用戶的意圖,是取消還是關閉,并提供明確的選項。有以下幾種方法:

  • 主動要求用戶確認他們的意圖;
  • 使用明確的文本標簽而不是模糊圖標;
  • 顯示兩個不同的按鈕:「X」圖標表示關閉視圖(可以自動保存頁面內容/操作),而「取消」則代表放棄該過程。

1. 要求確認

如果用戶在已經執行操作的模態彈框或頁面視圖中,點擊「X」圖標,app 則可以在關閉視圖之前,直接詢問用戶是否應用該操作,來確認其意圖。此解決方案非常適合會破壞用戶工作的破壞性取消操作。例如,過濾器視圖可能會被意外關閉,并且關閉會導致用戶丟失其選定的選項。

這個問題在移動端界面上很常見,因為過濾器視圖占用了很大的屏幕空間,這使用戶很難或不能判斷是否已經應用了那些選擇。為了防止這種潛在的錯誤,在關閉過濾器視圖之前,跟用戶確認是否要應用這些選擇并關閉視圖,抑或是清除這些選擇。例如:下圖中,當用戶選擇后,點擊「X」圖標時,Lowes 會出現如下確認彈框。

左 :點擊「X」圖標或返回箭頭,所有的選項都會被取消,并將用戶帶回上一個頁面。右:點擊「X」后,出現一個確認對話框,確認用戶是應用還是取消篩選,然后再返回結果列表頁。

同樣,當用戶關閉正在進行的課程時,語言學習應用Duolingo 會顯示一個確認對話框,課程進行中不能中途離開,除非確認「退出」。至少,該 APP 向用戶傳達了這一限制,同時他們也可以選擇「取消」來繼續課程。點擊「X」按鈕將結束當前課程。為了防止出錯,結束前會出現一個確認對話框。

缺點:

  • 雖然確認對話框在避免「X」圖標有歧義方面很有效,但它卻添加了額外的步驟;
  • 用戶在按下「X」圖標之前還是不知道它到底做了什么,代表什么意思,因此他們可能會對這個操作感到疑惑。

2. 使用文本標簽

不要完全依賴對話框來讓用戶確認模糊的「X」圖標,而是使用明確的文本標簽。文本可以消除歧義,并清楚地傳達將發生的操作:取消與關閉。

Yelp 的篩選頁面在屏幕頂部提供了標有「Cancel(取消)」和「Reset(重制)」的按鈕,在底部提供了一個大大的「Apply(應用)」按鈕。類似地,Etsy 中的 Filters 視圖提供了「Clear(清除)」和「Done(完成)」兩個按鈕。

注意:Etsy 使用「Done」而不是「Apply」,因為過濾器一經選擇就可以被應用,而這里是關于開關切換與否的建議。

(左)Yelp:Cancel、Reset 和 Apply 這三個文本標簽既直接又清晰,這樣用戶就不太可能不小心關閉視圖而丟失他們過濾器中的選擇。(右)Etsy:Clear 為用戶取消提供了一種清晰的方式,而點擊 Done 則返回到「產品列表」頁,其中的選擇已經應用。

相關推薦
網頁交互設計的一些理解
深挖交互設計的細節提升用戶滿意度
8個原則打造優秀的用戶體驗
交互設計中6個通用原則的介紹
如何杜絕網頁設計中視噪對用戶的影響
電子商務網站如何設計高效易用的網站左側導航樹
網頁視覺設計如何針對用戶有效表達信息
交互設計之淺談下意識設計
前瞻:2012年Web設計和開發的15個最新趨勢
用戶體驗評估之用戶心理負荷的測量
百度統計流量研究院設計過程及思路詳解
給不完整視覺信息尋找最簡單直接的解讀辦法
移動應用開發:無線終端用戶理解工作方法分享
分享:體驗設計師需要學習的一些前端技術
分享:5招助你打造更加簡潔的用戶界面
淺談界面UI設計中的包容性設計
仿生設計—讓互聯網產品更易用
淺談交互設計中的默認值對用戶的影響
深入分析網頁柵格系統的規范制作
深入談交互設計之人人都懂交互設計
移動應用設計的橫豎屏切換中的界面設計與體驗提升
交互設計:移動應用與PC應用的交互差異淺析
交互設計師應該如何設計直觀且有說服力的作品集
移動設備動畫設計的12個原則分享
分析用戶界面中扁平化設計的優缺點
分享淘寶購便利交互設計心得
富有靈感和創意的web布局及交互設計賞析
符合用戶操作習慣的網站界面設計分享
18個超棒的響應式Web設計前端開發教程
在視覺設計中對像素的深度解析
網頁設計中創新式布局與交互設計思考
換湯不換藥?看應用們如何“為iOS 7設計”
產品設計:萬水千山總是情 不要圖片行不行
APP瀏覽體驗設計的思考:如何理解用戶的眼?
網頁設計怎么破?創新式布局與交互的設計
四大網頁設計秘訣:讓用戶第一眼就愛上你的網站

精彩推薦

熱門教程