高效好用的表單設計應該遵循什么原則?

6 評論 12246 瀏覽 81 收藏 9 分鐘

表單設計的首要目標是滿足我們和用戶想要的東西,并保證用戶可以輕松快速的完成填寫。

這篇文章從選取合適的表單問題、理清問題邏輯以及表單設計遵循的規則三方面和大家探討一下表單設計的基本準則。

選取合適的問題

只需要考慮兩個問題:

  1. 我們通過表單想得到用戶哪些信息?
  2. 用戶當前操作需要哪些信息才能完成?

根據我們得到的問題,參考卡羅琳賈勒特提出的“保留,刪減,延遲,解釋”四大策略形成更好的問題。

  • 保留:你問的就是用戶想要的,那么留下這些問題
  • 刪減:并不需要通過用戶填寫得到答案的,我們可以通過用戶其他信息推斷出來,或者不必要的問題刪掉,減少我們的工作量,減少用戶填表的時間
  • 延遲:并不需要馬上得到答案的,延遲到合適的時間在合適的位置填寫
  • 解釋:涉及到敏感信息或者用戶個人隱私的,但我們必須要的信息,向用戶解釋為什么需要,對用戶有什么好處

理清問題之間的邏輯:

我們通過分析得到相對合理的問題后,就要考慮問題之間的邏輯性,保證填寫流暢

根據情境和問題數量將問題分組,思考放置這些問題合適的時間和位置。

已在蘋果官網購買產品為例,若用戶沒有賬號,依然可以購買產品,然后在付款結束時創建賬號,不會因為用戶沒有賬號而影響購買行為。

表單設計遵循的規則

合適的標簽對齊方式

根據標簽所處的位置可以分為左對齊標簽,頂對齊標簽、右對齊標簽和輸入框內標簽。具體采用那種方式取決于我們希望用戶完成表單的速度,屏幕顯示的限制等因素。

頂對齊標簽

頂對齊標簽有清晰的完成路徑,用戶可以順著標簽可以很快的完成表單,在web端還可以增加橫向空間,以其它方式來組合相關輸入框;缺點是會占用額外的垂直空間,當內容較多時,慎重使用。需要注意的是頂對齊標簽應當采用合適的垂直間距,一般使用輸入框50%-75%的高度作為相鄰輸入框的間距。

右對齊標簽

右對齊標簽和相關輸入框相鄰,填寫時間相對較快,占用的垂直空間減少;缺點是左側不齊,降低了可讀性。

左對齊標簽

左對齊標簽同樣減少了垂直空間的占用,由于標簽是左對齊的,符合我們的閱讀習慣,所以用戶可以快速了解表單需要回答的問題;缺點是右側不齊,導致標簽和相關輸入框相鄰間距增大,增加了用戶完成表單需要的時間。

如果希望用戶認真填寫問題,采用左對齊標簽是個不錯的選擇。

輸入框內標簽

輸入框內標簽極大的節省了頁面空間,使界面看起來更加簡潔美觀,但是一旦用戶點擊切換到輸入狀態以后,用戶就會看不到這些標簽了。如果同一頁面中表單項目很多(超過5個),用戶填寫過程中可能會忘記之前的填寫的項目是什么。為了解決這個問題,我們可以在行內標簽前加一個圖標來標識這個列表項,圖標所占據的空間不會太大,而且會增加頁面的美觀性。

如果表單較長,輸入框內標簽并不適合,填完表格后標簽不見了,用戶檢查填寫好的也非常困難,所以輸入框內標簽更適合用于只有一個問題(比如搜索框)或兩到三個輸入框的表單或者用戶非常熟悉的表單(比如登錄)

明確輸入框類型

常用的輸入框類型包括單選框、復選框、下拉列表、文本框。

  • 文本框:可以加入文本框暗示,幫助用戶了解如何回答問題,無法防止輸入出錯,效率低。
  • 單選框、復選框:答案明顯,有效防止輸入出錯,如果選項較多,會影響界面美觀,可以考慮使用下拉框。
  • 下拉框:同單選框一樣,可以防止輸入出錯,而且視覺效果好,缺點是犧牲了可用性和明確性,答案不明顯,用戶需要點擊才能看到答案然后進行選擇。

突出主要動作

通過視覺設計突出主要動作,表明重要性,減少次要動作的視覺干擾。

用戶未完成前可禁用主動作,主動作完成后及時給予用戶反饋,并告知用戶下一步操作。

未完成前禁用主動作

完成后給予反饋

提供幫助的時機

幫助信息有直接展現形式和觸發展現形式。

直接展現形式是指用戶不需要進行任何操作,提示信息自動出現在相關的區域內,目前最常見的就是出現在輸入框的內部或右側。例如我們常用的登錄頁面,在為輸入用戶名時會提示你請輸入郵箱/用戶名/已驗證手機的提示信息,幫助用戶盡快完成操作。

觸發展現形式是指用戶觸發操作后,展現出相關提示內容,提示用戶該如何進行下一步操作、判斷用戶當前的操作是否正確。需要注意的是觸發展現應該在用戶表明已填好并進入下一個輸入框時再進行驗證,如果錯誤應告知用戶正確的做法或者直接給出建議的答案。

 

本文由 @struggle 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自PEXELS,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. Mark

    回復
  2. mak

    來自重慶 回復
  3. 文中列舉了右對齊標簽和左對齊標簽的例子,這是PC端和手機端的差異化設計,分析了優缺點但也沒有更好的解決方法,等于沒說

    來自北京 回復
    1. 感謝建議,例子舉得不恰當可能誤導了你,右對齊標簽在移動端沒找到例子就拿PC端的上了 ?? 實際工作中具體采用哪種標簽跟你設計表單的目的有關,如果希望用戶快速完成表單,可以考慮右對齊標簽;如果問題比較復雜或希望用戶認真回答,那么采用左對齊標簽效果更好

      來自北京 回復
  4. mark

    回復