表單經(jīng)典原則是錯(cuò)的?來(lái)看這5個(gè)表單設(shè)計(jì)新規(guī)則

2017-3-12    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

編者按:以前的表單經(jīng)典原則是“越短越好”,不過(guò)隨著技術(shù)發(fā)展,現(xiàn)在有些表單設(shè)計(jì)已經(jīng)不適用了,想學(xué)到的表單設(shè)計(jì)方法,別錯(cuò)過(guò)這篇!

每天我們都使用表單進(jìn)行基本的網(wǎng)上操作。網(wǎng)上購(gòu)物、注冊(cè)郵箱、社交網(wǎng)絡(luò)甚至參與討論、描述美味的午餐等等都需要我們填好表單。不夸張地說(shuō),表單是數(shù)字信息分享的生命根基。然而多年以來(lái),表單的體驗(yàn)鮮有提升,僅僅停留在功能足夠好卻達(dá)不到體驗(yàn)上的優(yōu)秀。然而現(xiàn)在,在使用恰當(dāng)技術(shù)的幫助下,我們可以設(shè)計(jì)出更快、更簡(jiǎn)單、更有成效的表單體驗(yàn)。


在表單體驗(yàn)中一條經(jīng)典的原則是“越短越好”。耗費(fèi)用戶(hù)更少的精力可以帶來(lái)更高的轉(zhuǎn)化率,這當(dāng)然看起來(lái)符合邏輯,但是這條原則沒(méi)有考慮到很多因素,比如應(yīng)用場(chǎng)景,設(shè)計(jì)方式、表單體驗(yàn)的吸引力等等。

舉個(gè)例子,我發(fā)現(xiàn)一個(gè)被引用的次數(shù)遠(yuǎn)超其它的報(bào)告,它的測(cè)試成果被多篇文章和言說(shuō)提及并被當(dāng)做“真理”,而可怕的是這個(gè)研究成果其實(shí)是相當(dāng)有局限性的。這個(gè)報(bào)告是Imaginary Landscape(一個(gè)開(kāi)源的網(wǎng)絡(luò)開(kāi)發(fā)機(jī)構(gòu))近十年前的一次實(shí)驗(yàn),實(shí)驗(yàn)中當(dāng)表單從11個(gè)字段減少到4個(gè)字段,轉(zhuǎn)化率增加了160%。但這只是一個(gè)頁(yè)面,一次測(cè)試,兩個(gè)變量得到的實(shí)驗(yàn)結(jié)果,假設(shè)他們進(jìn)行了多組4個(gè)字段的實(shí)驗(yàn),或者做10個(gè)字段與11個(gè)字段的表單作對(duì)比,4個(gè)與5個(gè)字段表單做對(duì)比,也會(huì)令實(shí)驗(yàn)更加值得信服。然而他們沒(méi)有,這只能說(shuō)明僅在這一個(gè)特定的情況下,確實(shí)減少表單64%的字段能使表格更容易填寫(xiě)。

在Call To Action 2015的演講上,來(lái)自Unbounce 的Michael Aagaard分享了類(lèi)似的案例。以提高一個(gè)特定表單的商業(yè)轉(zhuǎn)化率作為任務(wù),他首先將表單的字段數(shù)從9削減到6,轉(zhuǎn)化率下降了14%。深入研究后他發(fā)現(xiàn),表單中那些被刪除的字段構(gòu)成了一個(gè)不太引人注目的體驗(yàn),而這恰恰是最吸引用戶(hù)的部分。在第二次實(shí)驗(yàn),他調(diào)整了原始表單的組織結(jié)構(gòu)和清晰度,并保持9個(gè)字段不變,轉(zhuǎn)化率增加了19%。事實(shí)證明,短的表單不總是更好。

所以如果不是通過(guò)簡(jiǎn)單的使表單更短,我們?cè)鯓佑矛F(xiàn)代技術(shù)來(lái)設(shè)計(jì)最好的表單呢?讓我們來(lái)考慮一些新原則:

  • 優(yōu)先保證表單的可瀏覽性
  • 提供更易填寫(xiě)的表單格式
  • 給予恰當(dāng)?shù)妮斎胂拗?
  • 利用定位

1. 優(yōu)先保證表單的可瀏覽性

很早之前Jakob Nielsen的研究告訴我們,用戶(hù)通常只是快速瀏覽網(wǎng)頁(yè)而不是細(xì)致地從上到下閱讀。在填寫(xiě)表單的時(shí)候也是這樣,盡管設(shè)計(jì)者希望填寫(xiě)者全心全意,用戶(hù)也未必如你所愿。讓用戶(hù)能夠的瀏覽表單,對(duì)避免錯(cuò)填漏填至關(guān)重要,尤其是當(dāng)表單是用戶(hù)只能填寫(xiě)一次的時(shí)候(比如電子商務(wù)地址表單,注冊(cè)表單等等)。

標(biāo)簽位置

關(guān)于標(biāo)簽的位置已經(jīng)有了很多研究,然而這場(chǎng)辯論還在繼續(xù)。表單大師Luke Wroblewski在研究中確定,用戶(hù)對(duì)標(biāo)簽頂部對(duì)齊的表單完成時(shí)間最短,因?yàn)榇朔N方式減少了眼球運(yùn)動(dòng)的需要量。在通常意義的表單標(biāo)簽中,右對(duì)齊的方式能讓用戶(hù)第二快的完成表單,尤其建議在當(dāng)頁(yè)面高度有限時(shí)使用這種方式。雖然左對(duì)齊標(biāo)簽的表單用戶(hù)完成的最慢,但是當(dāng)表單需填寫(xiě)的數(shù)據(jù)不太常見(jiàn)時(shí),這種方式能提高理解。

提示文字

如果將標(biāo)簽作為框內(nèi)提示文字,幫助性也不大。一旦表單獲取點(diǎn)擊焦點(diǎn),提示文字就消失了,用戶(hù)不再能看見(jiàn)它。這會(huì)讓用戶(hù)產(chǎn)生短期記憶的壓力而增加錯(cuò)誤的機(jī)率。

即使把標(biāo)簽分開(kāi),另外增加框內(nèi)提示文字,用戶(hù)乍一看上去也會(huì)覺(jué)得像已經(jīng)填寫(xiě)了的樣子。舉個(gè)例子,Nielsen Norman Group曾做過(guò)的一項(xiàng)眼球追蹤研究就說(shuō)明,空的輸入框比有提示文字的輸入框更能引起用戶(hù)的關(guān)注,而且與空的輸入框相比,用戶(hù)更容易忽略有提示文字的輸入框。換句話(huà)說(shuō),被認(rèn)為是有用的表單提示文本其實(shí)弊大于利,尤其是對(duì)習(xí)慣大致瀏覽的用戶(hù)。

△  好的:空的表單字段

△  不好的:被提示文字掩蓋的表單字段

在某些情況下,提示文字比普通文本的顏色較輕,這可能緩解上述問(wèn)題。然而這種技術(shù)產(chǎn)生了一個(gè)對(duì)比度的問(wèn)題,在白色背景下配淺灰色文本通常不符合被普遍接受的網(wǎng)絡(luò)可訪問(wèn)性指南(正常文本對(duì)比4.5:1)。此外,根據(jù)W3C,提示文字也不支持殘疾人的輔助設(shè)計(jì)(如屏幕閱讀器,見(jiàn)https://www.w3.org/WAI/tutorials/forms/instructions/),這使得這些殘疾人用戶(hù)更難準(zhǔn)確填寫(xiě)表單。

浮動(dòng)的標(biāo)簽

浮動(dòng)標(biāo)簽是一個(gè)迅速獲得普及的新的交互設(shè)計(jì)方式。在它的設(shè)計(jì)中,標(biāo)簽文字開(kāi)始作為提示文字,然后一旦用戶(hù)開(kāi)始填寫(xiě),標(biāo)簽將升到上面,解決了上述提示文字消失的問(wèn)題。

雖然這種方式還可以幫助減少頁(yè)面長(zhǎng)度,在移動(dòng)端特別有幫助。但是它不能解決上述文本框看上去已經(jīng)被填補(bǔ)的問(wèn)題。因此,Nielsen Norman Group不建議這種做法,還是應(yīng)該保持標(biāo)簽在上面,除非頁(yè)面長(zhǎng)度是最重要的設(shè)計(jì)關(guān)注點(diǎn)。

2. 提供更易填寫(xiě)的表單格式

以前,在填寫(xiě)表格時(shí)用戶(hù)有很多的猜測(cè)?!拔业碾娫?huà)號(hào)碼應(yīng)該是哪種格式?我的信用卡有沒(méi)有少輸一位?這個(gè)鍵盤(pán)上的符號(hào)“@”在哪里?” 新技術(shù)使我們能夠不讓用戶(hù)被這些疑慮困擾,提供更清爽的體驗(yàn)。

輸入掩碼

幫助用戶(hù)格式化輸入文本的輸入掩碼,雖然在外觀上與提示文字類(lèi)似,其實(shí)有明顯的不同。首先,掩碼只出現(xiàn)在用戶(hù)點(diǎn)擊輸入框的時(shí)候,避免了上述瀏覽障礙的問(wèn)題。其次,輸入的文字自動(dòng)應(yīng)用正確的文本格式,讓用戶(hù)將填充字段時(shí)的焦點(diǎn)放在所需的數(shù)據(jù)上,這樣更容易注意到錯(cuò)誤。在下面的例子中,填寫(xiě)電話(huà)號(hào)碼時(shí)括號(hào)和破折號(hào)自動(dòng)填充。

在填寫(xiě)手機(jī)號(hào)、信用卡、貨幣等等的時(shí)候,這種簡(jiǎn)單的技術(shù)可以節(jié)省我們的時(shí)間和精力。

輸入字段的HTML屬性

設(shè)計(jì)師知道對(duì)于輸入特定的數(shù)據(jù)需要展示正確的移動(dòng)鍵盤(pán),但是對(duì)究竟哪種才是正確的鍵盤(pán)類(lèi)型有些疑慮。

舉個(gè)例子,對(duì)于最常用的“數(shù)字”類(lèi)型屬性的輸入框,常常不會(huì)觸發(fā)數(shù)字小鍵盤(pán),觸發(fā)的是普通的帶有數(shù)字區(qū)域的鍵盤(pán),數(shù)字鍵的大小遠(yuǎn)小于小鍵盤(pán)。

△  “數(shù)字”鍵盤(pán)和“電話(huà)”小鍵盤(pán)

對(duì)于只包括數(shù)字的字段,比如日期,郵編,信用卡等等。使用數(shù)字小鍵盤(pán)可以有更大的點(diǎn)擊目標(biāo),從而使用戶(hù)用更小的精力輸入。(為了使其展示,前端中可用“tel”作為type值或者添加屬性“pattern=[0-9]* ”。)然而,為數(shù)字狀態(tài)設(shè)置全鍵盤(pán),對(duì)如街道地址等以數(shù)字作為開(kāi)始的混合字段依然有用。

這里有其他的幾種可以被加入輸入框的屬性,從而可以消除額外的點(diǎn)擊和錯(cuò)誤。

  • 自動(dòng)填寫(xiě):利用瀏覽器可以保存并列舉用戶(hù)以前填寫(xiě)過(guò)的值。對(duì)敏感數(shù)據(jù)應(yīng)關(guān)閉此功能。
  • 自動(dòng)更正:更正輸入的拼寫(xiě)錯(cuò)誤。對(duì)名稱(chēng),地址等特殊字段應(yīng)該關(guān)閉此功能。
  • 自動(dòng)首字母大寫(xiě):自動(dòng)大寫(xiě)輸入的第一個(gè)字母。這適用于填寫(xiě)姓名,而不可用于電子郵件地址。
  • 拼寫(xiě)檢查:用紅色下劃線標(biāo)出拼寫(xiě)錯(cuò)誤的單詞。對(duì)名稱(chēng),地址等特殊字段應(yīng)該關(guān)閉此功能。

3. 限制輸入

如今越來(lái)越多的人用小屏的移動(dòng)設(shè)備,我們需要考慮到小屏的使用場(chǎng)景,避免用戶(hù)不必要的輸入,在提高用戶(hù)滿(mǎn)意度的同時(shí)還可以減少錯(cuò)誤率。

地址預(yù)填充

在網(wǎng)上注冊(cè)表單中地址的填寫(xiě)常常是最麻煩的,因?yàn)榘ǘ鄠€(gè)字段,長(zhǎng)長(zhǎng)的地址名。通過(guò)把長(zhǎng)地址拆解為單個(gè)字段,不僅有助于讓用戶(hù)聚焦在輸入上(是的他們總是會(huì)頻繁切換頁(yè)面),也削減了大量的輸入。

在下面的例子中輸入谷歌總部的地址(街道,城市,州,郵編,國(guó)家),完整的輸入過(guò)程只需鍵入10個(gè)字母,而如果不用自動(dòng)填充的話(huà),用戶(hù)需要手動(dòng)輸入50多次。

上面使用谷歌API的解決辦法可以在大多數(shù)情況下表現(xiàn)良好,但是對(duì)于輸入標(biāo)志性建筑和公寓號(hào)的適用性有限,因?yàn)檫@些也許不包括在API提供的反饋之中。

而ThinkGeek的方法,由軟件即服務(wù)(SaaS)供應(yīng)商提供,稱(chēng)為PCA預(yù)測(cè),初始搜索時(shí)允許輸入公寓號(hào)碼,輸入后將地址正確的格式化。

△  ThinkGeek.com

郵箱預(yù)填充

另一種減少輸入的方法就是在郵件地址字段中提供一個(gè)常見(jiàn)郵箱域名的列表。列表在用戶(hù)輸入了“@”按鈕時(shí)出現(xiàn),主要就是使用了一個(gè)預(yù)填充的解決方案,這樣每次輸入郵件地址最多可以節(jié)省12次按鍵。

△  注意輸入框文本 “郵箱地址” 已經(jīng)消失

4. 利用定位

雖然調(diào)用定位數(shù)據(jù)常用在移動(dòng)應(yīng)用程序中,但是我們不能忘記在所有的平板電腦和臺(tái)式機(jī)上也可以使用。特別是當(dāng)在觸摸屏上打字很麻煩時(shí),基于位置的信息預(yù)填充可以節(jié)省用戶(hù)寶貴的時(shí)間并提高轉(zhuǎn)化率。

諾德斯特龍百貨網(wǎng)站的產(chǎn)品詳情頁(yè)就是這種技術(shù)的一個(gè)很好的例子,產(chǎn)品利用定位完全跳過(guò)了表單填寫(xiě)。頁(yè)面調(diào)用定位信息,并在最接近的商店自動(dòng)查找項(xiàng)目的庫(kù)存,而不是要求用戶(hù)輸入郵政編碼來(lái)獲取地址。這樣不僅僅節(jié)省了用戶(hù)的時(shí)間,還可以讓用戶(hù)直接看到“最近店面地址”這個(gè)有用的信息。

△  nordstrom.com

雖然由于精度問(wèn)題,預(yù)填充一個(gè)完整的地址可能是有困難的。通過(guò)谷歌的Places API,可以同時(shí)使用地理位置信息和地址預(yù)填充兩種方式以達(dá)到最好的效果,根據(jù)用戶(hù)的實(shí)時(shí)位置給出更為的位置填寫(xiě)參考。

△  Zuppler.com

當(dāng)然,因?yàn)椴荒鼙WC準(zhǔn)確性,所以需要允許用戶(hù)可以對(duì)自動(dòng)生成的位置數(shù)據(jù)進(jìn)行手動(dòng)修改。

總結(jié)

總之,遵循這些原則可以幫助設(shè)計(jì)出易用的表單并創(chuàng)造愉悅的表單體驗(yàn):

  • 優(yōu)先保證表單的可瀏覽性,設(shè)計(jì)易于閱讀的標(biāo)簽,并避免無(wú)關(guān)的內(nèi)容妨礙用戶(hù)瀏覽。
  • 提供更易填寫(xiě)的表單格式,為每個(gè)輸入條目的類(lèi)型設(shè)計(jì)輸入掩碼,并使用適當(dāng)?shù)逆I盤(pán)(以及其他HTML屬性)。
  • 給予恰當(dāng)?shù)妮斎胂拗?,使用預(yù)填充
  • 利用定位,無(wú)需再次點(diǎn)擊添加。

以上說(shuō)明我們?cè)诓粩嘧兓臄?shù)字時(shí)代中總是有更多可以學(xué)習(xí)的東西。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔