07.25 掌握表單設計的4個技巧,給用戶驚喜的體驗

在To B的應用程序中,表單是最常見的元素之一,因此要想提升用戶體驗,應該高度重視用戶體驗設計技巧,精心的表單設計可以對用戶體驗和交互效率提升產生很大的積極的影響。

掌握表单设计的4个技巧,给用户惊喜的体验

我們在做表單設計的時候,一方面希望我們的表單可以對用戶有引導,可以針對用戶的操作作出適當的回應,防止他們放棄表單填寫;另一方面我們不希望一開始加載大量表單,一下子就把用戶嚇到,下面是我在項目中做表單設計的一些考慮。

針對如何提升表單設計的引導性主要會考慮以下幾個問題:

一、如何排列體驗是最優的?

用戶在填寫表單的時候經常會猶豫不決,所以要儘可能簡化表單填寫過程,表單設計要遵循內在系統邏輯,符合用戶的使用習慣,減少視覺負荷,創建良好的信息層次。

1. 國外的設計研究員mattero penzo做了眼動實驗,如果將label放置在input框上面,眼睛掃描表單速度會更快。

掌握表单设计的4个技巧,给用户惊喜的体验

2. 按照邏輯順序聚合排列表單,便於用戶理解。

掌握表单设计的4个技巧,给用户惊喜的体验

圖片2 UX Planet的註冊頁面

圖片2 UX Planet的註冊頁面把birthday表單填寫聚合在一起,方便用戶理解。

3. 將input框與將要輸入的長度匹配,尤其是可能會輸入很多信息的輸入框大小一定要留夠,讓用戶對將要輸入的內容有所預期。

掌握表单设计的4个技巧,给用户惊喜的体验

圖片3 Salesforce Object界面

圖片3 Salesforce Object 表單裡面description input框比較大,提醒用戶可能會輸入比較多的內容。

二、額外的提示怎麼做到恰到好處?

為什麼需要提示?

Sting TV的數字負責人Yakir Reznik做了A/B測試,在A版本只給用戶提供姓名和電話號碼錶單讓用戶填寫,在B版本中除了給用戶提供姓名和電話號碼錶單,還添加了一個解釋,即如果用戶需要找回密碼,則需要此信息,雖然提示比較長,甚至在移動設備上面還需要額外滾動,但是轉換率卻提高了11%。所以好的提示對用戶的引導性和防止用戶放棄有很重要的作用。

在做項目的過程中一般會遇到以下幾種提示,每種提示都各有優缺點,大家可以根據自己的實際情況使用提示。

1. 靜態提示,在界面上固定顯示,不會消失。

  • 優點:始終在界面呈現提示,用戶不會錯過它,對指導用戶操作有重要作用。
  • 缺點:佔地方,會讓界面不整潔。
  • 建議:如果是特別重要的信息或者是不容易理解的信息,建議採用靜態提示。
掌握表单设计的4个技巧,给用户惊喜的体验

圖片4 Salesforce Object 界面

圖片4 Salesforce表單填寫有大量靜態提示,幫助用戶理解自己需要做的任務。

2. 按需顯示,當鼠標點擊或者懸停在圖標“?”、“!”、“i”或者鏈接上出現提示。

  • 優點:不佔用很大區域,還可以指導用戶。
  • 缺點:對於不熟悉的用戶會錯過重要信息。
  • 建議:如果是對用戶填寫前作指導,且表單信息容易理解,避免信息過載最好隱藏提示,如果是對用戶操作作出反饋,建議預留提示消息空間,且要立即提示最好。
掌握表单设计的4个技巧,给用户惊喜的体验

圖片5 WIX Login 界面

圖片5 針對用戶操作作出反饋,提示用戶輸入錯誤。

3. 自動出現,當label或者input框獲得焦點時,提示自動出現,隨著焦點變化而改變。

  • 優點:在需要的時候出現不會有負擔,也不會被忽略。
  • 缺點:信息填寫完即使不再需要它也會出現。
掌握表单设计的4个技巧,给用户惊喜的体验

圖片6 Zeplin Login界面

圖片6 Username input框獲得焦點時,提示自動出現,當焦點在password時提示在password右側出現,username右側的提示消失。

4. 自動消失(一般指佔位符),輸入框提示用佔位符,一旦用戶焦點在該框,佔位符消失。

  • 優點:不佔用很大區域,還可以指導用戶。
  • 缺點:顯示提示信息空間有限;當用戶輸入一半信息想要看提示的時候是無法顯示提示的。
  • 建議:如果提示信息不多建議用佔位符。
掌握表单设计的4个技巧,给用户惊喜的体验

圖片7 Invison 註冊界面

三、如何減少用戶輸入次數?

好的表單設計可以減少用戶輸入次數,提升工作效率,目前主要從下面幾個方面去考慮。

  • 打字交互成本高,儘量用單選或者多選代替,讓用戶做選擇題,減少用戶輸入。
  • 區分可選和必選字段,必選可以加 * 號,讓用戶可以集中於必填字段。
掌握表单设计的4个技巧,给用户惊喜的体验

圖片8

圖片8 用 * 號標識出必填字段,但是如果大多數是必填且有大量表單,建議只標識出非必填,如下圖9。

掌握表单设计的4个技巧,给用户惊喜的体验

圖片9

四、如何鼓勵用戶繼續填寫信息?

給用戶持續的激勵,會刺激多巴胺的產生,多巴胺是一種化學獎賞的神經遞質,會產生神經系統的興奮性,所以為讓用戶可以愉快的完成表單,不中途放棄,要有一些激勵設計。

1. 完成過程中提醒用戶進程,鼓勵用戶繼續填寫表單。

掌握表单设计的4个技巧,给用户惊喜的体验

圖片10

2. 完成任務之後給用戶一些稱號激勵,例如給用戶設置青銅、白銀、黃金、鉑金等等級,給用戶升級刺激。

掌握表单设计的4个技巧,给用户惊喜的体验

圖片11 WIX 界面

後面我會講當表單數量很多時,如何做設計?

題圖來自 Pexels ,基於 CC0 協議


分享到:


相關文章: