簡易檢索 / 詳目顯示

研究生: 許毓芬
Yu-Fen Hsu
論文名稱: 拍賣購物應用程式之介面選單型式及內容呈現方式之設計研究
The Menu Style and Menu Information Layout of the Mobile Shopping Application
指導教授: 陳建雄
Chien-Hsiung Chen
口試委員: 董芳武
Fang-Wu Tung
曹永慶
Yung-Chin Tsao
學位類別: 碩士
Master
系所名稱: 設計學院 - 設計系
Department of Design
論文出版年: 2018
畢業學年度: 106
語文別: 中文
論文頁數: 115
中文關鍵詞: 行動拍賣購物應用程式使用性內容呈現方式
外文關鍵詞: Mobile shopping application, Usability, Information layout
相關次數: 點閱:202下載:2
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報

現今的電子商務發展相當多元,而使用行動裝置進行拍賣與購物已成為主流,消費者行為模式已從「行動優先」逐漸轉移成「行動唯一」。本研究目的是針對拍賣購物應用程式的介面互動滿意度與系統使用性,探討拍賣購物應用程式操作介面設計因素,並進一步探討使用性是否影響使用者的體驗感受,以改善目前拍賣購物應用程式介面設計,提昇使用者使用行動拍賣購物應用程式時的滿意度。
新設計的拍賣購物應用程式,驗證實驗採2 (選單型式) x 3 (內容呈現方式)雙因子實驗之方式進行。「選單型式」之變項共有兩層級:(1)隱藏選單於主畫面將選單內容隱藏,單獨用圖示的方式呈現,點擊後由下往上展開;(2)顯示選單於主畫面下方直接顯示選單內容,使用圖示表每個不同的功能內容。而「選單內容呈現方式」分為三層級:(1)半展開將選單內容以由下往上的方式展開,不完全覆蓋頁面,背景以模糊明度降低的方式呈現,顯示內容為單一階層所需的內容,點擊模糊處可直接返回首頁;(2)圖全展開選單內容由下往上的方式展開至全頁,並直接覆蓋,畫面呈現方式為條列清單;(3)混和型式選單內容由下往上的方式展開,並覆蓋至全頁,畫面採左右劃分的切割方式,顯示內容也為兩階層的內容,包含前一階點擊後的選項保留於頁面左側。
研究結果如下:(1)選單內容的呈現形式符合自然配對之原則,「混合型式」的介面構成方式較符合物理環境的類比;(2)選單的項目數不可太多,以免分類太細導致使用者在選單間迷失,延長尋找的時間;(3)選單內容的呈現形式需暗示使用者選擇點擊;(4) 「顯示選單」讓使用者清楚地知道如何使用,可視化按鈕幫助使用了解操作介面,達到使用者容易辨識而非記憶。


E-commerce is now diversified. Using mobile shopping has become a trend, and consumer behavior patterns have gradually shifted from “mobile first” to “mobile only”. This study is intended to investigate the user interaction of the mobile shopping application and system usability. It is hoped that the user interface design of current mobile shopping application can be improved and the users’ satisfaction can be enhanced.

Redesign in mobile shopping application. The experiment was planned based on a 2 (menu style) by 3 (menu information layout) two-way ANOVA design. There are two levels in the independent variable of menu style: (a) Hamburger menus to hide the menu content on the dashboard, and use the icon to display it separately. Click to expand from bottom to top. (b) Display menu to below content on the dashboard, and using different icons to represent each feature. There are three levels in the independent variable of features information representation styles: (a) Half coverage menu information layout is will expand the menu content from bottom to top, and the background is semi-transparent. The content is displayed in a single level. Clicking the blur background can return to the dashboard. (b) Full coverage menu information layout is the content expanded from bottom to top to full page. The displayed content is horizontal list on the screen. (c) Mixed menu information layout is expanded from the bottom up and covers the screen. The menu information layout is show by left and right. The display content is also two levels of content. The menu information including the previous order are left side on the screen.

The generated results indicated that: (1) The menu layout conforms to the principle of more natural and familiar to user, The "Mixed menu information layout" is more in line with the metaphor in physical environment. (2) The menu layout can be simplified, the product categories can be reduced, and the time that users used for searching for the products can be decreased. (3) The presentation of the menu style needs to imply that the user click. (4) The "Display menu" is easy for the user to use. Visibility buttons help users understand the user interface, and users can recognize rather than remember.

目錄 中文摘要 I Abstract II 致謝 III 圖目錄 VII 表目錄 IX 第一章 緒論 1 1.1 研究背景與動機 1 1.2 研究目的 2 1.3 研究架構與流程 5 1.4 研究範圍與限制 8 第二章 文獻探討 10 2.1 電子商務(E-Commerce) 10 2.1.1 跨境電子商務 11 2.2 互動設計 (Interaction Design) 12 2.2.1 人機介面 12 2.2.2 人機互動 13 2.2.3 介面互動原則 13 2.2.4 介面使用性評估 15 2.3 使用者中心設計 17 2.3.1 使用者中心設計之定義 18 2.3.2 使用者經驗 21 2.3.3 心智模式 24 2.3.4 使用性(Usability) 25 2.4 巨型選單(Mega Menus) 27 2.4.1 行動設備選單類別 28 2.5 小結 30 第三章 研究方法與步驟 31 3.1 研究進行步驟 31 第四章 前導性實驗 34 4.1 前導性實驗分析 34 4.1.1 前導性實驗受測樣本 34 4.1.2 前導性實驗問卷設計 37 4.1.3 前導性實驗流程 38 4.1.4 前導性受測者基本資料分析 39 4.2 前導性實驗結果 40 4.2.1 計測任務操作績效之分析 41 4.2.2 SUS系統使用性尺度量表 47 4.3 前導性實驗小結 48 第五章 驗證實驗 50 5.1 驗證實驗分析 50 5.1.1 驗證實驗研究變項 50 5.1.2 變項實驗因子介紹 52 5.1.3 驗證實驗架構 57 5.1.4 證實驗問卷設計 59 5.1.5 驗證實驗對象 61 5.2 驗證實驗結果 63 5.2.1 計測任務操作績效之分析 63 5.2.2 使用者互動滿意度量表分析 75 5.2.3 系統使用性尺度量表分析 85 5.3 研究結果 88 第六章 結論與建議 94 6.1 實驗模擬介面之建議 94 6.2 後續研究發展建議 96 參考文獻 97 附錄一 100 附錄二 101 附錄三 102

中文文獻
[1] 朱訓麒、楊惠夙(2015)。臺灣廠商跨境經營全球電商市場教戰手冊。中華民國對外貿易發展協會。
[2] 林榮泰、莊明振(1991)。從圖像語意傳達探討人機介面圖像的視認與設計。技術學刊,第六卷第二期,195-202。
[3] 吳素薇、高凱寧(2004)。拍賣網站設計之使用性研究-以Yahoo!奇摩拍賣為例。銘傳大學 設計管理研究所論文。
[4] 陳芝菁、陳建雄(2011)。智慧型手機操作介面使用性評估。工業設計,124,52-57。
[5] 鄭統政、梁成一(2004)。以象徵、明喻、暗喻進行網頁首頁圖像設計之研究。大同大學 工業設計研究所碩士論文。
[6] 蔡佩璇、游萬來(2003)。電子故事書融入語文學習互動設計之探討。國立雲林科技大學 設計學研究所論文。
[7] 劉永青(2012)。友善的人機介面,472。
英文文獻
[8] Bangor, A (2009). Determining what individual SUS scores mean:Adding an adjective rating scale, Journal of Usability Studies, 114-123.
[9] Garrett (2002). The Elements of User Experience User-Centered Design for the Web. Thousand Oaks, CA:New Riders
[10] Gibson, J. J. (1979). The ecological approach to visual perception. Boston: Houghton Mifflin.
[11] Preece, J & Rogers, Y & Benyon, D & Holland, S & Carey, T. (1994). Human computer interaction. Wokingham:Addison Wesley, 15.
[12] Kalakota, R & Whinston, A.B. (1997). Electronic Commerce: A Manager Guide. New York:Wesley Publishing Inc.
[13] Shackel, B. (1991). Human Factors for Informatics Usability. Cambridge:Cambridge University Press.
[14] Nielsen, J. (1993). Usability Engineering. San Diego, CA:Academic Press.
[15] Nielsen, J. & Mack, R. L. (1994). Usability inspection method. New York:John Wiley & Sons.
[16] Norman, A.D (2004). 情感設計(Emotional Design:Why We Love (or Hate) Everyday Things),(翁鵲嵐.鄭玉屏和張志傑,譯者)台北市:遠流出版(原作者2004年出版)
[17] Norman, A.D (2013). 設計心理學:人性化的產品如何改變世界(The Design of Everyday Things:Revised and Expanded Edition), (陳宜秀,譯者)台北市:遠流出版(原作者1988年出版)
[18] Norman, A.D (2010). 好設計不簡單(Living with Complexity), (卓耀宗,譯者)台北市:遠流出版
網路文獻
[19] 成效行銷技術公司Criteo (2016)。亞太電子商務引爆點來臨:網購行為行動裝置首度超越PC。取自http://www.brain.com.tw/news/articlecontent?ID=43873&sort。
[20] 資策會FIND/經濟部技術處「資策會FIND(2015)。服務創新體驗設計系統研究與推動計畫(3/4)。取自http//www.iii.org.tw/Press/NewsDtl.aspx?nsp_sqno=1560&fm_sqno=14。
[21] IDC (2016). Smartphone OS Market share.,
Retrieved from https://www.idc.com/Promo/smartphone-market-share/os.
[22] Kimmy Paluch. (2006). What Is User Experience Design.,Retrieved from http://www.montparnas.com/articles/what-is-user-experience-design
[23] Nielsen, J. (1995). 10 Usability Heuristics for User Interface Design,Retrieved from
https://www.nngroup.com/articles/ten-usability-heuristics/
[24] Nielsen, J. & Angie Li (2017). Mega Menus Work Well for Site Navigation,Retrieved from https://www.nngroup.com/articles/mega-menus-work-well/
[25] Raluca Budiu (2017). Mobile Subnavigation,
Retrieved from https://www.nngroup.com/articles/mobile-subnavigation/Travis (2009). The Fable of the USER-CENTRED DESIGNER, Retrieved from http://www.userfocus.co.uk/pdf/fable.pdf

QR CODE