“確定”與“取消”按鈕應(yīng)該可以算是Web應(yīng)用里最無敵的組合了,你可以隨處看到他們以及他們的姊妹組合“完成”/“取消”、“是”/“否”….當(dāng)然,他們也不是每次都表述的是同一個(gè)交互動(dòng)作,但是我們總會(huì)遇到。
為什么會(huì)有“確定”與“取消”的組合?
這個(gè)問題似乎是個(gè)廢話。因?yàn)?,Web應(yīng)用中幾乎你所有的動(dòng)作都是可以取消的,這也是為什么每個(gè)瀏覽器都會(huì)有“后退”按鈕的原因。
當(dāng)然,有的時(shí)候我們也會(huì)只看到“確定”在單飛。比如,波希米亞同學(xué)收集了國內(nèi)30個(gè)著名網(wǎng)站的注冊(cè)表單,我們看到只有雅虎中國、MSN中國、TOM和優(yōu)酷的注冊(cè)表單中有“取消”/“重置”按鈕。
也許是處于商業(yè)因素的考慮,他們只給用戶單一方向的指引,系統(tǒng)限制用戶回頭;也許是產(chǎn)品人員認(rèn)為用戶完全可以在一頁長的表單里手動(dòng)清除掉填寫錯(cuò)誤的信息或者借助瀏覽器的“后退”按鈕來解決自己遇到的麻煩。
但是,在基本都是一頁長的表單里沒有“取消”或“重置”按鈕顯然是不夠友好的。用戶有權(quán)利結(jié)束自己的操作同時(shí)也有權(quán)利被允許重新開始自己的操作。一個(gè)“取消”按鈕顯然會(huì)比使用瀏覽器的“后退”按鈕或者是“F5”刷新瀏覽器成本小的多。
所以,從這點(diǎn)來看這30個(gè)表單中給我體驗(yàn)最好的無疑是優(yōu)酷的注冊(cè)表單。雖然雅虎中國提供了取消按鈕,但是在點(diǎn)擊取消的時(shí)候出現(xiàn)了下面尷尬的一幕….
什么時(shí)候才會(huì)同時(shí)出現(xiàn) 確定、取消
確實(shí),有的時(shí)候我們不需要取消按鈕。比如評(píng)論框的表單里,我們只需要一個(gè)“提交評(píng)論”就足夠了,因?yàn)槲覀儧]有可以取消的東西,你可以選擇關(guān)閉頁面停止瀏覽,你也可以選擇點(diǎn)擊鏈接進(jìn)入下一篇文章的閱讀。
取消,主要用在對(duì)用戶進(jìn)行警示、詢問用戶操作這2個(gè)場(chǎng)景中。比如用戶選擇了進(jìn)行了某項(xiàng)不可逆的操作的時(shí)候,我們需要警示用戶是否確定要進(jìn)行這項(xiàng)操作;用戶選擇了我們其實(shí)并不想讓他進(jìn)行的操作,比如刪除帳戶,我們希望用戶三思。
確定與取消不是萬能的,需要更完美
“確定”與“取消”按鈕在大多數(shù)情況下都可以正常工作,但是意義更明顯的按鈕標(biāo)記能更好的幫助用戶建立對(duì)點(diǎn)擊結(jié)果的期望。
比如QQ郵箱的注冊(cè)表單,單擊這個(gè)“確定”按鈕會(huì)發(fā)生什么呢?保存了我填寫的信息還是把我注冊(cè)為新的QQ郵箱用戶?很明顯,對(duì)于用戶而言這個(gè)期望是模糊的。
當(dāng)然,我們很高興的看到大多數(shù)網(wǎng)站的注冊(cè)表單上都把“確定”按鈕換成了一個(gè)更加明顯的提示了,比如“注冊(cè)”、“現(xiàn)在就加入”、….不過在軟件領(lǐng)域里似乎這種令人生厭的做法已經(jīng)持續(xù)了很久且一直沒有改觀,典型代表就是我們的瀏覽器彈窗提示…..
直接使用“確定”與“取消”,是一個(gè)懶惰的設(shè)計(jì)師的表現(xiàn)與設(shè)計(jì)手法。這是一個(gè)值得注意與琢磨的細(xì)節(jié),因?yàn)槟愕囊粋€(gè)錯(cuò)誤的提示可能會(huì)誘發(fā)N多用戶錯(cuò)誤的點(diǎn)擊。
沒法確定的確定按鈕
比如下面的這個(gè)界面提示,我是點(diǎn)確定呢還是取消呢?我沒法確定…..
比如,某博客網(wǎng)站在發(fā)布文章的時(shí)候可以選擇全屏編輯器,他們會(huì)在屏幕的右下角設(shè)置一個(gè)“取消”按鈕,這個(gè)取消是怎么個(gè)意思呢?取消本次的編輯退回到我的博客首頁還是退出本次的全屏編輯進(jìn)入到普通的編輯狀態(tài)?我沒法確定……
關(guān)于確定與取消的按鈕擺放
目前流行的做法是遵照“費(fèi)茨法則”,一個(gè)人在使用鼠標(biāo)移動(dòng)指針時(shí),屏幕上目標(biāo)的某些特征會(huì)使得點(diǎn)擊變得輕松或者困難。目標(biāo)離得越遠(yuǎn),到達(dá)就越費(fèi)勁;目標(biāo)越小,就越難點(diǎn)中。設(shè)計(jì)成一個(gè)大的“確定”與一個(gè)小的“取消”組合或者一個(gè)大的“確定”按鈕與一個(gè)超鏈接的“取消”組合。
另外,關(guān)于是“確定”在左還是“取消”在左,mac系統(tǒng)與Win系統(tǒng)是個(gè)相反的做法,這是另外一個(gè)話題,有興趣的同學(xué)可以研究一下。
這里,UCDchina翻譯小組的一篇文章中說到了這個(gè)問題:“確定”與“取消”按鈕如何正確排序?
最后,在尋找本文的例證的時(shí)候?yàn)g覽幾個(gè)網(wǎng)站后編的一個(gè)小段子
問:一個(gè)網(wǎng)站如果彈出“是”、“否”、“取消”,你該選哪個(gè)?答:右上角的×。因?yàn)?,他才懶的管你選的是哪個(gè),他判斷有鼠標(biāo)點(diǎn)擊動(dòng)作就給你強(qiáng)奸了,所以先×它才是正確的!
該文章在 2012/8/21 10:08:27 編輯過