SlideShare una empresa de Scribd logo
1 de 24
Descargar para leer sin conexión
Web表單設計讀書會,[object Object],完成之路 Ch3/標籤 Ch4,[object Object],2011.1.24,[object Object],鄒心瑜Hsinyu Chou,[object Object],hsinyu.chou@isobar.com#3530,[object Object]
Ch3 完成之路,[object Object],[object Object]
標題很重要,點明希望user採取的行動
告訴人們正在填什麼表單,填完可以達到什麼目的從開頭就讓user進入預期的情境。較龐大的表單需要起始頁,[object Object],提供一個情境讓user全盤了解:前置準備、問些什麼、要花多久、後續動作,[object Object]
Ch3 完成之路,[object Object],Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.,[object Object]
Ch3 完成之路,[object Object],自始至終提供清晰的瀏覽線,[object Object],容易瀏覽的路徑,[object Object],合適的空間,保持每對標籤/輸入框之間的平衡,[object Object],一般而言,最好以輸入框高度的50%~75%為問題之間的間隔,[object Object],(ps.標籤與輸入框、並排輸入框之間的最適距離,同樣為輸入框高度的50%~75%),[object Object],First Name,[object Object],LastName,[object Object],First Name,[object Object],Address,[object Object]
Ch3 完成之路,[object Object],PayPal付款表單,[object Object],Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.,[object Object]
Ch3 完成之路,[object Object],減少分散注意力,[object Object],即使全站風格一致,表單頁也必須有不同的配置,[object Object],畫面上與表單無關、會干擾填表的元素最好剔除,[object Object]
Amazon,[object Object],首頁與表單頁,[object Object],Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.,[object Object]
博客來 首頁與表單頁,[object Object]
Ch3 完成之路,[object Object],過程指示,[object Object],如果整份表單分成多頁,必須顯示『現在進行到哪裡了?』,[object Object],將表單問題分成有意義的群組,[object Object],取個清楚的標題,[object Object],標明範圍:總共有哪些步驟/頁數?標明目前位置:第幾步狀態 - 保存與返回:是否已儲存?上次儲存時間?(ps.保存的方法:cookie? 註冊帳號?)保存與返回是促使人們填完表單的好方法。,[object Object],但, 『告訴人們所處位置』不是一件容易做對的事!會有岔路、會被誤解為頁數,[object Object]
意外插入了登錄,[object Object],富達開戶表單,[object Object],https://www.fidelity.com/,[object Object]
Half.com結帳步驟,[object Object],Shipping: 如果不想用既有地址收貨,要新增地址,所以有兩步,[object Object],Billing:  選擇線上付款服務商、選擇帳號、驗證等,所以有N步,[object Object],Amazon結帳步驟,[object Object],不要寫1,2,3,[object Object],籠統一點,只要概括這個階段的動作即可,[object Object],Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.,[object Object]
Ch3 完成之路,[object Object],Accessibility 議題,[object Object],Internet accessibility指南 - 參考WCAG或美國採購法508章,[object Object],Alt文字,[object Object],表格摘要<table summary=“Monthly savings for the Flintstones family ”>,[object Object],每個元素都要有自己的標籤(label),即使是隱藏的,[object Object],頁面標題(Title),[object Object],每個link都應有獨特而有意義的名稱,而不是click here,[object Object],不要用顏色作為傳達資訊的唯一方式,需輔以文字,[object Object],配色應保持足夠的對比度,[object Object],字級要夠大或讓user選擇,[object Object],減少無意義的動畫,[object Object],避免使用每秒閃爍3次以上的元素,[object Object]
Ch3 完成之路,[object Object],(續上頁),[object Object],頁面上所有功能必須用鍵盤就能完成(或做為替代用法),[object Object],不要用視覺上的方向或顏色來做導覽,[object Object],允許user延長某動作的時間,[object Object],一致性 – 同樣的意義或功能,用相同的圖文表達,[object Object],原始碼的資訊階層要跟視覺layout相符,如縮排,[object Object],應設立快速鍵跳過重複內容,直達主要內容,[object Object],請Target User來做使用性測試,[object Object]
Ch3 完成之路,[object Object],Tab鍵跳轉,[object Object],用”tabindex”屬性來指定輸入順序(如果未設定tabindex屬性,則依照html原始碼順序),[object Object],<FORM action="..." method="post">,[object Object],<INPUTtabindex="1"type="text" name="field1">,[object Object],<INPUTtabindex="2"type="text" name="field2">,[object Object],		<INPUTtabindex="3"type="submit" name="submit“>,[object Object],	</FORM> ,[object Object]
5,[object Object],1,[object Object],2,[object Object],3,[object Object],4,[object Object],Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.,[object Object]
Ch4 標籤,[object Object],表單三要素:標籤、輸入框、Action button,[object Object],標籤的三種主要對齊方式:左對齊、右對齊、頂對齊,[object Object],Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.,[object Object]
Ch4 標籤,[object Object],Pros,[object Object],[object Object]
可適應較長標籤(多國語言)
一行可以並排好幾對標籤/輸入框
眼球只需向下掃描
完成率最高Cons,[object Object],[object Object]
對人們熟悉的資料項目效果較好,但陌生或需要學習的資料仍有待觀察頂對齊,[object Object],http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php,[object Object]

Más contenido relacionado

Destacado

從一個超簡單範例開始學習 Canvas
從一個超簡單範例開始學習 Canvas從一個超簡單範例開始學習 Canvas
從一個超簡單範例開始學習 CanvasAnna Su
 
前端界流傳的神奇招式
前端界流傳的神奇招式前端界流傳的神奇招式
前端界流傳的神奇招式Anna Su
 
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事Anna Su
 
Sublime Text 入門
Sublime Text 入門Sublime Text 入門
Sublime Text 入門Kah Wai Liew
 
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3Kuro Hsu
 
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例Kuro Hsu
 
Sublime text 極速應用教學
Sublime text 極速應用教學Sublime text 極速應用教學
Sublime text 極速應用教學Amos Lee
 

Destacado (7)

從一個超簡單範例開始學習 Canvas
從一個超簡單範例開始學習 Canvas從一個超簡單範例開始學習 Canvas
從一個超簡單範例開始學習 Canvas
 
前端界流傳的神奇招式
前端界流傳的神奇招式前端界流傳的神奇招式
前端界流傳的神奇招式
 
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
 
Sublime Text 入門
Sublime Text 入門Sublime Text 入門
Sublime Text 入門
 
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
 
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
 
Sublime text 極速應用教學
Sublime text 極速應用教學Sublime text 極速應用教學
Sublime text 極速應用教學
 

Último

20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_patternJamie (Taka) Wang
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven designJamie (Taka) Wang
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLPJamie (Taka) Wang
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 

Último (15)

20200323 - AI Intro
20200323 - AI Intro20200323 - AI Intro
20200323 - AI Intro
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_pattern
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven design
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
 
20151111 - IoT Sync Up
20151111 - IoT Sync Up20151111 - IoT Sync Up
20151111 - IoT Sync Up
 
20161027 - edge part2
20161027 - edge part220161027 - edge part2
20161027 - edge part2
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
20200226 - AI Overview
20200226 - AI Overview20200226 - AI Overview
20200226 - AI Overview
 
Entities in DCPS (DDS)
Entities in DCPS (DDS)Entities in DCPS (DDS)
Entities in DCPS (DDS)