每日干货分享

產品經理基本功 — 表單設計


        不論WEB還是APP,表單是一個產品最基礎的模塊。只要你的用戶需要錄入信息,就必然會面對錶單。表單設計是一個產品經理的基本功,好的表單設計可以提升用戶效率,讓用戶愉悅;差的表單設計會讓用戶抓狂,甚至放棄。

        本文從表單布局出發,延伸到表單中各個元素的設計經驗,希望能給你在表單設計時帶來一些啟發。

 

       本次分享的目錄

產品經理基本功 -- 表單設計

 

 

布局

        打開一個表單,首先影響用戶的關鍵因素便是表單的布局,布局決定了整個表單的展示邏輯。布局需要考慮的因素:結構,分組聚合,排列順序。

 

結構

       結構分為單列和多列。為了保持統一的用戶視覺信息線,在通常情況下應該使用單列的表單結構。在WEB項目中,單頁表單數量非常大的情況下,可以考慮使用多列表單結構。

 產品經理基本功 -- 表單設計

       單列的表單結構提供了自上而下清晰視覺線索,引導用戶按照產品設計的邏輯逐步填寫信息。

       多列的表單結構讓用戶必須以Z模式進行表單掃描,會降低用戶的理解速度,可能會造成用戶偏離產品設計預期的信息線,造成填寫邏輯錯誤或漏填信息。

 

分組聚合

產品經理基本功 -- 表單設計

       將相關欄位分組集合。類似對話的方式,從一組問題到下一組問題。將相關的問題聚合在一起,能幫助用戶理解需要填寫的信息。

 

排列順序

產品經理基本功 -- 表單設計

       無論是分組還是表單欄位或是欄位對應的選擇項,都需要按照邏輯嚴格排序。例如:註冊頁面,總是先填寫賬號信息分組再填寫個人信息分組;付款詳情頁面總是先填寫信用卡號再填寫驗證碼。

 

       在表單架構的基礎上,表單由4個表單基本元素構成:

1.標籤

2.表單域

3.動作

4.提示信息

 

標籤

       標籤是整個表單中用戶第一時間接觸的元素,用戶告知用戶表單需要填寫什麼。優秀的標籤設計可以讓用戶快速清晰地了解表單目的,高效完成填寫,避免產生歧義。

       標籤在展示樣式上分為左標籤,頂部標籤,行內標籤。

 

左標籤

左標籤在web端是比較主流的設計,缺點是對橫向空間佔用較大。在對齊方式上可以分為左對齊標籤和右對齊標籤

 

左對齊標籤

產品經理基本功 -- 表單設計

       左對齊標籤,左側對齊有清晰的閱讀線,用戶可以快讀了解表單需要回答的問題,缺點是右側不對齊導致標籤和相關輸入框相鄰間距增大,增加了用戶填寫表單的難度。需要用戶謹慎填寫的情況下推薦使用左側對齊標籤。

 

右對齊標籤

產品經理基本功 -- 表單設計

       右對齊標籤與右側相關輸入框緊密相鄰,填寫的難度降低,缺點是左側不對齊,沒有清晰的閱讀線,降低了可讀性。需要用戶快讀填寫的情況下推薦使用右對齊標籤。

 

頂部標籤

       標籤位於輸入框的頂部,可以節約橫向空間,但會浪費縱向空間,橫向寬度有限的移動端推薦使用。根據標籤的展示方式,可以分為固定標籤和浮動標籤。

 

固定標籤

產品經理基本功 -- 表單設計

       傳統的頂部固定標籤布局,設計時需要注意留出合理元素的行間距以驅動不同填寫元素。由於標籤與輸入框的上線排布方式,用戶填寫時需要上下調整視覺線來確認填表信息,存在一定的閱讀障礙。

行內標籤

       即標籤位於輸入框內,擁有節約縱向和橫向空間的優勢。

產品經理基本功 -- 表單設計

       行內文本標籤,可以用文字清晰表明輸入框需要填寫的內容,但由於行內標籤的標籤文本在輸入框激活或已輸入狀態就消失了,會給用戶在填寫中或者填寫完成的檢查過程中帶來困難。產品設計應盡量避免使用此類標籤。

 

行內圖標標籤

產品經理基本功 -- 表單設計

       行內圖標標籤,可以配合行內輸入提示,在最左側加入圖標標籤,以優化行內標籤無法檢查的弊端。但是很多文字標籤是無法準確由圖標描述的,所以在不確定是否能準確用圖標表明標籤意圖的情況下,應謹慎使用行內圖標標籤。

浮動標籤

產品經理基本功 -- 表單設計

       浮動標籤在未填寫或未激活的狀態為行內標籤樣式,在激活或已填寫的狀態下為頂部標籤。浮動標籤是行內標籤和頂部標籤的結合體,移動端推薦此設計;消除了頂部標籤的閱讀障礙,同時解決了行內標籤填寫后高效無法檢查的弊端。

表單域

       表單域是用戶填寫錄入信息的區域。好的表單域設計應該儘可能簡化操作步驟,提升用戶的填寫效率。

       表單域按照填寫方式分為:文本框,選擇框。

 

文本框

       需要用戶手動填寫或通過其他方式錄入數據。文本框設計應該引導用戶進行正確快捷的填寫。

如單行文本框中若有固定輸入長度的可以通過文本框長度來提示用戶輸入,

產品經理基本功 -- 表單設計

       如驗證碼文本框,有固定長度輸入信息,如驗證碼,銀行卡號,手機號,身份證號等,可以通過輸入框長度或輸入框數量來限制用戶輸入,減少不確定性。

 

多行文本框

產品經理基本功 -- 表單設計

       若有輸入限制的,應當在輸入框內給出輸入限制提示。

 

選擇框

       用戶需手動選擇的輸入項,從輸入形式上可以分為:單選框,多選框,滑塊選擇,下拉框,文件選擇。

 

 

單選框

產品經理基本功 -- 表單設計

       即radiobox,英文意思比較直接,就是從收音機的單選按鈕衍生得來,即只能同時選中一個功能。

產品經理基本功 -- 表單設計

       與收音機一樣,在網頁中兩個或以上的互斥選項被歸為一個單選按鈕組,用戶只能選中按鈕組中的一個選項,單選按鈕組能有效的防止用戶錄入錯誤的數據。

在使用單選按鈕時需要有幾點設計原則需要注意:
1.選中動作不能代替執行命令

產品經理基本功 -- 表單設計

選項僅用來改變設置,不應該在用戶選中的時候執行生效命令,執行動作應該放在動作按鈕上(例如「確定」或「下一步」),且提供次動作以便用戶返回或撤銷設置。

 

2.設置一個默認選項

產品經理基本功 -- 表單設計

       不要讓用戶困惑,選項中,必然有個一選項是產品推薦的選項。可以選擇頻次最高的選項,或是產品主推的選項;在一些業務場景中,入填寫地理位置,我們可以根據用戶的定位來設置默認選項。

 

3.避免使用下拉菜單

產品經理基本功 -- 表單設計

       在選項少於7個的單選組中,應當使用平鋪的單選按鈕組。以避免下拉菜單帶來的選項無法全部預覽和操作效率不高的劣勢。

 

複選框

產品經理基本功 -- 表單設計

       一組選項中,用戶可以選中一個或多個選項的,應當使用複選框。複選框的設計與單選框類似,但在界面上需要有明顯的區分,以告知用戶可以多選還是僅能單選。一般採用圓形選框來表示單選,使用方形選框來表示多選。不管是否使用通用標準,你的產品應該在所有頁面中表現一致,避免讓用戶感到頭疼。

       在選項描述中,應當避免使用否定語言,即使是故意的引導性的產品小把戲也不應使用否定語言,對用戶非常不友好。

 

滑塊選擇

       滑塊選擇適用於對精度要求不高的數據錄入,所以多用在篩選功能中,通過拖動設置篩選範圍的臨界值。在移動端是常見的交互方式。

滑塊選擇有兩點設計可以提高體驗:

1.預設上下臨界值

產品經理基本功 -- 表單設計

       在篩選前,所篩選的數據範圍的上線臨界值應設置為滑塊的上下臨界值,以便用戶對篩選的數據有明確的預期,也可以使滑塊更為準確。

 

2.可以在滑動塊上加入對應數據量的體現

產品經理基本功 -- 表單設計

       可以以直方圖的形式,例如Airbnb的滑塊篩選。價格上方的直方圖面積代表了該價格對應的房源結果數量,用戶可以很好的預期和調整搜索結果。

 

下拉框

產品經理基本功 -- 表單設計

       選項較多的單選組,可以使用下拉框。由於選項較多,需要有直觀的選項排序,以便用戶快速找到需要的選項。國家,省份等標準的選擇項可以按照拼音或英文首字母的順序排列,業務上的非標準選項推薦按照使用頻次遞減進行排序。

 

 

動作

       填寫完表單內容,接下來就是下一步操作。我們成為表單元素中的「動作」。動作範圍主要動作和次要動作,主要動作便是用戶的提交動作,通常為「提交」或「下一步」等,次動作為「返回」,「取消」等輔助操作。

動作按鈕中注意以下幾點可以提高用戶體驗:

1.表單填寫完成前禁用提交動作

產品經理基本功 -- 表單設計

       完成填寫后及時改變狀態,給予反饋。及時告知用戶何時可以提交表單,防止錯誤。同時,在點擊完按鈕系統提交的過程中,應有反饋表明正在提交,以防止用戶重複點擊提交。

 

2.主次動作明顯視覺區分

產品經理基本功 -- 表單設計

       主動作絕大部分用戶的使用路徑,產品設計應該在用戶不閱讀動作按鈕文字的情況下就能找到主動作按鈕,降低出錯率。

 

3.直觀的號召性的動作按鈕描述

產品經理基本功 -- 表單設計

       可以考慮使用號召性的描述語言,來提升產品活力,提高轉化。例如,產品介紹頁中的「註冊「可以優化為「立即免費註冊」。

 

 

表單域最後的元素便是提示信息

       在用戶填寫前可能無法準確理解標籤的意圖;可能在填寫過程中會存在填寫錯誤;可能在提交時存在錯誤或漏填。對於上面的場景,在產品設計時都需要周全考慮,並設計準確,易懂,友好的提示信息。

       填寫前-填寫中-填寫后是三個遞進的狀態,越早的防止用戶錯誤,也就會有越好的用戶體驗,所以產品設計應當考慮的是怎麼防錯及容錯。

 

填寫前

產品經理基本功 -- 表單設計

       對於邏輯複雜或專業度高的標籤信息,可以採用說明的形式來幫助用戶理解。

 

產品經理基本功 -- 表單設計

       產品的大部分用戶均知道標籤的意義(換句話說,此時的提示是一個低頻需求)時可以考慮收起提示說明,採用激活的形式來被動提示(hover或是用戶點擊小問號),使頁面更簡潔易讀。

 

填寫中

產品經理基本功 -- 表單設計

       在填寫中,對用用戶的錯誤輸入應該及時反饋,比較好的方式是輸入框變色並緊挨輸入框防止對應的錯誤提示信息。提示的時機建議在用戶輸入過程中產生了錯誤信息便開始提示;若用戶始終輸入正確便不必提示避免打擾用戶。

 

 

填寫后

產品經理基本功 -- 表單設計

       有的信息需要後端驗證才能返回正確性,所以需要設計點擊主動作按鈕之後的提示信息。傳統的彈窗提示其實效率很低,首先用戶必須要關閉彈窗才能修改錯誤信息,其次關閉彈窗後用戶可能已經無法準確回憶起錯誤提示內容,造成修改困難。所以建議同樣使用錯誤框變色並加上提示文字的方式進行。在較長的頁面可能會存在提交按鈕與錯誤信息不在同一屏的情況;所以對於長頁面需要使用變色框+toast提示窗的組合提示。

 

       以上便是從布局到元素的表單設計建議。當然,不是絕對,不同場景需要根據自身情況作出取捨和創新。你在表單設計中有哪些提升效率和體驗的設計,歡迎在留言中交流。

向陽三木 原創作品