1 / 67

User Interfaces

User Interfaces. Outline. Introduction Interface Design Principles: An Overview Interface Design Rules Interfaces for Digital Libraries Interface Developments Interfaces for Specific User Communities Cultures and Interface Design Interface Evaluation Information Architecture.

sera
Télécharger la présentation

User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User Interfaces

  2. Outline • Introduction • Interface Design Principles: An Overview • Interface Design Rules • Interfaces for Digital Libraries • Interface Developments • Interfaces for Specific User Communities • Cultures and Interface Design • Interface Evaluation • Information Architecture

  3. Introduction • Dillon (2002) • How do we attract users to our resources, and make them stay? • What will bring a user back to our resources again? • How do I build an interface that supports a richer comprehension or appreciation of the contents? • What makes material more learnable by users? • Can novices learn from viewing an expert’s construction of an information space?

  4. Interface Design Principles: An Overview

  5. Users • All design should begin with an understanding of the intended users, including • Population profiles that reflect age, gender, physical abilities, education, cultural or ethnic background, training, motivation, goals, and personality

  6. Galitz’s UI Design Principles (2002) • Aesthetically pleasing and attractive to the eye, as interactions primarily are in the visual realm • Visually, conceptually and linguistically clear and unambiguous • Compatible with the user and the task, and compatible with any earlier versions of the system, or any other similar kinds of system • Comprehensible, that is, easily learned and understood • Configurable, that is, easy to personalize, configure, and re-configure

  7. Galitz’s UI Design Principles (續) • Consistent in the sense of looking and acting in the same way throughout; the same action should always give the same result • Controllable by the user, so that actions result from explicit user requests, are performed quickly, and are interruptible; the user should feel in charge • Direct in the ways in which tasks are accomplished; the effect of actions on objects should be visible • Efficient, by minimizing eye and hand movements

  8. Galitz’s UI Design Principles (續) • Familiar, by using concepts and language that users should know, using real-world metaphors, and building upon users’ existing knowledge • Flexible to the differing needs of users (in terms of their knowledge and skills, experience, personal preferences, and habits) • Forgiving of common and unavoidable human errors; preventing errors whenever possible; and providing constructive messages in case of errors • Predictable on the part of users who should be able to anticipate the natural progression of each task

  9. Galitz’s UI Design Principles (續) • Recoverable by allowing reversible actions • Responsive to user requests, with visual, textual, or auditory acknowledgement • Simple • Transparent, so that the workings inside the computer remain invisible to users

  10. Galitz’s UI Design Principles (續) • Trade-offs • The best practice is one that is not noticed, one that permits the user to focus on the information and task at hand, not the mechanisms used to present the information and perform that task • Vivid color, attention-grabbing icons, intricate screen layout is not the first priority

  11. Interfaces for Digital Libraries

  12. Overview • Should consider the tasks to be accomplished, and the kinds of users who will be involved • Why do individual digital library interfaces differ? • Various content – vary in size, subject matter, linguistic and cultural characteristics • Vary in the technology platforms – Web, PDA, mobile telephone • Different user community or communities • Art as well as a science to interface design

  13. http://cdl.library.cornell.edu/ http://everglades.fiu.edu/ Content Overview

  14. http://www.clevelandmemory.org/postcards/ http://spec.lib.vt.edu/archives/blackhistory/timeline/ Searching and Browsing

  15. Search Interface Simple things should be simple, complex things should be possible Simple Advanced

  16. Display of Retrieved Information • Retrieved information must be displayed so that users are able to select what is relevant • As accurately and easily as possible by users • Result list • Title display, image display • Full text

  17. http://nzdl.sadl.uleth.ca/cgi-bin/library Display of Retrieved Information (Cont.)

  18. Browsing an Alphabetical List of Titles

  19. Browsing A Classification Hierarchy

  20. Browsing A Classification Hierarchy (Cont.)

  21. Personalization • MyLibrary@NCState: Create a user’s own personal Web interface • MyGateway at the University of Washington: Let users organize frequently used Web resources in a similar way to bookmarking • New Zealand Digital Library • Language option, graphical or textual format

  22. Language Personalization, NZDL

  23. Help • FAQ • Virtual tour • Information on search strategies and technical requirements to access a DL

  24. Interface Development

  25. Key Issues • Display of information, visualization and navigation of large information collections • Avoid Inconsistently arranged screens, poorly depicted buttons and icons, technical terms and jargon • Broad and shallow structures (instead of narrow and deep) • Information visualization: the use of computer-supported, interactive, visual representations of abstract data to amplify cognition (acquisition or use of knowledge)

  26. AquaBrowser

  27. Vivisimo

  28. Information Visualization

  29. Interfaces for Specific User Communities

  30. Interfaces for Young Users • Young children are being forced to negotiate interfaces that requires typing, spelling and reading skills, or necessitate an understanding of abstract concepts or content knowledge that are beyond their still developing abilities • International Children’s Digital Library (ICDL) • Colorful icons to represent subjects • Large icons displayed at the top of the screen that are easy for young children to spot and to position the cursor over

  31. ICDL http://www.childrenslibrary.org/

  32. Interfaces for Users with Visual Handicaps • Employ larger and regular fonts (no italic font) • Certain kinds of fonts such as Arial or Helvetica that use a proportionally spaced sans serif are easier to read • Non-justified text is easier to track down a page than justified • NIH SeniorHealth: large print with short, easy to read segments of information together with a spoken word alternative version • Careful color selection (and monochrome version) • Electronic magnifier program • Pure text version

  33. http://nihseniorhealth.gov/ NIH SeniorHealth

  34. Cultures and Interface Design • Images (policeman…) and icons • Humorous comments • Color (red / green) • Paper size (A4 (UK), Letter (US)) • Placing an x in a box (activate ? deactivate ?) • Date representation

  35. Logical User-Centered Interactive Design Methodology • Six stages • Develop product concept • Create concept, set up design team. • Identify user population, technical and environment issues, produce staff plan, schedule and budget • Perform research and needs analysis • Design prototype and conduct usability tests • Complete design into a full system and conduct full-scale usability tests • Implement software • Provide training and assistance • Evaluate

  36. Evaluation • Interview with individual users and focus group to assess the interface’s functionality, reliability, clarity and overall satisfaction from the users’ perspective • Usage log • Online suggestion boxes • Online bulletin boards

  37. Five Evaluation Criteria • The time it takes to learn how to use the interface properly • The speed at which the interface performs actions requested by the user • The rate of errors committed by users at the interface • The ease with which users can remember the interface and its features from one session to the next session • The level of individual satisfaction that users derive from their experience with the interface

  38. 資訊架構與網站設計

  39. 資訊架構(Information Architecture) • Information architecture (also known as IA) is the foundation for great Web design • Blueprint of the Web site – form, function, metaphor, navigation and interface, interaction, and visual design • Following the IA process, you will have the template for a complete IA design document

  40. 何謂資訊架構 • 資訊系統中，組織、歸類以及瀏覽體系的組合結構 • 資訊空間中的結構性設計，讓任務的完成更容易，對資訊內容的存取更直接 • 設計網站和企業網路的結構與分類的藝術和科學，可以協助我們尋找資訊並予以管理 • 讓人們可以實際找到他們要找的東西。資訊架構師有如網際網路的圖書館員 • 為人們使用資訊超載的問題 • 一種新興的實務學科和社群，目的是把設計和架構的原則帶進數位領域中

  41. 資訊架構三圓圈 商業目標、資金、政治、文化、科技、資源、限制 情境 內容 用戶 文件/資料類型、內容物件、數量、現存架構 群眾、任務、需求、資訊尋求行為、經驗

  42. 資訊架構四元件 • 組織系統 • 如何組織資訊。依年代？依主題？ • 標籤命名系統 • 如何表示資訊。科學術語？通俗術語？ • 導覽系統 • 如何瀏覽資訊。階層式點選？ • 搜尋系統 • 如何搜尋資訊。索引系統？

  43. 另一種角度看資訊架構的元件 • 瀏覽幫手 • 組織系統 (Organization System) • 全站導覽系統 (Site-wide Navigation Systems) • 區域導覽系統 (Local Navigation Systems) • 網站地圖／目錄 (Sitemaps/Table of Contents) • 網站索引 (Site Index) • 網站指南 (Site Guides) • 網站精靈 (Site Wizards) • 情境式鏈結系統 (Contextual Linking Systems)

  44. Site Directory

  45. Site Index

  46. 另一種角度看資訊架構的元件 (續) • 搜尋幫手 • 搜尋介面 (Search Interface) • 查詢語言(Query Language) • 檢索演算法 (Retrieval Algorithms) • 搜尋區域 (Search Zones) • 搜尋結果 (Search Results)

  47. 另一種角度看資訊架構的元件 (續) • 內容和任務 • 標題 (Headings) • 內嵌式鏈結 (Embedded Links) • 內嵌式詮釋資料 (Embedded Metadata) • 成塊資料 (Chunks) • 清單 (Lists) • 循序式幫手 (Sequential Aids) • 識別符號 (Identifiers)

  48. 另一種角度看資訊架構的元件 (續) • 隱藏的元件 • 控制詞彙 (Controlled Vocabulary) • 索引典 (Thesauri) • 規則集 (Rule Sets)

  49. IA Processes • Define the site’s goals • Audience and competitors • Site content • Site structure • Visual design

More Related