表單設計3步走——提升表單操作效率和體驗

0 評論 910 瀏覽 10 收藏 17 分鐘

表單設計在生活中無處不在,大家經常要填表、填信息的,那要如何設計一個表單呢?讓我們來從作者這里學習一下提升表單操作效率和體驗的方法吧~

對于表單設計,我們常常會陷入無限的糾結之中,比如:

  • 文字標簽是左對齊還是右對齊?
  • 確定按鈕是放左邊還是右邊?
  • 控件長度是整齊劃一還是錯落有致?
  • ……

類似的問題在表單設計過程中會經常遇到,本文將從以下三個方面和大家一起探討「如何設計一份體驗良好的表單」。

一、為什么要學習表單設計

1、表單在我們的生活中無處不在

當我們入職時,會填寫入職登記表;當辦理信用卡時,會填寫信用卡申請表;當購物下單時,會填寫訂單、地址等信息表單。無處不在的表單充斥著我們的生活。

2、表單在人機交互過程中發揮著重要的作用

表單在網頁或App中主要發揮數據采集和數據呈現的作用。對用戶而言,表單是數據錄入和提交的媒介;對產品而言,表單是獲取用戶信息的重要途徑。

二、怎么學習表單設計

2.1 認識表單類型

表單按照按任務類型可以分為以下三類:

  1. 輸入型表單:要求用戶輸入完整信息
  2. 匹配型表單:要求用戶輸入部分信息
  3. 閱讀型表單:僅要求用戶閱讀表單上信息

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2.2 表單組成要素

一個表單由標簽、錄入域、校驗、必填標識、幫助提示、操作按鈕組成。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2.2.1 標簽

在工作場景中,會有四種標簽對齊方式:左對齊、右對齊、頂對齊與文字內對齊。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

1、左對齊標簽

優點:方便用戶快速瀏覽標簽;降低占用的垂直空間。

缺點:標簽和輸入框相鄰間距過大,視覺上不夠和諧;根據馬泰奧的研究表明左對齊標簽“典型的掃視時間為500毫秒”,相較右對齊標簽用戶整體花費時間更長。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2、右對齊標簽

優點:標簽和輸入框相鄰,用戶能快速填寫;根據馬泰奧的研究表明右對齊標簽“典型的掃視時間為240毫秒”,比左對齊標簽整體花費時間少一半。

缺點:右對齊會造成左側不齊,用戶無法快速瀏覽標簽;若標簽過長,需要兩行文字展示,會導致一定的閱讀困難。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

3、頂對齊標簽

優點:瀏覽路徑更加清晰,用戶只需上下移動視線;根據馬泰奧的研究表明頂對齊標簽“典型的掃視時間為50毫秒”,用戶閱讀效率更高;提供了大量的橫向空間,能夠展示更多信息。

缺點:占用縱向空間,會拉長界面高度。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

4、文字內對齊標簽

優點:對屏幕的占用空間非常小,極大節省了頁面空間。

缺點:輸入內容時輸入框中的標簽占位符會消失,用戶得不到有效提示;表單項過多時,填寫完成后不利于用戶檢查內容的對錯。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

5、標簽對比小結

總的來說,右對齊標簽比左對齊標簽用戶閱讀的速度要快一倍;頂對齊標簽是最快的,常用于移動端;文字內標簽常用于用戶熟悉的表單填寫;如果想讓用戶謹慎填寫可以使用左對齊標簽。具體的標簽優缺點與應用場景如下圖所示:

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2.3 錄入域

錄入域是表單的核心構成部分,為了方便不同信息的錄入我們一般會采用不同的交互控件。在B端產品設計中,我們常見的錄入域主要分為兩大類:輸入型表單與選擇型表單。

1、輸入型表單主要包括單行文本框、多行文本框

1)單行文本框

單行文本框內含有占位符,是對當前項信息的補充描述,能夠幫助用戶準確清晰的填寫內容。單行文本框一般包含三種尺寸(大、默認、?。?,高度分別為40px、32px 和 24px,并且一般默認提供15~20個字符寬度。在設計過程中還需要注意單行文本框一般包含初始狀態、輸入狀態、只讀狀態、hover狀態、輸入完成狀態與禁用狀態。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2)多行文本框

多行文本框多用于長大段落文字的輸入,可以根據需要展示最大字數或者自適應文本框高度。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2、選擇型表單包括下拉選擇框、時間選擇框、單選框、多選框

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2.4 校驗

當用戶輸入信息后,必不可少的需要對用戶的信息進行校驗,保證用戶信息輸入的正確性與完整性。校驗一般可以分為:及時校驗、輸入完成后校驗、提交校驗。

1、及時校驗

在用戶輸入的過程中進行實時驗證,主要用于注冊頁面中密碼信息的驗證。

優點:提升輸入的效率和準確度。

缺點:如果輸入的內容出錯概率較高,頻繁的給用戶錯誤提示會降低用戶體驗。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2、輸入完成后校驗

一般用戶輸入完成后,鼠標失去焦點時進行校驗。校驗狀態分為:成功、錯誤和警示三種狀態,常用于輸入驗證碼、注冊等環節。

優點:輸完一項即校驗,避免一下子出現很多錯誤需要修改,緩解用戶壓力。

缺點:會延長用戶完成表單填寫的時間。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

3、提交校驗

當完成表單信息填寫后,用戶通過button進行操作,系統給出成功、失敗或者錯誤提示,常用于登錄、數據提交等場景。

優點:讓用戶感知填寫后提交的狀態。

缺點:報錯過多會增加用戶再次修改填寫的壓力。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2.5 必填項

必填項經常習慣用紅色的“*”來標記,此外還可以用文字進行說明。如果必填項多于選填項,將選填項單獨標記;如果選填項多于必填項,將必填項單獨標記;如果全是必填項,就不需要標記,避免滿屏都是小星星,增加用戶的認知負擔。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2.6 幫助提示

幫助提示有三種提示方式:占位符提示、常駐提示、圖標氣泡提示。

  • 占位符提示:一般出現在輸入框中,是對標簽的補充說明,輸入內容后就消失。
  • 常駐提示:一般出現在錄入控件旁,是對錄入信息的補充說明,不會隨著輸入而消失。
  • 圖標氣泡提示:通過鼠標的懸停展示,常用于對一些業務的專有名詞解釋或者提供說明。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2.7 操作按鈕

操作按鈕是表單信息錄入完成后,提交、繼續或取消任務的觸發器。一個場景中通常只有一個主按鈕。如果表單內容較少且在一屏以內時,按鈕應該緊跟隨內容;如果表單內容較多且多余一屏時,為了方便用戶快速找到按鈕應該將按鈕固定在頁面底部。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

三、如何提升表單的效率與體驗

1、長表單分步設計

很多時候表單項較多,業務本身又具有流程化特性(例如注冊、發布等),此時可以用分步表單設計的策略,使用步驟條、進度條進行導航顯示。

優點:流程清晰,降低用戶對表單的理解成本,減少用戶負擔。

缺點:用戶無法感知所有的填寫項,必須完成當前這一步操作才能看到下一步操作。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

2、 提供選擇,減少用戶的輸入操作

人都是有惰性的,表單錄入過程中能用選擇的就不要用輸入操作,研究表明自動填充能使表單的錄入速度提高30%。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

3、先易后難,先必填后選填

先易后難的設計邏輯容易引起用戶的填寫欲望,增加用戶的填寫信心。先必填后選填可以保證用戶任務的完成度,即使用戶中途放棄,必填的填寫項完成度也相對會更高。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

4、簡明扼要的展示標簽文字

標簽文本不宜太長,需要簡明扼要,保證用戶能夠快速理解。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

5、輸入框可以錯落有致

輸入框?度應該根據內容的?度來定,通過?度來暗示它填寫內容的?度。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

6、保證清晰的視覺流

清晰的視覺流能夠讓用戶感覺表單整潔,簡單。當標簽右對?時,建議按鈕和輸入域對?。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

7、更具操作性的按鈕

提交按鈕應讓用戶明確了解意圖和功能,盡量避免使用“提交”、“下一步”、“繼續”之類的通用型文本。嘗試使用更具有操作性的文本,例如:“創建賬戶”、“加入團隊”、“創建新賬號”等文本。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

8、錯誤提示就近反饋

當用戶輸入完成后,校驗反饋應該就近展示,并且準確告訴用戶錯誤的原因與解決措施,這樣能讓用戶準確的獲取到錯誤提示,并快速定位到相關項。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

9、數字組合要有規律

對于表單中的數字(如電話號碼、銀行卡號等一連串數字)來說,可以采用空格進行間隔。這樣能夠幫助用戶快速記憶、校驗和閱讀。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

10、時間格式要對

時間選擇框主要分為時間點和時間范圍。對于時間范圍的選擇,主要在格式上需要注意,當時間點使用的是“-”, 則采用“至”進行連接;當時間點使用的是中文,則采用“-”進行連接。

《UX入門》第七講:表單設計3步走-提升表單操作效率和體驗

四、小結

在本節中對如何提升表單設計的效率與體驗進行了介紹。對于流程較為復雜、具有流程性特征的表單可以采用分步表單的設計方式;盡量讓用戶去選擇而不是輸入,按照先易后難、先必填后選填的邏輯給用戶提供選項;通過展示簡明扼要的標簽文字、讓輸入框錯落有致的排列來保證清晰的視覺流;此外還要注意讓操作按鈕具有引導性,錯誤提示就近展示保障用戶能夠發現;最后還需要注意數字與時間的展示格式,提高信息的可讀性。

以上就是本文的全部內容,主要介紹了表單設計的類型、構成要素與如何提升表單設計效率與體驗的方法,希望能對大家今后的日常工作有所幫助~

作者:陳玲玲

來源公眾號:VMIC UED(ID:gh_32761b1686b7),vivo互聯網UED——為美好而設計。

本文由人人都是產品經理合作媒體 @VMIC UED 授權發布,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!