表單對(duì)于業(yè)務(wù)成功至關(guān)重要，且可能導(dǎo)致轉(zhuǎn)換率降低，客戶被遺棄。而且這也是用戶最為掙扎的地方。那么設(shè)計(jì)師在這種情況下如何幫助用戶呢？如何設(shè)計(jì)一個(gè)非常好的表單？這里有一些建議。

有多少人喜歡填寫表單？我認(rèn)為不是很多。因?yàn)檫@不是用戶想要的服務(wù)——他們只是想購買門票，或和朋友聊天等等。而注冊(cè)是不可避免的，他們必須處理的惡行。那么提交表單有什么問題？

1. 這是很浪費(fèi)時(shí)間的；
2. 復(fù)雜形式很難弄清楚；
3. 表單會(huì)要求用戶不敢共享的信息——信用卡的詳細(xì)信息、電話號(hào)碼、地址。

表單對(duì)于業(yè)務(wù)成功至關(guān)重要，且可能導(dǎo)致轉(zhuǎn)換率降低，客戶被遺棄。而且這也是用戶最為掙扎的地方。那么設(shè)計(jì)師在這種情況下如何幫助用戶呢？如何設(shè)計(jì)一個(gè)非常好的表單？這里有一些建議。

允許注冊(cè)并通過社交服務(wù)登——Facebook，Google等

社會(huì)登錄是一個(gè)非常強(qiáng)大的工具，它可以幫助實(shí)地完成工作。它會(huì)讓人們知道他們的社會(huì)數(shù)據(jù)是有保障的，并解釋你會(huì)需要什么樣的信息。

保存輸入數(shù)據(jù)

表單中最有用的功能之一——記住用戶已經(jīng)填寫的輸入數(shù)據(jù)。如果出現(xiàn)問題，用戶不需要再次重新輸入所有信息。此功能對(duì)于長(zhǎng)形式特別有用。

保留表單盡可能的短，或?qū)⑵洳鸱殖啥鄠€(gè)步驟

在你的表單中只添加必需字段——它可以節(jié)省時(shí)間并減少錯(cuò)誤。如果一個(gè)字段是可選的，最好不要顯示它。將表單限制為只有1或2個(gè)可選字段，并將其清楚地標(biāo)記為可選字段。也可刪除任何確認(rèn)字段，只要是你真正需要的。如果你無法避免使用較長(zhǎng)的表單，請(qǐng)將其拆分成多個(gè)步驟并對(duì)相關(guān)字段進(jìn)行分組。

自動(dòng)對(duì)焦窗體中的第一個(gè)輸入域

自動(dòng)對(duì)焦會(huì)引導(dǎo)用戶到你的表單起點(diǎn)。強(qiáng)調(diào)第一個(gè)字段與邊框顏色，背景顏色或兩者兼而有之。

圖片來源：Udacity

避免使用隱私警察協(xié)議確認(rèn)的復(fù)選框

而不是復(fù)選框，使用帶有關(guān)于接受條款和政策的鏈接的文本。

圖片來源：Coursera

你可以使用一種表單進(jìn)行注冊(cè)和登錄（注意）

創(chuàng)建一個(gè)注冊(cè)和登錄的通用表單是一個(gè)很好的選擇。輸入電子郵件和密碼后，服務(wù)器會(huì)檢查電子郵件是否已經(jīng)在數(shù)據(jù)庫中。如果是，你將登錄，如果不是，該服務(wù)將為你創(chuàng)建一個(gè)新帳戶。但注意這種方法有一些問題——如果你輸入錯(cuò)誤但有效的電子郵件，該服務(wù)將使用此電子郵件創(chuàng)建一個(gè)帳戶。

圖片來源：Bookmate

在單列布局中顯示字段

通過粘貼到單個(gè)列以避免重新定向來維持用戶流動(dòng)（例外：簡(jiǎn)短的相關(guān)字段，如城市，州和郵政編碼）。

提供清晰的標(biāo)題

一個(gè)好的設(shè)計(jì)從文本開始，一個(gè)好的形式從標(biāo)題開始。簡(jiǎn)短且智能的CTA向用戶展示了完成此表單的好處，并激勵(lì)他們。為了值得信賴，顯示用戶的信息是安全的，提供安全徽章。

圖片來源：New York?Times

設(shè)置輸入

輸入字段是任何形式的基本元素。簡(jiǎn)單的輸入由幾個(gè)部分組成——輸入字段，標(biāo)簽，占位符。

輸入字段

一般來說，一個(gè)文本字段有6個(gè)表示 – 默認(rèn)，懸停，焦點(diǎn)，錯(cuò)誤，成功和禁用。

文本字段狀態(tài)

標(biāo)簽

一個(gè)好的經(jīng)驗(yàn)是使用頂部對(duì)齊的標(biāo)簽，因?yàn)樗鼈兏熳x取。簡(jiǎn)而言之，可以使用有意義的圖標(biāo)而不是標(biāo)簽。另一種方法是使用像Material Design這樣的浮動(dòng)標(biāo)簽。標(biāo)簽應(yīng)該有一個(gè)簡(jiǎn)短而清晰的mircocopy。一個(gè)案例或標(biāo)題案例——這是你的選擇，且要保持標(biāo)簽命名的一致性。組合相關(guān)標(biāo)簽和字段，將標(biāo)簽放置在與其相關(guān)的字段附近。

字段標(biāo)簽

占位符

占位符是幫助用戶了解可輸入數(shù)據(jù)類型和格式的提示。避免使用占位符作為標(biāo)簽，而使表單緊湊。它適用于2-3個(gè)字段的短格式，但不適用于較長(zhǎng)的表單。當(dāng)用戶將信息輸入到該字段中時(shí)，占位符消失，用戶可能無法檢查是否輸入正確類型的數(shù)據(jù)。

避免使用占位符作為標(biāo)簽

注意密碼字段

我指出了密碼字段，因?yàn)樗凶约旱募s束和技巧。

讓用戶看到他們的密碼

它可以幫助用戶在提交之前檢查其密碼。

顯示密碼強(qiáng)度

好的密碼很難被猜到。給用戶顯示他們密碼的強(qiáng)度和安全性，以及是否需要使其更復(fù)雜。

圖片來源：Dropbox

提交之前顯示密碼要求

如果你的服務(wù)需要特定要求的密碼，請(qǐng)?jiān)谔峤槐韱沃帮@示。

圖片來源：MailChimp

提醒用戶大小寫字母轉(zhuǎn)換鍵的開啟

它有助于防止突然按下Caps Lock鍵的Shift鍵，這種常見錯(cuò)誤的出現(xiàn)。

圖片來源：Privat24

設(shè)計(jì)一個(gè)“忘記密碼？”流程在登錄表單上

人們常常忘記密碼（我也是這樣的），可以方便提醒或恢復(fù)密碼。

圖片來源：Bookmate

創(chuàng)建強(qiáng)大的按鈕

名稱按鈕正確

不是使用一般的提交標(biāo)簽，表單按鈕應(yīng)該準(zhǔn)確描述用戶正在執(zhí)行的任務(wù)——?jiǎng)?chuàng)建帳戶或登錄等。

禁用該按鈕，直到所有必需的輸入已完成

這是在提交之前的視覺驗(yàn)證輸入的另一種方式。

正確使用主按鈕和輔助按鈕

如果你有兩個(gè)按鈕——主要和次要的，你應(yīng)該在視覺上區(qū)分它們以減少潛在的錯(cuò)誤。更重要的是，主按鈕應(yīng)該看起來更加的明顯。

避免復(fù)位和清除按鈕！

思考錯(cuò)誤的預(yù)防

錯(cuò)誤預(yù)防是好的形式最重要部分之一。思考系統(tǒng)如何防止和修復(fù)常見錯(cuò)誤，而不是僅顯示用戶的錯(cuò)誤消息。

輸入自動(dòng)化

用戶的自動(dòng)化輸入可以通過減少填寫所需的字段來防止他們的錯(cuò)誤。

1. 根據(jù)郵政編碼或地理定位數(shù)據(jù)自可動(dòng)填寫城市和州級(jí)的文本字段。
2. 從輸入的信用卡號(hào)中選擇卡類型。

輸入掩碼格式化你的字段

要解決輸入問題，請(qǐng)使用格式化數(shù)據(jù)字段上的輸入掩碼。輸入掩碼會(huì)自動(dòng)在該字段中插入正確的格式。

域的限制

控制用戶輸入的另一種技術(shù)是添加字段約束。例如，僅允許使用電話和郵政編碼字段的數(shù)字。

記住錯(cuò)誤驗(yàn)證

使用內(nèi)聯(lián)驗(yàn)證

避免錯(cuò)誤摘要，在輸入旁邊放置錯(cuò)誤消息。一次顯示一個(gè)字段的錯(cuò)誤消息。

圖片來源：LinkedIn，Asos

使用清晰的mircocopy檢查錯(cuò)誤信息

它應(yīng)該告訴用戶為什么他們的信息被拒絕以及如何解決它。錯(cuò)誤信息語氣應(yīng)該是有禮貌且專業(yè)。

在提交之前驗(yàn)證具有多個(gè)要求的字段

突出顯示顏色、圖標(biāo)和文字的錯(cuò)誤字段

使錯(cuò)誤信息清晰可見，使用不同的方式強(qiáng)調(diào)它的顏色、文字和圖標(biāo)。

結(jié)論

我們可以看到，一個(gè)好的注冊(cè)表單是一件棘手的事情，它不僅僅是一個(gè)好的UI設(shè)計(jì)。為了改善用戶體驗(yàn)，設(shè)計(jì)師需要考慮過程的所有細(xì)節(jié)。正確的形式可以增加轉(zhuǎn)換并減少用戶的放棄。

譯者：SKYUI

原文作者：Vitaly Dulenko（UI/UX Designer）

原文地址：https://uxplanet.org/how-to-design-great-ux-for-sign-up-form-8ce39f84659?source=collection_home—4——0———–

本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。