簡易檢索 / 詳目顯示

研究生: 薛家和
Hsueh, Chia-Ho
論文名稱: 以使用者中心探討跨裝置網站互動使用性研究與創作
A study and creation on the Interaction Design and Usability of cross-device websites focusing on the User-Centered Design
指導教授: 鄧成連
Teng, Cheng-Lein
學位類別: 碩士
Master
系所名稱: 設計學系
Department of Design
論文出版年: 2017
畢業學年度: 105
語文別: 中文
論文頁數: 159
中文關鍵詞: 自適應網頁設計使用者中心設計使用性互動性
英文關鍵詞: Web Design, User-Centered Design, Interaction design, Usability
DOI URL: https://doi.org/10.6345/NTNU202202932
論文種類: 學術論文
相關次數: 點閱:129下載:21
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 摘 要
    數位行動生活來臨,使用者每天透過不同裝置與各種網站接觸享受生活,無論是上網購物或者尋找商家,或是觀看影音多媒體內容,還是與企業品牌的互動,跨裝置的使用已經是一種生活日常行為。使用者瀏覽網站的經驗已經多到不可勝數,然而卻不總是令人感到愉悅,甚至還可能感到焦慮與沮喪。因此本研究旨在如何協助引導使用者,讓使用者在跨裝置瀏覽網站時能夠有效掌握、輕鬆使用、感到愉悅有趣,並且獲得一致的良好體驗,是本研究探討的重點。
    本研究經由文獻探討,歸納出「跨裝置網站設計」及「跨裝置網站互動使用性」之準則,並以國際企業網站為案例,分析並彙整網站在跨裝置使用的優缺點,最後以文獻所探討之結論與案例分析優劣之結果,實際運用創作之。
    就多螢時代的網站而言必須能夠滿足使用者在跨裝置瀏覽體驗的需求。案例分析發現,企業網站案例均能符合「自適應網頁設計」:即(1) 內容適當對應呈現;(2)版面靈活自然流暢;(3)圖片彈性縮放調整;等三大特性。尤其在視埠較小的行動裝置更需要注意「行動裝置的友善性」:(1)首頁的導覽清晰簡潔;(2)站內搜尋容易;(3)輸入方式簡單方便;(4)維持內容體驗一致。等四項針對行動裝置的要求。
    本創作研究發現就使用者而言,一個好的跨裝置網站必須是以使用者為中心的設計,具備良好的使用性,亦即是(1)有效;(2)高效;(3)愉悅;(4)容錯;(5)學習,並且以提升互動性為目標,則須具備(1)可視性;(2)一致性;(3)預視性;(4)對應性;(5)回饋性。才能讓使用者在跨裝置的體驗獲致一致感受愉悅。期許以使用者為中心的跨裝置網站設計,能夠帶給使用者美好一致的愉悅體驗,也能提供後續跨裝置網站創作者的參考依據。
    關鍵詞:自適應網頁設計、使用者中心設計、使用性、互動性

    Abstract
    With the era of digital life, users get in touch with each other and enjoy their life through various kinds of devices and websites. No matter it be online shopping or finding a shop, watching a multi-media content, or interacting with a brand, the use of cross-device has become a daily behavior. Users have countless website browsing experiences. However, these experiences might not always be happy ones; some might even be worrying and frustrating. This study therefore aims to guide users to become more efficient, and making the experience easier, happier and more interesting for all when using cross-devices to browse websites.
    This study has summed up the standards for “cross-device website design” and “cross-device website interaction usability”. It has also taken international enterprises’ websites as examples to analyze and synthesize the positive and negative aspects of the use of cross-device devices. Subsequently, it has applied the analysis of theories and case studies of the documents onto the making of this study.
    In this multi-screen era, websites should satisfy users’ needs in cross-device browsing experiences. The analysis has found that corporate websites fit in with the three ideas of “adaptive website design”, which is (1) the synchronization of contents; (2) fluency of the website presentation; (3) the flexible adjustment of pictures’ size. Especially when the viewport has become smaller with mobile devices, it is notable to pay attention to “the friendliness of mobile devices”, including the following four principles regarding the needs for mobile devices: (1) The clean and clear presentation of the main page; (2) the search easiness in the website; (3) the convenience of input mode; (4) maintain the consistence of the content.
    This study has discovered that a good cross-device website design has to focus on the user’s experience. It has to be user-friendly, which means (1) effective, (2) efficient, (3) delightful, (4) fault tolerant, (5) ability of learning. It also has to set enhancing interaction as a goal, therefore it should include (1) visibility, (2) consistence, (3) foresight, (4) coherence, (5) contribution. Such can provide users a consistent and enjoyable feeling when using cross-device websites. The cross-device website design used in this study is capable of bringing users a happy and consistent enjoyable experience. It can also serve as a reference for future cross-device website designers.
    Keywords: Responsive Web Design, User-Centered Design, Interaction design, Usability

    目 錄 摘 要 I Abstract II 謝 誌 III 目 錄 IV 表目錄 VII 圖目錄 VIII 第壹章、緒論 1 第一節、研究背景與動機 1 第二節、研究目的與目標 3 第三節、研究流程與步驟 5 第貳章、文獻探討 7 第一節、多螢時代的科技、人與商業 7 一、 網際網路、Web2.0 7 二、 與物聯網的科技演變 7 二、跨裝置的使用行為 8 第二節、網站規劃設計 10 一、網站規劃 10 二、自適應網頁設計 11 第三節、網站互動使用性 19 一、使用者中心設計 19 二、互動設計 21 三、使用性 27 第四節、總結 36 第參章、研究與創作流程 37 第一節、 研究方法與流程 37 一、文獻探討 37 二、案例分析 38 第二節、 創作方法與流程 38 一、 跨裝置網站規劃 38 二、 使用者中心跨裝置網站設計 39 1.使用性 39 三、小結 40 第肆章、案例分析 41 第一節、案例分析方法說明 41 一、 網站架構規劃之具體說明 41 二、 網站設計準則說明 42 案例1:Huge Inc. 企業網站 44 一、案例背景 44 二、跨裝置網頁設計分析 45 三、跨裝置網頁使用性分析 54 四、跨裝置網頁互動性分析 57 五、小結 66 案例2:BIG DROP 企業網站 69 一、案例背景 69 二、跨裝置網頁設計分析 69 三、跨裝置網頁使用性分析 79 四、跨裝置網頁互動性分析 83 五、小結 92 案例3:R / GA 企業網站 94 一、案例背景 94 二、跨裝置網頁設計分析 94 三、跨裝置網頁使用性分析 106 四、跨裝置網頁互動性分析 109 五、小結 118 第二節、綜合分析總結 120 第伍章、創作成果與分析 125 第一節、設計理念規範 125 一、自適應網頁設計 126 二、行動網頁友善 126 第二節、設計結果 127 第三節、創作結論 140 一、 設計特點說明 140 二、 與文獻理論之比對 140 第陸章、創作討論與建議 147 第一節、結論 147 一、 文獻結論 147 二、 案例分析結論 147 三、 創作結論與反思 149 四、 綜合結論 150 參考文獻 152

    參考文獻
    方裕民 (2003)。人與物的對話。臺北市:田園城市。
    王璟崴 (2008)。數位典藏互動介面與體驗差異分析—以故宮3D虛擬展示與空中英語教室為例。南台科技大學資訊傳播系碩士 研究論文。
    王鴻祥、翁鵲嵐、鄭玉屏、張志傑譯 (2011)。情感@設計:為什麼有些設計讓你一眼就愛上。遠流。
    呂紫淇、羅淑慧譯Masaaki Komori等人 (2008) 。Essential XHTML+CSS:專業級網頁設計的關鍵法則(XHTML+CSS Design)。(呂紫淇、羅淑慧 譯)。台北。悅知。
    卓耀宗譯 (2000)。設計的心理學。臺北市。遠流。
    林珮雯 (2005)。電子商務網站介面設計研究-美感與使用性。國立交通大學傳播研究所碩士論文。
    林欣蔚譯 (2013)。Information Architecture 100:100個網站規劃必備的知識。悅知。
    徐小雅 (2010)。建構商業智慧系統使用者滿意度之評估指標。國立高雄應用科技大學資訊管理系碩士在職專班 碩士論文。
    張志勇 (2013)。物聯網概論。台北。碁峰。
    張亮譯 (2008)。設計好網站的黃金準則。臺北市。悅知。
    莊雅晴 (2013)。文化旅遊網站之設計與使用性研究:以烏來為例。世新大學資訊傳播學研究所碩士論文。
    許玉玲譯 (2008)。關鍵設計報告。臺北市:麥浩斯。
    許郁文譯 (2014)。多元裝置時代的網站UI/UX設計法則。臺北市。博碩。
    許雅雯 (2010)。臺灣現代劇團網站介面設計之使用性研究。商業設計學報。台北。
    許瑞宋譯 (2011)。決戰第三螢幕。臺北市。天下。
    郭如萍 (2006)。使用者中心設計取向之網站使用性實踐初探:意義、方法與台灣網路產業現況。國立交通大學傳播研究所碩士論文。
    陳建雄譯 (2009)。互動設計:跨越人-電腦互動。新北市。全華。
    陳家錡 (2011)。無障礙網頁之互動文字研究。國立台灣藝術大學多媒體動畫藝術學系碩士班碩士論文。
    陳恩航 (2013)。網頁設計。台北。華視。
    陳聖伯 (2013)。自適應網頁設計武功秘笈。佳魁。台北。
    傅小貞、胡甲超、鄭元攏 (2014)。行動設計之鑰:打造出讓使用者一見鍾情的手機APP UI / UX設計。台北。松岡。
    彭其捷、楊淑涵(2013)。那些APP好用的祕密 : 黏住使用者的魅力&UX好感度設計。台北。博碩。
    黃玉君 (2000)。人力銀行網站易用性研究-以104人力銀行為例。世新大學資訊傳播學研究所)碩士論文。
    黃朝秋譯 (2014)。使用者導向設計。台北。碁峰。
    彭其捷、楊淑涵 (2013)。那些APP好用的秘密:黏住使用者的魅力&UX好感度設計。博碩。
    楊仁和 譯 (2014)。Responsive Web Design 響應式網頁設計學習手冊。台北。歐萊禮 。
    葉鴻釧(2007)。互動設計介面模式網頁應用研究-以德國BurgZiesar及國內故宮博物院為例。國立臺北科技大學創新設計研究所碩士論文。
    葉謹睿 (2010)。互動設計概論。台北。藝術家。
    鄒飛逯 (2011)。智慧城市給你好生活 物聯網讓萬物互聯暢通。IBM。
    廖鵬文、盧康渝 (2004)。別讓我的滑鼠變自閉。新竹縣。數位人資訊。
    劉至逢 (2009)。大學圖書館網站使用性評估之探討。國立臺灣師範大學圖書資訊學研究所碩士論文。
    鄭巧玉 譯 (2015)。Multi-Device 體驗設計:處理跨裝置使用者體驗的生態系統方法。台北。歐萊禮。
    鄭巧玉譯 (2014)。微互動。台北。碁峰。
    謝育容譯 (2012)。網站使用者中心策略。台北。城邦。
    謝季穎譯 (2010)。UI進化論 行動裝置使用者介面設計。台北。上奇。
    顏瑞瑩 (2012)。官方旅遊網站好用性研究。國立臺灣大學圖書資訊學研究所碩士論文。
    魏澤群 (2007)。優使性2.0網站經驗設計與使用者研究。台北。網奕。

    Alan, C., Robert, R., David, C., Christopher, N,. Jason, C., & Doug, L,.(2014)About Face: The Essentials of Interaction Design, Fourth Edition. Wiley.
    Apple (2005) Apple Human Interface Guidelines。Apple 。
    Saffer, D.(2010)Designing for Interaction: Creating Innovative Applications and Devices. New Riders
    Saffer, D.(2014)Microinteractions: Design With Details. O’Reilly Media, Inc.,
    David R. Benyon , Phil Turner & Susan Turner (2010) Designing Interactive Systems : A Comprehensive Guide to HCI and Interaction Design. Wesley Eduction Publishers Inc.
    Dumas, J. S. & Redish, J. C. (1993). A Practical Guide to Usability Testing. Norwood, NJ: Ablex.
    Eason, K. D. (1984) Towards the Experimental Study of Usability: Behavior and Information Technology.
    Garrett, j. (2011) The elements of user experience: user-centered design for the web and beyond. New Riders
    Giles Colborne (2011) Simple and Usable Web, Mobile, and Interaction Design. New Riders
    Gillenwater, Zoe Mickley (2008) Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. Macmillan Computer Pub.
    Gould, J. D., & Lewis, C., (1985). Designing for usability
    Jakob Nielsen (1993). Usability Engineering. Boston: AP Professional.
    Jarrett, C. (2001) Usability means user-centred design. Paper presented at the the 48th
    Annual Confer ence of the Society for Techni cal Communication, Chicago, USA.
    Jeffrey Zeldman (2003) Designing With Web Standards. New Riders。
    John Cato(2011)User-centered Web Design。Addison Wesley Longman。
    Jokela, T. (2001) Assessment of user-centred design processes as a basis for improvement action, An Experimental Study in Industrial Settings (Acta Universitatis Ouluensis ed.). Oulu: Oulu University Press.
    Kolko , J. (2011) Thoughts on Interaction Design, Second Edition. Morgan Kaufmann
    Krug, S. (2014)Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability, 3rd EditionDon't Make Me Think, Revisited: A Common Sense Approach to Web Usability。. New Riders.

    Lowdermilk, T. (2013) User-Centered Design - A Developer's Guide to Building User-Friendly Applications. O'Reilly Media.
    Mao, J.-Y., Vredenburg, K., Smith, P. W., & Carey, T. (2001). User-centered design methods in practice: A survey of the state of the art. Paper presented at the the 2001 conference of the Centre for Advanced Studies on Collaborative research, Toronto, Ontario, Canada.
    Marc & Jakob (2012) This is Service Design Thinking: Basics, Tools, Cases. New York, NY : John Wiley & Sons, Inc.
    Morville, P., Rosenfeld, L. & Arango, J. (2015) Information Architecture: For the Web and Beyond, 4e. Sebastopol, California. O’Reilly Media,Inc.,
    Pearrow, M. (2000) Web Site Usability Handbook. Rochkand, MA: Charles River Media Inc.
    Quesenbery, W. (2001) What Does Usability Mean: Looking Beyond ‘Ease of Use’. Chicago, Illinois, USA.
    Quesenbery, W. (2004) Balancing the 5Es of usability. Cutter IT Journal.
    Rubin, J. (1994) Handbook of Usability Testing: How to plan, Design, and Conduct Effective Tests. New York, NY : John Wiley & Sons, Inc.

    Shneiderman, (1986) Designing the user interface.: Strategies for Effective Human-Computer Interaction. Boston: Addison -Wesley Longman.

    Steve Souders (2007) High Performance Web Sites:Essential Knowledge for Front-End Engineers. O'Reilly Media
    Vredenburg, K., Isensee,S., & Righi, C. (2002).User-centered Design: An Integrated Approach. Upper Saddle River, NJ: Prentice Hall PTR.

    線上資料
    網際網路歷史 (2015年12月28日)。取自:維基百科
    https://zh.wikipedia.org/wiki/%E4%BA%92%E8%81%94%E7%BD%91%E5%8E%86%E5%8F%B2

    Web 2.0 (2015年12月28日)。取自:維基百科
    https://zh.wikipedia.org/wiki/Web_2.0

    物聯網 (2015年12月28日)。取自:MBA智庫百科
    http://wiki.mbalib.com/zh-tw/%E7%89%A9%E8%81%94%E7%BD%91

    Google 2014台灣跨裝置消費者與電子商務報告 (2015年12月28日)。取自:Consumer Barometer with Google
    https://www.consumerbarometer.com/en/trending/?countryCode=TW&category=TRN-NOFILTER-ALL

    創市際市場研究顧問公司(2014)。2014台灣跨屏網路使用行為調查. 創市際市場研究顧問.(2015年03月07日)取自:創市際市場研究顧問公司http://www.insightxplorer.com/news/news_09_29_14.html

    劉建宏(2014).經濟部正式宣布,推動台灣智慧城市建設六大重點計畫. 2014, from http://www.bnext.com.tw/article/view/id/32321

    黃勤穎(2014)。人性化無縫匯流新觀賞體驗BBC iPlayer (2015年12月28日)。取自:資策會創新應用服務研究所http://www.find.org.tw/market_info.aspx?n_ID=6228

    愛立信消費者行為研究室 (2015年12月28日)。愛立信2015年十大熱門消費者趨勢報告。取自:台灣愛立信
    http://www.ericsson.com/tw/thinkingahead/consumerlab

    Ariel(2014)。HPX58 – 多螢設計:從小螢幕(手機/平板)到大螢幕(電腦/電視)。取自: 悠識數位顧問有限公司
    http://www.hpx.tw/archives/15486

    以用戶為中心的設計 (2016年01月03日)。取自:維基百科
    https://zh.wikipedia.org/wiki/以用户为中心的设计

    David M. Hogue (2010) Interaction Design for Graphic Designers. ( 2016年03月12日)。取自:IDUX
    http://www.idux.com/downloads/MAX2010_HOGUE_Interaction_Design_Principles.pdf

    Luke Wroblewski (2012)。Multi-Device Layout Patterns. ( 2016年03月19日)。取自:LUKEW
    http://www.lukew.com/ff/entry.asp?1514

    Brad Frost (2012)。For a Future-Friendly Web. ( 2016年03月19日)。取自:bradfrost blog
    http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-webvisions-chicago-2012?from_m_app=ios

    Brad Frost (2012)。Responsive Navigation Patterns.( 2016年03月19日)。取自:bradfrost blog
    http://bradfrost.com/blog/web/responsive-nav-patterns/

    Elaine (2012). Design for Mobile, Part 1: Information Architecture (2016年04月16日)。取自:UX BOOTH
    http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

    Google (2014)。 如何打造跨螢幕網站。 Google。Retrieved Mar10, 2015, from https://www.google.com.tw/think/multiscreen/start.html

    Google (2014). 行動網站設計原則:取悅使用者並提高轉換量。(2016年04月15日)。取自:Google 多螢幕網站攻略。
    https://www.google.com.tw/think/multiscreen/whitepaper-sitedesign.html
    Guy(2013)。Top 5 Tips for Making Fast RWD Sites. (2016年04月10日)。取自:Guy’s Pod
    http://www.guypo.com/top-5-tips-for-making-fast-rwd-sites/

    Google(2014)。適合行動裝置的網站-為您的使用者提供完善的行動體驗(2016年04月16日)。取自:Google Developers
    https://developers.google.com/webmasters/mobile-sites/?hl=zh-tw

    Jerry Cao (2015)。How Eye Scanning Impacts Visual Hierarchy In UX Design. ( 2016年03月19日)。取自:webdesignerdepot
    http://www.webdesignerdepot.com/2015/03/how-eye-scanning-impacts-visual-hierarchy-in-ux-design/

    Jerry Cao (2015)。6 Web Design Trends You Must Know for 2015 & 2016。( 2016年04月5日)。取自:awwwards
    http://www.awwwards.com/6-web-design-trends-you-must-know-for-2015-2016.html

    Nielsen, J. & Molich, R. (1990). 10 Usability Heuristics for User Interface Design. (2016年04月22日 )。取自:Nielsen Norman Group.
    https://www.nngroup.com/articles/ten-usability-heuristics/

    Paul(2015). Why mobile first is outdated. ( 2016年04月16日)。取自:Intercom
    https://medium.com/intercom-inside/why-mobile-first-is-outdated-f10a3dc357bd#.wx7t81udy

    Sandijs Ruluks (2014)。9 basic principles of responsive web design ( 2016年03月19日)。取自:FROONT
    http://blog.froont.com/9-basic-principles-of-responsive-web-design/

    W3C(2001)。Syntax of CSS rules in HTML's "style" attribute. ( 2016年03月20日)。取自:W3C
    https://www.w3.org/TR/2001/WD-css-style-attr-20010305

    Javier Perez (2014) A new wave of mobile-friendly sites. ( 2016年03月20日)。取自:Google Search blog.
    https://search.googleblog.com/2014/12/a-new-wave-of-mobile-friendly-sites_10.html

    下載圖示
    QR CODE