優化表單設計以及注意事項
人生苦短,沒有人喜歡填寫表單。要口語化、有趣,逐漸吸引用戶,讓人感覺出乎意料。本文會探討表單設計的注意事項。
設計師常犯的錯誤,以及正確做法
無論是注冊流程、多屏分步表單,或者是單調的數據列表界面,表單都是數字產品設計中的重要組成部分。本文會探討表單設計的注意事項。記住這些只是通用規范,每條準則總有例外。
表單應該只有一列
多列布局會擾亂用戶垂直方向的視線移動。
頂部標簽
頂部標簽的表單比左側標簽有更高的完成率。頂部標簽的表單也易于移植到移動端。但是,對于有多種選擇項的大量數據列表而言,請考慮使用左側標簽,因為它們在一起更易于瀏覽,能夠減少高度,比頂部標簽更貼心。
把標簽與輸入框成組排列
把標簽和輸入框貼近排列,確保項目之間留有足夠高度,防止用戶困惑。
避免全大寫標簽
全大寫標簽更難閱讀和瀏覽。
如果選項少于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不是一名優秀的設計師,至少是個快樂的設計師。
本文翻譯發布于人人都是產品經理,未經許可,不得轉載。
必填項和可選項的展示,可以根據數量多少標注。
最近正在做表單設計,受用~
感謝分享,汲取里面有用的東西放到工作中了~~~ ?
非常棒!
有中文的圖例就更完美了 ??
??
不錯,總結的很到位,細節決定成敗。
不要把默認提示當做標簽的圖片沒顯示出來
很受用啊,謝謝分享
細節之美~ ??
沒了一張圖片呀
圖片的封面不錯。。哈哈
有時候產品的易用性就體現在這些細節上 ??