[譯]表單設計原則

來源:uxbooth

表單設計中似乎有一條不可侵犯的原則,即越短越好。從邏輯上來說沒有錯——用戶付出的越少,其轉換率越高。然而這條原則缺乏對諸如字段類型,設計樣式等因素的考慮。

十年前,Imaginary Landscape機構研究發現,當把需要填寫的字段從11個減少到4個時,用戶轉換率提升了160%。但是這僅僅是涉及兩個變量(字段數量和轉換率)的實驗。有沒有將這4個字段分組排布呢?沒有。10個字段和11個字段相比,轉換率有什么變化呢?5個和4個字段呢?該機構并沒有做這些研究。所以,這就是一個特殊的案例,當然了,減少64%的信息量確實能讓表單更容易填寫。

Unbounce(一家提供著陸頁測試的公司)的Michael Aagaard 分享過一個類似的研究,他先將需要填寫的字段由9個見到6個,發現轉換率降低了14%。進一步研究發現,對于用戶來說,字段的排列組織得更好會減輕填寫的強迫感。第二輪研究中,他對9個字段進行分類和組織,轉換率提高了19%。這項研究證明了并不是字段越少越好。

如果不能減少字段數量,我們如何通過其他手段提升表單填寫體驗呢?我認為有以下四個原則:

?? 讓用戶能夠全覽表單

? 提供輕松的樣式

?減少不必要的輸入


讓用戶能夠全覽表單

尼爾森告訴我們用戶自上而下瀏覽網站而不是閱讀網站。即便是填寫表單的時候,這條原則依舊適用,即便設計者希望用戶能全神貫注地填寫。用戶能快速而有效地瀏覽表單對于減少填寫錯誤或者漏填是至關重要的,尤其是我們指望用戶能在一次填完整個表單時。

標簽位置

關于標簽位置的研究很多,至今仍存在爭議。一項研究表明,標簽頂部對齊時,填寫時間最短,因為減少了用戶用戶的眼球移動。右對齊是次快的方式,當界面高度有限時,可以采用這種方式。左對齊的標簽的方式,將導致用戶填寫時間最長。

提示

預先填好示例字段并沒有什么用,即便其獲取焦點后,這些字段會消失。因為這種方式會增加用戶短期的記憶負擔,增加失敗的幾率。


要:提供空表格
不要:提供令人費解的示例字段



浮動標簽

浮動標簽,是一種比較新的交互設計,非常受歡迎。在這種設計中,標簽文字作為占位符出現,當用戶鍵入內容時,他們會縮到文本框的上方位置,如下圖的效果:

浮動標簽

盡管這種方式能減少界面的長度,在移動端會非常好用,但是可能會造成用戶很難區分已填寫字段和未填寫字段。所以也有人建議應該避免這種設計,應當保持標簽一直在上面,除非頁面長度真的是個問題時,再考慮這種交互方式。

提供輕松的樣式

過去,用戶去通過猜測才能完成表單填寫。比如電話號碼的填寫需要遵循什么格式?需要填區號嗎?怎么填?我是不是漏了一位信用卡數字?@符號在鍵盤哪個位置?好在現在能通過一些手段為用戶提供更明了的體驗,讓用戶填寫時不去考慮這些問題。

提供結構化樣式

獲取焦點后,結構化的樣式出現在文本框內,用戶填寫時,字符能夠同時自動編排,讓用戶專注于填寫本身。如下圖所示,當用戶填寫電話號碼時,括號、橫線、空格都被用戶輸入的數字所取代。


結構化樣式

在填寫電話號碼、信用卡、貨幣金額等場景下,這種方式能夠節省用戶不少時間和經歷。

提供適當的輸入鍵盤

許多設計師知道根據不同的輸入場景展示相應的小鍵盤,但對于哪一個才是正確的鍵盤類型,其實很多人還存在困惑。

“數字”鍵盤 vs. “電話”鍵盤

當僅僅需要輸入數字時,如電話號碼,日期,郵編,信用卡號等,上圖中右側“電話”鍵盤可能對用戶更友好,輸入更省力。左側的“數字”鍵盤,適合于混合的輸入場景,比如最開始輸入的是數字,后面需要輸入一些符號等。

還有一些其他方式,能夠減少用戶輸入時的壓力和輸入錯誤:

?自動完成:在輸入時,幫助用戶自動聯想之前輸入過的內容。切記涉及敏感數據時不要使用此功能。

?自動校驗:當拼寫錯誤時能夠自動校正。當輸入類似姓名、地址等信息時,關閉此功能。

?首字母大寫:填寫姓名時,保證首字母大寫,填寫電子郵箱時,不必。

?拼寫檢查:對于拼寫錯誤的單詞通過紅色下劃線提示用戶。名字和地址這種字段無需提示。

減少不必要的輸入

預填充地址

越來越多的人使用移動設備,所以減少不必要的輸入對于提升用戶滿意度和減少錯誤率來說很重要。

地址填寫對于注冊來說是最繁瑣的一步了,需要填寫省份、城市、街道、郵編等。

Google有相關的API方案,能夠解決這一個問題,但是可能無法細節到門牌號這種程度。所以預填充后,要允許用戶對其修改。


Email 預填充

在用戶輸入用戶電子郵箱地址時,可通過提供常見郵箱后綴來減少用戶輸入。如網易郵箱:

郵箱地址預填充


地址預填充

盡管使用地理位置定位的技術在移動應用中非常常見,但是我們可別忘了在筆記本或者桌面電腦使用這種技術,尤其是觸屏設備,它的輸入相當繁瑣,基于地理位置的預填充信息能夠有效節省用戶時間,提高轉換率。

預填充地理位置不一定精準,應當允許用戶對其進行再編輯。

地址預填充示例

地址預填充示例



總之,遵循這些原則能夠為用戶帶來良好的填寫表單體驗:

?讓用戶通過閱讀標簽對表單全覽,避免無關的內容項干擾用戶

?通過結構化的表單設計和恰當的鍵盤,讓用戶輸入更輕松

?通過預填充減少用戶輸入

?充分利用基于地理位置的技術

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 網上鮮有用戶體驗的文章會把事情發生的原因給你講的那么詳細。相對于本文作者給出的方法,那些追溯源頭的研究更值得一看。...
    D27閱讀 1,622評論 0 5
  • 優先保證表單的可瀏覽性 很早之前Jakob Nielsen的研究告訴我們,用戶通常只是快速瀏覽網頁而不是細致地從上...
    張安松閱讀 683評論 0 3
  • 表單是什么? 表單是一個包含表單元素的區域,使用表單標簽( )定義。 表單元素是允許用戶在表單中輸入信息的元素,主...
    Meowmaid閱讀 1,439評論 1 7
  • HTML表單 在HTML中,表單是 ... 之間元素的集合,它們允許訪問者輸入文本、選擇選項、操作對象等等,然后將...
    蘭山小亭閱讀 3,436評論 2 14
  • 【表單設計的新規則】 每天,我們都會在網上使用表格。我們填寫完整的購買流程;注冊郵箱的列表;社會網絡或者更多其他;...
    HsuDoNBu柏閱讀 357評論 1 2