終極表單設(shè)計(jì)指南
關(guān)于表單設(shè)計(jì),本文筆者將講到:“如何優(yōu)化移動(dòng)端表單設(shè)計(jì)?”、“如何使用正確的輸入類型?”、“要為用戶預(yù)設(shè)好簡單易操作的選項(xiàng),而不是期待著用戶變聰明”、“優(yōu)秀表單的合理布局是怎樣的?”、“表單設(shè)計(jì)的巧妙之處”等內(nèi)容。
想象一下,如果你走進(jìn)一家商店,往購物籃里塞滿了東西卻找不到收銀臺(tái)的感覺。最后,你可能放下所有東西一分錢沒花極其失望地離開了。的確,這種在支付過程中遇到的槽糕事情,也會(huì)發(fā)生在表單設(shè)計(jì)中。
糟糕的表單替我省了好幾百美元。冗長、繁瑣的表單嚇跑了你的顧客,讓你的公司潛在中流失了幾千美元。
表單看起來是最簡單的UI組件,卻把控著你產(chǎn)品中最重要的交互設(shè)計(jì)。它們引導(dǎo)你的用戶去注冊、支付。
我不需要告訴你這些步驟在精心運(yùn)作的企業(yè)中扮演的重要角色。但是,我也有好的消息:做到好的表單設(shè)計(jì)不是那么難。
在這篇指南里,我收集了33個(gè)你能立即應(yīng)用的最好的做法。它提供了一個(gè)非常好的出發(fā)點(diǎn)去試驗(yàn),能幫你找到對你有用的方法。
我們會(huì)講到:
- 副本很重要!
- 優(yōu)化移動(dòng)端表單設(shè)計(jì)
- 使用正確的輸入方式
- 通過工作而不是用戶來變得聰明
- 優(yōu)秀表單的合理布局
- 表單設(shè)計(jì)的巧妙之處
副本很重要
你知道副本有多重要,我們曾在博客里寫過,調(diào)整表單設(shè)計(jì)能大大的提高你的轉(zhuǎn)化率。
1.?讓用戶知道完成表單的好處
“我閑的時(shí)候,喜歡填不同的線上表單。我就是喜歡填!”從來沒人這樣說。用戶需要明確的知道:把他們的時(shí)間投入到這樣一個(gè)不合理的活動(dòng)里有什么好處?
在結(jié)賬過程中,好處非常明顯,但是注冊呢?在表單的頂部突出顯示,他們一旦注冊完能做什么?他們可以訪問獨(dú)家內(nèi)容,社區(qū)或者免費(fèi)試用。不要羞于讓他們興奮。
(Marvel 顯示他們的大客戶和用戶數(shù)來展示他們的社會(huì)認(rèn)同。)
2.?在注冊窗口旁邊使用社會(huì)認(rèn)同
作為人類,我們都想歸屬于某處。我們需要知道一個(gè)產(chǎn)品是否值得我們花費(fèi)時(shí)間、金錢和注意力。證明其他用戶和我們一樣,已經(jīng)加入了這個(gè)俱樂部并非常喜歡它,對你的項(xiàng)目非常有幫助。
你的產(chǎn)品上有一些大牌嗎?在注冊表單的旁邊展示這些品牌的logo。你已經(jīng)擁有了多少滿意的用戶?它會(huì)讓原本猶豫的訪客對注冊感到安心?,F(xiàn)在就為你所獲得的成就驕傲吧!
3.?明確錯(cuò)誤
“發(fā)生了錯(cuò)誤”。好吧謝謝,我發(fā)現(xiàn)了。但是,我已經(jīng)看了多少遍了?這讓我非常受挫,我甚至都沒有得到一個(gè)哪里出錯(cuò)的提示——有人已經(jīng)使用了我的用戶名嗎?還是密碼強(qiáng)度設(shè)置的不夠嗎?幫幫你的用戶吧,讓這個(gè)錯(cuò)誤盡可能的明確。
詳情呢?
4.?在相關(guān)輸入框旁邊顯示錯(cuò)誤的信息
發(fā)生出錯(cuò),哪錯(cuò)的,顯示在哪?假設(shè)用戶提交了有三處錯(cuò)誤的表單,然后全都顯示在頂部。這種情況下,他們需要瀏覽整張表單找出哪些需要注意。
根據(jù)上下文顯示錯(cuò)誤,不要忘了考慮色盲用戶。不僅僅只使用紅色文字強(qiáng)調(diào)錯(cuò)誤字段。圖標(biāo)是萬無一失的選擇。強(qiáng)烈推薦讀者閱讀更多關(guān)于易訪問性的文章。
5.?對指令有明確的稱謂
用戶應(yīng)該對他們的操作所帶來的結(jié)果非常自信,如:“提交”、“好的”、“允許”。描述用戶將采取的操作。多使用“注冊”、“立即支付”、“創(chuàng)造賬戶”。
6.?用戶操作成功時(shí)給他們反饋
你可能以為整個(gè)表單的設(shè)計(jì)到用戶按下“下單”就結(jié)束了。錯(cuò)!用戶需要清楚的已操作成功的反饋,還要讓他們知道接下來的步驟。
例如:有人在你的網(wǎng)店里下了單,顯示一個(gè)支付成功和訂單的頁面。甚至還可以提供預(yù)期的下一步時(shí)間線,比如:產(chǎn)品什么時(shí)候發(fā)貨。
優(yōu)化移動(dòng)端表單設(shè)計(jì)
優(yōu)化移動(dòng)端表單有兩個(gè)方面:一方面,我們需要額外注意某些事情;另一方面,我們手機(jī)有很多功能,會(huì)讓填寫表單簡單些。
在你的設(shè)計(jì)上多花點(diǎn)心思,本節(jié)將提供幾個(gè)簡單的示例,專門用于改進(jìn)移動(dòng)設(shè)備的表單設(shè)計(jì)。
1.?提供足夠大的點(diǎn)擊區(qū)域
我周日晚上喜歡在電視上看NFL比賽,球員的運(yùn)動(dòng)能力總是能讓我驚訝,就像他們的接球技術(shù)一樣。他們需要一雙大手去接球。這些足球運(yùn)動(dòng)員可能是你下一個(gè)客戶。
這些家伙看起來很強(qiáng)壯,所以你不希望你表單上的小小點(diǎn)擊框讓他們生氣。谷歌建議最小區(qū)域?yàn)?8x48px,這是一個(gè)很好的標(biāo)準(zhǔn)。
Odell Beckham Jr.和他的手可能正要嘗試使用你的APP
2.?不要回避使用手機(jī)的硬件功能
在用手機(jī)填寫表格的用戶中,大約99%的人都有一個(gè)功能齊全的攝像頭,你想過利用它嗎?
只需點(diǎn)擊按鈕,他們就可以掃描身份證或信用卡上的信息,否則這需要更長的時(shí)間填寫信息。更進(jìn)一步,考慮一下使用GPS或生物識別的可能性。
3.?使用與預(yù)期輸入相匹配的鍵盤
如果你希望用戶填寫郵箱地址,激活鍵盤文本模式,如果他們需要輸入電話號碼,顯示數(shù)字鍵盤。
這只需要花一點(diǎn)心思,就能節(jié)省用戶寶貴的時(shí)間,不需要他們自己來回切換鍵盤,這還有助于他們了解您期望的輸入類型。
4. 使用本機(jī)原生輸入
谷歌和蘋果都投入了大量研究來設(shè)計(jì)他們自己的UI控件。大多數(shù)人都見過這些,所以除非你有充分的理由不這樣做,否則請堅(jiān)持使用本機(jī)控件。
使用正確的輸入類型
這可能看起來顯而易見,但實(shí)際上并不總是那么容易。不要讓用戶從200多個(gè)下拉列表中選擇一個(gè)國家,或者從下拉列表中選擇“是/否”,這樣會(huì)讓用戶覺得一團(tuán)糟。
復(fù)選框、單選按鈕、下拉菜單、短文本和長文本輸入——在表單的世界里任何東西都有自己的位置。只要確保在適當(dāng)?shù)臅r(shí)候使用它們。
1.?避免超長下拉框
節(jié)日季正在迅速的過去,但你可能在線訂購了一些禮物。要做到這一點(diǎn),你需要選擇發(fā)貨到哪個(gè)國家。在那個(gè)時(shí)候,從滾動(dòng)條里200多個(gè)國家里找到你的真是太讓人生氣了。
明年再設(shè)計(jì)表單的時(shí)候,最好讓用戶從預(yù)設(shè)列表里輸入并選擇國家。這需要你的開發(fā)人員多做一些額外的工作,但是你的用戶會(huì)為此感謝你。
2.?使用智能的即時(shí)搜索方案
為什么不讓前面的提示更進(jìn)一步呢?花點(diǎn)時(shí)間思考用戶可能遇到的場景。
一個(gè)居住在蘇格蘭的人可能開始輸入“蘇格蘭”,盡管你的網(wǎng)站只接受“英國”作為居住國,在理想的情況下,他們即時(shí)輸入“蘇格蘭”也應(yīng)該看到“英國”作為一個(gè)建議條目。
同樣的情況也適用于“Netherlands”而不是“TheNetherlands”??紤]這些場景并花些時(shí)間開發(fā)這種邏輯,這樣用戶就不用去猜測準(zhǔn)確的措辭了。
Lilogo符合了用戶的期望,顯示了“蘇格蘭”的結(jié)果,盡管標(biāo)簽上寫著“聯(lián)合王國”。
3.?當(dāng)你有6個(gè)或更少的條目時(shí)使用單選按鈕
下拉框不是長表單的最佳解決方案,對于短列表來說同樣也不是。為什么讓用戶每次回答是或否的時(shí)候需要點(diǎn)開一個(gè)下拉框呢?
6個(gè)或更少條目的時(shí)候就使用好的經(jīng)典的單選按鈕好了。更好的表單用戶體驗(yàn),用戶掃描垂直的排列更輕松。過多的下拉框可能是最糟糕表單設(shè)計(jì)的標(biāo)志。
4.?選擇合適的日期輸入方式
很多表單仍在使用錯(cuò)誤的日期輸入方式(最常被請求的信息之一),有多少次選擇年齡是從預(yù)設(shè)的1900年開始滾動(dòng)?
這些網(wǎng)站要么認(rèn)為他們的大多數(shù)用戶是100歲以上俱樂部,要么就是不在乎。我傾向于后者,在移動(dòng)端設(shè)備上,使用默認(rèn)的時(shí)間選擇框或者使用格式輸入,就像我們的例子里FOX新聞一樣。
注意預(yù)期日期格式,因國家而異。在數(shù)字鍵盤上(甚至移動(dòng)設(shè)備上)輸入8個(gè)數(shù)字都能比滾動(dòng)3個(gè)下拉框快得多。如果堅(jiān)持使用原生iOS或Android日期選擇器,請確保有一個(gè)實(shí)際的默認(rèn)日期,而不是1900年或當(dāng)前年份。除非你在為百歲老人協(xié)會(huì)的年度晚會(huì)設(shè)計(jì)申請表。
使用格式輸入改進(jìn)日期選擇的用戶體驗(yàn)(fox.com)
5. 將輸入框長度與輸入的預(yù)期長度匹配
你可能想犧牲輸入框的長度,但請記住,短的輸入框?qū)τ卩]編或CVV代碼來說更好用。當(dāng)你希望用戶鍵入更長的答案時(shí),請使用更大的文本框。有時(shí)把這些長短不一的輸入框放在一起,要設(shè)計(jì)的很漂亮是個(gè)挑戰(zhàn)。但是,嘿,我們喜歡挑戰(zhàn)!我們成為了設(shè)計(jì)師,不是嗎?
6.?去掉“確認(rèn)密碼”這一欄,增加“顯示密碼”的選項(xiàng)
在手機(jī)上輸入密碼尤其煩人,所以不要讓用戶輸入過多不必要的。為什么要讓他們確認(rèn)密碼呢?想要確保他們的密碼沒有打錯(cuò)嗎?
在輸入框旁邊放一個(gè)小眼睛圖標(biāo)(或“顯示密碼”文本),這樣他們就可以看到自己輸入的錯(cuò)誤。越來越多的網(wǎng)站使用這樣的解決方案,我認(rèn)為這絕對是良好的表單設(shè)計(jì)的標(biāo)志。
要讓工作,而不是用戶變得聰明。
當(dāng)你問自己如何設(shè)計(jì)表單時(shí),第一個(gè)要注意的是:不要偷懶!仔細(xì)而正確地開發(fā)表單可以節(jié)省很多時(shí)間。
在設(shè)計(jì)它時(shí),想想你可以從已經(jīng)存在的信息中猜測出什么,而不需要用戶輸入一個(gè)字符。有些解決方案肯定會(huì)比“足夠好”的解決方案占用更多的開發(fā)資源,但是你的用戶會(huì)因此而喜歡它。
1. 當(dāng)用戶嘗試使用已獲取的郵箱地址注冊時(shí),提供登錄
如果用戶試圖使用已獲取的郵箱地址注冊,這可能意味著他們以前已經(jīng)注冊過。為什么不給他們提供一個(gè)快速登錄的方法呢?預(yù)填好郵箱地址,這樣他們只需要輸入密碼。
2. 使用智能默認(rèn)值
這個(gè)有些籠統(tǒng),但當(dāng)你使用智能默認(rèn)值時(shí)。你可以根據(jù)IP地址、設(shè)備語言甚至某些情況下的設(shè)備位置進(jìn)行猜測。每次設(shè)計(jì)表單時(shí),都花幾分鐘仔細(xì)考慮所有這些項(xiàng)目。
當(dāng)在開發(fā)我們的產(chǎn)品UXfol.io時(shí),我們的開發(fā)人員代替我們的用戶來做繁重的工作
3. 避免驗(yàn)證碼
驗(yàn)證碼能讓人很煩,但我們?nèi)匀挥盟鼇肀苊鈹?shù)據(jù)庫中的數(shù)千個(gè)虛假賬戶。然而,一些更好的、不那么煩人的解決方案也可以做到這一點(diǎn)。當(dāng)考慮使用驗(yàn)證碼時(shí),在實(shí)行最懶的開箱即用的想法之前,考慮一些替代方案,一些最先進(jìn)的解決方案。
4.?基于郵政編碼的地址信息
電商店主可能會(huì)需要一個(gè)地址??赡苄枰層脩翩I入所有內(nèi)容,然后在末尾輸入郵政編碼?;蛘?,先從國家開始(因?yàn)猷]政編碼在全球并不是唯一的),然后自動(dòng)填充州、城市,在某些情況下甚至街道信息。所以,你可能需要一個(gè)第三方插件。
5.?接受多種格式
電話號碼為此提供了一個(gè)很好的示例:不用你的用戶,而是你自己必須確保以正確的格式儲(chǔ)存號碼。接受多格式的電話號碼(包括其他信息),然后自己把它們標(biāo)準(zhǔn)化。如果做不到,至少提供一個(gè)你期望的清晰的格式示例。
6.?在提交表單之前顯示錯(cuò)誤
這聽起來很簡單,但仍有很多表單忽略了這一點(diǎn)。如果用戶輸入了錯(cuò)誤的郵箱地址,請?jiān)谔峤槐韱沃帮@示錯(cuò)誤。
但是,注意不要驗(yàn)證得太快——當(dāng)你還在打字,但是表單“大喊”你輸入了一個(gè)無效的郵箱地址時(shí),驗(yàn)證會(huì)變得非常煩人。“嗯,好的,但是你能等我打完字嗎?謝謝!”
優(yōu)秀表單設(shè)計(jì)的正確布局
以下建議會(huì)更通用,所以在收集用戶數(shù)據(jù)時(shí),基本上可以在任何情況下使用它們。與上面的一些技巧不同,它們不需要瘋狂的開發(fā)魔法,只需要好的設(shè)計(jì)。精心設(shè)計(jì)的表單總是從精心選擇的布局開始。
1. 總是顯示標(biāo)簽
近年來,使用表單標(biāo)簽作為占位符文本變得非常流行。在許多情況下,它很好用,因?yàn)樗_實(shí)使設(shè)計(jì)更干凈。但是想象一下,一旦您的用戶填寫了這些輸入框,他們就不知道每個(gè)輸入框應(yīng)該包含什么信息了。
在某些情況下,比如:電子郵件地址,可能看起來很明顯,但是容易把姓和名搞混。所以,即使你決定使用標(biāo)簽作為占位符,也要在字段被填充時(shí)讓它們可見,就像谷歌建議的那樣。
谷歌展示標(biāo)簽的建議(Material設(shè)計(jì)規(guī)范)
2. 只詢問必要的信息
“市場部讓我這么做的!” 是的,我知道你(或我們)可能會(huì)被施加很大的壓力,甚至要求用戶提供鞋碼。我們擁有的信息越多,我們就能更好地細(xì)分我們不同的信息等等。
但是,填寫一張滿是不必要的信息的巨大表單不僅讓人感到沮喪和恐懼,還會(huì)讓用戶產(chǎn)生不信任。想象一下,你剛剛在酒吧里遇到一個(gè)人,簡單聊了30秒,他們開始問你一些私人的問題。
不要詢問一些你不需要的東西,或者至少讓它成為可選的。如果您真的需要這些信息,請與用戶溝通你的理由,并告訴他們這會(huì)如何改進(jìn)他們的體驗(yàn)。
漸進(jìn)式分析提供了另一種選擇,當(dāng)您在用戶更加關(guān)注您的產(chǎn)品之后,再收集額外的數(shù)據(jù)。
3. 標(biāo)記可選項(xiàng)
不用星號來標(biāo)記必填項(xiàng),而是明確的標(biāo)識可選項(xiàng)。
4. 對于長表單,將輸入按類別分組并使用多個(gè)步驟
讓長表單設(shè)計(jì)的用戶體驗(yàn)變得正確非常挑戰(zhàn)。不管你怎么努力,有些情況下你就是要處理很長的表格。在這種情況下,有兩件事可以幫助獲得更好的完成率。
首先,將相關(guān)字段分組在一起。一組是個(gè)人信息,另一組是地址。還可以考慮將表單分成多個(gè)步驟,這樣就不會(huì)在開始時(shí)有大量輸入框嚇到用戶。如果這樣操做,請確保使用進(jìn)度條來顯示剩余的進(jìn)度。
5. 避免標(biāo)簽左對齊
研究表明:人們在填寫標(biāo)簽在輸入框左側(cè)的表單會(huì)更慢。
想象一下,當(dāng)你填寫表格時(shí),你的眼睛需要跳來跳去。垂直地堆疊所有標(biāo)簽會(huì)增加表單高度,所以使用標(biāo)簽作為占位符,在填充字段時(shí)移到頂部。就像谷歌建議的那樣。
6. 使用單列布局
表單的總體布局也是如此。如果輸入框覆蓋多列,用戶的眼睛就要跳來跳去。瀏覽單列會(huì)快得多。當(dāng)然也會(huì)有例外,當(dāng)一行中有多個(gè)字段時(shí),比如:姓和名。不過,一般來說,即使單列布局增加了總體高度,它也更好用。
7. 從簡單的問題開始
除了嚇到用戶的表單之外,可能還包含不同類型的數(shù)據(jù),其中一些更敏感或更復(fù)雜。從用戶覺得容易填寫的常見字段開始。讓他們放松下來,然后去做那些需要更多參與的事情。
表單設(shè)計(jì)的巧妙之處
做到這一步表明你致力于改進(jìn)表單的用戶體驗(yàn)。并不是每個(gè)人都會(huì)這樣做,這是錦上添花,它可以讓用戶叫好。如果你的目標(biāo)是最好的表單設(shè)計(jì)用戶體驗(yàn),請繼續(xù)閱讀。讓我們繼續(xù),好嗎?
1. 顯示和更新密碼規(guī)則
這可能是我最喜歡的一條,也是我的一個(gè)項(xiàng)目,執(zhí)行起來并不復(fù)雜。許多網(wǎng)站對于密碼應(yīng)該包含的不同字符有嚴(yán)格的規(guī)則。一些網(wǎng)站在提示框里顯示了這些規(guī)則。這不是最好的做法。
用戶只有在輸入了常用密碼后才會(huì)知道密碼的強(qiáng)弱。
因此,最遲在該字段成為焦點(diǎn)時(shí)顯示標(biāo)準(zhǔn)。更好的是,在用戶輸入時(shí)實(shí)時(shí)更新它們。這樣就更容易發(fā)現(xiàn)他們到底缺少什么。
Mailchimp在用戶鍵入時(shí)主動(dòng)更新列表,幫助用戶輸入足夠強(qiáng)度的密碼。
2. 禁用“提交”按鈕,直到用戶完成所有必填的字段
當(dāng)你試圖提交一個(gè)表單時(shí)卻發(fā)現(xiàn)沒有填寫所有必需的字段,這非常令人沮喪。如果你正確地標(biāo)記了必填和選填框,你可能可以避免這種情況。
禁用“提交”按鈕(你不會(huì)給它標(biāo)記成“提交”,對嗎?),直到他們填完所有內(nèi)容,這是另一種方法將焦點(diǎn)轉(zhuǎn)移到剩下部分。
3. 擁抱包容性
如果你的業(yè)務(wù)中包含在線表單,那你的客戶很可能非常多樣化。你不想讓他們中的任何一個(gè)感到被排斥,對吧?
我們可以就此主題寫一篇完整的文章,所以讓我快速地給你一些提示。首先,不要驗(yàn)證名稱 —— 如果你有一個(gè)無效的名稱,你會(huì)有什么感覺?
性別是另一個(gè)敏感話題。在你的公司里,至少有一個(gè)人可能會(huì)說,要準(zhǔn)確定位客戶這些信息是絕對必要的。但這是真的嗎?
越來越多的APP和產(chǎn)品已經(jīng)停止詢問了,所以,建議不要問。如果你這樣做了,讓它成為可選的。對于后者,為那些既不是男性也不是女性的人提供一種選擇。你可以很容易地使用“其他”選項(xiàng)(盡管這個(gè)標(biāo)簽也可能冒犯)。
更進(jìn)一步,可以像Facebook那樣添加一個(gè)自定義輸入框。最后但并非最不重要的是:不要忘記可訪問性。確保用戶可以使用鍵盤瀏覽表單,并找到足夠大且具有足夠?qū)Ρ榷鹊臉?biāo)簽。
4. 當(dāng)大寫鎖定時(shí)警告用戶
我非常喜歡MacOS的這個(gè)功能。為什么不把它也用在你的表格上呢?當(dāng)輸入密碼時(shí),我們有時(shí)會(huì)不小心按下大寫鍵,這發(fā)生在我們所有人身上。為什么不提前警告用戶節(jié)省他們幾秒鐘呢?
使用有趣的圖片提示大寫鎖定阻止登錄
原文作者:Bence Vitarius
原文地址:https://uxstudioteam.com/ux-blog/form-design/
編譯作者:大蛤蜊 | 上海 | UI設(shè)計(jì)師
編輯整理:TCC實(shí)驗(yàn)室、 翻譯特工隊(duì)(微信ID:sanfen-design)
本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unspalsh, 基于CC0協(xié)議
擁抱包容性的最后一句話有點(diǎn)難懂
很棒,收藏!點(diǎn)贊!
TCC翻譯特工隊(duì)給力?。?!
是用的網(wǎng)頁自動(dòng)翻譯嗎。。。。。。。。。。
當(dāng)然不是啦,自動(dòng)翻譯怎么會(huì)寫得如此的有人味呢! ??
好頂贊!
謝謝 您的支持 ??