聊聊打造優質WEB表單的9個方法

來源:互聯網
上載者:User

   這篇文章算是筆者交的一份讀書筆記,與 CRM 系統打交道了這麼久,表單天天見。如果表單有感情的話,我猜它應該都不想再看見我了。也是有緣,老闆推薦了一本表單設計的書——《Web Form Design – Filling the blanks》by Luke Wroblewski,得此書如獲至寶。該書對錶單描述詳盡,案例充分,解決了許多筆者多年未解決的問題。接下來進入正題,我們來聊一聊如何打造優質 Web 表單。黑喂狗!

  1. 標籤推薦使用靠右對齊方式

  (圖示1:淘寶網註冊頁面)

  馬泰奧·彭佐在2006年7月的眼動研究發現,標籤如果採用頂對齊,使用者的視線從標籤移動到輸入框只需要50毫秒,靠右對齊方式需要240毫秒,靠左對齊方式需要500毫秒。如果從高效上講,應該是優先考慮標籤頂部對齊。

  我們再看淘寶註冊頁的表單採用了靠右對齊方式,是考慮到頂部對齊會佔用過多的垂直空間,一旦表單項過多,對錶單頁的操作也會造成不便,所以採用了靠右對齊方式。

  所以筆者在此建議,如果表單項不多,有限考慮標籤頂部對齊;而同時要兼顧高效和頁面的垂直空間,則選擇靠右對齊方式吧。那是不是靠左對齊標籤無用呢?其實並不是,研究也有表明,在涉及到專業性過強,使用者不熟悉的表單,需要更長時間理解的標籤項時,則可以考慮靠左對齊方式。

  2. 必填和選填

  (圖示2:必填VS選填)

  本書裡提出一個觀點,如果必要欄位比較多,把選填項標記出來則足夠;如果選填欄位比較多,則標記必要欄位。

  這的確能最高效率區分出來必要欄位和選填欄位,然而現在大部分互連網使用者對於「*」就代表必填這都已領會,所以筆者還是推薦在表單中儘可能用「*」去區分必填和選填,畢竟這屬於最通用的方案。不過登入表單可以不遵循這個規則,大家都知道登入表單中的標籤項都為必填,同時也可以根據標籤項是否輸入的狀態來啟用「登入」按鈕。

  3. 即時反饋

  早期的表單裡面對標籤項的解說文字都直接放置在標籤旁邊,但很多使用者不會去看這些文字,或者直接忽略掉。其實可以結合使用者動作表單行為來動態顯示協助資訊,例如使用者聚焦在哪一個標籤項,則顯示哪一項對應的解釋文案。騰訊微博註冊頁有一個細節做的比較好:

  (圖示3:騰訊微博註冊頁面)

  當使用者輸入郵箱已經被註冊過,則會即時給出相應的提示,節省使用者輸入額外註冊資訊的成本,而不是讓使用者填寫完再點擊「提交」按鈕交給伺服器去做一次判斷。

  當然除了這條,還有密碼強度和密碼要求的即時校正,旨在節省使用者輸入時的考慮時間,讓使用者更高效率地填寫表單。

  4. 錯誤訊息

  表單中的錯誤提示資訊,或者一些不合規的提示資訊展示也是表單設計中影響比較大的元素。

  (圖示4:Error Message)

  上圖中的表單項就比較多,可能在小尺寸螢幕中需要滾動頁面才能看到完整表單資訊,而因為採用了點擊「提交」按鈕之後交給伺服器校正資料,所以在多個表單項出現錯誤的情況下,則需要統一在表單頭部提示出來錯誤資訊,並且最好要有錨點,點擊之後能夠直接到錯誤的位置,節省使用者尋找的時間。

  然而如之前所說,如果能夠在前台即時校正的資訊,就盡量交給前台校正,除了可以節省使用者的表單操作時間,可以保證體驗的一致。

  5. 智能預設

  (圖示5:淘寶/天貓購物車頁面,圖中敏感性資料已經抹去)

  表單設計中可以通過智能預設的方式協助使用者填寫一些需要重複填寫的表單,這樣可以節省大量的時間。例如圖中的淘寶/天貓購物車頁面,使用者在每次購買之後都需要經過收貨地址填寫環節,如果說將填寫過的地址協助使用者儲存起來並設定成預設,在後來的每次購買過程,可以直接進入到下一個環節,省去了這一步的時間。

  6. 設定 Tab 鍵跳轉

  筆者認為 Tab 鍵跳轉也是一個能夠提高使用者動作表單效率的一個方式,也是設計師在表單設計中必須要考慮到的一個細節,Tab 鍵的跳轉和表單項視覺先後順序保持一致。

  這個細節很小,但是影響面卻很大。很多網站並沒有在這個細節上做的很好。舉個反面例子:

  (圖示6:支付寶收銀台介面,圖中敏感性資料已經抹去)

  上圖是支付寶收銀台的頁面,分別來自於兩個不同的電商網站。按照表單設計邏輯,在使用者輸入賬戶名按 Tab 鍵後,游標會自動聚焦到支付密碼輸入框中,然而左右兩個介面卻存在完全不一樣的邏輯。左邊頁面在輸入賬戶名之後按 Tab 鍵會直接跳到「忘記賬戶名?」這個連結上,而右邊則一切正常。

  7. 同意&提交

  在很多註冊表單的最後一項表單項是讓使用者勾選同意***協議,很多情況下完全是廢話。所以這一步與提交按鈕可以合并在一起,省去一步操作。

  (圖示7:網易郵箱的註冊頁面)

  8. 進行中的動作

  表單填寫完成,最後一步就是提交了,這一步至關重要。不僅僅是說在提交之後要將後面的結果反饋給使用者(上面說到的即時反饋),如果網路條件比較慢,或者資訊量比較大,導致等待時間過長(很多情況下會這樣),那麼我們應該告訴使用者這一切,讓使用者並不會覺得等待時間很長。同時也減少了使用者重複點擊「提交」按鈕的情況。

  (圖示8:提交按鈕小動畫)

  9. 對話形式表單

  (圖示9:對話式表單)

  這算是一些附加資訊。一個個表單項其實可以轉化成一條條問題,讓使用者覺得像是在和互連網的另一邊聊天,從而以最輕鬆愉悅的心情來進行表單填寫。

  總結

  互連網在進化,表單也是如此,進化的同時,帶給使用者的是更高效的輸入方式,更加輕鬆愉悅的使用體驗。而設計師在設計過程中,應當將效率放在第一位,然後才是在效率至上的基礎上去完善互動視覺的體驗細節。

  歡迎關注阿里37.2度體驗的微信公眾號:

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。