優(yōu)化表單設(shè)計以及注意事項
人生苦短,沒有人喜歡填寫表單。要口語化、有趣,逐漸吸引用戶,讓人感覺出乎意料。本文會探討表單設(shè)計的注意事項。
設(shè)計師常犯的錯誤,以及正確做法
無論是注冊流程、多屏分步表單,或者是單調(diào)的數(shù)據(jù)列表界面,表單都是數(shù)字產(chǎn)品設(shè)計中的重要組成部分。本文會探討表單設(shè)計的注意事項。記住這些只是通用規(guī)范,每條準則總有例外。
表單應(yīng)該只有一列
多列布局會擾亂用戶垂直方向的視線移動。
頂部標簽
頂部標簽的表單比左側(cè)標簽有更高的完成率。頂部標簽的表單也易于移植到移動端。但是,對于有多種選擇項的大量數(shù)據(jù)列表而言,請考慮使用左側(cè)標簽,因為它們在一起更易于瀏覽,能夠減少高度,比頂部標簽更貼心。
把標簽與輸入框成組排列
把標簽和輸入框貼近排列,確保項目之間留有足夠高度,防止用戶困惑。
避免全大寫標簽
全大寫標簽更難閱讀和瀏覽。
如果選項少于6個,全部展示出來
把選項放入下拉選單需要用戶進行兩次點擊,還會把選項隱藏起來。超過5項才使用下拉選框。如果超過25個選項,就要在下拉菜單中加入搜索。
不要把默認提示當做標簽
把默認提示文字當做標簽,意在節(jié)省空間。但這會導(dǎo)致許多可用性問題,Nielsen Norman Group的Katie Sherwin對此作過總結(jié)。
縱向排列勾選框(和單選框)以保證易讀性
縱向排列勾選框能加快瀏覽速度。
行動指令要具有描述性
行動指令要描述出具體行為。
逐行說明錯誤
告訴用戶哪里錯了,說明原因。
逐行驗證要在用戶填完一行之后進行(除非填寫中驗證更有幫助)
別在用戶打字的時候進行逐行驗證,除非這對他們有幫助——例如創(chuàng)建密碼、用戶名之類,或者字符數(shù)提示信息。
不要隱藏基本的幫助提示文案
盡可能直接展示基本的幫助提示文案。對于復(fù)雜的提示文案,可以考慮在輸入框激活時,展現(xiàn)在它旁邊。
區(qū)分主次操作項
對此還有一項更深刻的哲學(xué)爭論,真的需要次要操作項嗎?
用輸入框長度來反映內(nèi)容
輸入框的長度暗示了答案的長度。對于字數(shù)固定的輸入框,例如電話號碼、郵政編碼等,可以使用這種方式。
拋棄星號*,標出選填項
用戶不一定都知道星號(*)表示必填項。相反,應(yīng)該標出選填項。
把相關(guān)信息編組
用戶會分塊思考,太長的表單會讓人眼花繚亂。創(chuàng)建符合邏輯的分組,用戶會更容易理解表單。
真的需要問嗎?
省略掉選填項,考慮采用其他方式收集數(shù)據(jù)。時刻問自己,某個問題的答案是否能推測出來,問題能否往后放,或者完全去掉。
數(shù)據(jù)獲取正在變得越來越自動化。例如,手機和穿戴設(shè)備在用戶不知不覺間收集了大量數(shù)據(jù)。想想如何利用社交媒體、對話式界面、短信、郵件、聲音、光學(xué)字符識別、位置信息、指紋、生物識別技術(shù)等等。
讓表單變得有趣
人生苦短,沒有人喜歡填寫表單。要口語化、有趣,逐漸吸引用戶,讓人感覺出乎意料。設(shè)計師的職責(zé)就是傳遞公司品牌,激發(fā)情緒反應(yīng)。處理得當,就能提升完成率。一定要遵循以上規(guī)則。
原文鏈接:https://uxdesign.cc/design-better-forms-96fadca0f49c#.pq9x0zsdm
作者信息:Andrew Coyle,Product Design Lead @Flexport | Find more of my work athttp://andrewcoyle.com/
#專欄作家#
可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設(shè)計師,至少是個快樂的設(shè)計師。
本文翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。
必填項和可選項的展示,可以根據(jù)數(shù)量多少標注。
最近正在做表單設(shè)計,受用~
感謝分享,汲取里面有用的東西放到工作中了~~~ ?
非常棒!
有中文的圖例就更完美了 ??
??
不錯,總結(jié)的很到位,細節(jié)決定成敗。
不要把默認提示當做標簽的圖片沒顯示出來
很受用啊,謝謝分享
細節(jié)之美~ ??
沒了一張圖片呀
圖片的封面不錯。。哈哈
有時候產(chǎn)品的易用性就體現(xiàn)在這些細節(jié)上 ??