探討Web 2.0環境下的使用者介面設計－以個人化入口網頁介面的設計開發為例

簡易檢索 / 詳目顯示

回結果列表

研究生：	蕭健興 Gainshin - Hsiao
論文名稱：	探討Web 2.0環境下的使用者介面設計－以個人化入口網頁介面的設計開發為例 An investigation on the User Interface Design under Web 2.0 Environment- A Case Study of Personal Portal Design
指導教授：	陳建雄 Chien-Hsiung Chen
口試委員:	梁容輝 Liang, Rung-Huei 許言 Hsu Yen
學位類別：	碩士 Master
系所名稱：	設計學院 - 設計系 Department of Design
論文出版年：	2008
畢業學年度：	96
語文別：	中文
論文頁數：	196
中文關鍵詞：	模組應用程式、桌面網路化、使用者經驗研究、互動設計、個人化入口、介面分析
外文關鍵詞：	Widget, Web Desktop, User experience research, Interaction design, Personal portal, Interface analysis
相關次數：	點閱：242 下載：3
分享至:	分享至facebook 分享至twitter

查詢本校圖書館目錄查詢臺灣博碩士論文知識加值系統勘誤回報

中文摘要
由於全球資訊網的出現，人類的學習、工作、甚至育樂對談溝通等，都逐漸經由電腦上完成，使得網頁介面在使用性上的考量更為重要。由於現有文獻對於Web2.0環境下的網頁介面使用性探討有限。本研究過程除了蒐集歸納目前網路上具代表性之Widget的樣本，並整理相關個人化入口介面之相關文獻以及現況應用，除了進行樣本調查外，更尋求相關領域，如使用者介面研究開發，或是現有個人化入口開發者的專業意見。從以系統化的研究方法，理論探討到原型驗證進行一連串的研究。
本研究之實驗共分為三個階段進行，第一階段透過問卷調查及訪談的方式，分析現有樣本操作介面的呈現方式、操作流程並分析其優缺點，作為未來互動介面原型之設計參考。第二階段實驗依據相關文獻及第一階段使用者需求調查結果，比較現有兩款不同類型之個人化入口介面(即Netvibes與My Yahoo!)並進行介面任務操作實驗，紀錄受測者之操作時間及操作績效。事後比較之結果發現，受測者對於個人化入口介面操作過程中，其中兩個重要影響操作績效、使用性、介面滿意度的兩個因子「欄位版型」、「操作流程」。第三階段依照研究實驗發現的主要因子提出新的介面原型設計原則，並根據主效應「操作流程」再進行單因子分析實驗。事後分析結果發現，改良後的原型在操作績效、使用性、介面滿意度上均有顯著差異。本研究之結論提出以下在個人化入口介面的設計重點：
(1) 個人化入口操作流程規劃方面：由於個人化入口介面，基本上具有個人化設定、頁面、模組三層設定層級。設計開發者應注意彼此之間的對應邏輯關係，減少使用者在功能上的辨別，以及介面的操作路徑學習問題。
(2) 個人化介面中的入口模組設計方面：互動設計師應提供模組外觀上能夠高度的功能辨識程度，同時，對於個別模組的設定進入方式，應以集中式面板管理的概念。提供現有狀態檢視、設定區域、以及動作確認三個部分。
(3) 個人化入口操作錯誤預防：根據研究發現，現有的個人化入口樣本，設定動作的變動，皆是屬於即時預覽。使用者常常沒有察覺變動的狀態，亦沒有辦法有效掌握模組新增的狀態等等。因此在動作確認上，應設有視窗或是確認對話框來協助使用者確認工作進度。

Abstract
Because of the rapid development of World Wide Web (WWW), humans do things, such as learning, working, entertaining and communicating, all can make use of the Internet. This makes the design issue that the usability of web interface becomes more important. Also because current research related to Web 2.0 usability is limited, this study not only collects the representative samples of widgets, but also searches for relevant research studies regarding personal portal. In addition to the investigation of representative samples, experts’ viewpoints pertinent to user interface research and personalization of portals were also collected. A series of systematic research steps related to theory explorations and prototype testing were conducted in this study.
The experiments conducted in this study are divided into three stages. At the first stage, by means of questionnaire survey and in-depth interview, current the visualization and interaction flow pertaining to sampled Web pages were analyzed. The results were used for the design of interaction prototype. At the second stage, two different personal portals, i.e., Netvibes and My Yahoo!, were compared based on users’ requirements. Users’ task performances were also recorded for further analysis. According to the results generated from the post hoc comparison, two factors, i.e., the screen layout and interaction flow, had great influences on users’ task performance, interface usability, and satisfaction. At the third stage, an innovative prototype of personal portal was created for the experimental purpose. A one-way ANOVA was conducted based on the main effect of interaction flow. The prototype was proven to provide better task performance, interface usability and satisfaction. The generated research findings regarding personal portal concluded that:
(1) The planning of interaction flow for personal portal: Because the personal portal possesses three issues, i.e., setting, Web screen, and modules, an interaction designer should consider the rationale among these three issues. By so doing can decrease users’ recognition process and enhance their path learning experience.
(2) The module design for personal portal: An interaction designer should provide easy-to-recognize functions for the personal portal. The setting of individual portal should be grouped in the same screen section. The functions of status inspection, setting area, and action confirmation should be provided as well.
(3) The error prevention for personal portal: Based on current research, the operation setting provided instant preview. However, users often could not perceive slight change and control the addition of new module. Therefore, a screen section or a dialog box should be used for action confirmation purpose.

目錄
中文摘要............................................................................................ii
英文摘要...............................................................iii
誌謝.......................................................................iv
目錄.......................................................................v
圖目錄...................................................................viii
表目錄...................................................................xi
第一章 緒論.........................................................1
1 研究背景與動機............................................1
2 研究問題........................................................2
3 研究目的........................................................2
4 研究流程........................................................3
5 研究範圍與限制............................................4
6 研究使用量表.......................................................5
6.1 系統使用性尺度量表...............................................5
6.2 使用者互動滿意度量表.............................................5
第二章 文獻探討........................................................7
1 Web2.0環境下的介面設計與技術變革...................................7
1.1 何謂 Web2.0......................................................7
1.2 Web2.0觀念影響...................................................8
2 Web2.0網站介面設計.................................................11
2.1.1 焦點社群.......................................................12
2.1.2 知識分享.......................................................12
2.1.3 個人化首頁.....................................................16
2.1.4 免費軟體工具式網站.............................................17
2.2 Web2.0應用技術...................................................19
2.2.1 AJAX...........................................................19
2.2.2 CSS 與 XML…...................................................21
2.2.3 Java...........................................................22
2.2.4 RSS............................................................22
2.2.5 網路書籤.......................................................22
2.2.6 焦點搜尋.......................................................24
2.2.7 視覺化資訊處理.................................................24
3 部落格.............................................................28
3.1 部落格的定義.....................................................28
3.2 部落格的介面設計.................................................29
3.3 部落格的未來發展.................................................30
4 Widget介面設計.....................................................32
4.1 Widget 應用與設計................................................34
4.2 模組化概念.......................................................36
4.3 系統平台的Widget應用.............................................36
4.4 網路下載的Widget應用.............................................38
4.5 瀏覽器的Widget應用...............................................40
4.6 部落格的Widget應用...............................................44
4.7 電子裝置的Widget應用.............................................47
5 互動設計...........................................................51
5.1 互動設計程序.....................................................51
5.2 圖像使用者介面...................................................52
5.3 使用者中心設計...................................................53
5.4 介面使用性.......................................................55
5.5 介面愉悅性.......................................................57
6 介面操作指引.......................................................58
7 使用者經驗研究.....................................................62
8 使用者概念模式.....................................................64
9 錯誤與回饋.........................................................64
10 認知心理..........................................................65
11 電腦焦慮..........................................................66
12 UML觀念之於介面設計...............................................67
13 文獻探討結論......................................................70
第三章 研究方法........................................................71
1 研究主題與實驗流程.................................................73
2 研究進行步驟.......................................................73
3 問卷編製...........................................................74
4 受測對象...........................................................74
5 抽樣方法...........................................................74
第四章 現況分析........................................................75
1 第一階段:Widget現況分析............................................75
1.1 Widget 樣本分析..................................................78
1.1.1 系統輔助工具類.................................................78
1.1.2 桌面美化工具類.................................................79
1.1.3 網路搜尋工具類.................................................80
1.1.4 生活資訊工具類.................................................80
2 樣本分析小結.......................................................81
3 專家訪談...........................................................82
3.1 入口網站對於Web2.0的應用.........................................85
3.2 開發Widget的目的.................................................85
3.3 桌面網路化的趨勢.................................................86
4 Widget實作與探討...................................................87
4.1 桌面經驗Widget...................................................87
4.2 網路瀏覽Widget...................................................90
4.3 日常生活Widget...................................................92
5 第二階段:個人化入口介面現況分析....................................94
5.1 個人化入口介面的演進.............................................94
5.1.1 iGoogle 服務簡介...............................................97
5.1.2 Netvibes 服務簡介.............................................102
5.1.3 My Yahoo! 服務簡介............................................106
5.2 iGoogle、Netvibes、My Yahoo! 綜合分析比較.......................108
5.3 相關領域專家問卷分析............................................110
5.4 問卷分析-個人化入口介面功能需求.................................110
5.5 問卷分析-個人化入口使用行為歸納.................................114
6 訪談分析..........................................................112
第五章 個人化入口介面設計與評估.......................................116
1 介面設計目的......................................................116
2 介面評估目的......................................................116
3 介面設計理論依據..................................................116
4 受測對象..........................................................116
5 個人化介面評估內容................................................117
6 實驗樣本設計......................................................117
7 任務設定..........................................................120
7.1 任務流程說明....................................................120
7.1.1 介面-Netvibes 組任務..........................................120
7.1.2 介面-My Yahoo 組任務..........................................121
8 實驗結果與討論....................................................122
8.1 受測者基本資料分析結果..........................................122
8.2 執行任務說明....................................................122
8.2.1 個人化設定任務操作............................................125
8.2.2 新聞模組任務操作..............................................126
8.2.3 郵件模組任務操作..............................................127
8.2.4 輔助功能任務操作..............................................128
8.3 系統使用性尺度量表分析..........................................129
8.4 使用者介面滿意度問卷分析-整體反應...............................131
8.5 使用者介面滿意度問卷分析-網頁呈現...............................132
8.6 使用者介面滿意度問卷分析-介面遣詞與介面資訊.....................134
8.7 使用者介面滿意度問卷分析-學習...................................134
8.8 使用者介面滿意度問卷分析-軟體效能...............................136
9 小結..............................................................137
第六章 設計原型實驗討論與分析.........................................138
1 實驗原型設計......................................................137
2 任務流程說明......................................................142
3 執行任務時間與績效分析............................................143
4 系統使用性尺度量表分析............................................147
5 使用者介面滿意度問卷分析..........................................149
6 小結..............................................................150
第七章 結論與建議.....................................................152
1 研究結論..........................................................152
2 後續研究發展建議..................................................155

參考文獻..............................................................156
英文部分..............................................................156
中文部分..............................................................157

附錄..................................................................160
個人化入口介面需求評估量表............................................160
第一階段個人化入口介面設計相關領域專家問卷............................164
第一階段個人化入口介面任務實驗問卷....................................165
第二階段測試原型實驗問卷..............................................169
系統使用性尺度量表....................................................171
介面滿意度量表........................................................172
iGoogle、Netvibes、My Yahoo!專家訪談逐字稿............................173

                                

參考文獻
英文部分
1. Blood, R. (2004). How blogging software reshapes the online community. Communications of the ACM.
2. Brown, D., M. (2006). Communicating Design: Developing Web Site Documentation for Design And Planning, CA：Macmillan Computer Pub.
3. CARBON IQ. (2005). From http://www.stcsig.org/usability/topics/personas.html
4. Debbie, S., Caroline, J. , Mark, W., Shailey, M.(2005). User interface Design and Evaluation, Elsevier.
5. Digg visual charts (2007). From http://labs.digg.com/bigspy/, http://labs.digg.com/stack/, http://labs.digg.com/swarm/
6. Free Group (2007). From http://www.freegroup.org/snap_shots
7. Flock Widget (2007). From http://flickr.com/photos/37186385@N00/436032441
8. Garrett, J.J. (2002). The Elements of User Experience： User-Centered Design for the Web，New Riders.
9. Go2Web2.0 (2007). From http://www.go2Web20.net/
10. Jordan, P. W. (2001). Pleasure with products：The new human factors. In Vaymann, K. & Thomas, B. (Eds.). User interface Design for Electronic Appliances. London：Taylor and Francis.
11. Meniam-Webster. (2004). http://www.merriam-Webster.com/info/04words.htm
12. Merrian-Webmaster. (2004). From
http://www.merriam-Webmaster.com/info/04woeds.htm
13. Nielsen, J. (2003). Usability 101：Introduction to Usability. from http://www.uesit.com/alertbox/20020825.html
14. Norman, D. A. (2003). Emotional Design：Why we love (or hate) every things.New York：Basic books.
15. Nielsen, J. (2005). Webblog Usability：The top ten design mistakes. from
http:www.useit.com/alertbox/Weblogs.html
16. Nielsen, J. (2005). Webblog Usability：The top ten design mistakes. from
http:www.useit.com/alertbox/9065.html
17. Opera Widge (2007). From http://Widgets.opera.com/
18. QUIS (2006) from http://lap.umd.edu/quis/
19. Thovtrup, H., & Nielsen, J. (1991). Assessing the Usability of User Interface Standard.. from http:www.useit.com/
20. Widgetbox (2007). From http://www.Widgetbox.com/
21. Yahoo! Widget (2006). From http:// Widget.yahoo.com/
22. Yahoo! Talent show (2007). From http://talentshow.yahoo.com/

中文部分
23. Elliot, A., Timothy D.W., Robin, M. A.，李茂興、余伯泉譯，(1995)，社會心理學(Social Psychology)，台北：宏智文化。
24. Norman, D. A.（2000），卓耀宗譯，設計心理學─以使用者為中心、安全易用的日常生活用品設計原理，台北：遠流出版。
25. Ray, E. T. ，陳建勳譯，（2001），XML學習手冊，台北：歐萊禮出版。
26. Kendall, S. , Martion, F.，郭惠民譯，(2001)，認識UML，台北：台灣培生出版教育股份有限公司。
27. Sinan, S. A. 黃莉雯譯（2003），UML 學習手冊，台北：歐萊禮出版。
28. 李美蓉，(2003)，視覺藝術概論，台北：雄獅圖書股份有限公司。
29. 梁玉芳，(2003)，Blog 網路鮮貨，你「部落格」了沒?，2003，09，21，聯合報。
30. 許勝雄、彭游、吳水丕，（2006），人因工程，台北：滄海書局。
31. Tidwell, J. ，蔡學鏞譯，(2006)，操作介面設計模式，台北：歐萊禮出版。
32. Mahemoff, M. ，楊仁和譯，(2006)，Ajax設計模式，台北：歐萊禮出版。
33. Meyer, E. A. ，莊惠淳譯，(2006)，CSS 大全，台北：歐萊禮出版。
34. 陳建雄，(2006)，互動設計，台北：全華科技圖書股份有限公司。
35. 陳烜之，陳一平，葉素鈴，(2007)，認知心理學，台北：五南圖書。
36. 賈蓉生、胡大源、林金池，（2007），Java概論與實作--基礎入門程式，台北：碁峰。
37. 魏澤群，（2007），優使性 Usability 2.0，台北：網亦資訊。
38. 湯惠誠，(1994)，高雄市高中生電腦態度及其相關因素之研究，國立高雄師範大學工藝教育研究所碩士論文。
39. 蕭銘宏，(1997)，全球資訊網操作介面之研究-以台灣地區網頁設計為例，國立雲林科技大學工業設計研究所碩士論文。
40. 黃成永，（2001)，虛擬實境介面模式於智慧型IA產品設計之效益研究，國立成功大學工業設計研究所碩士論文。
41. 蕭世文，（2001），網頁介面使用性之探討與意象之研究，國立成功大學工業設計研究所碩士論文。
42. 黃郁雯，(2003)，電腦自我效能、電腦經驗及他人支持三者與電腦態度及電腦焦慮之關係，國立政治大學心理學系學士論文。
43. 鍾秉華，(2003)，電子書導覽介面設計研究 ─ 以多媒體百科全書為例，國立台灣科技大學設計研究所碩士論文。
44. 洪千惠，（2003），研究生實務社群與建置之研究-以台科大研究生為例，國立台灣科技大學設計研究所碩士論文。
45. 邱柏清，(2004)，網頁介面愉悅性之研究，國立台灣科技大學設計研究所碩士論文。
46. 蔡佳穎，(2004)，使用者介面愉悅性之研究 ─ 以兒童藝術類學習網站為例，國立台灣科技大學設計研究所碩士論文。
47. 饒光裕，(2004)，顧客關係管理與建立虛擬社群成員忠誠度關係之研究，大葉大學國際企業管理學研究所碩士論文。
48. 林怡君，(2006)，Weblog使用者介面之個人化設計探討，國立台灣科技大學設計研究所碩士論文。
49. 黃昱仁，(2006)，隱喻與愉悅性於數位設計博物館網頁設計，國立台灣科技大學設計研究所碩士論文。
50. 黃宗文、蔡明陽、郭薰璟、林佳玟、陳唯菁，(2006)，社團活動安排個人Widgets主動式網站製作，東南技術學院資訊管理系畢業專題。
51. 創市際市場研究顧問股份有限公司，（2005），部落格使用行為調查，from http://tw.news.yahoo.com/article/url/d/a/070927/1/l8yu.html
52. 創市際市場研究顧問股份有限公司，（2005），部落格使用狀況。
53. 創市際市場研究顧問股份有限公司，（2005），社群服務使用狀況。
54. 創市際市場研究顧問股份有限公司，（2006），網友部落格到達統計。
55. 維基百科（2006），什麼是Web2.0，from http://zh.wikipedia.org/w/index.php?title=Web2.0&variant=zh-tw
56. 維基百科（2006），什麼是RSS，from
http://zh.wikipedia.org/wiki/RSS
57. 維基百科(2006)，什麼是CSS，from
http://zh.wikipedia.org/w/index.php?title=CSS&variant=zh-tw
58. 李易修，（2007），Furl，網路書籤，from
http://www.lis186.com/?p=1214
59. 劉威麟，(2007)，有誠意的插件時代即將來臨？漫談「一插即亮」，from
http://mr6.cc/?p=948
60. 劉威麟，(2007)，PV退休、WV攪局，最棒的網站排行榜在哪？，from
http://mr6.cc/?p=959
61. 電子工程專輯，(2007)，在觸控式螢幕人機介面設計中整合觸覺回饋功能，from
http://www.eettaiwan.com/ART_8800468601_644847_TA_214f6a26.HTM
62. 黃彥達，(2007)，互聯網經濟的典範移轉，from http://www.digitalwall.com/scripts/display.asp?UID=388

簡易檢索 / 詳目顯示

相關論文