Web Form Design

Web Form Design 的筆記。這本書其實很貼心在每個章節後面都把 Best Practices 都整理好了。UCD China 也有一篇讀後重點整理,亦可參考。

BTW,這本書有簡體中文版,很便宜,天龍有

這樣子分享心得筆記會不會有著作權問題?事實上,你可以很放心。我都是用自己的文字寫,而「概念」這種東西,你知道的,法律上從來不叫做著作。另外這邊的圖片,都是原作者貼在 Flickr 上,以創用 CC 姓名標示條款授權的。Open commercial rocks!

(不過我完全認同讀書會的導讀簡報,只讓讀書會的成員取用。)

基礎概念

  • 第一個目標就是「減少麻煩」(因為沒有人喜歡填表單,所以都是不得不填的行為)
  • 規劃填表路徑,想一下使用者填的順序、視覺會怎麼掃描等等
  • 考量表單的前後文、讓使用者知道自己正在面對什麼欄位、區段,不要只仰賴「最前面」的說明文
  • 表單內容溝通訊息保持一致

表單組織

  • 不問不必要的問題
  • 將問題分成幾群
    • 分區時可以用「背景色彩」來簡單劃分,但不要弄得像斑馬線、反而不易閱讀
    • 分區或分頁要自然,就像是對話一樣「先聊聊你的個人資訊吧!」「那你想買哪些東西呢?」這類。(不是真的要打那些字,這只是比喻而已)
    • 分頁或分區的原則:
      • 問題可以拆成簡短的幾群,那一頁就可以了
      • 每群的問題都不少,那或許就幾頁
      • 只能分為一群,但問題不少?其實還是一頁就好
  • Label 盡可能用自然語言表達,太艱深、容易誤解的詞不要用(會引來錯誤的回應)
  • 英文表單的話,Label 首字大寫比較有利視線掃描

完成表單的路徑

  • 好標題很重要,協助使用者快速進入情境,建立預期心理
    • 建立預期心理:如果需要花一段時間才能填完表單,可以多加一頁前言,好好說明重要的事。
  • 對於重要的表單(例如要花錢的),移除所有頁面上會出現的連結、多媒體等,避免使用者分心。填表單時的唯一任務就是填完表單。
  • 對於已知步驟數目的分頁大表單,加上進度標示會比較好
    • 但進度標示容易被直接認知為「頁數」,所以如果有哪個步驟本身也要分幾頁才能完成,就反而要避免使用。
  • 讓表單可以直線掃描,會增進填表效率及回應比例
  • Label 跟表單欄位的間距,大概是 50%~70% 的欄位高。
  • 留意表單欄位的 tab-index,有超過一半的人會使用 tab 來填表單。(這個可以公司內不同部門調查一下,其實不見得是很 geek 才會用。)
flickr:2367262288
圖一:進度標示
flickr:2367261684
圖二:直線掃描

Label 排列方式

UCD China 那篇文章的表格整理得很好,我用網頁表格繪製如下:

好吧我其實只是想確認一下這樣的表格沒有必要用圖片來表意 XD 我好壞。圖片確實對不熟悉 CSS 的人來說會快很多,不過後面要進一步利用就麻煩了。

放上面
flickr:2367260984


放左邊、靠左對齊
flickr:2366428457


放左邊、靠右對齊
flickr:2366425847


放進輸入欄中,成為 placeholder
flickr:2367264348

  • 應該沒有必要混合 label 的排列方式
  • 如前一章說的, label 與輸入欄間距約50%-70% 輸入欄高,放上面或左右對齊都一樣。
  • 把 label 放在輸入欄上方似乎看起來是最好的,不過當然還是看情況;又,這樣的作法會讓整個表單版面看起來比較長。
  • 如果 label 描述可能比較長,靠左或靠右的對齊方式可能會很難搞(因為他是「分欄」的概念,文字一長欄寬就很難抓)
  • 靠左對齊的作法,使用者的視線必須跳來跳去、而且容易跳錯,所以辨識上會最慢。雖然書中沒有提,不過可能填錯的機率也會變高。
  • placeholder 有幾個特殊注意事項:
    • 因為在輸入文字之後 context 就消失不可得了,所以要謹慎使用,不然使用者無法確認自己填的是什麼。
    • placeholder 與「已經填寫的資料」在外觀上必須可以區隔。使用者較容易發現自己還沒填的欄位 — 特別是下拉選單的狀況。下圖預設選項前後都有橫線就是為了區別。
flickr:2367264474

Fields

各種表單輸入欄的型態,要理解熟悉

  • text 文字輸入欄,有單行、多行之分。
    • 「密碼」就是會遮起來的文字輸入欄,一般來說不允許 IME 輸入
  • Radio button 是單選鈕,應有預設值、Label 應也可點選
  • Checkbox 是多選鈕,Label 應也可點選
  • dropdown 是清單,可以當作「項目太多的 Radio button」使用,但太長也不好,會很難挑
    • 我恨翻譯過的 country list,你不知道在一堆中文裡找「台灣」多困難嗎?
  • list 很少用,可多選又可單選反而造成使用上的問題

WebForm2 還有更多東西,請參考我翻譯的 HTML5 表單

  • 設計前要充分了解填表 context,誰、多久一次、會為了什麼而填表
  • 易學與效率常不可兼得:
    • 久久填一次的表格,需易學
    • 經常填寫的表格,需易填(效率)
  • 這章的 Case Study 不錯,很有感覺
  • 「Dropdown 容易被忽視、又不易使用」,這句話有證據嗎?
  • 一個需求,可能以各種不同方式來滿足。每種都列出來評估優劣
  • 顯示輸入欄位的方式(文字大小、色彩、欄位寬度等)會影響使用者填表的內容
    • 「我填了這麼短的答案,但他的欄位那麼寬,是我填錯了嗎?」
  • 表單的格式也有很多種,試想「電話號碼」可以分區碼與主號碼、「信用卡號碼」可以一欄填完也可以分四欄。這都會影響填寫,要評估。

必填欄位的表示法是個麻煩

  • 原本就要盡可能避免「選填」的欄位出現,就是說表單應僅保留必填欄位。但,實務上這很難完美,例如美國地址常見的「第二行」,就一定是選填。
  • 要怎麼表達「必填欄位」?
    • 說明?
    • 星號?
    • 粗體?
  • 無論怎麼表達,都要記得加上附註「* 為必填欄位」,有的人的習慣就是跟你不同
  • 如果只有少數欄位是選填,那只標選填為 (optional) 好不好?可以看情況思考

Action 動作按鈕

flickr:2367266922
  • 盡量不要有 Secondary Action
    • 但萬一一定要有,則一定要跟主要動作鈕區隔開
  • 跨多頁的表單,則主動作算「下一步」,副動作為「上一步」
  • 將主動作與表單輸入欄對齊,可以加速填寫
  • 如果要防止二次送出,可以在點選「送出」之後原地改為資料傳輸狀態進度(動畫)等
  • 不要妄想使用者會閱讀任何一行字來做出相應動作 XD
  • 其實「同意並註冊」按鈕會比勾選「同意」再點「註冊」鈕更好

常見排列方法比較

flickr:2366430953
http://www.lukew.com/resources/articles/PSactions.asp 樣本數與實驗方法不明,希望他是夠科學的研究
  • 除了 E 之外正確率都是 100%
  • 以實驗數據來說,B 的表現結果最好,眼睛移動正確有效率,填表速度最快 (平均快 2.1 秒)
  • A 跟 C 的「次要選項淡化設計」受使用者主動好評(但其實好像沒有對效率有太大影響?)
    • 唯,這樣填完表單後的滿意度較高,也是體驗的一部分

Help 支援文字

  • 不要仰賴說明文字,盡可能減少說明
  • 說明文字可以用來解說比較少人熟悉的資料欄,這個資料是什麼、為什麼要這個資料、其他顧慮等等
    • 敏感問題,可以考慮加上說明文字,協助使用者確認隱私保護狀況等等
  • 作為 placeholder 的解說文字,只拿來做「建議輸入格式」用,不要當說明(前面提過了,因為這個「說明」在輸入文字後就消失了)
  • 如果這個「說明」是有必要呈現、但填表單的人會使用這個表單好幾次(也就是,以後他可能就不需要說明了),可以考慮讓使用者做某個動作後才開啟說明文字。
    • 觸發使用說明的工具(圖示、按鈕那類)應該放在 label 旁邊,而不是輸入欄位後面
  • 如果說明文字太多(不該這樣!),或者有圖片、圖表等,則可考慮讓說明獨立一區。但這會造成使用者必須來回捲動頁面,不可不慎
Creative Commons License
本站文字除特別聲明者外,係採創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,利用前請見說明