優化表單設計以及注意事項

12 評論 25132 瀏覽 233 收藏 8 分鐘

人生苦短,沒有人喜歡填寫表單。要口語化、有趣,逐漸吸引用戶,讓人感覺出乎意料。本文會探討表單設計的注意事項。

設計師常犯的錯誤,以及正確做法

無論是注冊流程、多屏分步表單,或者是單調的數據列表界面,表單都是數字產品設計中的重要組成部分。本文會探討表單設計的注意事項。記住這些只是通用規范,每條準則總有例外。

表單應該只有一列

多列布局會擾亂用戶垂直方向的視線移動。

頂部標簽

頂部標簽的表單比左側標簽有更高的完成率。頂部標簽的表單也易于移植到移動端。但是,對于有多種選擇項的大量數據列表而言,請考慮使用左側標簽,因為它們在一起更易于瀏覽,能夠減少高度,比頂部標簽更貼心。

把標簽與輸入框成組排列

把標簽和輸入框貼近排列,確保項目之間留有足夠高度,防止用戶困惑。

避免全大寫標簽

全大寫標簽更難閱讀和瀏覽。

如果選項少于6個,全部展示出來

把選項放入下拉選單需要用戶進行兩次點擊,還會把選項隱藏起來。超過5項才使用下拉選框。如果超過25個選項,就要在下拉菜單中加入搜索。

不要把默認提示當做標簽

把默認提示文字當做標簽,意在節省空間。但這會導致許多可用性問題,Nielsen Norman Group的Katie Sherwin對此作過總結。

縱向排列勾選框(和單選框)以保證易讀性

縱向排列勾選框能加快瀏覽速度。

行動指令要具有描述性

行動指令要描述出具體行為。

逐行說明錯誤

告訴用戶哪里錯了,說明原因。

逐行驗證要在用戶填完一行之后進行(除非填寫中驗證更有幫助)

別在用戶打字的時候進行逐行驗證,除非這對他們有幫助——例如創建密碼、用戶名之類,或者字符數提示信息。

不要隱藏基本的幫助提示文案

盡可能直接展示基本的幫助提示文案。對于復雜的提示文案,可以考慮在輸入框激活時,展現在它旁邊。

區分主次操作項

對此還有一項更深刻的哲學爭論,真的需要次要操作項嗎?

用輸入框長度來反映內容

輸入框的長度暗示了答案的長度。對于字數固定的輸入框,例如電話號碼、郵政編碼等,可以使用這種方式。

拋棄星號*,標出選填項

用戶不一定都知道星號(*)表示必填項。相反,應該標出選填項。

把相關信息編組

用戶會分塊思考,太長的表單會讓人眼花繚亂。創建符合邏輯的分組,用戶會更容易理解表單。

真的需要問嗎?

省略掉選填項,考慮采用其他方式收集數據。時刻問自己,某個問題的答案是否能推測出來,問題能否往后放,或者完全去掉。
數據獲取正在變得越來越自動化。例如,手機和穿戴設備在用戶不知不覺間收集了大量數據。想想如何利用社交媒體、對話式界面、短信、郵件、聲音、光學字符識別、位置信息、指紋、生物識別技術等等。

讓表單變得有趣

人生苦短,沒有人喜歡填寫表單。要口語化、有趣,逐漸吸引用戶,讓人感覺出乎意料。設計師的職責就是傳遞公司品牌,激發情緒反應。處理得當,就能提升完成率。一定要遵循以上規則。

原文鏈接https://uxdesign.cc/design-better-forms-96fadca0f49c#.pq9x0zsdm

作者信息Andrew Coyle,Product Design Lead @Flexport | Find more of my work athttp://andrewcoyle.com/

#專欄作家#

可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產品經理專欄作家,UI/UX設計師,關注互聯網,關注科技?,F居杭州,與小伙伴們正在創業途中?;蛟S不是一名優秀的設計師,至少是個快樂的設計師。

本文翻譯發布于人人都是產品經理,未經許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 必填項和可選項的展示,可以根據數量多少標注。

    來自廣東 回復
  2. 最近正在做表單設計,受用~

    來自上海 回復
  3. 感謝分享,汲取里面有用的東西放到工作中了~~~ ?

    來自北京 回復
  4. 非常棒!

    來自北京 回復
  5. 有中文的圖例就更完美了 ??

    來自江蘇 回復
  6. ??

    來自廣東 回復
  7. 不錯,總結的很到位,細節決定成敗。
    不要把默認提示當做標簽的圖片沒顯示出來 :mrgreen:

    來自廣東 回復
  8. 很受用啊,謝謝分享

    來自福建 回復
  9. 細節之美~ ??

    來自湖北 回復
  10. 沒了一張圖片呀

    來自山東 回復
  11. 圖片的封面不錯。。哈哈

    來自北京 回復
  12. 有時候產品的易用性就體現在這些細節上 ??

    來自廣東 回復