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

 

http://article.yeeyan.org/view/136960/230592

跟你所知的相反，布滿漂亮的按鈕、顏色和字體，再加上一大把jQuery插件的表單并不一定好用。真的，這么做只能（零散地）體現(xiàn)表單可用性的1/3。

 

In this article, we’ll provide practical guidelines that you can easily follow. These guidelines have been crafted from usability testing, field testing, website tracking, eye tracking, Web analytics and actual complaints made to customer support personnel by disgruntled users.

 

本文中，我們將為你提供簡(jiǎn)單實(shí)用的指南。這些精心制作的指南，囊括了可用性測(cè)試、實(shí)地測(cè)試、網(wǎng)站跟蹤，眼球跟蹤、網(wǎng)絡(luò)分析，甚至還有用戶對(duì)客服人員的抱怨等諸多方面。

Why Web Form Usability Is Important

表單可用性緣何重要？
 

The ISO 9241 standard defines website usability as the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.” When using a website, users have a particular goal. If designed well, the website will meet that goal and align it with the goals of the organization behind the website. Standing between the user’s goal and the organization’s goals is very often a form, because, despite the advances in human-computer interaction, forms remain the predominant form of interaction for users on the Web. In fact, forms are often considered to be the last and most important stage of the journey to the completion of goals.

ISO 9241標(biāo)準(zhǔn)中對(duì)網(wǎng)站可用性的定義是：特定用戶在特定環(huán)境下，能夠快速、有效且滿意地完成特定的目標(biāo)。用戶使用網(wǎng)站都是有目標(biāo)的。 如果設(shè)計(jì)得好，網(wǎng)站不但會(huì)達(dá)到用戶的目標(biāo)，還會(huì)將其與自身公司的目標(biāo)聯(lián)系起來(lái)。介乎用戶目標(biāo)和公司目標(biāo)之間的往往就是表單 ，因?yàn)?，盡管人機(jī)交互發(fā)展迅速，表單仍然是用戶與網(wǎng)站交互的主要方式。實(shí)際上，表單經(jīng)常被認(rèn)作是完成目標(biāo)的最后也是最重要的一站。
 

Let’s clarify this last point by discussing the three main uses of forms. As Luke Wroblewski states in his book Web Form Design: Filling in the Blanks, every form exists for one of three main reasons: commerce, community or productivity. The following table translates each of these reasons into the user and business objectives that lie behind them:

讓我們通過(guò)討論表單的三個(gè)主要作用來(lái)闡述下最后這一點(diǎn)。就像Luke Wroblewski在他的《web表單設(shè)計(jì)：點(diǎn)石成金的藝術(shù) 》一書中說(shuō)的一樣，每個(gè)表單的存在必有如下三個(gè)原因之一：商務(wù)、社區(qū)或效率。下面的表單把這三個(gè)原因轉(zhuǎn)化成了其背后的用戶目標(biāo)和公司目標(biāo)：

 

Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks.

表單的作用，基于Luke Wroblewski的《 web表單設(shè)計(jì)：點(diǎn)石成金的藝術(shù) 》。
 

Thus, the relationship between forms and usability have two aspects:

如此可見，表單和可用性有如下兩方面的關(guān)系：

   1. Forms can make a website usable or unusable, because they stand in the way of the user achieving their goal;

1. 表單可以使網(wǎng)站好用 或不好用，因?yàn)樗鼈儞踉谟脩暨_(dá)成目標(biāo)的路上。
 

   2. Forms need to be usable in order to help the user achieve that goal.

2. 為了幫助用戶達(dá)成目標(biāo)，表單必須要好用 。
 

This post will focus on the second point, because a usable form will naturally contribute to the overall usability of the website, hence the first aspect.

本文將重點(diǎn)講述第二點(diǎn)，因?yàn)楸韱魏糜昧?，網(wǎng)站的整體可用性自然會(huì)提升，也就是上面的第一點(diǎn)。
 

The Six Components Of Web Forms

表單的六個(gè)組成部分
 

Web forms are a necessity and often a pain point for both designers and users. Over time, users have formed expectations of how a form should look and behave. They typically expect Web forms to have the following six components:

對(duì)于設(shè)計(jì)師和用戶來(lái)說(shuō)，表單讓人愛恨交加。隨著時(shí)間的流逝，對(duì)于表單的表現(xiàn)形式和操作方式，用戶已有了自己的期望。基本上，他們期望表單包含如下六個(gè)部分：
 

   1. Labels These tell users what the corresponding input fields mean.

1.標(biāo)簽。 告訴用戶相應(yīng)的輸入域里應(yīng)該填什么。
 

   2. Input Fields Input fields enable users to provide feedback. They include text fields, password fields, check boxes, radio buttons, sliders and more.

2.輸入域。 供用戶提供反饋。包括文本輸入框、密碼輸入框、多選框、單選框和滑塊等。 
 

   3. Actions These are links or buttons that, when pressed by the user, perform an action, such as submitting the form.

3.操作。 包括鏈接和按鈕，用戶點(diǎn)擊后，會(huì)執(zhí)行一項(xiàng)操作，比如提交表單。
 

   4. Help This provides assistance on how to fill out the form.

4.幫助。 為填寫表單提供幫助。
 

   5. Messages Messages give feedback to the user based on their input. They can be positive (such as indicating that the form was submitted successfully) or negative (“The user name you have selected is already taken”).

5.信息。 用戶輸入內(nèi)容的反饋信息?？赡苁强隙ǖ模ū热缣崾颈韱翁峤怀晒Γ?，也可能是否定的（“該用戶名已被注冊(cè)”）。
 

   6. Validation These measures ensure that the data submitted by the user conforms to acceptable parameters.

6.驗(yàn)證。 確保用戶提交的數(shù)據(jù)符合參數(shù)規(guī)則。
 

 

 

Skype’s registration form contains all six components.

Skype的注冊(cè)表單包含了以上六個(gè)部分。
 

Tackling Usability Via Three Aspects Of Forms

通過(guò)三方面來(lái)解決表單的可用性問(wèn)題
 

Despite differences in layout, functionality and purpose, all forms have three main aspects, as noted by Caroline Jarrett and Gerry Gaffney in their book Forms That Work: Designing Web Forms for Usability:

盡管在布局、功能和目的上各有不同，所有的表單都有三個(gè)主要的方向，就像在Caroline Jarrett與Gerry Gaffney合著的《Web表單設(shè)計(jì)：創(chuàng)建高可用性的網(wǎng)頁(yè)表單 》中寫的一樣：
 

   1. Relationship Forms establish a relationship between the user and the organization.

1.關(guān)系。 表單在用戶與公司之間建立關(guān)系。
 

   2. Conversation They establish a dialogue between the user and the organization.

2.對(duì)話。 表單在用戶與公司之間建立對(duì)話。
 

   3. Appearance By the way they look, they establish a relationship and a conversation.

3.界面。 通過(guò)其展現(xiàn)方式，表單建立了關(guān)系和對(duì)話。
 

For a form to be usable, all three aspects need to be tackled. Let’s look at each aspect in turn to figure out how to make a form truly usable, along with practical guidelines that you can easily follow.

一個(gè)好用的表單，需要解決這三個(gè)方面的問(wèn)題 。讓我們依次來(lái)看，要讓一個(gè)表單真正好用需要遵循哪些指導(dǎo)方針，這樣你也能輕易上手。
 

Aspect 1: The Relationship

第一方面：關(guān)系
 

“No man is an island,” the 17th-century English poet, satirist, lawyer and priest John Donne once said. Indeed, human beings thrive on relationships, be they amorous, friendly, professional or business. A form is a means to establish or enhance a relationship between the user and the organization. When done badly, it can pre-empt or terminate such a relationship.

17世紀(jì)的英國(guó)詩(shī)人、諷刺作家、律師和牧師約翰•多恩 曾說(shuō)過(guò)：沒人是一座孤島。確實(shí)，人類在關(guān)系中成長(zhǎng)，不管它是戀愛關(guān)系、友好關(guān)系、職業(yè)關(guān)系還是商務(wù)關(guān)系。表單是建立或增強(qiáng)用戶與公司關(guān)系的一種方式。如果做得不好，它就會(huì)終結(jié)此關(guān)系。
 

With this in mind, a number of principles emerge:

既然如此，以下規(guī)則就顯而易見了：
 

    * Relationships are based on trust, so establishing trust in your form is critical. This can be achieved through the logo, imagery, color, typography and wording. The user will feel at ease knowing that the form comes from a sincere organization.

● 關(guān)系要基于信任 ，因此在表單中建立信任至關(guān)重要?？梢酝ㄟ^(guò)logo、圖像、配色、字體和措辭來(lái)表達(dá)誠(chéng)意。當(dāng)用戶知道表單所屬公司是以誠(chéng)相待時(shí)，他們就會(huì)放松警惕。
 

    * Every relationship has a goal, be it love and happiness in a romantic relationship or financial gain in a business relationship. Ask yourself, what is the goal of your form?

● 每一種關(guān)系都有目標(biāo) ，浪漫關(guān)系的目標(biāo)是愛和幸福，商業(yè)關(guān)系的目標(biāo)是財(cái)務(wù)增長(zhǎng)。自問(wèn)一下，你的表單目標(biāo)何在？
 

    * Base the name of the form on its purpose. That name will inform users what the form is about and why they should fill it in.

● 表單名字要能表達(dá)其意圖 。表單名要告知用戶表單是什么，他們?yōu)槭裁匆顚憽?br /> 

    * Just as in a relationship, getting to know the other person is essential. Get to know your users and always consider whether the questions you’re asking are appropriate and, if so, whether they are timely. This will instill a natural flow to your form.

● 一段關(guān)系中，了解對(duì)方 很重要。要了解你的用戶并且深入思考，表單上的問(wèn)題在形式上是否合理，在位置上是否合適。經(jīng)過(guò)這樣思考的表單，流程自然很順暢。
 

    * Knowing your users will also help you choose appropriate language and remove superfluous text. And it will help you craft an interface that balances your needs and the user’s.

● 了解用戶，對(duì)于選擇合適的語(yǔ)言和剔除冗余的文字 同樣有幫助。這樣打造的界面，才能在用戶需求與你的需求之間找到平衡。
 

    * Do not ask questions beyond the scope of the form. In a relationship, you would become distrustful of someone who asked questions that were out of place. The same thing happens online. Consult with relevant stakeholders to see what information really is required.

● 不要問(wèn)表單范圍以外的問(wèn)題 。一段關(guān)系里，問(wèn)話不合時(shí)宜的人會(huì)不被信任。網(wǎng)上亦然。跟相關(guān)股東們商量下究竟需要哪些信息吧。
 

    * Sudden changes in behavior or appearance will make users edgy. Likewise, never introduce sudden changes between forms or between steps in a form.

● 性能或界面的突變會(huì)讓用戶無(wú)所適從 。同樣的，各表單之間或者一個(gè)表單的幾個(gè)步驟之間，絕對(duì)不能有突變。
 

 

Know your users. Make it easy for registered users to log in and for new users to register. Debenhams makes this distinction barely noticeable.

了解你的用戶。讓注冊(cè)用戶易登錄，讓新用戶易注冊(cè)。在 Debenhams 網(wǎng)站上，這兩種表單幾乎沒有區(qū)別。
 

Amazon, on the other hand, simplifies the process for registered and new customers.

另一方面， 亞馬遜 的表單把注冊(cè)用戶和新用戶合二為一了。
 

Aspect 2: The Conversation

第二方面：對(duì)話
 

A form is a conversation. And like a conversation, it represents two-way communication between two parties, in this case, the user and the organization. In fact, the user has filled out the form in order to initiate communication with the organization.

表單即對(duì)話。對(duì)話代表兩方的相互交流，此例中的雙方即用戶與公司。實(shí)際上，用戶填寫表單就是為了與公司交流。
 

For instance, with a social network, a user would fill out a registration form to inform the organization that they would like to join. In inviting their request (whether automatically or manually), the organization would ask the user a number of questions (in the form of labels), such as their first name, last name, email address and so forth. Upon acceptance (or denial), the company would inform the user of the outcome, thus completing the communication process.

例如，社交網(wǎng)站中，用戶通過(guò)填寫注冊(cè)表單來(lái)告訴公司他們?cè)敢饧尤?。在接受用戶申?qǐng)時(shí)（不管是自動(dòng)還是手動(dòng)的），公司會(huì)（以標(biāo)簽的形式）問(wèn)用戶一系列問(wèn)題，如姓氏、名字、電郵地址等。一旦用戶接受條款（或拒絕），公司就會(huì)反饋結(jié)果，完成對(duì)話全過(guò)程。
 

Viewing forms from this perspective yields some useful guidelines:

來(lái)看看從這方面得出的一些實(shí)用指南：
 

    * As mentioned, a form is a conversation, not an interrogation. Aggressive wording in labels will make users feel edgy, and (if they do not leave) they will most likely give you the answers that you want to hear, rather than the truth.

● 前面已經(jīng)提到，表單是對(duì)話，而不是問(wèn)話 。強(qiáng)勢(shì)的用語(yǔ)會(huì)讓用戶難以接受，因此，（如果他們不就此離開的話）他們會(huì)給出一個(gè)你想要的答案，而不是他們的真實(shí)感受。
 

    * Order the labels logically, reflecting the natural flow of a conversation. For example, wouldn’t it be weird to ask someone their name only after having asked a number of other questions? More involved questions should come towards the end of the form.

● 標(biāo)簽的排序要有邏輯性 ，要能反映對(duì)話的流程。例如，先問(wèn)別人一大堆的問(wèn)題，然后再問(wèn)姓名，不覺得這很奇怪嗎？相關(guān)度越高的問(wèn)題越應(yīng)該要放到后面問(wèn)。

    * Group related information, such as personal details. The flow from one set of questions to the next will better resemble a conversation.

● 歸類同種信息 ，比如個(gè)人介紹可歸為一類。好的對(duì)話是由一組問(wèn)題接一組問(wèn)題組成的。
 

      Yahoo’s registration form effectively groups related content through purple headings and fine lines.

雅虎 的注冊(cè)表單通過(guò)紫色標(biāo)題和細(xì)線把相關(guān)信息進(jìn)行了有效的歸類。
 

 

      While Constant Contact groups related content, it separates the groups too much, which could confuse the user.

Constant Contact 的類別太多了，這樣會(huì)讓用戶困惑的。
 

    * As in a real conversation, each label should address one topic at a time, helping the user to respond in the corresponding input field.

● 跟真實(shí)對(duì)話一樣，每個(gè)標(biāo)簽每次只應(yīng)突出一個(gè)主題 ，這樣才能幫助用戶在相應(yīng)的輸入域中作出應(yīng)答。
 

    * The natural pauses in a conversation will indicate where to introduce white space, how to group labels and whether to break the form up over multiple pages.

● 對(duì)話中會(huì)有自然的停頓 ，表單中則表現(xiàn)為應(yīng)該在哪里留白，如何歸類標(biāo)簽，以及是否分頁(yè)。
 

    * In any conversation, people get distracted by background noise. So, remove clutter such as banners and unnecessary navigation that might distract users from filling out the form.

● 任何對(duì)話，人們都會(huì)因背景噪音而分心。因此，去除 諸如banner和不必要的導(dǎo)航之類的雜亂信息 ，避免讓用戶分心。
 

 

      Dropbox provides a fine example of what a registration form should look like. The white space is effective, and the page uncluttered. 

Dropbox 的注冊(cè)表單堪稱模范。留白適宜，頁(yè)面簡(jiǎn)潔。
 

Aspect 3: The Appearance

第三方面：界面
 

The appearance or user interface (UI) is central to the usability of a Web form, and there are several guidelines for this. To simplify the discussion, let’s group them into the six components presented earlier.

界面或者UI對(duì)于web表單的可用性極為重要，為此列出如下指南。簡(jiǎn)便起見，我們將其按照前面說(shuō)的六個(gè)部分進(jìn)行了歸類。
 

1. Labels

1.標(biāo)簽
 

    * Individual words vs. sentences If the purpose of a label is simple to understand, such as to ask for a name or telephone number, then a word or two should suffice. But a phrase or sentence might be necessary to eliminate ambiguity.

● 單詞或句子 。如果標(biāo)簽容易理解，比如詢問(wèn)姓名或電話號(hào)碼，一到兩個(gè)單詞就足矣。但是詞語(yǔ)或句子更能準(zhǔn)確表述。
 

 

      Amazon’s registration form contains full sentences, whereas individual words would have sufficed.

亞馬遜 的注冊(cè)表單用的全是句子，盡管有些地方單個(gè)詞語(yǔ)就能搞定。
 

    * Sentence case vs. title case Should it be “Name and Surname” or “Name and surname”? Sentence case is slightly easier?—?and thus faster?—?to follow grammatically than title case. One thing is for sure: never use all caps, or else the form would look unprofessional and be difficult to scan.

● 句子形式或標(biāo)題形式 。是像“Name and S urname” 還是像 “Name and s urname”？句子形式從語(yǔ)法角度比標(biāo)題更容易（也就更快）理解。還有一點(diǎn)要明確：一定不要用大寫，不然表單會(huì)看起來(lái)不專業(yè)且難以閱讀。

 

      See how difficult it is to quickly scan the labels in Barnes & Noble’s registration form?

要快速瀏覽 Barnes & Noble 的注冊(cè)表單得有多難?。?/span>
 

    * Colons at the end of labels UI guidelines for some desktop applications and operating systems such as Windows recommend adding colons at the end of form labels. Some designers of online forms adhere to this, primarily because old screen readers mostly rely on the colon symbol to indicate a label. Modern screen readers rely on mark-up (specifically, the label tag). Otherwise, the colon is a matter of preference and neither enhances nor detracts from the form’s usability, as long as the style is consistent.

● 標(biāo)簽后面加冒號(hào) 。一些桌面程序和諸如Windows之類的操作系統(tǒng)建議在表單標(biāo)簽后面加冒號(hào)。一些web表單的設(shè)計(jì)師也信奉此準(zhǔn)則，主要是因?yàn)槔系钠聊婚喿x器（供盲人使用的一種工具）是依據(jù)冒號(hào)來(lái)鑒別標(biāo)簽。而新的屏幕閱讀器則依據(jù)標(biāo)示（尤其是標(biāo)簽tag）。也就是說(shuō)，冒號(hào)的存在，既不會(huì)增強(qiáng)也不會(huì)減弱表單的可用性，只要形式統(tǒng)一就行了。
 

    * Alignment of labels: top vs. left vs. right Contrary to common advice, above the input field is not always the most usable location for a label. It’s ideal if you want users to fill in the form as fast as possible. But there are times when you’ll want to deliberately slow them down, so that they notice and read the labels attentively. Also, keeping a long form to a single column and making users scroll down the page is better than breaking it up into columns in an attempt to keep everything “above the fold.” Each style of alignment has its advantages and disadvantages:

● 標(biāo)簽的對(duì)齊：上對(duì)齊、左對(duì)齊還是右對(duì)齊 。跟一般的建議相反，輸入域上方并不總是放置標(biāo)簽的最佳位置。如果想讓用戶盡快填完表單，這樣做是最最好的。但有時(shí)為了讓用戶閱讀標(biāo)簽，你會(huì)故意想讓他們慢下來(lái)。還有，把長(zhǎng)表單用一頁(yè)顯示，讓用戶滾動(dòng)頁(yè)面，要比分成幾頁(yè)，每頁(yè)只有一屏的效果好。每一種的對(duì)齊方式都有其利弊。

      *Times retrieved from “Label Placement in Forms” by Matteo Penzo.

從Matteo Penzo的《 表單標(biāo)簽的放置 》獲取的數(shù)據(jù)。
 

 

      Forms should never consist of more than one column. Notice how easy it is to ignore the column on the right here on Makeup Geek (not to mention the note about “Required fields” at the bottom). 

表單絕對(duì)不能分多列顯示?？纯?/span> Makeup Geek 這個(gè)表單的右列，很容易被忽略掉（更別說(shuō)底部的“必填項(xiàng)”聲明了）。
 

2. Input Fields

2.輸入域

    * Type of input field Provide the appropriate type of input field based on what is being requested. Each type of input field has its own characteristics, which users are accustomed to. For instance, use radio buttons if only one option of several is permitted, and check boxes if multiple choices are allowed.

● 輸入域類型 。要根據(jù)需要選擇合適的輸入域類型。每種輸入域都有一些用戶習(xí)以為常的特性。例如，如果只能選中一個(gè)，就用單選按鈕，如果可以多選則用復(fù)選框。
 

    * Customizing input fields Do not invent new types of input fields. This was common in the early days of Flash websites, and it seems to be making a comeback; I have seen some odd input fields implemented with jQuery. Simple is often the most useful. Keep input fields as close to their unaltered HTML rendering as possible.

● 定制輸入域 。不要發(fā)明新的輸入域類型。在早期的flash網(wǎng)站上這很常見，現(xiàn)在似乎又有回歸的跡象：我看到了一些超爛的使用jQuery的輸入域。簡(jiǎn)單最實(shí)用。盡量讓輸入域看起來(lái)跟HTML中展現(xiàn)的一個(gè)樣。

 

      Altering the interface of input fields will confuse users.

改變輸入域的界面會(huì)讓用戶困惑。
 

    * Restricting the format of input fields If you need to restrict the format of data inputted by users, then at least do so in a way that won’t irritate users. For example, instead of displaying MM/DD/YYYY next to a text field for a date, consider using three drop-down fields or, better yet, a calendar control.

● 限制輸入域的格式 。如果不得不限制用戶輸入數(shù)據(jù)的格式，那么一定要用一種不觸怒用戶的方法。例如，與其用文本框+“MM/DD/YYYY”標(biāo)簽來(lái)表示日期，不如用三個(gè)下拉框或者更合適的日歷控件來(lái)代替。
 

    * Mandatory vs. optional fields Clearly distinguish which input fields cannot be left blank by the user. The convention is to use an asterisk (*). Any symbol will do, as long as a legend is visible to indicate what it means (even if it’s an asterisk).

● 必填和選填 。要讓用戶清楚地知道哪些輸入域不能留空。一般都用*號(hào)表示必填。其他符號(hào)也可以用，只要能看到其文字說(shuō)明就好（即使是*號(hào)要有說(shuō)明）。
 

3. Actions

3.操作
 

    * Primary vs. secondary actions Primary actions are links and buttons in a form that perform essential “final” functionality, such as “Save” and “Submit.” Secondary actions, such as “Back” and “Cancel,” enable users to retract data that they have entered. If clicked by mistake, secondary actions typically have undesired consequences, so use only primary actions where possible. If you must include secondary actions, give them less visual weight than primary actions.

● 主要操作和次要操作 。主要操作就是執(zhí)行最后功能的鏈接和按鈕，例如“保存”和“提交”。次要操作，諸如“后退”和“取消”，可以讓用戶撤消已經(jīng)輸入的數(shù)據(jù)。如果被誤點(diǎn)了，次要操作一般會(huì)產(chǎn)生不愉快的結(jié)果，所以盡量只用主要操作。如果必須要有次要操作，那么也要讓它們看起來(lái)沒主要操作那么顯眼。

 

      Not clearly distinguishing between primary and secondary actions can easily lead to failure. The above action buttons are found at the end of a lengthy form for enrolling in St. Louis Community College. Just imagine pressing the “Reset Form” button by accident.

不明確區(qū)分主次操作會(huì)很容易出事。上面的操作按鈕，是在 圣路易斯社區(qū)大學(xué) 長(zhǎng)長(zhǎng)的報(bào)名單的最后面，想想看誤按了“重設(shè)表單（reset form）”的后果吧。
 

    * Naming conventions Avoid generic words such as “Submit” for actions, because they give the impression that the form itself is generic. Descriptive words and phrases, such as “Join LinkedIn,” are preferred.

● 命名規(guī)則 。避免使用“注冊(cè)”之類的常規(guī)詞語(yǔ)，這樣會(huì)讓用戶覺得整個(gè)表單都沒意思。用“加入LinkedIn”之類的描述性單詞或短語(yǔ)會(huì)更好一些。

 

      Although Coca-Cola correctly gives more importance to the primary action button, it settles for the generic word “Submit.” “Register with us” would have been more helpful. 

盡管 可口可樂 在主次操作的處理上做得很好，但是卻用了一個(gè)很平常的“注冊(cè)（submit）”，換成“加入我們（register with us）”或許會(huì)更有效。
 

4. Help

4.幫助

    * Text to accompany forms Your should never have to explain to users how to fill out a form. If it does not look like a form or it’s too complicated to fill out, then redesigning it is your only option. Accompanying text should be used only where needed, such as to explain why credit card data is being requested or how a birth date will be used or to link to the “Terms and conditions.” Such text tends to be ignored, so make it succinct and easy to read. As a rule of thumb, do not exceed 100 words of explanation (combined).

● 表單說(shuō)明文字 。好的表單不需要解釋。如果那看起來(lái)不像表單或者很難填寫，那么只有重新設(shè)計(jì)了。幫助文字只應(yīng)出現(xiàn)在需要的地方，比如解釋為什么需要信用卡信息，或者解釋出生日期的用途，或者鏈接到“條款和條件”。這些文字很容易被忽視，所以要做得簡(jiǎn)潔易讀。第一準(zhǔn)則就是，解釋文字（總共）不要超過(guò)100字。
 

    * User-triggered and dynamic help Rather than include help text next to each input field, show it only where required. You could show an icon next to an input field that the user can click on when they need help for that field. Even better, show help dynamically when the user clicks into an input field to enter data. Such implementation is becoming more common and is relatively easy to implement with JavaScript libraries such as jQuery.

● 用戶觸發(fā)和動(dòng)態(tài)幫助 。與其在每個(gè)輸入域后都加上幫助文字，不如讓其只在需要時(shí)才出現(xiàn)?？梢栽谳斎胗蚺赃叿艂€(gè)小圖標(biāo)，讓用戶在需要時(shí)自行點(diǎn)擊?；蛘哂眠@個(gè)更好的，當(dāng)用戶在輸入域里輸入數(shù)據(jù)時(shí)，動(dòng)態(tài)顯示幫助信息。這種應(yīng)用越來(lái)越普遍，使用JavaScript的庫(kù)，諸如jQuery之類的，很容易實(shí)現(xiàn)這種效果。
 

 

      Skype’s registration form contains both user-triggered help (the blue box that is triggered by clicking the question mark) and dynamic help (the suggested user names). 

Skype 的注冊(cè)表單既包含了用戶觸發(fā)幫助（藍(lán)色的文本框是通過(guò)點(diǎn)擊問(wèn)號(hào)圖標(biāo)觸發(fā)的），也包含了動(dòng)態(tài)幫助（建議用戶名）。
 

5. Messages

5.信息

    * Error message This notifies the user that an error has occurred, and it usually prevents them from proceeding further in the form. Emphasize error messages through color (typically red), familiar iconography (such as a warning sign), prominence (typically at the top of the form or beside where the error occurred), large font, or a combination of these.

● 錯(cuò)誤信息 。告知用戶有錯(cuò)誤，通常會(huì)阻止用戶繼續(xù)填寫表單?？梢酝ㄟ^(guò)如下方法來(lái)強(qiáng)調(diào)錯(cuò)誤信息：顏色（一般是紅色），熟知圖形（如警告標(biāo)志），突出顯示（通常在表單上方或是發(fā)生錯(cuò)誤的側(cè)邊），大字體，或者以上綜合。
 

    * Success message Use this to notify users that they have reached a meaningful milestone in the form. If the form is lengthy, a success message encourages the user to continue filling it out. Like error messages, success messages should be prominent. But they should not hinder the user from continuing.

● 成功信息 。用以告知用戶其已經(jīng)完成了表單的一個(gè)重要部分。如果表單很長(zhǎng)，成功信息可以鼓勵(lì)用戶繼續(xù)填寫。跟錯(cuò)誤信息一樣，成功信息也應(yīng)突出顯示。但是不能阻止用戶繼續(xù)填寫表單。
 

6. Validation

6.驗(yàn)證
 

    * Only where needed Excessive validation is as bad as its complete absence, because it will frustrate users. Restrict validation to confirming key points (such as the availability of a user name), ensuring realistic answers (such as not allowing ages above 130) and suggesting responses where the range of possible data is finite but too long to include in a drop-down menu (such as a country-code prefix).

● 只在需要時(shí)驗(yàn)證 。過(guò)多的驗(yàn)證跟完全沒有的效果一樣差，都會(huì)讓用戶受挫。驗(yàn)證僅限用于確認(rèn)重點(diǎn)信息（比如驗(yàn)證一個(gè)用戶名是否可用），確保答案真實(shí)（不允許填寫130歲以上的年齡），當(dāng)數(shù)據(jù)的范圍有限但是太長(zhǎng)，用一個(gè)下拉菜單顯示不全時(shí)，給出反饋建議（例如一個(gè)國(guó)家的代碼前綴）。
 

    * Smart defaults Use smart defaults to make the user’s completion of the form faster and more accurate. For example, pre-select the user’s country based on their IP address. But use these with caution, because users tend to leave pre-selected fields as they are.

● 智能缺省 。使用智能缺省是為了讓用戶更快更準(zhǔn)確地完成填表。例如，根據(jù)用戶的IP地址事先選定其國(guó)家。但是使用這些時(shí)要格外小心，因?yàn)橛脩粢话悴粫?huì)去改這些事先選定項(xiàng)。
 

 

      Twitter’s registration form uses both dynamic validation (for the name, email address, password and user name) and smart defaults (“Keep me logged in”). 

Twitter 的注冊(cè)表單使用了動(dòng)態(tài)驗(yàn)證（在姓名、郵箱、密碼和用戶名上）和智能缺?。?ldquo;保持登錄狀態(tài)”）。
 

Conclusion The Beginning

結(jié)束語(yǔ)  開端
 

The word “conclusion” is not right here. Let this be your starting point to take what I have written about and apply it to your own forms. The good news is that there is much more to say about all this; you can find an abundance of resources on each point made here. For starters, three books are listed below that inspired me when writing this post. As I stated at the beginning, taking shortcuts by only tweaking the UI will not make your forms more usable. What more can I say? The theory is now with you. Go get your hands dirty.

結(jié)束這個(gè)詞用在這里不準(zhǔn)確。就讓這里成為你學(xué)以致用的起點(diǎn)吧。所有這些還有很多可以研究，這里的每一點(diǎn)都可以找到豐富的資源。就像我在文章開始時(shí)說(shuō)的，通過(guò)修改UI走捷徑的方法，不會(huì)讓你的表單更好用。你問(wèn)我還要說(shuō)點(diǎn)什么？現(xiàn)在你已經(jīng)掌握這些理論了，放手干吧。