在下面的這篇文章中，我們來看看有助于你設(shè)計不同可用性表單的10個最佳實踐，希望它對設(shè)計人員和開發(fā)人員都有用，玩得開心。

好吧，讓我們開始吧！

“表單”是什么意思，它在哪里使用？

通常，表單是一個帶有標(biāo)簽和字段的框，其中包含一個號召性用語按鈕。

以下是網(wǎng)站和應(yīng)用程序的許多部分中使用的表單的一些示例：

• 登錄/注冊
• 采購訂單
• 門票預(yù)訂
• 房間預(yù)訂
• 付款結(jié)賬
• 通訊訂閱
• 咨詢/審計請求
• 捐贈
• 調(diào)查
• 自定義表格
• ……

那么，如何設(shè)計一個用戶友好的表單？

一般來說，表單設(shè)計為用戶端隱藏了許多困難和痛苦的地方。因此，有必要設(shè)計一個用戶友好的表單。

讓我們從討論表單設(shè)計的兩個主要規(guī)則開始：

首先，表單設(shè)計的最佳實踐是做用戶測試，永遠不要忽視用戶的意見，即使你不同意。

進行用戶測試有助于找出生活中的小竅門，比如測量與表單交互的時間、檢測痛點、觀察用戶如何使用界面、他在哪里卡住或找不到必要的元素等等。

執(zhí)行這些活動可以幫助初學(xué)者避免表單世界中最大的和無知的錯誤。

技巧1：單列布局

避免曲折界面空間布局。通過眼動追蹤測試可以看出，用戶花費更多時間從一列跳到另一列，并且在確定表單中的特定字段時遇到了麻煩。

與此相反，單列設(shè)計只是從上到下的讀取，它創(chuàng)建了與表單的簡單交互。

具有多列設(shè)計的表單通常會導(dǎo)致用戶省略字段，原因很簡單，因為他們沒有注意到這些字段，或者因為他們誤解了多列的含義，或者填寫了不相關(guān)或不正確的字段，因為用戶將它們誤解為所需輸入的一部分。

單列設(shè)計更有效

技巧2：完成和對齊的路徑

巴塞爾大學(xué)的研究人員發(fā)現(xiàn)，左對齊優(yōu)于中心對齊是減少完成時間路徑的最佳方法，如左對齊，眼睛不需要跳過頁面。

標(biāo)簽的正確對齊方式將注視時間減少了近一半，這表明這種布局大大降低了用戶完成任務(wù)所需的認知負荷。

曲折的定位需要更多的時間來完成

技巧3：對長表單和進度條使用向?qū)?/h3>

當(dāng)你需要設(shè)計大數(shù)據(jù)表單時，確保表單中的所有字段都是真正必要的、唯一的、不重復(fù)的。即使您沒有機會優(yōu)化您的大數(shù)據(jù)表單，也可以使用帶有步驟的向?qū)А?/p>

很簡單：

1. 分段上的組表單字段；
2. 記住保存按鈕:它保護用戶處理和填充的數(shù)據(jù)；
3. 分步顯示填充進度:幫助用戶了解完成了多少步，還剩下多少步。

向?qū)Ш瓦M度條使復(fù)雜的表單變得清晰

技巧4：不要忘記將相關(guān)信息分組

分組形式看起來有組織，整齊和清晰。因此，將相關(guān)信息以長格式分組到標(biāo)題或分隔符下。

為什么要將相關(guān)信息分組?

假設(shè)，用戶在填寫表單時想要更改任何特定字段中的內(nèi)容，突然覺得需要更改任何字段。在這種情況下，分組將幫助用戶快速記住必要字段出現(xiàn)在哪個部分。

相關(guān)內(nèi)容成組

技巧5：可選而不是必需的

大多數(shù)情況下，所有字段都是必填項，只有幾個字段是可選的。用星號標(biāo)記必填字段是一種廣泛的實踐，但實際上這種形式開始用紅色星號表示。

順便說一句，紅色會從用戶方面引起負面關(guān)聯(lián)，因為紅色只用于錯誤。

在我的經(jīng)驗中，有一次在測試原型時，用戶問我星號是什么意思？它是書中的標(biāo)簽還是描述中的標(biāo)簽?

奇怪，不是嗎?我們看到星號并不適合所有類型的用戶。

為了避免這種誤解，最好使用“僅可選字段”。

對于非必需字段使用可選標(biāo)簽

技巧6：使用自動完成功能

用戶很懶，這是事實。

所以，當(dāng)你有機會讓自己的生活更簡單時，他們會很感激。自動填充/自動填充使表單完成速度提高30％。因此，分析可以自動填充/自動填充的表單元素。

為了給您一個想法，可以自動完成城市，國家，電話，電子郵件等元素。

自動完成功能可以簡化用戶的生活

技巧7：自定義輸入格式

注意輸入字段格式。在任何地方只使用簡單的輸入或下拉框都是不好的做法。

字段類型是否更多并不重要，用戶喜歡數(shù)據(jù)字段的不同表示形式。

表示吸引人的信息的最簡單方法是：

1. 為性別類型使用單選按鈕，不要害怕使用圖標(biāo)；
2. 金融領(lǐng)域使用帶有貨幣文字的標(biāo)簽，自動區(qū)分千萬和百萬；
3. 設(shè)計手機號碼、工作日、日期等明顯字段；
4. 使用帶有自動提示功能的高級搜索，避免用戶手工填寫許多字段。

嘗試對數(shù)據(jù)字段進行不同的修改

此外，永遠不要忘記關(guān)于輸入格式的規(guī)則：

1. 字段的長度提供答案的長度；
2. 電子郵件字段驗證；
3. 盡可能多地預(yù)填充/自動檢測；
4. 最小/最大長度；
5. 數(shù)字、字母、字母數(shù)字，所有符號；
6. 依賴性；
7. 占位符。

技巧8：CTA（call to action）風(fēng)格規(guī)則

用戶不應(yīng)該花很多時間去弄清楚應(yīng)該使用哪個按鈕來執(zhí)行一個操作。例如:這個按鈕是用于提交表單還是丟棄表單?

因此，確保在表單中正確定義和區(qū)分主按鈕和輔助按鈕。

你可以簡單地使用不同的顏色。避免主按鈕和輔助按鈕使用相同的顏色，因為它們會誤導(dǎo)用戶，或者使用對比色來區(qū)分它們。

在主按鈕和輔助按鈕之間進行分隔

技巧9：CTA縮微

為CTA按鈕使用簡短而清晰的名稱。這個按鈕的主要目的是吸引用戶的注意，并讓他們采取必要的行動。當(dāng)它簡短而清晰時，閱讀的時間就會減少，完成的時間也會減少。

簡短意味著清晰

技巧10：使用內(nèi)聯(lián)表單字段驗證

永遠不要忽視表單驗證的設(shè)計!不要把它放在開發(fā)人員的肩上。它是各種形式功能中最重要的部分。

作為設(shè)計人員，你必須為不同類型的錯誤狀態(tài)準(zhǔn)備文本和視圖、幫助文本以及其他與用戶通信的方法。花時間驗證微縮本。如果沒有為每種類型的錯誤準(zhǔn)備文本的資源，請考慮全局錯誤副本。

圖片來源：網(wǎng)絡(luò)

永遠記住，當(dāng)你為錯誤消息準(zhǔn)備一個文本列表時，永遠不要因為用戶的錯誤而責(zé)怪他。相反，要確保你傳達的信息是清晰的、切題的。

重點是，用戶數(shù)據(jù)需要實時驗證。不要讓您的用戶填寫所有字段，然后單擊submit按鈕以了解有什么地方出錯了。

不要強迫用戶找出錯誤

總結(jié)

為了使您的表單設(shè)計更加出色，讓我們避免以下內(nèi)容：

1. 復(fù)雜的消息；
2. 提交后進行全局驗證；
3. 字段的長標(biāo)題；
4. CTA按鈕的長名稱；
5. 未分組信息；
6. 丟棄自我暗示/自動完成；
7. 一頁無止盡的字段；
8. 對所有內(nèi)容使用一種輸入格式；
9. 容易忽視(色盲)；
10. 采用多欄設(shè)計；
11. 在字段中使用標(biāo)簽而不是占位符；
12. 容易混淆完成路徑；
13. 避免用戶測試；
14. 不要使用建議和指南。

所以，繼續(xù)考慮你的新表單設(shè)計，并祝你好運！

作者：Chris，公眾號（ID：LDesign1）

本文由@Chris 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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