Presentation is loading. Please wait.

Presentation is loading. Please wait.

User Interfaces. Outline Introduction Interface Design Principles: An Overview Interface Design Rules Interfaces for Digital Libraries Interface Developments.

Similar presentations

Presentation on theme: "User Interfaces. Outline Introduction Interface Design Principles: An Overview Interface Design Rules Interfaces for Digital Libraries Interface Developments."— 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 Content Overview

14 Searching and Browsing

15 Search Interface SimpleAdvanced Simple things should be simple, complex things should be possible

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 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


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 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 資訊架構四元件 組織系統 – 如何組織資訊。依年代?依主題? 標籤命名系統 – 如何表示資訊。科學術語?通俗術語? 導覽系統 – 如何瀏覽資訊。階層式點選? 搜尋系統 – 如何搜尋資訊。索引系統?


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

45 Site Directory

46 Site Index

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

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

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

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

51 Define the Site’s Goals Determine who will be involved in defining the goals Ask questions – formal or informal –What is the mission or purpose of the organization? –What are the short- and long-term goals of the site? –Who are the intended audiences? –Why will people come to your site?

52 Define the Site’s Goals (Cont.) Filter the answers –Separate the answers about your intended audiences and save them for later –Rephrase the rest of the questions as goal and put them into a list If the list is too long, group the goals into categories –Rank each goal’s (and category’s) importance –Distill the goals into a master list (may give more weight to the opinions of important people) Approve the goals Design document – site goals –1. Goals

53 Audience and Competitors Define the audience –Use the initial list of intended audiences –Ask everyone to grow the list –Rank the importance of each audience –List the most important needs and goals for each audience –Rank the importance of each need and goal for each audience Create scenarios (stories) –Tell the tales of users experiencing the site –Scenarios will be important when defining the content and functional requirements of the site. –Help visualize the site and its users

54 Audience and Competitors (Cont.) Create scenarios (stories) (Cont.) –Useful in validating the site's design once it is finished If the scenarios match up with the actual design of the site, you did something right –For each user, write a scenario Bring the user to life: create a character for that user, and give him a name, a background, and a task to accomplish on the site. –Use a task from your list of audience needs and goals. Write a story about how the character uses the site to complete the given task

55 Audience and Competitors (Cont.) Competitive analysis –Make a list of your competition –Generate a set of features and criteria to evaluate each site –Start with your goals, using them as the basis for a set of features in your competitive analysis. –As you evaluate sites, be sure to add any features or functionality you find interesting. –Criteria include things like download time, page size, layout, and look and feel –Generate a competitor comparison list and document the results –You need to review the competitors’ site regularly

56 Audience and Competitors (Cont.) Design document: audience, scenarios, and competitive analysis –2. User Experience 2.1 Audience Definition 2.2 Scenarios 2.3 Competitive Analysis Summary Appendix A: Competitive Analysis

57 Competitive Analysis

58 Site Content Identify content and functional requirements –Lists of content elements and functional requirements –Types of content include static, dynamic, functional, and transactional –Have everyone create their own lists of desired content and incorporate them into your content list –Have everyone review this list in order to rank content –You now have what's called a "content inventory" –Using the content inventory, revise your list of functional requirements If the content inventory has pages for canceling purchases, the system had better be able to cancel purchases

59 Site Content (Cont.) Group and label content –Organize the content into groups and give each group a label –Repeat this process with everyone involved –Compare and contrast how each person organized the information Design Document - Content and Functions –3. Site Content 3.1 Content Grouping and Labeling 3.2 Functional Requirements –Appendix B: Content Inventory

60 Site Structure + Navigation System Site structure is a skeleton that holds the body together A well-designed structure makes it easy to define a navigation system  page layouts and templates Metaphor exploration –Organizational metaphors: snack, canned vegetables… –Functional metaphors: cut, copy, paste… –Visual metaphors: icons for play, stop, forward… Set it in stone: site structure listing

61 Site Structure Hierarchy

62 Site Structure + Navigation System (Cont.) Define navigation –Global navigation: major section. Appear on every page. 5-7 Use your branding as the link back to the homepage –Local navigation: list of topics, menu of choices related items –Example of Webmonkey "The global navigation device contains links to all the major sections of Webmonkey: design, HTML, dynamic HTML, etc." A local navigation definition for Webmonkey might be: "For a multi-part article, a list of links to each section appears at the end of each page. Use the title of a section as a link to that section. “

63 Site Structure + Navigation System (Cont.) Design document –4 Site Structure 4.1 Site Structure Listing (or Summary) 4.2 Architectural Blueprints 4.3 Global and Local Navigation Systems –Appendix C: Site Structure Listing (optional)

64 Visual Design Purposes: provide users with a sense of place. –They need to know where they are on the site, where they have been, and how to get to where they want to be –A good site structure combined with an effective visual design enables users to construct a mental map of the site Take the site's structure and map it onto the visual design Layout grid: templates that describe Web pages –Global and local navigation systems, branding, advertisement… –Take the site structure listing and make a list of all the possible page types

65 Layout Grid

66 Design Sketches and Page Mock-ups Design sketches: establish the look and feel of the site Page mock-ups: represent the actual site, by integrating the design sketches with the layout grids –Should be as close to the actual pages as possible –Use graphics program and/or HTML pages Design Document –5 Visual Design 5.1 Layout Grids 5.2 Design Sketches 5.3 Page Mock-ups 5.4 Web-based Prototype

67 參考文獻 Dillion, A. (2002) Technologies of Information: HCI and the Digital Library. In J. M. Carrol, ed. Human-Computer Interaction in the New Millenium. Boston: ACM Press, 457-474. Fernandes, T. (1995) Global Interface Design: a Guide to Designing International User Interfaces. Boston: Academic Press. Galitz, W. O. (2002) The Essential Guide to User Interface Design. 2nd ed. New York: Wiley. Rosenfeld, L. & Morville, P. (2002) Information Architecture for the World Wide Web. 2nd ed. O’Reilly. Shiple, J. Information Architecture Tutorial. Shneiderman, B. (1998) Design the User Interface: Strategies for Effective Human-Computer Interaction. 3rd ed. Reading, MASS: Addison-Wesley.

Download ppt "User Interfaces. Outline Introduction Interface Design Principles: An Overview Interface Design Rules Interfaces for Digital Libraries Interface Developments."

Similar presentations

Ads by Google