網站優使性 Usability - 2011 Simon Asika

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

Transcript

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

   View Slide

2. OUTLINE
   2
   
   前言
    通用性設計
    網頁親和力
   
   Usability
    需求分析
    行為設計
    資訊設計
    互動設計
    優使性評估
    使用文件
   
   其他
    理論與實踐
    結語
   
   優秀網站
   
   參考文獻
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. Usability
   譯：優使性、好用性、可用性、易用性
    易於使用
    容易學習
    能滿足使用者
   Rosson, Mary Beth, Carroll, John M (2002), Usability engineering : scenario-based development of human-
   computer interaction, San Fancisco : Academic Press
   9
   

   View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

13. Analyzing Requirements
    13
    
    譯：需求分析
    
    當一個專案新開始或需要更新時，用以了解客
    戶期望並進行規劃的工作。
    
    經過一定次數的研究、討論、測試，最終會成
    為一份需求功能文件，以供開發者參考。
    Rosson, Mary Beth, Carroll, John M (2002), Usability engineering : scenario-based development of human-
    computer interaction, San Fancisco : Academic Press
    

    View Slide

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
    

    View Slide

15. Actitivy Design
    15
    

    View Slide

16. Actitivy Design
    16
    

    View Slide

17. Information design
    譯：資訊設計、訊息視覺化設計
     以簡潔、有效的方式，呈現資訊的樣貌。讓複雜的
    資訊可以被一目了然。
    Rosson, Mary Beth, Carroll, John M (2002),
    Usability engineering : scenario-based
    development of human-computer interaction,
    San Fancisco : Academic Press
    17
    

    View Slide

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
    

    View Slide

19. Infographics
    19
    

    View Slide

20. Information design
    • Information Architecture（資訊架構）
     Information(資訊)：人們傳遞知識與訊息的過程
     Architecture(建築學)：建築物的設計，不僅只表面與外觀，包含整
    個建築的內部與動線、展現精神等
    
    分享資訊的環境
     用於程式、網站、分類架構等等的一門科學與藝術
     在數位領域發展中的一種設計與架構原則
    Morrogh, Earl (2003). Information architecture : an emerging 21st century profession,
    Upper Saddle River, NJ : Prentice Hall
    20
    

    View Slide

21. Information design
    • Information Architecture（資訊架構）
    也就是 Information Design 過程中，
    所使用的科學性方法與原則。
    •
    含有：搜尋、查找、文件、導引、介面、展示、管理、
    評估 等等各個面相。
    Morrogh, Earl (2003). Information architecture : an emerging 21st century profession,
    Upper Saddle River, NJ : Prentice Hall
    21
    

    View Slide

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
    

    View Slide

23. Interaction Design
    23
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

27. 其他
    
    Scenario - 腳本、規劃
    
    User Experience - 使用者經驗
    
    Usability test - 優使性測驗
    
    Redesign - 重新設計、重構
    優使性也是眾多學問的綜合
    27
    

    View Slide

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
    

    View Slide

29. 結語1 怎麼樣才算有優使性
    29
    
    不受平台、時空、身份影響，系統都應該要發揮功
    能。
    
    目的導向，最終必須完成使用者的目的，或是協助
    使用者解決問題才是好設計。
    
    可摸索、可學習、可查詢。適用多數族群，降低適
    應曲線。
    
    適當反饋與指引，讓使用者不迷路、不徬徨。
    

    View Slide

30. 結語2 設計者該如何建立優使性
    30
    
    事先精細規劃的操作動線與反饋，才能提供優良的
    使用者經驗（就像建築動線規劃一樣）
    
    善用腳本(Scenario)規劃文件，與客戶、工程師溝通
    或後續評估皆有效果。
    
    起頭時確實做好需求分析、資訊架構，避免朝錯誤
    方向前進太多。
    
    測試(Test)、重構(Redesign)、指南(Guide)，讓系統
    更臻完美。
    

    View Slide

31. 優秀網站蒐集
    31
    

    View Slide

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
    

    View Slide