實戰案例 | 談談產品改版之表單優化

收藏待读

實戰案例 | 談談產品改版之表單優化

本次產品改版涉及到了表單優化,好的表單設計可以提升用戶在錄入信息過程中的體驗。那麼如何才能設計出更好更實用的表單呢?

實戰案例 | 談談產品改版之表單優化

表單結構:

實戰案例 | 談談產品改版之表單優化

表單定義

表單在產品中主要負責數據採集功能,表單是連接系統和用戶的一個重要的橋樑。

表單的構成

常見表單是由多個列表項構成的。而每一個列表項都有最基本的標題、標籤、佔位符、錯誤信息提示、動作按鈕組成。

實戰案例 | 談談產品改版之表單優化

(1)標題

這個元素幫助用戶引導完成表單填寫的整個過程,尤其當你收集的數據不止有一個標題的時候,它特別有用。例如:姓名、職業、聯繫方式。

(2)標籤

標籤告訴用戶在任何特定的輸入區域期望他們填寫什麼內容。

(3)輸入框

用來收集用戶操作的信息,每個輸入域字段包含一類型信息。

(4)反饋信息提示

反饋信息提示給予用戶及時的錯誤反饋,提醒用戶。

(5)操作按鈕

是指填寫完表單各項內容後,所要進行的操作動作來結束當前操作流程或在流程之中或之後開啟新的功能操作。

(6)步驟條

對於內容過多的表單輸入組件,又有着明確的操作先後關係,可以選用分步驟,每屏僅展示該步驟下的表單輸入組件,同時校驗反饋也可分步進行。

體驗

1. 減少操作成本

金融產品中用戶會有需要添加銀行卡場景,銀行卡考號位數一般都在16~19位,用戶又不會去記銀行卡卡號,由於卡號過長,用戶會比較容易輸錯。通過銀行卡掃卡功能,自動添加銀行卡,減少了用戶的操作成本。

實戰案例 | 談談產品改版之表單優化

2. 減少思考成本

用戶申購中,在收銀台頁面當用戶輸入的金額大於剩餘可投金額時,投資金額自動匹配到剩餘最大可投金額並toast提示用戶「已超出剩餘可投金額」。

實戰案例 | 談談產品改版之表單優化

3. 減少操作誤差

實名驗證場景中用戶需要輸入身份證號碼,由於身份證號碼比較長,通過輸入框格式化在適當的位數後面加入空格,方便用戶快速校驗。

實戰案例 | 談談產品改版之表單優化

交互

1. 清晰的瀏覽線

改版前用戶其實需要瀏覽的更多的內容。標籤和需要輸入的空白字段是完全分開。當用戶的視覺在處理這些信息的時候,會自然地覺得信息量比較密集,密集的信息會使用戶感到焦慮。

改版後合理地組織標籤、操作按鈕和提示文字的排版,引導用戶的視線在同一方向流動,降低用戶的視覺負擔。

Before                                                           After

實戰案例 | 談談產品改版之表單優化

改版前單頁面的內容可能非常多,需要用戶進行大量的填寫,一次性把所有需要填寫的內容展示增加用戶認知負荷,用戶會覺得他們需要在這個表單上花費大量的時間,有可能就放棄填寫了。

改版後將身份信息驗證頁面中的身份驗證和手機號驗證分開來。這可以減少用戶的認知負荷,如果屏幕上元素減少,只有唯一的選擇,用戶信息阻礙就降到最低。因此,用戶會專註於完成當前任務。

在處理錯誤的時候也就更容易,能降低用戶放棄的可能性。

Before:

實戰案例 | 談談產品改版之表單優化

After:

實戰案例 | 談談產品改版之表單優化

2. 即時校驗

改版前收銀台場景下用戶輸入投資金額後,需要用戶自行提交才能校驗當前信息。反饋錯誤以彈窗的形式提現用戶。這樣的缺點校驗信息反饋不夠及時,提示方式也過於粗暴。

改版後當用戶輸入信息時給予實時校驗,減少了用戶的操作成本。用戶可以通過及時信息反饋去調整,讓輸入過程更佳高效。

Before                                                           After

實戰案例 | 談談產品改版之表單優化

3. 提供幫助

在標籤和輸入框旁邊增加幫助文字,告訴用戶應該如何回答問題。

(1)自動即時幫助

顯示在對應輸入框附近,表示對應輸入框的提示。適用於幫助文字較少的局部說明。

(2)用戶激活的即時幫助

通常採用圖標、按鈕、圖片、文本鏈接提示人們有幫助可提供,例如問號圖標。適用於幫助文字較少的全局說明。

(3)用戶激活的區域幫助

始終顯示在某個特定區域而不是輸入框附近。適用於幫助文字非常多的全局說明。

3. 對齊方式

左對齊、右對齊、頂部對齊、行內對齊。

Matteo Penzo 於2006年發佈的關於標籤放置的文章表明,如果標籤位於字段之上,表格的完成速度會更快。 如果您希望用戶儘快掃描表單,則頂部對齊的標籤是很好的。

實戰案例 | 談談產品改版之表單優化

左對齊,右對齊和頂部對齊的標籤(Image: UX Matters)

(1)左對齊標籤

採用左對齊標籤方式的表單是三者(左對齊、右對齊、頂對齊)之中所需瀏覽時間最長的。

  • 優點: 文字開頭按閱讀視線對齊,方便閱讀,節約垂直空間。
  • 缺點: 填寫速度慢,標籤長度和輸入框彈性小。

實戰案例 | 談談產品改版之表單優化

(2)右對齊標籤

當既要減少垂直空間,又要加快填寫速度的場景,使用右對齊。採用右對齊方式標籤的表單瀏覽時間,比頂部對齊標籤的表單的時間長,但比左對齊方式所需的瀏覽時間短。頁面高度有限的話有限公司推薦這種對齊方式。

  • 優點: 節約垂直空間。
  • 缺點: 降低可讀性,標籤長度和輸入框彈性小。

(3)頂級標籤

能讓用戶快速填寫表單,完成任務的場景使用頂部對齊。

  • 優點: 有最快的瀏覽和處理速度;標籤長度彈性大。
  • 缺點: 非常占垂直空間。

實戰案例 | 談談產品改版之表單優化

(4)懸浮標籤

浮動標籤節省了界面空間,使之看起來清晰簡潔,當用戶點擊輸入框並輸入內容之後,標籤位移到輸入框上方並通過色彩變化提示當前輸入狀態,這種表單交互做的更細膩,提升用戶體驗。

實戰案例 | 談談產品改版之表單優化

(5)方便用戶回顯檢查

表單填寫完成之後,用戶通常是會快速地檢查一遍其中內容的正確性,再提交的。用戶必須上下掃視輸入內容和對應標籤來匹配,確保填寫的字段是正確的。這個時候,輸入框的邊界會阻擋視線,即使藉助相關元素靠近原則來設計的空間關係,在這個過程中也不會顯得那麼清晰而明顯,這一切都會讓最後的檢查工作變得不那麼快速。

Before                                                           After

實戰案例 | 談談產品改版之表單優化

UI部分

1. 營造氛圍

在表單中植入品牌元素,如品牌顏色,會使整體界面設計風格協調,使得品牌基因深入人心。

2. 緩解頁面壓力

對於較為複雜的表單,合理有層次的組織信息,按照不同信息的類別、屬性和相關性進行區塊的劃分,利用線條、空間間隔、顏色進行視覺表現,給用戶喘息的機會。

3. 視覺層級

(1)必填項和選填項

必填項為空,則表單無法進行,因此必填項要比選填項的視覺效果強。

(2)主按鈕和次按鈕

主動作的視覺效果要比次動作的視覺效果明顯。

(3)錯誤信息和成功信息

錯誤信息的強調效果要比成功信息強,從而吸引用戶注意快速解決問題。

4. 輸入框長度

輸入框的長度可以暗示用戶正確填寫結果的長度。比如證件號的內容較多,所以輸入框要很長。驗證碼一般是四位數字,所以輸入框要短。

5. 字體

通過字號來區分層次重點,強調文字的字號要比輔助的文字要大一點,通過文字大小讓用戶分清重點。

總結

表單其實是連接系統和用戶的一個重要的橋樑。用戶在填寫表單的時候,總會因為各種原因而產生遲疑。

所以,作為我們要盡量簡化這個過程,關注每一點細微的變化,無論是標籤的顯示形式還是色彩,儘力增強它的可用性。表單體驗提升後會讓你的產品更加優秀。

本文由 @阿方 原創發佈於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

原文 : 人人都是產品經理

相關閱讀

免责声明:本文内容来源于人人都是產品經理,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。