二次確認(rèn)的設(shè)計(jì)思路

2021-2-26    資深UI設(shè)計(jì)者

二次確認(rèn)的主要作用是防止誤操作,以及警示操作帶來(lái)的后果,避免用戶無(wú)意之間執(zhí)行了本不想做的操作。從用戶流程圖中我們不難看出,二次確認(rèn)是一種打斷用戶流程的設(shè)計(jì),只是迫不得已的折中方案。所以在是否使用,如何使用上需要有一定的考慮,否則會(huì)適得其反。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

我們可從操作的可逆性,嚴(yán)重性,復(fù)雜度和操作頻率進(jìn)行前期分析,即用戶的操作是否可以撤回,是否會(huì)造成嚴(yán)重或有漣漪效應(yīng)的后果,是否經(jīng)常做這樣的操作。下文將操作的危險(xiǎn)程度分了三個(gè)級(jí)別,對(duì)不同類型的二次確認(rèn)模式進(jìn)行說(shuō)明。

低危操作

對(duì)于低危操作我們可以不設(shè)置二次確認(rèn),或只在危險(xiǎn)程度升高時(shí)再和用戶確認(rèn)。

1. 操作基本無(wú)害,不設(shè)置二次確認(rèn)

一些非常常規(guī),很好注意到變化,或者容易回滾的操作無(wú)需配置二次確認(rèn)。例如新建文件夾,復(fù)制文件,完成一個(gè)代辦事項(xiàng)等。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

2. 達(dá)到危險(xiǎn)性后再進(jìn)行確認(rèn)

這種場(chǎng)景比較特殊,我們用一個(gè)例子說(shuō)明。比如當(dāng)用戶處于一個(gè)有兩層級(jí)別的托盤,第二級(jí)的新表單沒(méi)有完成填寫,就點(diǎn)擊了表單托盤的關(guān)閉按鈕。我們可以讓頁(yè)面滾動(dòng)到用戶沒(méi)有完成的地方,通過(guò)條幅提示,標(biāo)紅或閃爍等交互方式提醒用戶。按照此時(shí)危險(xiǎn)級(jí)別,我們僅需采用低強(qiáng)度的溝通方式,讓用戶明白操作的問(wèn)題即可。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

然而假如用戶點(diǎn)擊的是瀏覽器的標(biāo)簽頁(yè)關(guān)閉按鈕,其危險(xiǎn)級(jí)別就很高,系統(tǒng)很可能拋棄用戶未完成的表單導(dǎo)致數(shù)據(jù)丟失。此時(shí)我們可以通過(guò)前端技術(shù),在用戶點(diǎn)擊瀏覽器的刷新或關(guān)閉按鈕時(shí),彈出二次確認(rèn)對(duì)話框。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

中危操作

日常的一些操作,如提交表單,刪除文件,發(fā)送交易等,若被用戶在沒(méi)有明確后果的情況下執(zhí)行,會(huì)造成難以補(bǔ)救的不良影響,但后果不至于完全不可挽回。我們可以在此危險(xiǎn)范圍內(nèi),配置不同形式的二次確認(rèn)流程。

1. 即時(shí)撤銷

撤回提醒一般針對(duì)操作頻率高且容易回滾的操作。例如在線上網(wǎng)盤刪除或移動(dòng)文件后,通常會(huì)彈出一個(gè) toast 提示,告知用戶成功執(zhí)行了操作,并顯示“撤回”按鈕,讓用戶在誤操作時(shí)可以快速回滾。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

2. 提示信息

提示信息是二次確認(rèn)最常見(jiàn)的一種,適用場(chǎng)景廣泛。系統(tǒng)會(huì)在用戶執(zhí)行操作時(shí)打斷,提示后果并詢問(wèn)是否繼續(xù)。其界面表現(xiàn)形式比較豐富,例如購(gòu)物時(shí)的結(jié)算賬單頁(yè),轉(zhuǎn)賬時(shí)的確認(rèn)頁(yè),退出程序時(shí)的文件保存彈窗等等。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

3. 垃圾桶或類似的臨時(shí)承接結(jié)構(gòu)

臨時(shí)承接結(jié)構(gòu)適用于有不良后果但操作頻次高的場(chǎng)景。如果用戶經(jīng)常需要做一些有破壞性的操作,我們可以在系統(tǒng)中布置一個(gè)用來(lái)臨時(shí)承接這些操作的結(jié)構(gòu),而不直接執(zhí)行破壞性操作。如此設(shè)計(jì)有兩個(gè)優(yōu)點(diǎn):用戶不僅可以隨時(shí)反悔,而且避免了系統(tǒng)總是打斷用戶的高頻操作。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

例如大部分操作系統(tǒng)刪除文件時(shí)只是將文件移動(dòng)到垃圾桶,并不會(huì)造成實(shí)質(zhì)傷害。二次確認(rèn)只會(huì)出現(xiàn)在用戶需要清空垃圾桶時(shí)。這便通過(guò)臨時(shí)承接結(jié)構(gòu)緩沖了用戶的破壞性操作,同時(shí)避免了頻繁打斷用戶。

高危操作

執(zhí)行后果極其嚴(yán)重且無(wú)法挽回的操作,例如刪除賬號(hào),刪除虛擬幣錢包,抹除設(shè)備數(shù)據(jù)等時(shí),系統(tǒng)需要用戶仔細(xì)想清楚,完全理解即將發(fā)生的事情并接受后果,此時(shí)可采用攔截性強(qiáng),步驟多的確認(rèn)方式。但請(qǐng)務(wù)必注意,即將列舉的幾種設(shè)計(jì)會(huì)給用戶帶來(lái)一定程度的挫敗感。除非萬(wàn)不得已,盡可能考慮上文中的設(shè)計(jì)方式。

1. 按鈕倒計(jì)時(shí)

在確認(rèn)按鈕上倒計(jì)時(shí),給用戶一段冷靜的時(shí)間,倒計(jì)時(shí)完成后按鈕才變回可用狀態(tài)。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

2. 多次詢問(wèn)

多次詢問(wèn)是一種較為粗暴的確認(rèn)形式,通過(guò)不斷地警告讓用戶確認(rèn)。大家可能依稀記得蘋果手機(jī)的重置流程:首先需要輸入蘋果賬號(hào)密碼和設(shè)備密碼驗(yàn)證身份,再通過(guò)兩層二次確認(rèn)彈窗,系統(tǒng)才會(huì)開(kāi)始抹除數(shù)據(jù)。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

3. 勾選并接受后果

將說(shuō)明部分拆解成復(fù)選框,用戶依次勾選并接受后果之后,執(zhí)行按鈕才會(huì)變成可用狀態(tài)。通常用于有嚴(yán)重或復(fù)雜連帶后果的操作。例如刪除虛擬幣錢包時(shí),軟件會(huì)讓用戶接受:未備份密鑰的資產(chǎn)將永久丟失;沒(méi)有服務(wù)商可以找回資產(chǎn);軟件方不承擔(dān)任何連帶責(zé)任。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

4. 輸入操作對(duì)象名稱

常見(jiàn)于底層目錄的刪除等操作。用戶需要正確輸入操作對(duì)象的名稱才能執(zhí)行,步驟較為繁瑣,非常耗費(fèi)用戶精力,但很大程度上可以規(guī)避用戶操作錯(cuò)誤的對(duì)象。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

5. 冷靜期(非二次確認(rèn))

當(dāng)注銷臉書(shū)等賬號(hào)后,服務(wù)會(huì)將賬戶信息繼續(xù)保留一段時(shí)間,若冷靜期內(nèi)用戶重新登錄,賬號(hào)信息會(huì)自動(dòng)恢復(fù)。冷靜期的設(shè)計(jì)原理和 2.3 節(jié)介紹的臨時(shí)承接結(jié)構(gòu)有異曲同工之處,其并不屬于二次確認(rèn)的范疇,但針對(duì)高危操作給予了用戶反悔的余地,故補(bǔ)充在這里。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

注意事項(xiàng)

無(wú)論是從人本主義還是功能的角度,二次確認(rèn)都應(yīng)讓用戶能夠快速理解彈窗的意圖并作出判斷,減少使用中的挫敗感。下面羅列了一些能夠提升使用體驗(yàn)的設(shè)計(jì)點(diǎn)。

1. 文案的編寫

無(wú)論是從人本主義還是功能的角度,二次確認(rèn)都應(yīng)讓用戶能夠快速理解彈窗的意圖并作出判斷,減少使用中的挫敗感。

標(biāo)題文案為簡(jiǎn)明的疑問(wèn)句。

用戶映入眼簾的應(yīng)是一個(gè)問(wèn)題,也就是程序?yàn)槭裁创驍嗔擞脩?,需要用戶確認(rèn)什么操作。同時(shí)標(biāo)題的內(nèi)容不宜過(guò)長(zhǎng),對(duì)操作后果的詳細(xì)解讀可作為描述信息放到彈窗內(nèi)容中。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

不要強(qiáng)加說(shuō)明語(yǔ)句。

盡可能減少常規(guī)型二次確認(rèn)打斷用戶的時(shí)長(zhǎng),如果能夠用一句簡(jiǎn)單的標(biāo)題講清楚,則無(wú)需增加說(shuō)明,讓用戶快速理解,快速?zèng)Q斷。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

按鈕文案指明操作后果且無(wú)歧義。

有些操作比如“取消訂單”中包含了“取消”一類的字眼,為避免歧義,按鈕的文案應(yīng)盡量不使用“確定/取消”??蓪⒉僮鲙?lái)的后果直接寫在按鈕上,減少誤會(huì)。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

2. 避免濫用

在設(shè)計(jì)時(shí)不僅需要從操作的可逆性,嚴(yán)重性,復(fù)雜度和操作頻率來(lái)考慮配置何種形式的二次確認(rèn),甚至繞開(kāi)或不配置二次確認(rèn),盡可能減少對(duì)用戶的驚擾,否則不僅降低體驗(yàn)還可能會(huì)讓用戶忽略真正的威脅。這里舉三個(gè)日常很容易接觸到,通過(guò)流程優(yōu)化避免了二次確認(rèn)的例子:

免密支付:

用戶可以設(shè)置在一定數(shù)額范圍內(nèi)轉(zhuǎn)賬時(shí)不進(jìn)行密碼確認(rèn)。在此數(shù)額內(nèi)的交易即便發(fā)生異常,損失也比較輕微,而且平臺(tái)可以幫助追回。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

草稿:

當(dāng)用戶在聊天軟件的對(duì)話中輸入了內(nèi)容,或是在郵件服務(wù)上新寫了郵件,但沒(méi)有發(fā)送就退出了程序,用戶重新啟動(dòng)后,大部分聊天或郵件服務(wù)會(huì)以草稿的形式將寫入的內(nèi)容保留下來(lái)。既避免了退出時(shí)的二次確認(rèn),也沒(méi)有造成數(shù)據(jù)丟失。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

底層的版本控制功能:

蘋果電腦的操作系統(tǒng)內(nèi)建了文檔版本控制功能,用戶關(guān)閉文檔時(shí)系統(tǒng)不再詢問(wèn)是否需要保存,因?yàn)槲臋n每隔一段時(shí)間就會(huì)在后臺(tái)自動(dòng)生成一個(gè)版本。用戶可以隨時(shí)回滾到舊版本,甚至從舊版本中拷貝內(nèi)容。

從這3個(gè)方面,幫你掌握二次確認(rèn)的設(shè)計(jì)思路

結(jié)語(yǔ)

與任何界面設(shè)計(jì)的原則相同,二次確認(rèn)的設(shè)計(jì)重點(diǎn)仍然是人文關(guān)懷。要讓用戶從容使用系統(tǒng)的同時(shí),避免觸發(fā)無(wú)意的操作。本文的由來(lái)在于做項(xiàng)目時(shí)發(fā)現(xiàn)目前網(wǎng)絡(luò)上對(duì)二次確認(rèn)模式的講解大多偏理論,所以后期對(duì)該界面模式做了一些梳理并分享出來(lái),希望有幫助到大家!

文章來(lái)源:優(yōu)設(shè)  作者:京東設(shè)計(jì)中心JDC

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔