區(qū)分這兩種操作,可以很大程度上能避免丟失用戶已操作的內(nèi)容。在關(guān)閉視圖之前保存用戶的更改,使用文本標(biāo)簽而不是“X”圖標(biāo),并在破壞性操作之前提供確認(rèn)對(duì)話框。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中取消和關(guān)閉的差異總結(jié)進(jìn)行簡(jiǎn)單的說明。
一、讓人迷惑的“X”圖標(biāo)
很久以前,“X”這個(gè)符號(hào)是用在地圖上,標(biāo)記“寶藏的藏身地”。但在今天的數(shù)字化界面中,“X”符號(hào)不再用來標(biāo)記位置,而是被用來取消進(jìn)程,或者關(guān)閉某個(gè)臨時(shí)頁面/彈框。但是如何確定“X”代表的是“取消” or “關(guān)閉”?有的時(shí)候可以確定,有時(shí)卻模糊不清難以界定。
其實(shí),主要的問題在于“X”圖標(biāo)缺少了文本標(biāo)簽。當(dāng)同一個(gè)圖標(biāo)在不同的界面,卻代表不同的含義,該圖標(biāo)的可用性就會(huì)受到影響,因?yàn)橛脩襞袛嗖涣说降资鞘裁春x。
二、為什么要區(qū)分“取消”與“關(guān)閉
當(dāng)用戶單擊/點(diǎn)擊“X”按鈕來關(guān)閉模態(tài)彈框或視圖時(shí),系統(tǒng)會(huì)完全取消該過程并清空之前所有操作,這讓人沮喪,甚至抓狂。因?yàn)橛脩敉ǔUJ(rèn)為“X”圖標(biāo)表示取消或者關(guān)閉,所以區(qū)分這兩種可能性對(duì)于交互的成功至關(guān)重要。
在某些情況下,區(qū)分取消 or 關(guān)閉并不重要。當(dāng)一個(gè)彈窗占據(jù)你的大部分屏幕時(shí),點(diǎn)擊“X”按鈕(盡可能快地),既可以關(guān)閉該模態(tài),也可以取消它可能觸發(fā)的任何進(jìn)程。
但是,如果頁面中包含正在運(yùn)行的計(jì)時(shí)器,正在播放的音頻,正在選擇多個(gè)選項(xiàng)標(biāo)簽,或其他類型未保存的內(nèi)容,那就很有必要說明“X”圖標(biāo)所代表的意義。因?yàn)橛脩艨赡艽蛩阕層?jì)時(shí)器或音頻繼續(xù)運(yùn)行,或者希望立刻應(yīng)用這些選好的選項(xiàng)標(biāo)簽,或保存正在進(jìn)行的工作,同時(shí)希望關(guān)閉該視圖繼續(xù)其他操作。
例如:絲芙蘭在結(jié)賬過程中,使用模態(tài)窗口來展示用戶可以添加到購物車的免費(fèi)商品。在以下示例中,單擊“ ADD(添加)”按鈕選擇商品后, 該按鈕直接被變成了“ Remove(移除)”,看起來似乎商品已經(jīng)被添加到購物車中了。但是,實(shí)際上當(dāng)用戶單擊右上角的“X”圖標(biāo)后,該商品并不在購物車中。他需要再重復(fù)這個(gè)步驟,最后點(diǎn)擊“Done(完成)”按鈕,商品才會(huì)被加入購物車。
Sephora:?jiǎn)螕粲疑辖堑?rdquo;X”會(huì)取消選擇這些試用商品整個(gè)過程。用戶必須先單擊“ADD”,再單擊“Done”才能將商品添加到購物車。
三、如何避免丟失用戶正在操作的內(nèi)容
要避免丟失用戶正在操作的內(nèi)容,首先需要確定用戶的意圖 – 取消 or 關(guān)閉 – 并提供明確的選項(xiàng)。有以下幾種方法:
· 主動(dòng)要求用戶確認(rèn)他們的意圖
· 使用明確的文本標(biāo)簽而不是模糊圖標(biāo)
· 顯示兩個(gè)不同的按鈕:“X”圖標(biāo)表示關(guān)閉視圖(可以自動(dòng)保存頁面內(nèi)容/操作),而“取消”則代表放棄該過程
1、要求確認(rèn)
如果用戶在已經(jīng)執(zhí)行操作的模態(tài)彈框或頁面視圖中,點(diǎn)擊“X”圖標(biāo),UI則可以在關(guān)閉視圖之前,直接詢問用戶是否應(yīng)用該操作,來確認(rèn)其意圖。此解決方案非常適合會(huì)破壞用戶工作的破壞性取消操作。例如,過濾器視圖可能會(huì)被意外關(guān)閉,并且關(guān)閉會(huì)導(dǎo)致用戶丟失其選定的選項(xiàng)。
這個(gè)問題在移動(dòng)端界面上很常見,因?yàn)檫^濾器視圖占用了很大的屏幕空間,這使用戶很難或不能判斷是否已經(jīng)應(yīng)用了那些選擇。為了防止這種潛在的錯(cuò)誤,在關(guān)閉過濾器視圖之前,跟用戶確認(rèn)是否要應(yīng)用這些選擇并關(guān)閉視圖,抑或是清除這些選擇。例如:下圖中,當(dāng)用戶選擇后,點(diǎn)擊“X”圖標(biāo)時(shí),Lowes 會(huì)出現(xiàn)如下確認(rèn)彈框。
左 :點(diǎn)擊”X”圖標(biāo)或返回箭頭,所有的選項(xiàng)都會(huì)被取消,并將用戶帶回上一個(gè)頁面。右:點(diǎn)擊“X”后,出現(xiàn)一個(gè)確認(rèn)對(duì)話框,確認(rèn)用戶是應(yīng)用還是取消篩選,然后再返回結(jié)果列表頁。
同樣,當(dāng)用戶關(guān)閉正在進(jìn)行的課程時(shí),語言學(xué)習(xí)應(yīng)用- Duolingo 會(huì)顯示一個(gè)確認(rèn)對(duì)話框-課程進(jìn)行中不能中途離開,除非確認(rèn)“退出”。至少,該APP向用戶傳達(dá)了這一限制,同時(shí)他們也可以選擇“取消”來繼續(xù)課程。點(diǎn)擊“X”按鈕將結(jié)束當(dāng)前課程。為了防止出錯(cuò),結(jié)束前會(huì)出現(xiàn)一個(gè)確認(rèn)對(duì)話框。
缺點(diǎn):
a. 雖然確認(rèn)對(duì)話框在避免“X”圖標(biāo)有歧義方面很有效,但它卻添加了額外的步驟;
b 用戶在按下“X”圖標(biāo)之前還是不知道它到底做了什么,代表什么意思,因此他們可能會(huì)對(duì)這個(gè)操作感到疑惑。
2、使用文本標(biāo)簽
不要完全依賴對(duì)話框來讓用戶確認(rèn)模糊的“X”圖標(biāo),而是使用明確的文本標(biāo)簽。文本可以消除歧義,并清楚地傳達(dá)將發(fā)生的操作:取消與關(guān)閉。
Yelp的篩選頁面在屏幕頂部提供了標(biāo)有”Cancel(取消)“和”Reset(重制)“的按鈕,在底部提供了一個(gè)大大的”Apply(應(yīng)用)“按鈕。類似地,Etsy中的 Filters視圖提供了“Clear(清除)”和“Done(完成)”兩個(gè)按鈕。
注意:Etsy使用“Done”而不是“Apply”,因?yàn)檫^濾器一經(jīng)選擇就可以被應(yīng)用,而這里是關(guān)于開關(guān)切換與否的建議。
(左)Yelp:Cancel、Reset 和 Apply 這三個(gè)文本標(biāo)簽既直接又清晰,這樣用戶就不太可能不小心關(guān)閉視圖而丟失他們過濾器中的選擇。(右)Etsy:Clear 為用戶取消提供了一種清晰的方式。而點(diǎn)擊 Done 則返回到“產(chǎn)品列表”頁,其中的選擇已經(jīng)應(yīng)用。
3、關(guān)閉并保存
如果必須使用“X”圖標(biāo)而不是文本標(biāo)簽(比如為了以節(jié)省空間,或者因?yàn)檎谧裱瓐F(tuán)隊(duì)的設(shè)計(jì)語言),請(qǐng)謹(jǐn)慎使用,并在用戶完成前保存操作/內(nèi)容。另外,可以提供一個(gè)單獨(dú)的“取消”按鈕,讓用戶在進(jìn)程之外有一個(gè)緊急出口,并消除“X”(關(guān)閉 or 取消)在兩種含義之間的歧義。
例如: Gmail會(huì)自動(dòng)保存在非模態(tài)窗口中填寫的郵件信息到草稿(Drafts)。這樣的好處是,用戶在需要折疊或關(guān)閉該窗口時(shí),仍然保存原來的內(nèi)容以便于下次繼續(xù)編輯。將鼠標(biāo)懸停在消息窗口右上角的“X”圖標(biāo)上時(shí),會(huì)顯示一段提示:Save & Close(保存到草稿并關(guān)閉)。此外,點(diǎn)擊窗口右下角的“垃圾桶”圖標(biāo)可以刪除該郵件 – 這個(gè)圖標(biāo)離頂部的“保存和關(guān)閉”選項(xiàng)很遠(yuǎn),可以防止用戶誤點(diǎn)。
Gmail:Hover 透露, “X”圖標(biāo)是用于關(guān)閉窗口而不是刪除草稿,它允許用戶保存并關(guān)閉消息窗口而不會(huì)丟失剛剛正在編輯的郵件。
對(duì)于長(zhǎng)進(jìn)程或傾向于在后臺(tái)運(yùn)行的進(jìn)程(如計(jì)時(shí)器),默認(rèn)自動(dòng)保存也是一種很好的解決方案。
例如,Glow Baby中,后臺(tái)運(yùn)行喂食或睡眠計(jì)時(shí)器時(shí),用戶還可以瀏覽APP的其他區(qū)域。因?yàn)檫@些計(jì)時(shí)器一般會(huì)運(yùn)行很長(zhǎng)一段時(shí)間。此功能還能讓用戶在APP中做其他的任務(wù)操作,例如記錄之前換尿布的時(shí)間、瀏覽文章、逛論壇等。點(diǎn)擊計(jì)時(shí)器視圖中的“X”圖標(biāo)也只是關(guān)閉窗口并不會(huì)取消正在運(yùn)行的計(jì)時(shí)器。
Glow Baby:(左)點(diǎn)擊運(yùn)行計(jì)時(shí)器視圖中的“X”圖標(biāo),在不停止計(jì)時(shí)器的情況下取消視圖,從而允許用戶繼續(xù)使用APP記錄其他類型的事件、參與社區(qū)討論、閱讀文章等。(中)運(yùn)行計(jì)時(shí)器的狀態(tài)顯示在屏幕頂部的狀態(tài)欄中。(右)在計(jì)時(shí)器暫停時(shí)點(diǎn)擊“X”圖標(biāo),彈出“放棄”或“取消”按鈕以確認(rèn)用戶的真正意圖。
請(qǐng)注意:在關(guān)閉前保存中間工作或維護(hù)正在進(jìn)行的過程是主動(dòng)的,但有時(shí)可能會(huì)與用戶的意圖相反:如果用戶打算通過單擊“X”按鈕取消其選擇,那自動(dòng)應(yīng)用這些選擇可能會(huì)令人困惑和沮喪。
這就是為什么還必須有一個(gè)單獨(dú)的“取消”按鈕,給用戶一個(gè)出口,而不是強(qiáng)迫他們必須關(guān)閉時(shí)自動(dòng)保存。
四、結(jié)論
雖然“X”圖標(biāo)會(huì)造成模棱兩可,而且經(jīng)常導(dǎo)致可用性問題,但它不太可能馬上從所有接口中消失。設(shè)計(jì)人員應(yīng)該注意“X”圖標(biāo)的多重含義,消除“關(guān)閉”和“取消”之間的歧義,并提供確認(rèn)對(duì)話框或自動(dòng)保存等保護(hù)性措施,避免丟失任何用戶正在操作的內(nèi)容。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc