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

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?

Interface Design Principles: An Overview

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

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

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

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

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

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

Interfaces for Digital Libraries

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

Content Overview

http://cdl.library.cornell.edu/

http://everglades.fiu.edu/

Searching and Browsing

http://www.clevelandmemory.org/postcards/

http://spec.lib.vt.edu/archives/blackhistory/timeline/

Search Interface

Simple Advanced

Simple things should be simple, complex things should be possible

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

Display of Retrieved Information (Cont.)

http://nzdl.sadl.uleth.ca/cgi-bin/library

Browsing an Alphabetical List of Titles

Browsing A Classification Hierarchy

Browsing A Classification Hierarchy (Cont.)

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

Language Personalization, NZDL

Help

• FAQ• Virtual tour• Information on search strategies and technical requirements

to access a DL

Interface Development

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)

AquaBrowser

Vivisimo

Information Visualization

Interfaces for Specific User Communities

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

ICDL

http://www.childrenslibrary.org/

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 p

roportionally spaced sans serif are easier to read• Non-justified text is easier to track down a page than justifie

d• NIH SeniorHealth: large print with short, easy to read segme

nts of information together with a spoken word alternative version

• Careful color selection (and monochrome version)• Electronic magnifier program• Pure text version

NIH SeniorHealthhttp://nihseniorhealth.gov/

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

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

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

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

資訊架構與網站設計

資訊架構 (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

何謂資訊架構

• 資訊系統中，組織、歸類以及瀏覽體系的組合結構• 資訊空間中的結構性設計，讓任務的完成更容易，對資訊內

容的存取更直接• 設計網站和企業網路的結構與分類的藝術和科學，可以協助

我們尋找資訊並予以管理– 讓人們可以實際找到他們要找的東西。資訊架構師有如網際網路的圖

書館員– 為人們使用資訊超載的問題

• 一種新興的實務學科和社群，目的是把設計和架構的原則帶進數位領域中

資訊架構三圓圈

情境

內容 用戶

商業目標、資金、政治、文化、科技、資源、限制

文件 / 資料類型、內容物件、數量、現存架構

群眾、任務、需求、資訊尋求行為、經驗

資訊架構四元件

• 組織系統– 如何組織資訊。依年代？依主題？

• 標籤命名系統– 如何表示資訊。科學術語？通俗術語？

• 導覽系統– 如何瀏覽資訊。階層式點選？

• 搜尋系統– 如何搜尋資訊。索引系統？

另一種角度看資訊架構的元件

• 瀏覽幫手– 組織系統 (Organization System)– 全站導覽系統 (Site-wide Navigation Systems)– 區域導覽系統 (Local Navigation Systems)– 網站地圖／目錄 (Sitemaps/Table of Contents)– 網站索引 (Site Index)– 網站指南 (Site Guides)– 網站精靈 (Site Wizards)– 情境式鏈結系統 (Contextual Linking Systems)

Site Directory

Site Index

另一種角度看資訊架構的元件 ( 續 )

• 搜尋幫手– 搜尋介面 (Search Interface)– 查詢語言 (Query Language)– 檢索演算法 (Retrieval Algorithms)– 搜尋區域 (Search Zones)– 搜尋結果 (Search Results)

另一種角度看資訊架構的元件 ( 續 )

• 內容和任務– 標題 (Headings)– 內嵌式鏈結 (Embedded Links)– 內嵌式詮釋資料 (Embedded Metadata)– 成塊資料 (Chunks)– 清單 (Lists)– 循序式幫手 (Sequential Aids)– 識別符號 (Identifiers)

另一種角度看資訊架構的元件 ( 續 )

• 隱藏的元件– 控制詞彙 (Controlled Vocabulary)– 索引典 (Thesauri)– 規則集 (Rule Sets)

IA Processes

• Define the site’s goals• Audience and competitors• Site content• Site structure• Visual design

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?

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

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

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

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

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

Competitive Analysis

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

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

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

Site Structure Hierarchy

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

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)

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

Layout Grid

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

參考文獻

• 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. http://www.webmonkey.com/design/site_building/tutorials/tutorial1.html

• Shneiderman, B. (1998) Design the User Interface: Strategies for Effective Human-Computer Interaction. 3rd ed. Reading, MASS: Addison-Wesley.