表單設計

一、概述

1、用戶行為模式

  • 入口設計:引導用戶進入表單。
  • 給出填寫表單的理由(why):有什么用,并給出快捷逃離入口。
  • 填什么、怎么填(what、how):包括填寫前的幫助、填寫后的驗證。

2、應用場景

  • 場景類型:注冊與登錄、填寫(個人信息、提交訂單)、發布(商品、內容)等。
  • 場景設計:如注冊時不強制要求填寫資料,先進行引導;支付時提前驗證:先提示余額是否足夠。

二、表單組成部分

1、標題和附加圖文

2、標簽

  • 標簽后面是否加冒號對UX影響不大,視情況而定。

3、表單域

  • 控件類型包括:輸入框-單行文本框/多行文本框/密碼框、單選按鈕/復選框、單選/多選下拉選擇框(或稱下拉列表)、文件上傳框、滑塊等。
  • 同一表單項,涉及控件的選擇。如在PC端,與其在輸入框中限制格式,不如使用下拉列表。但在移動端,應減少使用下拉列表,以分段控件、開關、滑塊等代替。

4、操作:包括按鈕和鏈接

  • 按鈕包括提交按鈕、復位按鈕、一般按鈕(如“更多”)。
  • 提交按鈕屬于主要操作、復位按鈕等屬于次要操作——誤操作往往帶來不愉快。盡量只用主要操作,非得使用次要操作時,淡化處理。

三、表單設計:框架層

1、多步驟表單(導航)

2、邏輯分組與排序

  • 可見表單項分組
  • 隱藏內容關聯的表單項
  • 隱藏部分表單項并以其他條件觸發:隱藏內容為高級/額外輸入,可滿足部分用戶需求。隱藏則又不干擾其他用戶。

3、必填/必選項

  • 用戶基本熟悉“*”,具體則看目標用戶群
  • 登錄等全部必填的表單不需要“*”
  • 若只有少部分表單項為非必填,也標注必填——標注非必填若太弱則無法區分、太強則本末倒置

3.1 icon為*

*的位置一般為標簽左側、標簽右側、標簽和表單域中間、表單域右側。

標簽和表單域同行且相隔太遠時,*放在標簽和表單域中間——視覺保持可水平直線'


必填icon在標簽左側:與表單域太遠
必填icon在標簽和表單域中間

3.2 icon非*

  • 如設計為書簽、木牌

3.3 無必填icon

  • 全是必填,如登錄注冊等表單

3.4 文字標注

  • 分框內注釋、框外注釋

4、填寫前的幫助

4.1 系統直接輸入:默認值

  • 默認值即缺省值,分為整體默認和個性默認。一般用戶有修改權限。如輸入框默認值、下拉列表默認選項、單選按鈕/復選框默認勾選、進步器默認數字等。

4.2 系統輔助輸入:分框內、框外

  • 框內分注釋和操作——如輸入框的數字微調、文件上傳框的上傳和取消。
  • 框外分圖文和操作,包括直接展示、點擊觸發、hover觸發,其顯示位置包括表單域右側、下方或當前頁彈出框等。

5、填寫后的驗證

表單驗證四要素:時間、位置、顏色、反饋信息。

5.1 時間——何時驗證

  • 提交后驗證:(填寫所有信息)提交表單后,正確/錯誤信息同時驗證顯示。
  • 即時驗證:每完成一項即顯示驗證的反饋信息。
    即時驗證的目標:提高成功率/減少錯誤率、縮短時間/減少視覺停留、提高滿意度、提升轉化率。

5.2 位置——顯示信息/提示條的位置

  • 表單項右側或下方、表單頂部、氣球狀提示、彈層、對話框。
  • 若采用提交后驗證,web表單用錨定位到首個錯誤項并獲取焦點。

5.3 顏色

  • 表單域高亮、字體顏色、提示條邊框和底色

5.4 反饋信息

  • 可分為兩大類:當前狀態和下一步操作。
  • 每大類可分三小類:成功提示、報錯、無對錯的友情建議。
    * 成功后給出鼓勵,包括提交成功后跳轉頁面時的成功反饋
    * 反饋方式包括可視化效果,如以進度條展示密碼安全程度。
    * 報錯以積極的引導方式,考慮給出解決方案。
    * 自動糾錯,記住得告知用戶。

6、表單對齊方式

目的:清晰的視覺瀏覽線、減少停留時間

6.1 頂端對齊(又稱垂直對齊)

  • 優點:標簽和表單域接近,視覺垂直下移即可。
  • 缺點:增加垂直空間,表單項較多時增加頁面滾動。


    垂直對齊

    建議:標簽字體加粗,以區分表單域內的文字

6.2 右對齊

  • 優點:減少標簽和表單域距離,減少垂直空間。
  • 缺點:左邊標簽參差不齊,給通覽標簽造成障礙。


    右對齊

6.3 左對齊

  • 優點:便于瀏覽標簽,減少垂直占用空間;幫用戶快速通覽標簽而不被表單域干擾;適用于標簽長度接近的表單。
  • 缺點:標簽和表單域相隔太遠時,用戶目標須來回在標簽和表單域跳轉。


    2.png

對齊方式小結

  • 根據眼動儀定量研究(即熱點圖),垂直對齊用戶視線集中,停留點少;右對齊視覺移動距離較少,且視線停留點較少;左對齊用戶視線移動較快,視覺停留點較多。
  • 如果主目標是減少填表時間,可采用垂直對齊;若想盡量減少垂直空間,可采用右對齊;若須用戶仔細瀏覽標簽、了解每個表單域,可采用左對齊——pc端更適合右對齊,手機端更適合左對齊。

四、參考

1、《見微知著?web用戶體驗解構》

2、表單驗證設計的用戶體驗基本原則

3、移動應用表單設計秘籍

4、表單交互設計之必選項思考

5、讓用戶更高效地完成表單填寫

6、表單交互設計之二——校驗思考

7、以用戶視角出發的表單之旅

8、泛議網絡表單可用性規范

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容