10個技巧設計好用高效的表單

10個技巧設計好用高效的表單

不論是網頁設計還是APP UI設計,表單都是介面中最常見、最重要的組件之一。它們的應用範疇非常廣,用戶註冊、訂閱服務、用戶反饋、問卷表單、買賣交易等等等等,從數據輸入到訊息搜索,幾乎無處不在。

不論是網頁設計還是APP UI設計,表單都是介面中最常見、最重要的組件之一。

它們的應用範疇非常廣,用戶註冊、訂閱服務、用戶反饋、問卷表單、買賣交易等等等等,從數據輸入到訊息搜索,幾乎無處不在。
對於設計師、前端和開發者而言,應當對於表單的設計盡量多上心,讓它們更加易用,細緻的設計對於用戶的體驗、交互的效率有極大的加成。

在今天的文章中,你會看到許多關於表單設計的切實可行的建議,它們涉及到可用性測試、現場測試、眼動追蹤以及用戶反饋等多個不同的環節。

1、梳理邏輯,保留必需

表單是同用戶進行溝通的語言。和任何對話一樣,它應當以符合邏輯的方式幫助雙方完成交流。所以,你需要這麼做:

  • 讓問題保持直觀的順序。你應當站在用戶的角度按照邏輯提問題,而非按照程序或者資料庫的邏輯。如果問題之間沒有邏輯存在,那麼可以按照字母順序來排布。
  • 以直覺的順序組織選項。比如選項為日期的時候,按照周一周二周三這樣的順序來排布,而非亂序。
  • 時刻反思從用戶那裡獲得的訊息是否必要,如何使用。這樣做是為了消除不必要的選項,提升完成率。

2、使用單列列表布局

待填寫的多列表單容易讓用戶漏填,並且打斷填寫體驗。用戶需要按照Z字形的軌跡來完成整個表單的填寫,這樣不僅影響整個書寫路徑,降低效率,而且具備一定的干擾性。但如果是使用單列的表單的話,這種填寫路徑是單一、直接而更為直覺高效的。

1-KwupoEtR6CY1TrDmby6cFw

3、減少待輸入欄位和工作量

減少待輸入的欄位能夠讓你的表單更精悍,減少載入時間,對於訊息量較大的表單尤其重要。

1-lPS7U0KQDjFYO8GjQfvQLQ

單純減少輸入的欄位數當然是不夠的,你還要注意用戶填寫表單的方式、內容和工作量。通過打字錄入內容是一種高交互性的輸入方式,出錯率高,時間成本高,所以,應當盡量減少用戶打字輸入的情況,多用複選框、單選按鈕、下拉菜單等選項來降低用戶犯錯的概率。

1-kQPANzxcL0ms2qaaxVtMlw

4、匹配輸入框和內容的尺寸

Baymard 研究所通過研究發現,如果一個欄位和輸入框相比太長或者太短,都會讓用戶懷疑他們輸入的內容是否正確,而這種情況在CVV(信用卡驗證值)之類的欄位輸入時,顯得尤其明顯。

1-Lk-88CuA0hctoaYA1UnpvQ

為了保持良好的可用性,你應當那個輸入框的寬度,讓它盡量和輸入內容的長度保持匹配,適當的保留空間,能讓用戶更加安心。

5、標籤置於相應輸入框的上方

用戶快速瀏覽表單是否足夠方便?如果表單很難為用戶快速掃視,那麼填寫所需的時間就更長了。所以,好看好填才是好表單設計的準則。Matteo Penzo 的文章曾經研究過表單中的表單和輸入框應該如何布局才能讓用戶更好更快的瀏覽和填寫,結論是標籤應該置於輸入框上方。

1-RH8cGgjGgWuR-Xvz0Ox9ig

如果你想用戶儘快瀏覽,讓標籤和輸入框縱向排列,靠左對齊。請注意,這裡說的是快速瀏覽。這樣的布局方式的優勢在於,它們不需要太多的橫向的空間,用戶無需左右掃視而只需要向下瀏覽就好了,並且這樣的布局更容易構成響應式的UI,兼容不同的螢幕和不同的應用場景。

6、支持靈活多樣的格式

有些欄位的填寫需要用戶進行精準的填寫,但是要求用戶輸入特別精準或者特定格式的內容可能會在易用性上存在那麼一點問題。如果你要求用戶輸入數字內容(比如電話號碼),那麼最好是靈活多樣的,支持多種不同輸入方式和顯示方法,讓人更容易查看(而不是機器),防止出錯。

1-qboV3vtzb0v7s4YPqaVdJA

比如座機電話的格式常常為(777)666 – 5544,這樣的格式更易於用戶查看、記錄和記憶。

7、不要混用佔位符和欄位標籤

設計師通常會將文本佔位符放到表單內,作為額外的提醒,作為示例告知用戶如何填寫。當用戶開始在其中輸入的時候,佔位符文本會消失。

1-z7C6dXs_GMug-FWuiQUkXA

有一些設計師會將出於降低表單長度、降低視覺混亂度的原因,將標籤直接作為佔位符置於輸入框內。對於簡單的表單設計,這種設計影響不大,當表單訊息量大,內容類型多變的時候,這種方式就不合適了。這種設計的缺陷在於:

  • 一旦用戶點擊輸入框,標籤會消失,用戶容易忘記談需要輸入的內容以及形式
  • 當用戶看到輸入框中有內容填充的時候,會誤解為這個欄位已經被填寫而無需輸入了

如果你仍然需要在你的表單中使用佔位符,不妨讓佔位符以浮動標籤的形式而存在。默認顯示佔位符,當用戶輸入的時候,向上浮動作為標籤提醒用戶。

1-ElzQy7UV9hwgK2xf7O31WQ

8、混淆可選和必填欄位

正如同我在之前說過的,盡量避免在表單中加入可選填的欄位。但是如果你非得加入,那麼至少該明確哪些欄位是可選,哪些是必填的。將選填欄位控制在1~2個之內,並明確告知用戶,這是可選的。

1-sTpmsD4WONAE9JjrI8CJww

9、別用「重置」按鈕

「重置」很容易讓用戶刪除表單上所有內容並且從頭開始,這樣的風險太大了,在現實生活中這個按鈕實際從來沒有給用戶以幫助,相反因為誤觸帶來的傷害更多一些。

1-vk0uJY0D_7l6DPqgmEpPdw

10、提供高可見度和特定的報錯訊息

理想狀況下,用戶完成表單的填寫,上傳就可以完成任務。但是實際的狀況下,錯誤不可避免。所以,當錯誤發生的時候,要以高度可用、可見的形式告知用戶,有問題發生了,所以,你所提供的報錯訊息應當符合下面的規則:

當用戶輸入欄位之後,應該實時告知用戶他們填寫的訊息是對的還是錯的,而不是等他們完成全部訊息填寫之後再告訴他們出錯了。

1-hwtem6mCBFr-ebuwD7mjGw

報錯訊息應當一目瞭然,從用色、圖標到文本都應當起到高亮的效果,而且報錯訊息應當靠近輸入框,而非表單的底部或者頂部或者按鍵旁邊。

1-XVZetm1skdL5b5csfWCVkg

如果輸入格式特定,那麼應當事先聲明。

1-KwupoEtR6CY1TrDmby6cFw

出現錯誤之後之後,不要將已經填寫的表單清空。

結語

填寫表單的時候,用戶的猶豫是不可避免的,我們應當盡量讓這個過程變的便捷而輕鬆。我們應當讓表單設計成為優勢,而非弱點。一個高度有針對性的表單設計,貼心細緻的細節和體驗,堅持不懈的改良和調整,高效快速的提交,順暢的流程,這些才是優秀表單應有的樣子。


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛


 

給你最好的網頁設計Gogoshark

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。