中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

用戶可能不愿意填寫表格，所以盡可能簡單，微小的變化都有可能極大的提高用戶體驗。

目錄

1. 表單組成
2. 表單結構
3. 輸入字段
4. 標簽
5. 按鈕
6. 驗證
7. 會話界面：設計表單的新方式
8. 總結

概要

用戶使用應用或網站都有一個目的。通常，用戶實現(xiàn)目標的的方式之一就是表單。 表單仍然是用戶在網頁和應用中最重要的交互類型之一。大多數(shù)情況下，表單往往是完成目標的最后一步。用戶應該能夠快速完成表單。

在本文中，您將看到從可用性測試、試驗測試、眼動追蹤研究以及用戶的投訴中獲得的實用技巧。這些技巧被正確使用時，能夠產生更簡單，更高效的表單體驗。在文章的最后，還將找介紹一種設計表單的新方法。

1. 表單組成

常見的表單有以下五個部分：

• 結構：這包括字段順序，表單在頁面上的顯示以及多個字段之間的邏輯關系。
• 輸入字段：這些字段包括文本字段，密碼字段，復選框，單選按鈕，滑塊和任何其他用于輸入的字段。
• 文本標簽：告訴用戶相應的輸入字段的含義。
• 動作按鈕：當用戶按下該按鈕時，執(zhí)行動作。
• 反饋：通過反饋使用戶了解他們的輸入結果。 大多數(shù)應用和網站使用純文本作為反饋的形式。

表單也可能包含以下內容：

• 輔助信息：解釋如何填寫表單。
• 驗證：自動檢查用戶的數(shù)據(jù)是否有效。

本文將介紹表單結構、輸入字段、標簽、按鈕和驗證的許多方面。

2. 表單結構

表單是一種對話。 就像對話一樣，它應該由兩方之間的邏輯通信組成：用戶和應用。

只保留必要的字段

確保只有真正需要的字段。添加到表單的每個額外字段都會影響轉換率。要一直思考為什么要向用戶請求這些信息以及將會如何使用它。

按照邏輯順序排列

從用戶的角度而不是從應用或數(shù)據(jù)庫的角度來提問。比如，在他們的名字之前詢問某人的地址是不合理的。

聚合相關字段

將相關字段分組集合。從一組問題到下一組問題的方式更像對話。 將相關字段分組在一起也能幫助用戶理解需要填寫的信息。比較下面的兩種信息表單的方式。

聚合相關字段 （Image: Nielsen Norman Group）

一列還是多列？

多列展示表單字段的問題之一，就是用戶填寫字段的順序可能會偏離預期。如果一個表單多列字段，那么用戶必須以Z模式進行掃描，從而降低了理解的速度并使完成的路徑混亂。但是，如果在一個列中，則完成的路徑是明確的一條直線。

在左邊，有許多方式解釋表單字段之間的關系，而在右側是明確的直線。

3.輸入字段

輸入字段是使用戶填寫的字段，比如文本字段、密碼字段、下拉菜單、復選框、單選框、日期選擇器等等。

字段數(shù)量

表單設計中的一個經驗法就是，越短越好。這當然看起來很直觀：降低用戶的成本，提高轉換率。因此，盡可能減少字段的數(shù)量。 這會讓你的表單感覺更簡單，特別是當你需要用戶填寫大量的信息時。但是，不要過頭。 在給定的時間只顯示五到七個輸入字段是常見的做法。

在一個容易填寫的字段中聚合多個字段，如地址 （Image: Luke Wroblewski）

必填還是選填？

盡量避免表單中的選填字段。但是如果要使用它們，一定要清楚地區(qū)分哪些輸入字段是必填的。一般對必填字段使用星號（*）。 如果您決定在必填字段中使用星號，請在表單頁面顯示一個提示，說明星號的用途，因為不是每個人都明白它的含義。

MailChimp郵件列表的訂閱表單。

設置默認值

避免設置默認值，除非您認為大部分用戶將選擇該值，尤其是必填字段。為什么？
因為你可能會增加錯誤。用戶會快速掃描表單，所以他們可能會跳過一些已經有默認值的字段。

但是這個規(guī)則不適用于智能的默認值——也就是根據(jù)用戶的信息設置的默認值。智能的默認值可以使表單更快，更準確地完成。例如，根據(jù)定位數(shù)據(jù)預先選擇用戶所在的國家/地區(qū)。不過，請謹慎使用。

智能預先選國家的表單

輸入掩碼

字段掩碼是一種幫助用戶格式化輸入文本的技術。一旦用戶將焦點集中在一個字段上，就會出現(xiàn)一個掩碼，并且在字填寫時自動對文本進行格式化，幫助用戶專注于所需的數(shù)據(jù)并且更容易地發(fā)現(xiàn)錯誤。在下面的例子中，當輸入電話號碼和信用卡號碼時，會自動應用括號、空格和破折號。 這個簡單的技術可以節(jié)省輸入電話號碼、信用卡、貨幣時的時間和精力。

（Image: Josh Morony）

PC端：鍵盤適配

用戶只使用鍵盤也應該能完成表單。用戶的手指不離開鍵盤，就能輕松編輯字段。 您可以在W3C的設計模式指南中找到關于鍵盤交互的詳細要求。

即使是一個簡單的日期選擇器也應該遵守W3C的指南。 （Image: Salesforce）

PC端：自動聚焦

自動對焦字段為用戶提供指示和起點，以便于快速開始填寫表格。提供一個清晰的視覺信號，焦點已轉移，無論是通過改變顏色，閃爍的箭頭。亞馬遜的注冊表格既有自動對焦又有可視化的指示。

移動端：適配鍵盤

手機用戶喜歡提供適當鍵盤的應用。應該在在整個應用中實現(xiàn)鍵盤適配，而不僅僅是某些任務。

（Image: Google）

限制輸入（自動補全）

隨著越來越多的人使用手機，減少不必要的打字將提高用戶體驗，并減少錯誤。 自動補全可以減少打字量。 例如，填寫地址欄通常是表單中最成問題的部分，像地址自動填充（基于用戶的定位和輸入提供準確的建議）的工具使用戶能以更少打字量完成輸入。

4.標簽

清晰的標簽是使界面容易理解的方法之一。一個好的標簽會告訴用戶該區(qū)域的目的，當焦點在該區(qū)域時應該要保持可見，并且即使在被填充之后也要可見。

字數(shù)

標簽不是幫助文檔。應該使用簡潔的描述性文字，以便于用戶快速掃描表單。以前版本的亞馬遜注冊表單中包含了很多詞匯，導致完成率較低。 目前的版本好多了，標簽也很簡短。

句子樣式，還是標題樣式？

在大多數(shù)應用中，采用大寫字母有兩種方式：

• 標題樣式：每個詞的首字母大寫。 “This Is Title Case.”。
• 句子樣式：句子的首字母大寫?！癟his is sentence case.”。

與標題樣式相比，句子樣式的標簽有一個優(yōu)點：讀起來稍微容易一些（因此速度更快）。雖然對于短標簽的差異可以忽略不計（“Full Name”和“Full name”），但對于較長的標簽，差異會比較明顯。

避免全部大寫

切勿全部大寫，否則表單將難以閱讀，難以快速掃描。

全部大寫的標簽是非常難以閱讀的。

標簽的對齊方式：左對齊、右對齊、頂部對其

Matteo Penzo 于2006年發(fā)布的關于標簽放置的文章表明，如果標簽位于字段之上，表格的完成速度會更快。 如果您希望用戶盡快掃描表單，則頂部對齊的標簽是很好的。

左對齊，右對齊和頂部對齊的標簽（Image: UX Matters）

頂級標簽的最大優(yōu)勢是不同尺寸的標簽和版本可以更容易的融入到用戶界面中。（這對空間有限的屏幕特別有用）

（Image: CSS-Tricks）

左對齊標簽最大的缺點是它的完成時間最慢。 這可能是因為標簽和輸入字段之間的視覺距離。標簽越短，距離輸入越遠。但是，緩慢完成率并不總是一件壞事，特別是如果表單要求敏感數(shù)據(jù)。 如果您要求提供駕駛證號碼或社會安全號碼，可能會故意減慢用戶的速度，以確保正確輸入。因此，閱讀敏感數(shù)據(jù)標簽的時間是可以接受的。左對齊的標簽還有另一個缺點：它們需要更多的橫向空間，這對于移動應用來說可能是個問題。

（Image: CSS-Tricks）

右對齊標簽的最大優(yōu)點是標簽和輸入之間明確的視覺關聯(lián)。彼此靠近的項目應該是相關的。對于簡短的表格，右對齊的標簽可以有很快的完成時間。 缺點是體驗并不舒服： 左邊緣參差不齊，這使得看起來更不舒服，更難以閱讀。

（Image: CSS-Tricks）

提示：如果您希望用戶快速掃描表單，請將標簽放在字段上方。這種布局將更容易掃描，因為眼睛會直接向下移動頁面。但是，如果您希望用戶仔細閱讀，請將標簽放在字段的左側。 這種布局會減慢閱讀器的速度，并使其以Z型模式進行掃描。

占位符文本

一旦字段獲得焦點，在輸入字段中設置為占位符的標簽將消失; 用戶將不能再查看它。 雖然占位符文本可能適用于兩個字段的表單（比如，帶有用戶名和密碼字段的簡單表單），但當用戶需要更多信息時，占位符的體驗會比較差。

（Image: snapwi）

一旦用戶點擊字段，標簽將消失，因此用戶無法仔細檢查他們是否寫下了所要求的內容。這增加了錯誤的可能性。另外一個問題是，用戶可能會把占位符文本誤認為預填數(shù)據(jù)，因此忽略它（正如尼爾森諾曼

集團的眼動追蹤研究所證實的）。

占位符文本作為標簽

占位符文本的一個很好的解決方案是浮動標簽。 占位符文本將默認顯示，但是一旦輸入字段被點擊并輸入文本，占位符文本淡出，變更為頂部對齊的標簽。

（Image: MDS）

提示：不要只依靠占位符文本，因為一旦一個字段被填寫，占位符文本將不再可見。使用浮動標簽，可以方便用戶確定他們填寫了正確的字段。

5.按鈕

點擊后，按鈕會觸發(fā)一些動作，例如提交表單。

主要按鈕和次要按鈕

主要和次要按鈕之間缺乏視覺上的區(qū)分很容易導致失敗。降低次要行為的視覺突出，最大限度地減少錯誤的概率。

相同及不同的視覺等級（Image: Luke Wroblewski）

按鈕位置

復雜的表單通常需要一個后退按鈕。如果這樣的按鈕位于輸入字段的正下方（如下面第一個截圖所示），用戶可能會不小心點擊它。由于后退按鈕是輔助操作，因此要在視覺上區(qū)分（下面第二個表單的按鈕更加合理）。

命名規(guī)則

避免使用如“提交”之類的通用詞語來表示，因為它對于任何表單似乎都適用。命名應該說明按鈕在點擊時將執(zhí)行的操作，例如“創(chuàng)建帳戶”。

多按鈕

避免多個按鈕，因為它們可能會分散用戶的目的。每個流程都應該有一個明確的目的，確保用戶朝著這個方向。

重置按鈕是

不要使用重置按鈕。這個按鈕幾乎沒有意義，并經常損害體驗。

按鈕的視覺表現(xiàn)

確保按鈕看起來像按鈕：讓用戶明白它是可以點擊的。

陰影表示可以點擊。 （Image: Vadim Gromov）

可視化反饋

設計“提交”按鈕時，要清楚地告知用戶正在處理后。 必須向用戶提供反饋，同時防止雙重提交。

（Image: Micha?l Villar）

6. 驗證

驗證錯誤是不可避免的，并且是數(shù)據(jù)錄入的不可缺少的環(huán)節(jié)（因為用戶容易犯錯誤）。雖然應該盡量減少出錯的情況，但是驗證錯誤永遠不能缺少。所以，最重要的問題是，你如何使用戶輕松糾正錯誤？

實時驗證

用戶不喜歡在提交時才發(fā)現(xiàn)他們犯了錯誤。特別令人沮喪的是完成一個長的表單，并“提交”之后，得到了多個錯誤消息。當你不清楚你在哪里犯了什么錯誤的時候更加惱人。

（Image: Stack Exchange）

一旦用戶輸入數(shù)據(jù)，應該立即告知用戶文本的正確性。好的表單驗證的主要原則是：與用戶交談！ 告訴他們什么是錯的！ 實時驗證會可以告知用戶其數(shù)據(jù)的正確性。

這種方法允許他們更快地糾正錯誤，而不必等到按下“提交”按鈕才能看到錯誤。

但是，請避免驗證每個字段，因為在大多數(shù)情況下，只有在完成輸入之前，就進行驗證。因此在數(shù)據(jù)輸入過程中驗證的字段一旦開始輸入數(shù)據(jù)，就會出現(xiàn)錯誤。

Google的表單在輸入完成之前，就會指出電子郵件地址無效。 （Image: Medium）

若驗證發(fā)生在用戶完成輸入之后，用戶不能即時獲知已糾正錯誤。

在Apple Store中，驗證發(fā)生在輸入完成之后。（Image: Medium）

Mihael Konjevi? 在他的《表格中的內聯(lián)驗證：設計體驗》中，考察了不同的驗證策略，并提出了一個滿足雙種情況的混合策略：獎勵早，懲罰晚。

• 如果用戶在處于已驗證正確的字段（即先前輸入的數(shù)據(jù)是有效的）中輸入數(shù)據(jù)，則在數(shù)據(jù)輸入后驗證。
• 如果用戶在處于已驗證錯誤的字段（即以前輸入的數(shù)據(jù)無效）中輸入數(shù)據(jù)，則在數(shù)據(jù)輸入過程中進行驗證。

混合策略：盡早獎勵，延遲懲罰。（Image: Medium）

7.會話界面：設計表單的新方法

最近，我們看到了很多關于會話界面和聊天機器人中令人興奮的方法。這種現(xiàn)象有幾種趨勢，其中有一點是人們花在消息傳遞應用上的時間多于在社交應用上的時間。這使得在對話中支持交互的方法產生了大量的嘗試，例如在購物應用中，通常模仿消息傳遞的方式。即使在這種趨勢下，交互形式已經發(fā)生了變化。設計師正在嘗試將傳統(tǒng)的網頁形式轉換成交互式的對話界面。

采用自然語言

每個界面都是一個對話。傳統(tǒng)的形式已經與對話非常相似。唯一的不足就是我們提問的方式。但是，如果我們設計表單時，以貼近真實人類（而非機器）對話的方式來提問問題呢？ 所以，而要用人類的方式與進行交互。下面的表單創(chuàng)建了一個會話，不需要依賴于web表單的傳統(tǒng)元素（如標簽和輸入字段）。

Codrops的表單設計采用對話模式來更好地幫助用戶完成任務。

對話式表單

會話表單是一個開源的項目，將網頁上的表單轉換為對話。它能將所有輸入元素替換為對話，可復用變量，也實現(xiàn)了對樣式的完全定制和控制。這個項目代表了我們思考用戶體驗和交互的有趣轉變，使用基于文本的對話來幫助用戶實現(xiàn)他們的目標。

8.結論

用戶可能不愿意填寫表格，所以盡可能簡單。微小的變化（例如聚合相關字段并指出字段的含義）可以顯顯著提高用戶體驗?？捎眯詼y試在表單設計中是不可或缺的。很多時候，只用幾個人進行測試，或者只是要求一個同事通過一個原型就可以讓你很好地洞察一個表單的可用性。

作者：Nick Babich

譯者：吉諾是比利

原文地址：https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/

本文系人人都是產品經理翻譯團隊@吉諾是比利 翻譯發(fā)布，未經本站允許，禁止轉載。

題圖來自unsplash，基于CC0協(xié)議