網站優使性 Usability - 2011 Simon Asika

Transcript

1. 網站優使性 USABILITY 2011 – Simon Asika 1

2. OUTLINE 2  前言  通用性設計  網頁親和力  Usability

    需求分析  行為設計  資訊設計  互動設計  優使性評估  使用文件  其他  理論與實踐  結語  優秀網站  參考文獻

3. 前言 當資訊行為發生在虛擬空間時 操作介面是我們唯一的溝通管道 3

4. 前言  網站與人機介面的特性  間接操作不直覺  透過操作介面控制（滑鼠、鍵盤）  透過顯示裝置查看（螢幕） 

   卻是與資訊系統溝通的唯一管道 Panayiotis Zaphiris, R. Darin Ellis (2001), Website Usability and Content Accessibility of the top USA Universities, Proceedings of WebNet 2001 - World Conference on the WWW and Internet, Orlando, Florida, October (23-27, 2001) 4

5. 前言  這些特性對使用者造成的影響  身障者與年長者不易操作  需要訓練  時代變遷 

   人口年齡層老化  身障者族群依舊有固定數量  網路對日常生活便利性越來越重要 Panayiotis Zaphiris, R. Darin Ellis (2001), Website Usability and Content Accessibility of the top USA Universities, Proceedings of WebNet 2001 - World Conference on the WWW and Internet, Orlando, Florida, October (23-27, 2001) 5

6. 前言  如何提高使用者操作便利性 Universal Design (通用設計 or 共用性設計) Web Accessibility

   (網頁親和力) Panayiotis Zaphiris, R. Darin Ellis (2001), Website Usability and Content Accessibility of the top USA Universities, Proceedings of WebNet 2001 - World Conference on the WWW and Internet, Orlando, Florida, October (23-27, 2001) 6

7. Universal Design  universal design refers to the design of

   products and environments that are usable by all people. 譯：通用性設計  讓操作介面的設計可以適用於 所有使用者，無需重新學習 Panayiotis Zaphiris, R. Darin Ellis (2001), Website Usability and Content Accessibility of the top USA Universities, Proceedings of WebNet 2001 - World Conference on the WWW and Internet, Orlando, Florida, October (23-27, 2001) 7

8. Web Accessibility  Web Accessibility 譯：網頁親和力  所有電腦與瀏覽器皆能正常訪問網站  能夠清楚了解網站如何操作並了解所呈現的內容架構

    Universal design 在網站設計上的延伸 Panayiotis Zaphiris, R. Darin Ellis (2001), Website Usability and Content Accessibility of the top USA Universities, Proceedings of WebNet 2001 - World Conference on the WWW and Internet, Orlando, Florida, October (23-27, 2001) 8

9. Usability 譯：優使性、好用性、可用性、易用性  易於使用  容易學習  能滿足使用者 Rosson, Mary

   Beth, Carroll, John M (2002), Usability engineering : scenario-based development of human- computer interaction, San Fancisco : Academic Press 9

10. Usability  最早來自程式介面、軟體工程還有GUI的設計理 論。  Windows, Mac, Linux, iPhone, Andorid

    等等百家爭 鳴  隨著網路的重要性提高，網頁設計開始慢慢導 入 Usability Engineering Rosson, Mary Beth, Carroll, John M (2002), Usability engineering : scenario-based development of human- computer interaction, San Fancisco : Academic Press 10

11. 優使性 Usability Usability Universal Design Web Accessibility User Experience Information

    Design Information Architecture 11

12. Usability  如何進行優使性設計 Analyzing Requirements Actitivy Design Information Design Interaction

    Design Usability Evaluation User Documentation 需求分析 行為 設計 資訊 設計 互動 設計 優使性 評估 操作手冊 Rosson, Mary Beth, Carroll, John M (2002), Usability engineering : scenario-based development of human- computer interaction, San Fancisco : Academic Press 12

13. Analyzing Requirements 13  譯：需求分析  當一個專案新開始或需要更新時，用以了解客 戶期望並進行規劃的工作。  經過一定次數的研究、討論、測試，最終會成

    為一份需求功能文件，以供開發者參考。 Rosson, Mary Beth, Carroll, John M (2002), Usability engineering : scenario-based development of human- computer interaction, San Fancisco : Academic Press

14. Actitivy Design 譯：行為設計  使用者的操作動線  “穿著西裝的男士，回家總是先脫西裝外套，再脫褲子，但實驗 證明，這樣的順序很難把衣服和褲子掛好在同一個衣架上；比較 方便的方式，是把順序反過來，但一般人很少這麼做，因為上半 身著衣、下半身未著褲，會讓人覺得不自在。”

    村田智明 （2007） Rosson, Mary Beth, Carroll, John M (2002), Usability engineering : scenario-based development of human- computer interaction, San Fancisco : Academic Press 14

15. Actitivy Design 15

16. Actitivy Design 16

17. Information design 譯：資訊設計、訊息視覺化設計  以簡潔、有效的方式，呈現資訊的樣貌。讓複雜的 資訊可以被一目了然。 Rosson, Mary Beth, Carroll,

    John M (2002), Usability engineering : scenario-based development of human-computer interaction, San Fancisco : Academic Press 17

18. Information design  事先了解所有的 Information ，有助於後續設計。 運用心智圖有更佳效果。 Rosson, Mary Beth,

    Carroll, John M (2002), Usability engineering : scenario-based development of human-computer interaction, San Fancisco : Academic Press 18

19. Infographics 19

20. Information design • Information Architecture（資訊架構）  Information(資訊)：人們傳遞知識與訊息的過程  Architecture(建築學)：建築物的設計，不僅只表面與外觀，包含整 個建築的內部與動線、展現精神等

     分享資訊的環境  用於程式、網站、分類架構等等的一門科學與藝術  在數位領域發展中的一種設計與架構原則 Morrogh, Earl (2003). Information architecture : an emerging 21st century profession, Upper Saddle River, NJ : Prentice Hall 20

21. Information design • Information Architecture（資訊架構） 也就是 Information Design 過程中， 所使用的科學性方法與原則。

    • 含有：搜尋、查找、文件、導引、介面、展示、管理、 評估 等等各個面相。 Morrogh, Earl (2003). Information architecture : an emerging 21st century profession, Upper Saddle River, NJ : Prentice Hall 21

22. Interaction Design 譯：互動式設計  Information Design 著重在如何彙整資訊、展示資 訊。  但同時間，還需要Interaction

    Design 確保使用者 了解自己能怎麼做，以及做出正確的決策與操 作。 Rosson, Mary Beth, Carroll, John M (2002), Usability engineering : scenario-based development of human-computer interaction, San Fancisco : Academic Press 22

23. Interaction Design 23

24. Usability Evaluation 譯：優使性評估  一個新系統設計出來的最初目的  用來測試我們的設計是否符合需求且有效 Richard Atterer, Monika

    Wnuk, Albrecht Schmidt (2006), Knowing the user's every move: user activity tracking for website usability evaluation and implicit interaction, Proceedings of the 15th international conference on World Wide Web 24

25. Usability Evaluation  有一些原則用來確保測試有效，例：  減少測試過程的不必要消耗  事前設定好測試機器與環境  盡可能一次測試一個使用者

     所有記錄必須綜合評估（眼睛、滑鼠軌跡、記錄等）  不要特別建置測試用機器或實驗室  建立不同情境的使用者 Richard Atterer, Monika Wnuk, Albrecht Schmidt (2006), Knowing the user's every move: user activity tracking for website usability evaluation and implicit interaction, Proceedings of the 15th international conference on World Wide Web 25

26. User Documentation  讓使用者隨時有參考與查詢的管道 26

27. 其他  Scenario - 腳本、規劃  User Experience - 使用者經驗

     Usability test - 優使性測驗  Redesign - 重新設計、重構 優使性也是眾多學問的綜合 27

28. 其他 理論部分 實踐部分 Usability 優使性 Scenario 腳本、規劃 Universal Design 通用設計

    Usability Evaluation 優使性評估 Information Design 資訊設計 User Documentation 使用手冊 Information Architecture 資訊架構 Infographics or Mindmap 圖表、心智圖 Activity Design 行為設計 User Interface Design (UI) 使用者介面 Interaction Design 互動設計 Interface Redesign 重構、重設計 User Experience 使用者經驗 Prototype 原形 Web Accessibility 網頁親和力 28

29. 結語1 怎麼樣才算有優使性 29  不受平台、時空、身份影響，系統都應該要發揮功 能。  目的導向，最終必須完成使用者的目的，或是協助 使用者解決問題才是好設計。 

    可摸索、可學習、可查詢。適用多數族群，降低適 應曲線。  適當反饋與指引，讓使用者不迷路、不徬徨。

30. 結語2 設計者該如何建立優使性 30  事先精細規劃的操作動線與反饋，才能提供優良的 使用者經驗（就像建築動線規劃一樣）  善用腳本(Scenario)規劃文件，與客戶、工程師溝通 或後續評估皆有效果。 

    起頭時確實做好需求分析、資訊架構，避免朝錯誤 方向前進太多。  測試(Test)、重構(Redesign)、指南(Guide)，讓系統 更臻完美。

31. 優秀網站蒐集 31

32. 參考文獻  Rosson, Mary Beth, Carroll, John M (2002), Usability

    engineering : scenario-based development of human-computer interaction, San Fancisco : Academic Press  Le Peuple, Jenny, Scane, Robert (2003), User interface design, Exeter, UK : Crucial  Morrogh, Earl (2003). Information architecture : an emerging 21st century profession, Upper Saddle River, NJ : Prentice Hall  Jonathan W Palmer(2002), Web site usability, design, and performance metrics, Information Systems Research; Jun 2002; 13, 2; BI/INFORM Global  Richard Atterer, Monika Wnuk, Albrecht Schmidt (2006), Knowing the user's every move: user activity tracking for website usability evaluation and implicit interaction, Proceedings of the 15th international conference on World Wide Web  Panayiotis Zaphiris, R. Darin Ellis (2001), Website Usability and Content Accessibility of the top USA Universities, Proceedings of WebNet 2001 - World Conference on the WWW and Internet, Orlando, Florida, October (23-27, 2001)  蔡維君（2006）。大學圖書館網站好用性評估—以臺灣大學圖書館網站為例。碩士論文。國立臺灣大學圖書資訊學研究所， 台北市。  Lei (2007)。村田智明：行為設計。NEW DESIGNWORLD 。網址： http://newdesignworld.wordpress.com/2007/12/18/%E6%9D%91%E7%94%B0%E6%99%BA%E6%98%8E%EF%BC%9A%E8%A1%8C%E7%82%BA%E 8%A8%AD%E8%A8%88/ 32