簡單實用的網頁表單設計:設計使用者喜歡的網頁表單

來源:互聯網
上載者:User

文章描述:漫談表單設計.

跟你所知的相反,布滿漂亮的按鈕、顏色和字型,再加上一大把jQuery外掛程式的表單並不一定好用。真的,這麼做只能(零散地)體現表單可用性的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.

本文中,我們將為你提供簡單實用的指南。這些精心製作的指南,囊括了可用性測試、實地測試、網站跟蹤,眼球跟蹤、網路分析,甚至還有使用者對客服人員的抱怨等諸多方面。

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標準中對網站可用性的定義是:特定使用者在特定環境下,能夠快速、有效且滿意地完成特定的目標。使用者使用網站都是有目標的。 如果設計得好,網站不但會達到使用者的目標,還會將其與自身公司的目標聯絡起來。介乎使用者目標和公司目標之間的往往就是表單,因為,儘管人機互動發展迅速,表單仍然是使用者與網站互動的主要方式。實際上,表單經常被認作是完成目標的最後也是最重要的一站。

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:

讓我們通過討論表單的三個主要作用來闡述下最後這一點。就像Luke Wroblewski在他的《web表單設計:點石成金的藝術》一書中說的一樣,每個表單的存在必有如下三個原因之一:商務、社區或效率。下面的表單把這三個原因轉化成了其背後的使用者目標和公司目標:


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

表單的作用,基於Luke Wroblewski的《web表單設計:點石成金的藝術》。

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

如此可見,表單和可用性有如下兩方面的關係:

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

1. 表單可以使網站好用或不好用,因為它們擋在使用者達成目標的路上。

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

2. 為了協助使用者達成目標,表單必須要好用。

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.

本文將重點講述第二點,因為表單好用了,網站的整體可用性自然會提升,也就是上面的第一點。

The Six Components Of Web Forms

表單的六個組成部分

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:

對於設計師和使用者來說,表單讓人愛恨交加。隨著時間的流逝,對於表單的表現形式和操作方式,使用者已有了自己的期望。基本上,他們期望表單包含如下六個部分:

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

1.標籤。告訴使用者相應的輸入欄位裡應該填什麼。

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.操作。包括連結和按鈕,使用者點擊後,會執行一項操作,比如提交表單。

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.資訊。使用者輸入內容的反饋資訊。可能是肯定的(比如提示表單提交成功),也可能是否定的(“該使用者名稱已被註冊”)。

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

6.驗證。確保使用者提交的資料符合參數規則。



Skype’s registration form contains all six components.

Skype的註冊表單包含了以上六個部分。

[1] [2] [3] [4]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。