2021-03-15

京東出品:交互防錯機制之 “二次確認” 設計策略

UXD設計研究室??今天

以下文章來源于京東設計中心JDC?,作者邢禹

京東設計中心JDC

專業,創造力,激情,設計。京東用戶體驗設計部門,致力于創造更美好的電子商務購物體驗。

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

我們可從操作的可逆性,嚴重性,復雜度和操作頻率進行前期分析,即用戶的操作是否可以撤回,是否會造成嚴重或有漣漪效應的后果,是否經常做這樣的操作。下文將操作的危險程度分了三個級別,對不同類型的二次確認模式進行說明。

1. 低危操作

對于低危操作我們可以不設置二次確認,或只在危險程度升高時再和用戶確認。

1.1 操作基本無害,不設置二次確認

一些非常常規,很好注意到變化,或者容易回滾的操作無需配置二次確認。例如新建文件夾,復制文件,完成一個代辦事項等。

1.2 達到危險性后再進行確認

這種場景比較特殊,我們用一個例子說明。比如當用戶處于一個有兩層級別的托盤,第二級的新表單沒有完成填寫,就點擊了表單托盤的關閉按鈕。我們可以讓頁面滾動到用戶沒有完成的地方,通過條幅提示,標紅或閃爍等交互方式提醒用戶。按照此時危險級別,我們僅需采用低強度的溝通方式,讓用戶明白操作的問題即可。

然而假如用戶點擊的是瀏覽器的標簽頁關閉按鈕,其危險級別就很高,系統很可能拋棄用戶未完成的表單導致數據丟失。此時我們可以通過前端技術,在用戶點擊瀏覽器的刷新或關閉按鈕時,彈出二次確認對話框。

2. 中危操作

日常的一些操作,如提交表單,刪除文件,發送交易等,若被用戶在沒有明確后果的情況下執行,會造成難以補救的不良影響,但后果

不至于完全不可挽回。我們可以在此危險范圍內,配置不同形式的二次確認流程。

2.1 即時撤銷

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

2.2 提示信息

提示信息是二次確認最常見的一種,適用場景廣泛。系統會在用戶執行操作時打斷,提示后果并詢問是否繼續。其界面表現形式比較豐富,例如購物時的結算賬單頁,轉賬時的確認頁,退出程序時的文件保存彈窗等等。

2.3 垃圾桶或類似的臨時承接結構

臨時承接結構適用于有不良后果但操作頻次高的場景。如果用戶經常需要做一些有破壞性的操作,我們可以在系統中布置一個用來臨時承接這些操作的結構,而不直接執行破壞性操作。如此設計有兩個優點:用戶不僅可以隨時反悔,而且避免了系統總是打斷用戶的高頻操作。

例如大部分操作系統刪除文件時只是將文件移動到垃圾桶,并不會造成實質傷害。二次確認只會出現在用戶需要清空垃圾桶時。這便通過臨時承接結構緩沖了用戶的破壞性操作,同時避免了頻繁打斷用戶。

3. 高危操作

執行

后果極其嚴重且無法挽回的操作,例如刪除賬號,刪除虛擬幣錢包,抹除設備數據等時,系統需要用戶仔細想清楚,完全理解即將發生的事情并接受后果,此時可采用攔截性強,步驟多的確認方式。但請務必注意,即將列舉的幾種設計會給用戶帶來一定程度的挫敗感。除非萬不得已,盡可能考慮上文中的設計方式。

3.1 按鈕倒計時

在確認按鈕上倒計時,給用戶一段冷靜的時間,倒計時完成后按鈕才變回可用狀態。

3.2 多次詢問

多次詢問是一種較為粗暴的確認形式,通過不斷地警告讓用戶確認。大家可能依稀記得蘋果手機的重置流程:首先需要輸入蘋果賬號密碼和設備密碼驗證身份,再通過兩層二次確認彈窗,系統才會開始抹除數據。

3.3 勾選并接受后果

將說明部分拆解成復選框,用戶依次勾選并接受后果之后,執行按鈕才會變成可用狀態。通常用于有嚴重或復雜連帶后果的操作。例如刪除虛擬幣錢包時,軟件會讓用戶接受:未備份密鑰的資產將永久丟失;沒有服務商可以找回資產;軟件方不承擔任何連帶責任。

3.4 輸入操作對象名稱

常見于底層目錄的刪除等操作。用戶需要正確輸入操作對象的名稱才能執行,步驟較為繁瑣,非常耗費用戶精力,但很大程度上可以規避用戶操作錯誤的對象。

3.5 冷靜期(非二次確認)

當注銷臉書等賬號后,服務會將賬戶信息繼續保留一段時間,若冷靜期內用戶重新登錄,賬號信息會自動恢復。冷靜期的設計原理和?2.3?節介紹的臨時承接結構有異曲同工之處,其并不屬于二次確認的范疇,但針對高危操作給予了用戶反悔的余地,故補充在這里。

4. 注意事項

無論是從人本主義還是功能的角度,二次確認都應讓用戶能夠

快速理解彈窗的意圖并作出判斷,減少使用中的挫敗感。下面羅列了一些能夠提升使用體驗的設計點。

4.1 文案的編寫

標題文案為簡明的疑問句:用戶映入眼簾的應是一個問題,也就是程序為什么打斷了用戶,需要用戶確認什么操作。同時標題的內容不宜過長,對操作后果的詳細解讀可作為描述信息放到彈窗內容中。

不要強加說明語句:盡可能減少常規型二次確認打斷用戶的時長,如果能夠用一句簡單的標題講清楚,則無需增加說明,讓用戶快速理解,快速決斷。

按鈕文案指明操作后果且無歧義:有些操作比如“取消訂單”中包含了“取消”一類的字眼,為避免歧義,按鈕的文案應盡量不使用“確定/取消”??蓪⒉僮鲙淼暮蠊苯訉懺诎粹o上,減少誤會。

4.2 避免濫用

在設計時不僅需要從操作的

可逆性,嚴重性,復雜度和操作頻率來考慮配置何種形式的二次確認,甚至繞開或不配置二次確認,盡可能減少對用戶的驚擾,否則不僅降低體驗還可能會讓用戶忽略真正的威脅。這里舉三個日常很容易接觸到,通過流程優化避免了二次確認的例子:

免密支付:用戶可以設置在一定數額范圍內轉賬時不進行密碼確認。在此數額內的交易即便發生異常,損失也比較輕微,而且平臺可以幫助追回。

草稿:當用戶在聊天軟件的對話中輸入了內容,或是在郵件服務上新寫了郵件,但沒有發送就退出了程序,用戶重新啟動后,大部分聊天或郵件服務會以草稿的形式將寫入的內容保留下來。既避免了退出時的二次確認,也沒有造成數據丟失。

底層的版本控制功能:蘋果電腦的操作系統內建了文檔版本控制功能,用戶關閉文檔時系統不再詢問是否需要保存,因為文檔每隔一段時間就會在后臺自動生成一個版本。用戶可以隨時回滾到舊版本,甚至從舊版本中拷貝內容。

5.?結語

與任何界面設計的原則相同,二次確認的設計重點仍然是人文關懷。要讓用戶從容使用系統的同時,避免觸發無意的操作。本文的由來在于做項目時發現目前網絡上對二次確認模式的講解大多偏理論,所以后期對該界面模式做了一些梳理并分享出來,希望有幫助到大家!

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,002評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,400評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,136評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,714評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,452評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,818評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,812評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,997評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,552評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,292評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,510評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,721評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,121評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,429評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,235評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,480評論 2 379

推薦閱讀更多精彩內容

  • 官方手冊——上 Cytoscape3.7.2用戶手冊[http://manual.cytoscape.org/en...
    謝某丶閱讀 2,500評論 0 4
  • 今天感恩節哎,感謝一直在我身邊的親朋好友。感恩相遇!感恩不離不棄。 中午開了第一次的黨會,身份的轉變要...
    迷月閃星情閱讀 10,594評論 0 11
  • 彩排完,天已黑
    劉凱書法閱讀 4,267評論 1 3
  • 沒事就多看看書,因為腹有詩書氣自華,讀書萬卷始通神。沒事就多出去旅游,別因為沒錢而找借口,因為只要你省吃儉用,來...
    向陽之心閱讀 4,809評論 3 11
  • 表情是什么,我認為表情就是表現出來的情緒。表情可以傳達很多信息。高興了當然就笑了,難過就哭了。兩者是相互影響密不可...
    Persistenc_6aea閱讀 125,663評論 2 7