臺灣博碩士論文加值系統

本研究以跨平台體驗為核心來開發服飾購物網頁，透過易用性測試任務，來探討本研究網頁介面能否讓消費者在網頁操作上更為輕鬆容易，並以此歸納整理出適合消費者使用之服飾購物網站介面設計重點。研究對象為有使用過行動購物經驗之23歲至30歲之目標受測者共20位，本研究先以使用者為中心的開發流程來進行網頁設計，並設計出收藏鈕及已瀏覽標記來延續跨平台體驗，而後再藉由短周期的施測易用性任務的方式，以手機及電腦做為跨平台測試載具，來進行一個購物流程的操作任務。研究者依受測者完成各任務時間探討受測者操作網頁的情況，並以介面滿意度問卷及半結構式訪談來了解受測者操作介面之滿意度及對網頁介面之建議，以提供後續網頁改良之依據。研究結果顯示，受測者使用改良後之網頁時，能以更短時間完成本研究設計之任務，且受測者對於本研究網站所提供跨平台的使用體驗也給予良好的評價，本研究將結果整理並分析，以供未來相關研究之參考。

This study uses cross-platform user experiences to design an apparel shopping site. Based on usability tests, the ease of use of specific tasks on the designed site is measured. Then, we attempt to give some rule of thumbs for designing the user interfaces of an apparel shopping site. The study objects are the men who are between 23 to 30 years old and have online mobile shopping experiences. First, this study uses user-centered development procedures to design a shopping site. Then, favorite buttons and browsed tags are developed to enhance cross-platform user experiences. Cross-platform shopping tasks with mobile phones and computers are used to perform a short-period usability test. The time to finish test tasks are measured, and QUIS and semi-structural interviews are performed. Then, we used these results to redesign an improved site. The results show that the operating time of tests are shorter and positive feedbacks on cross-platform user experiences are given while using the improved site. This study has conclusions and analyses for further studies.

摘要 i
Abstract ii
目錄 iii
表目錄 vi
圖目錄 viiii

第一章 緒論 1
第一節 研究背景與動機 1
第二節 研究目的 2
第三節 研究範圍與限制 3
第四節 研究架構 4

第二章 文獻探討 5
第一節 跨平台購物概況 5
一、 網路購物現況 5
二、 消費者網購商品類型分析 6
三、 跨平台購物趨勢 7
第二節 跨平台網站介面設計探討 9
一、 電子商務網站介面設計 9
二、 行動裝置網站介面設計 14
(ㄧ) 行動網站設計 14
(二) 行動裝置觸控範圍及按鈕大小探討 15
三、 響應式網頁設計 16
(ㄧ) 響應式網頁發展概述 16
(二) 響應式購物網站案例介紹與分析 17
第三節 使用者經驗 21
一、 網站階層式開發 21
第四節 文獻探討小結 24

第三章 研究方法 25
第一節 研究流程與設計 26
第二節 研究方法與步驟 27
一、現有購物網站半結構式訪談 28
二、第一階段測試-初版X網頁測試 29
三、第二階段測試-改良型Y網頁測試 31
第三節 研究工具 33
一、 適合消費者使用之跨平台購物網頁 33
二、 易用性測試任務 34
三、 使用者介面滿意度問卷 35
四、 半結構式訪談大綱 35
第四節 資料分析 36
一、 量化分析 36
二、 質性分析 36

第四章 研究結果與討論 37
第一節 研究工具設計與發展 37
一、 前期設計內容 37
(ㄧ) 題材選定 37
(二) 資訊架構 38
(三) 現有購物網站半結構式訪談 39
(四) 用戶模型建立 41
(五) 使用情境設定 42
(六) 繪製線稿 46
二、 網頁開發工具 49
三、 網頁介面實作成果 50
(ㄧ) 初版X網頁 50
(二) 改良型Y網頁 54
四、 網頁改良前後版本差異 57
第二節 介面易用性測試任務分析 60
一、 A組進行X網頁及Y網頁易用性測試之結果分析 61
二、 A組X網頁及B組Y網頁易用性測試之結果分析 68
第三節 使用者介面滿意度分析 75
一、 A組進行X網頁及Y網頁之介面滿意度結果分析 75
二、 A組X網頁及B組Y網頁之介面滿意度結果分析 79
第四節 訪談結果與分析討論 83
一、 初版X網頁之半結構式訪談結果分析 83
二、 改良型Y網頁之半結構式訪談結果分析 85

第五章 結論與建議 87
第一節 結論 87
一、 易用性與滿意度 87
二、 跨平台體驗 88
第二節 未來建議 90
一、 研究方法及對象建議 90
二、 適合消費者之跨平台服飾購物網站介面設計建議 90
三、 未來展望 90

參考文獻 91
附錄一 易用性測試之受試者基本資料問卷 95
附錄二 易用性測試任務 97
附錄三 使用者介面滿意度問卷 99
附錄四 半結構式訪談大綱 100
附錄五 A組介面滿意度獨立樣本t檢定表 101
附錄六 A、B組介面滿意度獨立樣本t檢定表 102

中文文獻
王郁青、岳修平(2013)。人力網站首頁版面之使用性評估研究。教育傳播與科技研究，104，1-15。
王鴻翔、翁鵲嵐、鄭玉屏、張志傑(譯) (2011)。情感@設計:為什麼有些設計讓你一眼就愛上(原作者：Donald A.Norman)。台北市：遠流出版事業股份有限公司。
田郅菁(2012)。行動網頁介面使用性探討。大同大學，台北市。
徐子翔(2015)。可縮放介面研究：針對不同年齡使用者運用掐捏手勢操作調查顯控比、顯示密度與顯示尺寸對最適目標大小之影響。國立臺灣科技大學，台北市。
陳亦苓(譯) (2012)。ROCKET SURGERY MADE EASY : DIY一次搞定網站易用性問題(第二版)(原作者：Steve Krug)。台北市：上奇資訊。
黃帥豐(2010)。觸控式寬螢幕手機之單手拇指點選面積研究。國立台灣科技大學，台北市。
陳圳卿、陳嘉妮(2011)。多點觸控手持式行動裝置之互動介面使用性評估研究。臺北科技大學學報 ，44(1)，89-118。
廖洧杰(2013)。跨平台網頁設計RWD方法採用行為之探討-以TAM與TTF整合模式為基礎。國立高雄大學，高雄市。
鄭尹惠(2014)。使用RWD的跨平台網頁介面設計之使用性研究。國立臺北教育大學，台北市。
鄭春蓮(2009)。應用網頁轉換技術解決行動裝置瀏覽網頁問題之研究。淡江大學，新北市。
顧兆仁、陳立杰(2011)。大型觸控螢幕內三維虛擬物件的旋轉操控模式與手勢型態配對之研究。設計學報，16(2)。

英文文獻
Dalal, N. P., Quible, Z., & Wyatt, K. (2000).Cognitive design of home pages: An experimental study of comprehension on the world wide web. Information Processing and Management, 36, 607-621.
Garrett, JJ (2002).Elements of User Experience:User-Centered Design for the Web. New Riders Press, USA.
Nielsen, J. (1995). A home-page overhaul using other web sites. IEEE Software, 12(3),75-78.
Nielsen, J. (1996). Putting the user in user interface testing. IEEE Software, 13(3),89-90.
Nielsen, J. (1999). User interface directions for the web. Communications of the ACM, 42(1),65-72.
Timo Laak (2013). Responsive Web Design Workflow (Master's thesis, University of Tampere School of Information Sciences Interactive Technology, Finland).

網路文獻
設計大舌頭(2014年10月29日)。電子商務網站介面設計寶典(一)。取自http://designtongue.logdown.com/posts/240230-treasury-e-commerce-website-interface-designs-part-one
設計大舌頭(2014年11月10日)。電子商務網站介面設計寶典(二)。取自http://designtongue.logdown.com/posts/241713-e-commerce-website-interface-is-designed-to-handle-b
資策會FIND(2014年9月18日)。2014行動行銷策略關鍵報告。取自http://www.find.org.tw/find/20140918-2014行動消費者趨勢分析-摘要版.pdf
Ethan Marcotte. (2010). A List Apart: Articles: Responsive Web Design. Retrieved from http://alistapart.com/article/responsive-web-design/
Ethan Marcotte. (2010). Live Example-The Baker Street Inquirer. Retrieved from http://alistapart.com/d/responsive-web-design/ex/ex-site-larger.html
Googlemobile. (2012, July 10). Mobile Websites vs Responsive Design: what's the right solution for your business?. Retrieved from http://googlemobileads.blogspot.tw/2012/07/mobile-websites-vs-responsive-design.html
Google (2014年10月29日)。2014台灣跨裝置消費者與電子商務研究報告。取自http://www.sogi.com.tw/articles/Google跨裝置消費與電商研究_行動購物比例_台灣第一/6235271
Joshua Steimle. (2013). Why Your Business Needs A Responsive Website Before 2014.Retrieved from http://www.forbes.com/sites/joshste,mle/2013/11/08/why-your-business-needs-a-responsive-website-before-2014/
Nielsen(2014年10月30日)。新媒體時代的高消費網購族群。取自http://www.nielsen.com/content/dam/nielsenglobal/tw/docs/digital-era-heavy-online-shopper-2014.pdf
Open Signal. (2012, August). The many faces of a little green robot. Retrieved from http://opensignal.com/reports/fragmentation.php.
Pete LePage. (2014, August 4). Home Page and Navigation Principles. Retrieved from https://developers.google.com/web/fundamentals/layouts/principles/?hl=en
Steven Hoober. (2013, March 18). Common Misconceptions About Touch. Retrieved from http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
Watt, C. (2011). Mobile Web design and usability. Retrieved from http://digitalcommons.calpoly.edu/grcsp/53/
Yahoo(2014年9月15日)。台灣人手機購物時代來臨！。取自http://yahoo-emarketing.tumblr.com/post/119916369066/yahoo-2014-yahoo