振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
詳解網站中確認頁的設計思路
作者 Sunming   
2009/05/13

  二次確認頁,英文名是confirmation alert,在目前的諸多網頁設計中,確認頁越來越多了,用戶體驗非常的不便。究竟有沒有一些原則和規範可以指導二次確認頁的用法的?本文就二次確認頁的一些問題,做了分析研究。

一、什麼是二次確認頁?
  二次確認頁其實就是Confirmation Alert,屬於Alert家族中重要的一員。英文定義:A confirmation is a modal dialog box that asks if the user wants to proceed with an action。翻譯成中文大概就是:一個確認頁是一種詢問用戶是否想繼續執行某個動作的對話方塊。

  二次確認頁面的特點:
  直接出現在用戶剛剛發起的某個操作之後。
  詢問並確認用戶是否想要繼續之前的操作。
  一般會包含一個簡單的問題和兩到三個操作。

二、什麼時候用到二次確認?
  二次確認的好處是:
  1、減少誤點擊
  2、避免動作中斷時的損失(保存確認)
  3、使操作更加慎重
  4、安全性(有的二次確認還需要使用者輸入密碼)

  缺點是:
  1、干擾了正常的操作流程,不恰當的多餘的二次確認面還會讓客戶心生厭煩。
  2、在一些鼓勵的流程中,二次確認頁還會形成巨大的漏斗效應,直接造成客戶流失。
  
  因此,有以下三個原則:能不用就不用;必要時才用;用了就讓人明白。

  那麼,什麼時候用二次確認呢?
  1. 儲存確認(Save Confirmation)
  例:填寫表單中途離開,郵件寫了一半關閉流覽器,文檔未保存狀態下點關閉。
  確認的目的:避免誤操作或損失。
  2. 刪除確認(delete confirmation)
  例:開心網帳戶的刪除(不能恢復),刪除好友或檔案等。
  注意:並不是所有的刪除都需要確認,例外情況有如:頻繁的操作(如刪除郵件),不重要的刪除或者恢復成本較低。
  3. 其他重要且後果不可逆的操作
  例:淘寶的確認收貨並同意放款,百度有啊的撤銷退款協議。確認的目的:告知後果使操作謹慎,避免誤操作。
  4. 重要且不推薦的操作
  確認的目的:通過確認讓用戶更改選擇。最典型的例子莫過於淘寶的“評價確認”。

二次確認頁的特徵既然是存在兩個以上的操作選擇,所以當只存在一種選擇的時候,無論頁面長得再怎麼像確認頁,也不是。
  大家都很關心的問題:到底該如何判斷要不要確認頁呢?
  建議如下:
  1. 若不存在兩個以上的動作選擇——不要使用確認頁,可以是成功提示,或者錯誤提醒,設計成不需要使用者操作的樣子。
  2. 若存在兩個以上的選擇,但是90%的使用者都會選擇預設的選項——二次確認也是可以考慮去除的。
    可以加注一些提示來避免那5%的用戶出現損失,但是不要用一個確認頁去干擾這90%的用戶。
  3. 考慮重要性和恢復成本:
      重要但是恢復成本低的,和不重要但是恢復成本高的,不建議使用二次確認,提供撤銷操作更人性化。
      重要且恢復成本高的,最好二次確認,避免損失和誤操作。
  4.是否是頻繁使用的操作:一般情況下,若頻繁使用,重要性就不是特別高,而且頻繁出現的確認頁會讓人抓狂的,這種情況下,最好不用二次確認頁。而且確認頁有很多替代的形式,能夠達到同樣的目的但是更加親和。

三、二次確認頁的形式:
  從設計角度劃分:
  1. 系統彈出框
  
  2. lightbox(浮出層)
  解釋:Lightbox的效果類似於WinXP作業系統的登出/關機對話方塊,除去螢幕中心位置的對話方塊,其他的區域都以淡出的效果逐漸變為銀灰色以增加對比度,此時除了對話方塊內的表單控制項,沒有其他區域可以點擊。
  
  3. 郵箱驗證及手機驗證碼等替代形式
  比如,要刪除開心網帳號時,開心網會發一封郵件,點擊郵箱裡的連結來確認一定要刪除。這種形式適用於比較重要的不可恢復的場合。
  手機驗證碼確認的形式一般和資金相關,也用於比較重要的操作。
  從內容和功能角度劃分 (這段資料來自於《windows vista UX guide》,為避免偶英文翻譯有誤,保留原文名稱)

  確認頁使用時機:  
  1.Routine confirmations(常規確認)
  Confirm that the user wants to proceed with a routine, low risk action.
  確認用戶想要繼續一個常規的,低風險的操作。
  
  2.Risky action confirmations(風險操作確認)
  Confirm that the user wants to proceed with an action that has some risk and can’t be easily undone.
  確認用戶想要繼續一個有風險並且不容易撤銷的操作。

  3.Unintended consequence confirmations(未預期的確認)
  Confirm that the user wants to proceed with an action that has unexpected or unintended
  consequences.
  確認用戶想要繼續一個可能會導致意料外的結果的動作。
  很多時候,確認頁是建立在用戶有明確的操作意向的時候,這種情況下,也許使用者對後果是有預期判斷的:刪除就意味著後果就是刪除。而若刪除命令同時會導致別的意料之外的結果產生,那就是unintended consequence confirmation。
  典型的例子:在多標籤流覽器環境中,關閉流覽器,一般就會彈出一個確認框。

  4.Clarifications(澄清式確認、探詢式確認)
  Clarify how the user wants to proceed with an action that has potentially ambiguous or unexpected
  consequences.
  搞清楚用戶想如何繼續一個行為,而這個行為可能會導致預期外結果。
  就好像在岔路口,導遊說:好,我們繼續走吧。你可能想反問一下:怎麼走呢?向左還是向右?因為你擔心右邊可能會有打劫的埋伏。
  UX guide建議除非確實認為這個行為可能會出現的多種結果中,不然就不需要這種澄清式的確認。

  5. Security confirmations(安全確認)
  Confirm that the user wants to proceed with an action with security consequences.
  確認用戶想繼續執行一個會出現安全問題的動作。
  
  6. Ulterior motive confirmations(別有用心的確認)
  使用誤導的文字或是多餘的內容,所提供的二次確認頁

 

四、二次確認頁的替代方案:
  如果不喜歡二次確認頁,那麼有別的方法可以取代嗎?
  1. 防止出錯——設置任務,用戶在進行破壞性的操作前有前置任務需要完成。
  比如,在我們最近的一個項目中,用戶在點擊某個button時,那個命令是需要被確認的,否則一旦誤點擊會造成不可恢復的後果。但是在點擊下這個button後,使用者是需要填寫一個表單的。在提交表單時,我們就發現沒有必要再用一個二次確認。因為用戶在填寫表單的過程中是可以思考和反悔的,他既然願意花時間和精力去填寫表單,證明他確實想明白了。

  2. 提供撤銷操作(Undo)

  3. 提供回饋,讓不期望的結果顯著化。
  
  4. 消除選擇——往往需要被確認的是因為有兩個或多個response(後續動作),可以認真想一下,是否一定有多個選擇,如果僅僅剩下唯一一個了,那麼就不需要詢問了。
  如果需要被confirm的選項不是很重要,乾脆拿掉它。我特討厭有些網站給你一個長長的表單,下面有兩個button,一個提交一個清空。往往會不小心點擊了清空,結果剛才忙活了半天的東西都沒有了。要避免這種情況,當然你可以在我點擊清空時給我一個確認,不過我更加期望把這個button拿掉。

 

  五、設計形式的選擇:
  自從有了浮動圖層,越來越多的web 2.0的網站拋棄了系統彈出框。開始使用lightbox(浮出層),當然,他們各有優劣,不能一概而論。
  比如以下這種情況:
  
  系統彈出層可以允許我挪開確認視窗以閱讀“需要被確認的內容”。
  而如果使用浮動圖層,挪都挪不開,怎麼確認?當然你可以把需要被確認的內容放到浮動圖層上,前提是有足夠的資訊承受量。

 

  六、二次確認頁注意事項:
  1、時機——確認是必要的時機
  2、形式——是不是採取了合適的形式(有哪些形式?),注意不要用二次確認頁魚目混珠,有很多網站把成功頁面做成像二次確認頁一樣,居然還有個感嘆號來警示用戶“操作已經成功”……
  3、文案
  4、icon
  5、出錯控制——:二次確認頁應該給出建議性的下一步操作,默認的動作。
  6、結構——這個頁面不需要太多創新,最保險的方式就是照顧使用者已有的習慣,用主流的結構去呈現。

 文案太重要了:
  1. button的文案——需要讓使用者思考。
  很多時候我們發現一個頁面很莫名其妙,很不容易理解,仔細看看,原來是文案沒有傳達清楚。
  如果二次確認頁面也出現含糊不清,模棱兩可的文案,那是最糟糕的事情。
  
  現實生活中,某個人負責寫二次確認頁面文案,但是button上顯示的文案有時卻得走"規範",統一使用YES或者OK(比如),至於點擊了button到什麼頁面是由設計師和工程師決定的。就會導致以上矛盾的情況:button和文案牛頭不對馬嘴,點擊後卻又是另外的情況……

  2. 頁面的文案——足夠的資訊講明白後果。  
  你會經常被這種頁面搞得很苦惱,你確定嗎?你真的確定嗎?你考驗我的智力還是判斷力還是耐力?


  3. ICON可不能亂用
  icon很美觀,似乎很多設計師總是想用一個icon點綴一下二次確認頁。即使不是二次確認頁(像是某些成功頁面,卻被用了警示的icon,實在匪夷所思)

 

最後更新 ( 2009/07/22 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇