表單設計15個方針,構建又好又實用的表單界面
表單的好壞直接影響著用戶的體驗,那么如何才能設計出更好更實用的表單呢?一起來看看作者分享的幾個表單設計方針。
無論是注冊流程、多視點布局、或者是單調的純數據錄入界面,表單都是其中最重要的組成部分,他們的好壞直接決定用戶對產品的體驗。在這里我只針對于常見的表單設計注意事項做一些說明,但是請記住,這些都是一般指導方針,在產品設計中可能會因為情景的不同而出現例外。
1、表單應盡量設計成一列
多列會擾亂用戶的垂直動量
2、頂部對齊標簽
優先選擇處理速度快的頂部對齊標簽
數據表明:與左對齊方式的標簽相比,用戶處理頂部對齊形式的標簽時速度更快,頂部對齊標簽也可以應用于移動端重。
也會有特殊情況,比如在處理條目數量較多的大型資料庫時,可以考慮左對齊方式的標簽,因為他們降低了高度,瀏覽時更容易。
3、組標簽及其輸入
使標簽和輸入框有組的概念
使標簽和輸入框兩兩組合,用間隔的大小來形成組的概念,否則就會如右圖所示,分不清楚那個標簽和哪個輸入框是匹配的,容易產生混淆,是用戶感到困惑。
4、不要全部使用大寫字母
不要全部使用大寫字母
數據表明:與大寫字母相比,人對小寫字母具有更高的敏感度和識別度,比如我們可以輕松的認出“Market”,但是卻不能一眼識別出“MARKET”,因此不要全部使用大寫字母作為標簽或說明文本,識別度太低,增加用戶的認知成本。
5、如果少于6個,那么顯示出所有的選擇項
顯示所有選擇項
對于下拉菜單選擇器而言,將選項內置,需要點擊兩次查看或隱藏選項,且不直觀,如果少于6個選擇項,不妨考慮使用標簽選擇器。
另外如果有超過25個選項,則不能僅僅使用下拉菜單選擇器,還要在下拉列表中結合上下文進行搜索。
6、盡量不使用占位符作為標簽
盡量不要占位符做標簽
使用占位符文本作為標簽來優化空間是誘人的。但是這會導致許多可用性問題,這里不做詳細說明,這些問題已經被尼爾森諾曼集團的Katie Sherwin證實過。
7、將復選框置于下方,以方便進行瀏覽。
復選框置于下方
將復選框置于標簽的下方,更易于用戶的瀏覽。
8、使用號召性用語(CTA)作為描述
使用號召性用語(CTA)
使用號召性用語(CTA)更能激發用戶的行動力和歸屬感。
比如:普通用語“注冊”,一般是表示動作;號召性用語(CTA)可能表述為“我要免費試用”,一般是表示意圖。
9、指定錯誤內聯
指定錯誤內聯
告知用戶錯誤發生的位置和原因。
這是兩個要素:位置和原因。
對于位置而言,要明確告訴用戶具體是那個地方出現了錯誤,而不能只是簡單告訴用戶有錯誤;對于錯誤原因而言,不但要告訴用戶錯誤的原因,還要告知解決的方法,引導用戶做出正確的操作。
10、在用戶填寫字段完成后在進行內聯驗證(除非是在填寫的過程中需要幫助他們)
內聯驗證
首先,完成一個字段后在進行內聯驗證,比如當姓名輸入框失去焦點后,在進行內聯驗證。
其次,不要在輸入過程中邊輸入便進行內聯驗證,比如右側的Email輸入框,用戶還未輸入完成就進行了內聯驗證,才會一直出現錯誤,會讓用戶產生恐懼。
最后如果是需要在填寫的過程中幫助用戶,那么可以邊輸入邊做內聯提示,直到失去焦點后在進行內聯驗證。比如我們常見的在輸入密碼時,如果使用了不規范的字符,系統會立刻驗證告知你出現了錯誤,以及該如何避免這種錯誤。
11、盡量不要隱藏幫助文本。
幫助文本
在條件允許的情況下,盡量不要隱藏幫助文本,可以將幫助文本置于被幫助項附近,當然如果幫助文本過于復雜,或者已經不僅僅是幫助文本,而是幫助教程的時候,需要考慮將其隱藏。
12、要區分主要操作和次要操作
區分主次
關于是否需要一個次要操作,這是一個更大的問題,我們暫不討論,我們討論的是如果不是只有單個操作,那么一定要區分主次操作,可以簡單理解為:比較重要的、我們希望用戶去做的就是主要操作,剩下的就是次要操作。
比如左側的圖中“登錄”按鈕為主要操作,“取消”按鈕為次要操作,然而右圖中未進行祝此操作的區分。
13、使用字段長度作為提示
字段長度作為提示
預留字段的長度提供了答案的長度。對于具有預定義的字符數字,如電話號碼、身份證號碼、郵政編碼等,字段的長度是已知且固定的,那么預留字段的長度便能明確表示答案的長度。
常見的例子還有:支付寶、微信等的六位支付密碼、銀行卡號···
14、可以考慮不用*表示是否必選和可選字段
是否必填
隨著網絡的普及,可能大家都能明白*代表著必填的含義,但是不排除有一部分對網絡接觸較少的人群并不理解其中的含義,當然這不是重點,重點是沒有必要一定要用*來表示必填,因為很多時候我們發現,幾乎90%的都是必填項,只有個別是選填項,那么就沒有必要每個必填項都加*標注,我們完全可以按照左圖所示的思路,只對選填項做選填標注(Optional),對必填項便不再需要任何特殊標記。
15、信息的組相關(模塊相關)
組相關(模塊相關)
當表單內哦讓較多或表單過長時,可能會讓用戶產生壓迫感,且識別度較低,我們可以通過對這些表單元素進行分組分類模塊化,讓用戶更加清晰易懂。
比如把用戶名、密碼等作為基礎數據組,把郵箱、性別、星座等作為補充數據組。
以上就是關于表單設計分享的幾點心得,歡迎交流點評。我跪著寫,您坐著看,看完動手點個贊,么么噠!
本文由 @提需求請跪著 原創發布于人人都是產品經理。未經許可,禁止轉載。
不看不留意,看了才留意到一些大公司APP設計的合理性
感謝,受益匪淺。
原文在這,感謝分享。 ?? https://uxdesign.cc/design-better-forms-96fadca0f49c
多謝分享,有幾個小問題請教:
1、表單應盡量設計成一列
后臺系統的表單內容會非常之多,一列的話會將頁面拉的非常長,一般我們都考慮兩列,三列;更關注的是標簽和內容如何對齊;
7、將復選框置于下方,以方便進行瀏覽。
是說復選框縱向排列還是橫向排列吧,同樣的問題如果有10個以上的復選項,縱向排列會浪費空間;
14、可以考慮不用*表示是否必選和可選字段
只有可選項打個標記區分不夠明顯;如果一組數據全部是可選項或者大部分都是可選項如何區分,目前也沒有想到很好的辦法。
個人觀點,說錯見諒:1、單列可以使用戶識別更快速,而且多列還要考慮到輸入長度的問題,可能會影響對齊;7、數量過多的選項如果是多選可以考慮,如果是單選就做成內置;14、可以嘗試分成必填組和選填,用戶一眼分辨,如不想處理即刻便可跳過。
帥、酷、吊、爆
7、數量過多的選項如果是多選可以考慮,如果是單選就做成內置; 怎么個內置法 這一塊沒看懂
文中說的所有情況,都不是必須這樣,是在可以這樣的情況下,優先這樣,不要硬套
總結的挺到位的,產品小白目前對交互體驗還不是很敏感,怎么培養?有何推薦的書或者其他方法?
寫得很好,不過上面案例都是英文排版的,如果換成漢字有些地方看起來就有點別扭?,F在我弄表單最頭疼的就是關于報單名字的長度問題,為了美觀,每次都要盡量保持長度統一。
“幾乎90%的都是必填項,只有個別是選填項,那么就沒有必要每個必填項都加*標注,我們完全可以按照左圖所示的思路,只對選填項做選填標注(Optional),對必填項便不再需要任何特殊標記。”這樣必填和不必填區分太不明顯了,用戶很容易跳過必填
非常贊!多謝分享!不過這個是否更適用于手機,如果是網頁,一列的話可能就不合適了吧,會有大量空白空間沒有利用呢!
并不是絕對,而是優先考慮
要根據情況而定,不能完全照搬
挺實用的
感謝分享 ??
挺好,覺得非常實用