Article copyright by Gabriel Svennerberg
Gabriel Svennerberg版權(quán)所有

原作者：Gabriel Svennerberg；譯者：UCD翻譯小組，mysmth2003原文網(wǎng)址：http://www.svennerberg.com/2008/09/the-use-of-buttons-in-web-forms/

動(dòng)作按鈕存在于每個(gè)web表單的底端。它們太平常了，以至于我們甚至不能仔細(xì)思考實(shí)際怎么去設(shè)計(jì)它們。從一堆偉大的易用性思想和我自己的經(jīng)驗(yàn)中可收集到的信息中，我想提出一套做法來(lái)讓這種設(shè)計(jì)更高效些。

Action buttons exists at the bottom of almost every web form. They’re so common that we often doesn’t even reflect on how to actually design them. By gathering information from a few of the great minds in the field of web usability and also from my own experiences, I’ve tried to come up with a set of best practices on how to design them efficiently.

Position 位置

根據(jù)Jakob Nielsen（雅各布·尼爾森）的觀點(diǎn)，按鈕的規(guī)則并沒(méi)有那么麻煩。每個(gè)位置都有它的優(yōu)點(diǎn)和缺點(diǎn)。而重要的一點(diǎn)是一致，如有可能遵照GUI標(biāo)準(zhǔn)平臺(tái)的規(guī)范。

在網(wǎng)絡(luò)世界以外，也有GUI標(biāo)準(zhǔn)，問(wèn)題是他們?cè)诓煌钠脚_(tái)上是不同的。在Windows平臺(tái)上，GUI規(guī)范表明“確認(rèn)”應(yīng)該在左側(cè)，而“退出”在右側(cè)。而在蘋果平臺(tái)下，恰恰相反。

According to Jakob Nielsen, the order of the buttons doesn’t matter that much. Both positions has it’s pros and cons. The important thing is to be consistent and if possible follow platform GUI standards [1].

Outside the web world there are GUI standard. The problem is that they are different on different platforms. On the Windows platform the GUI guidelines state that OK should be positioned to the left and Cancel to the right. On the Apple platform it’s the other way around.

在web中，并沒(méi)有固定的標(biāo)準(zhǔn)要求怎么去做，所以我們必須聰明地找出什么位置是最合適的。
On the Web there really is no standard on how to do this, so we have to try to find out which position is the smartest on our own.

Luke Wroblewski（盧克·羅博烏斯奇）在《網(wǎng)絡(luò)應(yīng)用表單設(shè)計(jì)》一文中專注于這個(gè)話題的探索。他建議把首要?jiǎng)幼鳌按_定”放置在表單的左側(cè)，次要?jiǎng)幼鳌巴顺觥狈胖迷诒韱斡覀?cè)。

他進(jìn)一步在《網(wǎng)絡(luò)表單設(shè)計(jì)》一書中，闡述了從易用性對(duì)比測(cè)試中的發(fā)現(xiàn)：測(cè)試表明主要?jiǎng)幼髟谧髠?cè)而次級(jí)動(dòng)作在右側(cè)具有更快的績(jī)效。

Luke Wroblewski elaborates on this topic in his article Web Application Form Design [2]. His recommendation is to position the Primary action (OK) aligned to the left part of the form and the Secondary action (Cancel) to the right.

He elaborates even further on this topic in the book Web Form Design [3], where he presents the finding from a usability test performed on a form with different designs. What the test showed is that having the Primary action left-aligned and the Secondary action to the right of it makes for the fastest performance

Robert Hoekman, jr.（羅布特·霍克曼）也思考了不少關(guān)于這方面的內(nèi)容，并且在《設(shè)計(jì)片段》（Designing the Moment)提出他的想法。

他同意Luke Wrobleski的關(guān)于首要?jiǎng)幼髟诒韱巫髠?cè)的觀點(diǎn)，這樣做的原因在于可以形成一條很好的線，視線可以跟隨，推下表格，從而輕松掃描。另一個(gè)原因在于如果用戶用tab鍵（鍵盤左上方的制表符）操控表單，首要?jiǎng)幼骺梢韵扔诖我獎(jiǎng)幼髟诒砀衩钕逻M(jìn)行。

Robert Hoekman, jr. has also thought a lot about this and presents his thoughts in the book Designing the Moment [4].

He agrees with Luke Wroblewski that the Primary action should be left-aligned with the form. The reason for this is that this forms a nice line for the eye to follow, working it’s way down the form, thereby making it easy to scan. Another reason is that if the user is navigating the form with the tab-key, the Primary action comes before the Secondary action in the tab order.

Labeling the actions 標(biāo)記動(dòng)作

Robert Hoekman, jr. 也有一些關(guān)于按鈕標(biāo)記的想法，比恰當(dāng)標(biāo)記“確定”和“退出”按鈕更好的辦法是直接標(biāo)記實(shí)際的動(dòng)作。如果執(zhí)行一個(gè)“存儲(chǔ)一個(gè)筆記”（save a note）動(dòng)作，為什么不讓“存儲(chǔ)筆記（save a note）”按鈕替代“確定”按鈕呢？Jakob Nielsen也建議按鈕上的文字要說(shuō)明這個(gè)按鈕究竟要干嘛，不要只用類似于"確定"這種空泛的文字。 這么做用戶會(huì)更有自信地使用，因?yàn)樗喇?dāng)他按動(dòng)按鈕的時(shí)候?qū)?huì)發(fā)生什么。

Robert Hoekman, jr. also have some thoughts about the labeling of buttons. Instead of just labeling the buttons OK and Cancel it’s better to label them after what they actually do [4]. If it’s to save a note, then why not label the OK-button “Save note” instead. Jakob Nielsen also recommends using a label that explains what it does instead of just a generic label [1]. By doing this the user is more confident using the form since he knows what to expect when he pushes that button.

Visual distinction 視覺(jué)的差別

另一件事是Robert Hoekman,jr.討論視覺(jué)上區(qū)分動(dòng)作，使得用戶能夠很輕松地做出正確的選擇。

Luke Wroblewski也推斷出，做首要的動(dòng)作要比次要的動(dòng)作更突出。在易用性測(cè)試的調(diào)查中，他發(fā)現(xiàn)如果首要比次要?jiǎng)幼饔幸稽c(diǎn)不同的設(shè)計(jì)的時(shí)候，用戶會(huì)花多一些時(shí)間去完成表單。而另一方面，用戶會(huì)更有信心，較少做出錯(cuò)誤的選擇。他建議使用不同顏色制作按鈕或者讓次要?jiǎng)幼髯兂梢粋€(gè)普通的鏈接。

一個(gè)簡(jiǎn)單的方法從視覺(jué)上區(qū)分兩點(diǎn)：我經(jīng)常去做，則使用粗體(bold font weight)，放在首要?jiǎng)幼魃希粋€(gè)正常的字體放在次要?jiǎng)幼魃稀?/FONT>

One other thing Robert Hoekman, jr. discusses is to visually distinguish the actions making it easier for the user to pick the right one.

Luke Wroblewski also concludes that making the Primary action stand out more than the Secondary action is a good thing. In the findings of the usability test, he finds that it takes the user a little more time to complete the form if the Primary and Secondary action has a different design. But on the other hand it makes the user more confident and less prone to choose the wrong one. He suggest making the buttons in different colors or making the Secondary action a plain link.

A simple way to visually distinguish the two that I sometimes do, is to use a bold font weight on the Primary action and a normal font weight on the Secondary.

Robert Hoekman, jr.推薦“對(duì)次要?jiǎng)幼魇褂靡粋€(gè)普通的鏈接”，他的理由是說(shuō)這可以更清楚的判斷誰(shuí)是首要的。但是它也適用于費(fèi)茨法則，即距離和目標(biāo)尺寸設(shè)多大可被觸及并且點(diǎn)擊——目標(biāo)越大會(huì)越快些（被觸及、點(diǎn)擊）。首要?jiǎng)幼饕虼藨?yīng)該比次要?jiǎng)幼鞔笠恍?/FONT>

Robert Hoekman, jr. recommends using a plain link for the Secondary action [4]. He’s arguments for this is that it makes it clear which one is the most prominent. But it also applies to Fitt’s Law, which suggest that the distance and the size of a target determines how long it takes to reach it and click it. The bigger the target the faster. The Primary action should therefor be bigger than the Secondary action.

The Reset button 重置按鈕

重置按鈕被用來(lái)重新設(shè)置一個(gè)完整的表單。這種早期相當(dāng)常見(jiàn)的應(yīng)用，到如今卻很少被看到。不過(guò)我想我也說(shuō)一些關(guān)于這個(gè)按鈕的話，當(dāng)它經(jīng)常被當(dāng)作成對(duì)的按鈕出現(xiàn)在表單中的時(shí)候。

在多數(shù)情況下，這個(gè)按鈕最好是完全不用。所有經(jīng)常錯(cuò)誤點(diǎn)擊重置按鈕的用戶因此會(huì)刪掉他們輸入的一切內(nèi)容。（我在Confusing Northface contact form中寫過(guò)），并且認(rèn)真地說(shuō)，你需要多頻繁重設(shè)整個(gè)表單，并且如果你這么做，會(huì)產(chǎn)生怎樣的問(wèn)題？

The Reset button is used to reset an entire form. It was pretty common in the early days of the web but is rarely seen nowadays. Nevertheless I thought I would say a few words about this button too since when it appears in a form, it’s usually paired with the Primary action.

In most situations it’s best not to use this button at all. All to often users click the Reset button by mistake thereby deleting everything they’ve entered. (I did it as I wrote in Confusing Northface contact form) And seriously, how often do you want to reset an entire form, and if you do, how hard is it?
這個(gè)按鈕所具有的風(fēng)險(xiǎn)簡(jiǎn)單要同可能的收益做一個(gè)大的對(duì)比，加之在很多情況下，會(huì)對(duì)表單增加更大的混亂。

正如Jakob Nielsen放到他的警示框?qū)凇稄?fù)原和退出按鈕》中的話：

     網(wǎng)絡(luò)將會(huì)變成更開(kāi)心的地方，如果所有的重置按鈕被虛擬的移走之后。這種按鈕幾乎不能幫助用戶，反而會(huì)傷害他們。

The risk with this button is simply to big compared to the possible benefit of it. Plus in most cases it just adds more clutter to the form.

Or as Jakob Nielsen put it in his alertbox column Reset and Cancel Buttons [5]:

The Web would be a happier place if virtually all Reset buttons were removed. This button almost never helps users, but often hurts them.

可能唯一的時(shí)間是當(dāng)重置按鈕被請(qǐng)求的時(shí)候，是當(dāng)一個(gè)表單被同一個(gè)用戶重復(fù)使用的時(shí)候，并且每次輸入的信息是不同的。

關(guān)于重置按鈕Luke Wroblewski有一個(gè)想法，他認(rèn)為如果你提供一個(gè)也應(yīng)該提供一個(gè)撤回(undo)選項(xiàng)。用戶點(diǎn)擊重置按鈕重新恢復(fù)表單，可以起到撤回的作用。此舉意味著你不得不暫時(shí)的存儲(chǔ)表單數(shù)據(jù)，但為用戶的方便提供了很小的價(jià)值。

Possibly the only time when a Reset button is called for, is when a form is used repeatedly by the same user and the information entered differs from each use.

Luke Wroblewski has an idea about the Reset button [3]. He thinks that if you provide one you should also provide an undo for it. By changing the Reset button into an Undo after being clicked the user can restore the form. This means that you have to temporarily store the form data, but that’s a small price to pay for the convenience of the user.

Best practices 最佳方法

基于以上所有的觀點(diǎn)，加上我使用并設(shè)計(jì)web表單的經(jīng)驗(yàn)，我提出一些好辦法。

Taking all of the opinions above in consideration, plus my own experience in using and designing web forms, I’ve come up with these best practices.

Position the Primary action to the left 首要?jiǎng)幼鞣旁谧筮?/FONT>

把按鈕放在表單的左邊，可以使得眼睛跟隨一條清晰的路線。通過(guò)首要?jiǎng)幼鞣旁诖我獎(jiǎng)幼鞯淖筮叄脖阌趖ab次序。Having the buttons aligned with the left side of the form makes a clear path for the eye to follow. By putting the Primary action to the left of the Secondary action it’s also positioned first in the tab order.

Label the actions in a natural language 標(biāo)簽動(dòng)作用自然的語(yǔ)言

通過(guò)描述實(shí)際動(dòng)作發(fā)生，用戶更舒適的感受他期待使用的內(nèi)容。By describing what the action actually does, the user feels more comfortable using it since he know what to expect.

Make the Primary action stand out 使首要?jiǎng)幼魍癸@

這樣可以讓用戶更輕松選擇他們想要的選項(xiàng)，而不會(huì)從一堆選項(xiàng)中艱難的發(fā)現(xiàn)。This makes it easier for the user to choose the option that’s most likely without making it harder to find the other option.

(Almost) Never use a iReset button （幾乎）不要使用重置按鈕

重置按鈕經(jīng)常會(huì)傷害用戶，而不會(huì)太多幫助他們。唯一的可能是他們?cè)诒韱沃行枰鼈?，是同一個(gè)用戶反復(fù)再三做不同輸入的時(shí)候，即一旦你使用了“重置”，也就意味著為用戶提供了一個(gè)撤回功能。Reset buttons often hurts user more than it helps them. The only time it’s called for is in a form that the same user uses over and over again with different input. If you use a Reset, also try to provide an undo function.

Do you agree with my conclusions or do you have a different opinion about this? Please share!
你同意我的結(jié)論或者對(duì)此有不同觀點(diǎn)，請(qǐng)分享吧！

原文網(wǎng)址：http://www.svennerberg.com/2008/09/the-use-of-buttons-in-web-forms/

關(guān)于作者
Gabriel Svennerberg是一位網(wǎng)絡(luò)開(kāi)發(fā)人員和互動(dòng)設(shè)計(jì)師，35歲，自從1996年就從事web的工作。起先自我雇傭，后來(lái)在V?xj?、Varberg 和Stockholm等不同的代理商工作，如今為Saab Security構(gòu)建網(wǎng)絡(luò)應(yīng)用以及強(qiáng)化用戶體驗(yàn)工作。
http://www.svennerberg.com/about/