web form design 讀書會 ch3-4
TRANSCRIPT
Ch3完成之路
• 表單的命名
– 標題很重要，點明希望user採取的行動
– 告訴人們正在填什麼表單，填完可以達到什麼目的
從開頭就讓user進入預期的情境。
• 較龐大的表單需要起始頁
– 提供一個情境讓user全盤了解：前置準備、問些什麼、要花多久、後續動作
Ch3完成之路
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Ch3完成之路
• 自始至終提供清晰的瀏覽線
– 容易瀏覽的路徑
– 合適的空間，保持每對標籤/輸入框之間的平衡
– 一般而言，最好以輸入框高度的50%~75%為問題之間的間隔
(ps.標籤與輸入框、並排輸入框之間的最適距離，同樣為輸入框高度的50%~75%)
First Name Last Name
Address
First Name
Ch3完成之路
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
PayPal付款表單
Ch3完成之路
• 減少分散注意力
– 即使全站風格一致，表單頁也必須有不同的配置
– 畫面上與表單無關、會干擾填表的元素最好剔除
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Amazon
首頁與表單頁
博客來 首頁與表單頁
Ch3完成之路
• 過程指示
– 如果整份表單分成多頁，必須顯示『現在進行到哪裡了？』
1. 將表單問題分成有意義的群組
2. 取個清楚的標題
3. 標明範圍：總共有哪些步驟/頁數？標明目前位置：第幾步
狀態 - 保存與返回：是否已儲存？上次儲存時間？(ps.保存的方法: cookie? 註冊帳號？)
保存與返回是促使人們填完表單的好方法。
– 但，『告訴人們所處位置』不是一件容易做對的事！會有岔路、會被誤解為頁數
– 不要寫1, 2, 3
– 籠統一點，只要概括這個階段的動作即可
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Half.com結帳步驟
1. Shipping: 如果不想用既有地址收貨，要新增地址，所以有兩步
2. Billing: 選擇線上付款服務商、選擇帳號、驗證等，所以有N步
Amazon結帳步驟
Ch3完成之路
• Accessibility 議題
– Internet accessibility指南 - 參考WCAG或美國採購法508章
• Alt文字
• 表格摘要<table summary=“Monthly savings for the Flintstones family ”>
• 每個元素都要有自己的標籤(label)，即使是隱藏的
• 頁面標題(Title)
• 每個link都應有獨特而有意義的名稱，而不是click here
• 不要用顏色作為傳達資訊的唯一方式，需輔以文字
• 配色應保持足夠的對比度
• 字級要夠大或讓user選擇
• 減少無意義的動畫
• 避免使用每秒閃爍3次以上的元素
Ch3完成之路
(續上頁)
• 頁面上所有功能必須用鍵盤就能完成(或做為替代用法)
• 不要用視覺上的方向或顏色來做導覽
• 允許user延長某動作的時間
• 一致性 – 同樣的意義或功能，用相同的圖文表達
• 原始碼的資訊階層要跟視覺layout相符，如縮排
• 應設立快速鍵跳過重複內容，直達主要內容
• 請Target User來做使用性測試
Ch3完成之路
• Tab鍵跳轉
– 用”tabindex”屬性來指定輸入順序(如果未設定tabindex屬性，則依照html原始碼順序)
<FORM action="..." method="post">
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit“>
</FORM>
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
1
2 3 4
5
Ch4標籤
• 表單三要素：標籤、輸入框、Action button
• 標籤的三種主要對齊方式：左對齊、右對齊、頂對齊
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Ch4標籤• 頂對齊 Pros
– 完成速度最快
– 可適應較長標籤(多國語言)
– 一行可以並排好幾對標籤/輸入框
– 眼球只需向下掃描
– 完成率最高
Cons
– 需要的垂直空間變長，螢幕高度有限制時慎用
– 對人們熟悉的資料項目效果較好，但陌生或需要學習的資料仍有待觀察
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Ch4標籤• 右對齊
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Pros
– 也能讓表單快速填完
– 標籤與輸入框連結較佳
– 節省螢幕的上下空間
– 完成速度為左對齊的兩倍快
Cons
– 左側不對齊影響瀏覽速度
– 標籤較長(或兩行)時產生延展問題
http://www.vendorcompete.com/serviceoverview-buyers.php
Ch4 標籤
• 左對齊
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Pros
– 人們需要費心理解標籤的問題時，
左對齊比較有幫助
– 想使user放慢速度時可用
– 節省垂直空間
Cons
– 標籤和輸入框距離變長不易聯結
左右間有認知壓力
– 速度最慢
http://survey.cvent.com/blog/likert-scale-example
http://thedesignspace.net/MT2archives/images/perception/likertScaleWorking.php
Ch4 標籤
• 輸入框內標籤
• 混合對齊：通常不考慮使用
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Pros
– 極端擁擠的情況下之解決方案
Cons
– 游標移到輸入框內，標籤上的問題
就消失，無法一邊填答一邊參考
– 需控制標籤隱藏或顯示的時機
– 需清楚表明這是標籤而不是答案
問題與討論
http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/