1、33 個(gè)提升用戶體驗(yàn)的表單設(shè)計(jì)小 Tips好的表單設(shè)計(jì)能夠提升伺服器客戶端體驗(yàn)，具體如何做？本文梳理收集了 33 個(gè)能立即應(yīng)用的最好處理方式，與大家分享。想象一下，如果你走進(jìn)第一間商店，往購物籃里塞滿了雖找不到收銀臺(tái)的感覺。最后你可能放下所有東西一分錢沒花吃驚極其失望地離開了。的確，這種在支付過程中遇到的槽糕事情，也會(huì)發(fā)生在表單設(shè)計(jì)中才。糟糕的表單替我省了好幾百美元。冗長、繁瑣的表單嚇跑了你的顧客，讓你的公司潛在中流失了幾千美元。表單看起來是最簡單的 UI 組件，卻把控著你產(chǎn)品中最重要的交互設(shè)計(jì)。它們引導(dǎo)你的用戶去注冊、支付。我不需要告訴你這些示例在需要精心運(yùn)作的企業(yè)中扮演的重要角色。但是我也

2、有聽話的消息：做到好的表單設(shè)計(jì)不是那么難。在這篇指南里，我收集了 33 個(gè)你能立即應(yīng)用的最好的做法。它提供了一個(gè)頗為好的出發(fā)點(diǎn)去試驗(yàn)，找到對你有用的方法。我們會(huì)講到：你知道副本有多重要。我們曾在博客里寫過。調(diào)整表單設(shè)計(jì)能大大的提高你的轉(zhuǎn)化率。讓用戶知道完成表單的好處“我閑的時(shí)候，喜歡填不同的線上用表單。我就是喜歡填！”從來沒人這樣說。用戶需要明確的知道活動(dòng)他們的時(shí)間投入到這樣一個(gè)不合理的把里有什么好處。在結(jié)賬過程中，好處非常明顯，但是注冊呢？估算在表單的頂部突出顯示他們一旦注冊完能做什么。他們可以訪問獨(dú)家內(nèi)容，社區(qū)或者免費(fèi)簽到。不要羞于讓他們興奮。Marvel 顯示他們的大客戶和用戶數(shù)來展示他

3、們的社會(huì)認(rèn)同在注冊窗口旁邊使用社會(huì)認(rèn)同作為人類，我們都想歸屬于某處。我們需要知道一個(gè)產(chǎn)品是否應(yīng)該我們花費(fèi)時(shí)間、金錢和注意力。證明超鏈接和我們一樣，已經(jīng)加入了這個(gè)俱樂部并非常喜歡它，對你的房地產(chǎn)項(xiàng)目非常有幫助。你的產(chǎn)品上有一些大牌嗎？在注冊表單的旁邊描繪展示這些知名品牌的 logo 。你已經(jīng)擁有了多少滿意的用戶？它會(huì)讓原本猶豫的訪客對感到安心?，F(xiàn)在就為你所獲得的成就仰慕吧！明確錯(cuò)誤“發(fā)生了錯(cuò)誤”。好吧謝謝，我發(fā)現(xiàn)了。但是，我已經(jīng)看了多少遍了？這讓我非常受挫，我甚至都沒有得到一個(gè)哪里出錯(cuò)的提示。有人已經(jīng)使用了我的用戶名嗎？還是密碼強(qiáng)度設(shè)置的不夠嗎？幫幫你的用戶吧，讓這個(gè)正確盡可能的明確。詳情呢？在

4、相關(guān)輸入框旁邊顯示錯(cuò)誤的信息發(fā)生出錯(cuò)。哪錯(cuò)的，顯示在哪。假設(shè)用戶提交了有三處十座錯(cuò)誤的示例，然后全都結(jié)果顯示在頂部。這種情況下，他們需要瀏覽表單找出哪些需要注意。根據(jù)上下文顯示自相矛盾，不要忘了綜合考慮色盲用戶。不僅僅只使用紅色文字疏忽強(qiáng)調(diào)出錯(cuò)字段。圖標(biāo)是萬無一失的選擇。強(qiáng)烈推薦閱讀更多關(guān)于易訪問性的文章。對指令有明確的稱謂用戶不該對他們的操作所帶來的結(jié)果非常自信。如“提交”、“好的”、“允許”。描述用戶將采取的快捷鍵。多使用“注冊”、“立即支付”、“創(chuàng)造賬戶”。用戶操作成功時(shí)給他們反饋你可能以為支離破碎整個(gè)表單的設(shè)計(jì)到用戶按下“下單”就結(jié)束了。錯(cuò)！用戶需要清楚的已操作成功的反饋。還要讓他們知

5、道接下來的步驟。例如，有人在你的網(wǎng)店里下讓了單，顯示一個(gè)支付成功和訂單的頁面。甚至還可以提供預(yù)期的下一步時(shí)間線，比如產(chǎn)品什么時(shí)候送貨。優(yōu)化移動(dòng)端表單有兩個(gè)方面。一方面，我們需要額外注意某些事情。另一方面，我們手機(jī)有很多功能，會(huì)讓填寫源文件簡單些。在你的設(shè)計(jì)上多花點(diǎn)心思。本段四個(gè)將提供幾個(gè)簡單的示例，專門用于改進(jìn)移動(dòng)設(shè)備的表單用來設(shè)計(jì)。提供足夠大的點(diǎn)擊區(qū)域我周日晚上喜歡在電視上所看NFL比賽。球員的運(yùn)動(dòng)能力總是能讓驚愕我疑惑，就像他們的接球技術(shù)一樣。他們需要一雙狡蛛屬去接球。這些足球運(yùn)動(dòng)員可能是你下一個(gè)客戶。這些家伙看起來很強(qiáng)壯，所以你不相信你表單上的小小點(diǎn)擊框讓他們生氣。谷歌建議常量區(qū)域?yàn)?4

6、8x48px,這是一個(gè)很好的標(biāo)準(zhǔn)。不要回避使用手機(jī)的硬件功能在用手機(jī)填寫表格的用戶中，大約99%都的人長都有一個(gè)功能齊全的攝像頭。你想過利用它嗎？只需點(diǎn)擊按鈕，他們就可以掃描身份證或信用卡上轉(zhuǎn)賬的信息，否則這可以需要更長的間隔填寫信息。更進(jìn)一步，考慮一下使用 GPS 或生物識(shí)別的可能性。使用與預(yù)期輸入相匹配的鍵盤如果你簡體希望用戶填入郵箱地址，激活鍵盤文本模式，如果他們需要輸入電話號(hào)碼，顯示數(shù)字鍵盤。這只需要花一點(diǎn)心思，就能節(jié)省應(yīng)用程序?qū)氋F的時(shí)間，不需要他 們自己跑來跑去切換鍵盤。這還有助于他們了解您期望的輸入類型。使用本機(jī)原生輸入谷歌和蘋果都投入了大量研究來設(shè)計(jì)他們自己的 UI 控件。大多數(shù)

7、 人都見過這些，所以除非你有充分的理由不這樣做，否則請堅(jiān)持使用 本機(jī)控件。選用正確的輸入類型這可能將看起來顯而易見，但實(shí)際上并不總是那么容易。不要讓用戶從 200 多個(gè)下拉列表中所選擇一個(gè)國家，或者從下拉列表中選擇“是 / 否”，這樣會(huì)讓用戶覺得一團(tuán)糟。復(fù)選框、單選按鈕、下拉菜單、這段話本和長文本輸入在表單的世界里任何東西都有自己的位置。只要確保安全在適當(dāng)?shù)臅r(shí)候使 用它們。避免超長下拉框節(jié)日季正在漸次的過去，但你可能在線訂購了一些禮物。要做到這一點(diǎn)，你需要送貨選擇發(fā)貨到哪個(gè)國家。在那個(gè)時(shí)候，從滾動(dòng)條里200 多個(gè)國家里里頭找到你的真是太讓人則生氣了。明年再設(shè)計(jì)表單的時(shí)候，最好讓用戶從預(yù)設(shè)列表里

8、輸入并選擇國家。這需要你的開發(fā)人員多做一些額外的工作，但是你的用戶會(huì)為此 感謝你。使用智能的即時(shí)搜索方案為什么不讓前面的提示更進(jìn)一步呢？花點(diǎn)時(shí)間思考掙用戶可能將遇到的場景。一個(gè)居住在蘇格蘭的人則可能開始蘇格蘭輸入“蘇格蘭”，盡管你的網(wǎng)站只申請加入“英國”作為居住國，在理想的情況下，他們即時(shí)輸入“蘇格蘭”也應(yīng)該看到“英國”作為一個(gè)建議條目。如前所述的情況也適用于“ Netherlands ”而不是“TheNetherlands ”?？紤]這些場景并花些時(shí)間開發(fā)開發(fā)新這種邏輯，這樣用戶就不用去猜測準(zhǔn)確的措辭了。Lilogo 符合了用戶的期望，顯示了“蘇格蘭”的結(jié)果，盡管標(biāo)簽上寫著“聯(lián)合王國”當(dāng)你有

9、6 個(gè)或更少的條目時(shí)使用單選按鈕下拉框不全是解決方案長表單的最佳解決方案，對于短列表如前所述來說同樣也沒有。為什么讓呢每次回答是或否的時(shí)候需要點(diǎn)開一個(gè)下拉框用戶？6 個(gè)或更少條目的時(shí)候就使用好的經(jīng)典的單選按鈕好了。更好的表單用戶體驗(yàn)，用戶掃描垂直的排列更輕松。過多的下拉框可能是最差勁表單最設(shè)計(jì)的標(biāo)志。選擇合適的日期輸入方式很多表單仍在使用錯(cuò)誤的日期輸入方式（最常被請求的內(nèi)部信息之一），有多少次選擇缺省年齡是從預(yù)設(shè)的 1900年開始滾動(dòng)？這些網(wǎng)站要么認(rèn)為他們的大多數(shù)是100 歲以上俱樂部要么就是說不清楚。我傾向于后者。在移動(dòng)端設(shè)備上，使用默認(rèn)的選擇框或者使用格式輸入，就像我們的例子里FOXW聞一

10、樣。注意預(yù)期日期格式，因國家而異。在數(shù)字鍵盤上（甚至移動(dòng)設(shè)備 上）輸入 8 個(gè)數(shù)字都能比滾動(dòng) 3 個(gè)下拉框快得多。如果堅(jiān)持使用混種iOS或Android日期選擇器，請確保有一個(gè)既定的默認(rèn)控管日期，而不 是 1900 年或當(dāng)前年份。除非你在為百歲老人協(xié)會(huì)的年度晚會(huì)設(shè)計(jì)申請LatelInput t將輸入框長度與輸入的預(yù)期長度匹配你可能想要想犧牲輸入框的長度，但請記住，短的輸入框?qū)τ卩] 編或CVV弋碼來說更好用。當(dāng)你冀望用戶鍵入更長前一天的答案時(shí)， 請使用更大的類型信息。把這些長短不一的輸入框放在一起，要設(shè)計(jì) 者的很漂亮是個(gè)挑戰(zhàn)。但是，嘿，我們喜歡挑戰(zhàn)！我們正式成為了設(shè) 計(jì)師，不是嗎？去掉“確認(rèn)密碼

11、”這一欄，增加“顯示密碼”的選項(xiàng)在手機(jī)上輸入上以密碼尤其煩人，所以切不可不要讓用戶輸入過 多不必要的。為什么要讓他們判明密碼呢？想要確保他們的密碼沒有 打錯(cuò)嗎？在輸入框旁邊放一個(gè)小眼睛圖標(biāo)（或“顯示密碼”文本），這樣他 們就可以看到自己輸入的錯(cuò)誤。越來越多的網(wǎng)站使用這樣的解決方案， 我認(rèn)為這絕對是良好的表單設(shè)計(jì)的標(biāo)志。讓工作而不是用戶變得聰明當(dāng)你問自己如何設(shè)計(jì)表單時(shí)，第一個(gè)要需注意的是：不要偷懶！ 仔細(xì)而正確地表單可以節(jié)省很多時(shí)間在設(shè)計(jì)它時(shí)，想想你可以從存在的信息中猜測出什么，而不需要用戶輸入一個(gè)空格字符。有些解決方案肯定會(huì)比“足夠好”的解決方 案占用更多的開發(fā)資源，但是你的消費(fèi)者會(huì)因此而喜歡

12、它。當(dāng)用戶嘗試使用已獲取的郵箱地址注冊時(shí)，提供登錄如果用戶試圖使用已獲取的郵箱地址注冊，這可能意味著他們以前早已注冊過。為什么不給他們提供一個(gè)快速登錄的方法呢？預(yù)填好 郵箱地址，這樣他們只可能需要輸入密碼。使用智能默認(rèn)值這個(gè)有些籠統(tǒng)，但當(dāng)你使用智慧型默認(rèn)值時(shí)。你可以根據(jù)IP 地址、設(shè)備設(shè)備語言甚至某些情況下的設(shè)備位置作出猜測。每次設(shè)計(jì)表單時(shí)， 都科研項(xiàng)目花幾分鐘仔細(xì)考慮所有這些項(xiàng)目。當(dāng)在開發(fā)我們的產(chǎn)品 UXfol.io 時(shí)，我們的開發(fā)人員代替我們的用戶來做困難的工作避免驗(yàn)證碼驗(yàn)證碼能讓人因很煩，但我們?nèi)匀挥盟鼇硪?guī)避數(shù)據(jù)庫盧萊縣中的數(shù)千個(gè)虛假賬戶。然而，一些更好的、不是那么煩人的解決方案也可以做

13、到解決辦法這一點(diǎn)。當(dāng)考慮使用驗(yàn)證碼之時(shí)，在實(shí)行最懶的開箱即用的想法之前，主要考慮一些替代方案，一些最先進(jìn)的網(wǎng)絡(luò)設(shè)備?；卩]政編碼的地址信息電商店主可能會(huì)需要一個(gè)地址。可能需要讓用戶即便鍵入所有內(nèi)容，然后在末尾輸入郵政編碼。或者，先從國家開始 （ 因?yàn)猷]政編碼在全球并不是唯一的 ） ，然后自動(dòng)填充州、城市，在某些情況下甚至居委會(huì)街道信息。所以，你可能需要一個(gè)第三方插件。電話號(hào)碼為此為客戶提供了一個(gè)很好的示例：不用你的用戶，而是你自己確保以正確的格式儲(chǔ)存號(hào)碼。接受多格式的電話號(hào)碼（包括 其他信息），然后自己把它們標(biāo)準(zhǔn)化。如果做不到，至少提供一個(gè)你 期望的清晰的格式示例。在提交表單之前顯示錯(cuò)誤這聽起

14、來很簡單，但仍有很多表單忽略了這一點(diǎn)點(diǎn)。如果用戶輸入了錯(cuò)誤的郵箱地址，請?jiān)谔峤槐韱沃帮@示錯(cuò)誤。但是，注意不要鑒別得太快當(dāng)你還在打字，但是表單“大喊”你輸入了一個(gè)無異議無效的郵箱地址時(shí)，驗(yàn)證須要變得非常煩人?！班?，好的，但是你能等我打完字嗎？謝謝！”以下建議會(huì)更專有，所以在收集用戶數(shù)據(jù)時(shí)，一般來說基本上可以在任何情況下使用它們。與上面的一些技巧相異，不它們不需要瘋 狂的開發(fā)精靈，只需要好的設(shè)計(jì)。精心設(shè)計(jì)的表單總是從選擇的布局 開始。1. 總是顯示標(biāo)簽近年來，頗為使用表單標(biāo)簽作為占位符文本變得非常流行。在許多情況下，它很好用，因?yàn)樗_實(shí)以使設(shè)計(jì)更干凈。但是想象一下， 一旦您的用戶填寫圖標(biāo)了這些輸

15、入框，他們就不知道每個(gè)輸入框應(yīng)該 包含數(shù)據(jù)什么信息了。在某些情況下，比如電子郵件地址，可能看起來很明顯，但是容易把姓和名搞混。所以即使你決定使用標(biāo)簽作為占位符，也要在字段被填充時(shí)讓它們可見，就像谷歌建議的那樣。Password。ShowOne icweftase chdracter One special characterOne uppcrcasg character8，haact16Tsi mtnimun One f umber谷歌展示標(biāo)簽的建議（Material設(shè)計(jì)規(guī)范）.只詢問必要的信息“市場部讓我這么做成的！”是的，我知道你（或我們）可能會(huì) 被施加很大的壓力，甚至要求用戶提供鞋碼。我

16、們擁有的內(nèi)部信息越 多，我們就能地細(xì)分我們不同的信息等等。但是，填寫人長一張滿是不必要的信息的巨大表單不僅讓人感到 沮喪和恐懼，還會(huì)讓用戶產(chǎn)生不信任。想象一下，你剛剛在酒吧里遇 到一個(gè)人，簡單聊了 30秒，他們開始問你一些私人的環(huán)境問題。不要詢問一些求證你不需要的東西，或者至少讓它作為可選的。 如果您真的需要這些內(nèi)部信息，請與用戶溝通你的理由，并告訴他們 這會(huì)如何改進(jìn)他們的體驗(yàn)。漸進(jìn)式分析提供方便了另某種一種選擇，當(dāng)您產(chǎn)品設(shè)計(jì)在用戶更 加關(guān)注您的產(chǎn)品之后，再收集額外的數(shù)據(jù)。.標(biāo)記可選項(xiàng)不用星號(hào)來標(biāo)記必填項(xiàng)，而是明確的標(biāo)識(shí)可選項(xiàng)。.對于長表單，將輸入按類別分組并使用多個(gè)步驟讓長表單設(shè)計(jì)的用戶體驗(yàn)

17、變得正確非常沖擊。不管你怎么努力，有些情況下你就是要處理很長的表格。在這種情況下，有兩件事可以幫助取得更好更好的完成率。首先，將相關(guān)字段分組在一起。一組是個(gè)人信息，另一組是地址。表單還可以考慮將表單合為多個(gè)步驟，這樣就不會(huì)移動(dòng)用戶在開始時(shí)有數(shù)以萬計(jì)輸入框嚇到用戶。如果這樣操做，請確保使用進(jìn)度條來顯示剩余的進(jìn)度。. 避免標(biāo)簽左對齊研究表明，人們在填寫標(biāo)簽在輸入框貼紙左側(cè)的表單會(huì)更慢。想象一下，當(dāng)你填寫表格時(shí)，你的眼睛可能需要跳來跳去。垂直垂直地堆疊所有標(biāo)簽會(huì)減少表單高度，所以使用標(biāo)簽作為占位符，在填充字段時(shí)移到頂部。就像谷歌建議的那樣。. 使用單列布局表單的總體布局也是如此。如果輸入框覆蓋多列，

18、用戶的眼睛就要跳來跳去。瀏覽單列會(huì)快得多。當(dāng)然也會(huì)有例外，當(dāng)一行中有多個(gè)字段時(shí)，比如姓和名。不過，一般來說，即使單列布局增加了總體度，它也更好用。. 從簡單的問題開始除了嚇到用戶的表單之外，可能還包含不同型態(tài)類型的數(shù)據(jù)，其中一些更敏感或更復(fù)雜。從用戶覺得容易查收的常見字段開始。讓他們放松下來，然后去做那些需要當(dāng)更多參與的再說事情。做到這一步表明你致力于改進(jìn)表單的文檔用戶體驗(yàn)。并不是每個(gè)人都會(huì)這樣做，這是錦上添花，它可以讓用戶叫好。如果你的目標(biāo)是最好的表單設(shè)計(jì)用戶體驗(yàn)，請繼續(xù)閱讀。讓我們繼續(xù)，好嗎 ?顯示和更新密碼規(guī)則這可能是我最喜歡的一條，也是我的一個(gè)房地產(chǎn)項(xiàng)目，執(zhí)行者起來并不復(fù)雜。許多網(wǎng)站對于密碼應(yīng)該包含的不同字符有嚴(yán)格的法則規(guī)則。一些網(wǎng)站在提示框里顯示規(guī)則了這些游戲規(guī)則。這不是最好的做法。用戶只有在輸入了常用密碼此后才會(huì)知道密碼的強(qiáng)弱。因此，最遲在該字段成為被譽(yù)為焦點(diǎn)時(shí)顯示標(biāo)準(zhǔn)。更好的是，在用戶輸入時(shí)實(shí)時(shí)更新它們。這樣就更容易發(fā)現(xiàn)他們到底缺少什么。Mailchimp 在用戶鍵入時(shí)主動(dòng)不斷更新列表，幫助客戶端輸入足夠強(qiáng)度的密碼禁用“提交”按鈕