掌握表單設計的4個技巧，給用戶驚喜的體驗

2 評論 6343 瀏覽 45 收藏 9 分鐘

在To B的應用程序中，表單是最常見的元素之一，因此要想提升用戶體驗，應該高度重視用戶體驗設計技巧，精心的表單設計可以對用戶體驗和交互效率提升產生很大的積極的影響。

我們在做表單設計的時候，一方面希望我們的表單可以對用戶有引導，可以針對用戶的操作作出適當的回應，防止他們放棄表單填寫；另一方面我們不希望一開始加載大量表單，一下子就把用戶嚇到，下面是我在項目中做表單設計的一些考慮。

針對如何提升表單設計的引導性主要會考慮以下幾個問題：

一、如何排列體驗是最優的？

用戶在填寫表單的時候經常會猶豫不決，所以要盡可能簡化表單填寫過程，表單設計要遵循內在系統邏輯，符合用戶的使用習慣，減少視覺負荷，創建良好的信息層次。

1. 國外的設計研究員mattero penzo做了眼動實驗，如果將label放置在input框上面，眼睛掃描表單速度會更快。

圖片1來源于Uxmatters

2. 按照邏輯順序聚合排列表單，便于用戶理解。

圖片2 UX Planet的注冊頁面

圖片2?UX Planet的注冊頁面把birthday表單填寫聚合在一起，方便用戶理解。

3. 將input框與將要輸入的長度匹配，尤其是可能會輸入很多信息的輸入框大小一定要留夠，讓用戶對將要輸入的內容有所預期。

圖片3 Salesforce Object界面

圖片3?Salesforce Object 表單里面description input框比較大，提醒用戶可能會輸入比較多的內容。

二、額外的提示怎么做到恰到好處？

為什么需要提示？

Sting TV的數字負責人Yakir Reznik做了A/B測試，在A版本只給用戶提供姓名和電話號碼表單讓用戶填寫，在B版本中除了給用戶提供姓名和電話號碼表單，還添加了一個解釋，即如果用戶需要找回密碼，則需要此信息，雖然提示比較長，甚至在移動設備上面還需要額外滾動，但是轉換率卻提高了11%。所以好的提示對用戶的引導性和防止用戶放棄有很重要的作用。

在做項目的過程中一般會遇到以下幾種提示，每種提示都各有優缺點，大家可以根據自己的實際情況使用提示。

1. 靜態提示，在界面上固定顯示，不會消失。

  • 優點：始終在界面呈現提示，用戶不會錯過它，對指導用戶操作有重要作用。
  • 缺點：占地方，會讓界面不整潔。
  • 建議：如果是特別重要的信息或者是不容易理解的信息，建議采用靜態提示。

圖片4 Salesforce Object 界面

圖片4?Salesforce表單填寫有大量靜態提示，幫助用戶理解自己需要做的任務。

2.?按需顯示，當鼠標點擊或者懸停在圖標“?”、“!”、“i”或者鏈接上出現提示。

  • 優點：不占用很大區域，還可以指導用戶。
  • 缺點：對于不熟悉的用戶會錯過重要信息。
  • 建議：如果是對用戶填寫前作指導，且表單信息容易理解，避免信息過載最好隱藏提示，如果是對用戶操作作出反饋，建議預留提示消息空間，且要立即提示最好。

圖片5 WIX Login?界面

圖片5 針對用戶操作作出反饋，提示用戶輸入錯誤。

3.?自動出現，當label或者input框獲得焦點時，提示自動出現，隨著焦點變化而改變。

  • 優點：在需要的時候出現不會有負擔，也不會被忽略。
  • 缺點：信息填寫完即使不再需要它也會出現。

圖片6 Zeplin Login界面

圖片6 Username?input框獲得焦點時，提示自動出現，當焦點在password時提示在password右側出現，username右側的提示消失。

4.?自動消失（一般指占位符），輸入框提示用占位符，一旦用戶焦點在該框，占位符消失。

  • 優點：不占用很大區域，還可以指導用戶。
  • 缺點：顯示提示信息空間有限；當用戶輸入一半信息想要看提示的時候是無法顯示提示的。
  • 建議：如果提示信息不多建議用占位符。

圖片7?Invison 注冊界面

三、如何減少用戶輸入次數？

好的表單設計可以減少用戶輸入次數，提升工作效率，目前主要從下面幾個方面去考慮。

  • 打字交互成本高，盡量用單選或者多選代替，讓用戶做選擇題，減少用戶輸入。
  • 區分可選和必選字段，必選可以加?*?號，讓用戶可以集中于必填字段。

圖片8

圖片8 用?*?號標識出必填字段，但是如果大多數是必填且有大量表單，建議只標識出非必填，如下圖9。

圖片9

四、如何鼓勵用戶繼續填寫信息？

給用戶持續的激勵，會刺激多巴胺的產生，多巴胺是一種化學獎賞的神經遞質，會產生神經系統的興奮性，所以為讓用戶可以愉快的完成表單，不中途放棄，要有一些激勵設計。

1.?完成過程中提醒用戶進程，鼓勵用戶繼續填寫表單。

圖片10

2.?完成任務之后給用戶一些稱號激勵，例如給用戶設置青銅、白銀、黃金、鉑金等等級，給用戶升級刺激。

圖片11 WIX 界面

后面我會講當表單數量很多時，如何做設計？

 

作者：西西，微信公眾號或者知乎專欄：西西設計客棧

本文由 @西西 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
西西
2篇作品 15514總閱讀量
11-291755 瀏覽
對社區團購現狀的一點思考
12-184084 瀏覽
面試篇：產品經理如何快速通過面試拿下offer？
06-193928 瀏覽
上億網友轟轟烈烈參與抵制“美國貼吧”的資本家，然后失敗
11-063553 瀏覽
數據分析想落地，別再只說要搞高！
10-16491 瀏覽
開號1個月，文章接連被行業百萬大號轉載，淺談我對轉載的看法
評論
評論請登錄

  1. 受教，排列布局有些其他意見，表單采用垂直排布、label與input框水平放置，且label左對齊排列，為整體性考慮

    來自北京 回復