65
Digital Library User Interface and Usability

Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Embed Size (px)

Citation preview

Page 1: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Digital Library User Interface and Usability

Page 2: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Goals

• Discover elements of good interface design for digital libraries of various sorts

• Consider examples from DL usability evaluation as sources of insight.

• Look at the distinct requirements of interfaces to libraries of video and audio files

Page 3: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Caveat

• Note --– We have a whole course in User System

Interface– Everything in that class is relevant to User

Interfaces for Digital Libraries– One evening will not replace that course,

nor will it capture all of the relevant factors.

Page 4: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

The challenge• A user interface for digital libraries must display

large volumes of data effectively. – Typically the user is presented with one or more

overlapping windows that can be resized and rearranged. – In digital libraries, a large amount of data spread through a

number of resources necessitates intuitive interfaces for users to query and retrieve information.

– The ability to change the user's perspective from high-level summarization information down to a specific paragraph of a document or scene from a film remains a challenge to user interface researchers.

Source: http://cimic.rutgers.edu/ieee_dltf.html

Page 5: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Expectations of Digital Libraries

• Provide at least those services available in traditional libraries

• … and more.

• A system is successful “only to the degree to which the vast majority of its intended users are able to use its intended functionality”

Hill 97

Page 6: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

User-centered design

• “User-centered design for a digital library must include not only systems evaluation but also an understanding of the process of information seeking and use.”

• Compared to a “self-evident door handle” -- once you see it, you know what it does and how to use it. No instruction is necessary.

Hill 97

Page 7: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Methods of evaluation

• Surveys• Target user groups

– Focus groups from the intended audiences– another recommendation: faux focus groups

• When it is not practical to do a real focus group for a while, the developers do some role playing, pretend to be users

• What do you think of this approach?

• Ethnographic studies– Audio/video taped sessions of users– Analysis of feedback and comments

• Demographic analysis of beta tester registration data

• Log analysis

Hill 97

Page 8: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Usability inspection of Digital Libraries

• To produce a product with high usability– Client and user interviews– Task analysis– User class definitions– Usage scenarios– Iterative usability design– Prototyping– Design walk-throughs– Usability evaluation

Source: Hartson 04

Unfortunately, developers often look at usability analysis as something to do at the end of the development process as a final test, rather than as a part of the design process.

Page 9: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Your plans

• How will you evaluate the usability of your digital library?– What is ideal?– What is practical?– What do you plan to do?

Take two or three minutes to think about it and jot notes to yourself. If you are part of a team, do this on your own. (You can compare your team’s responses later.) Then we will hear from each of you.

Page 10: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Evaluation• Evaluation for any purpose has two major

components– Formative

• During development, spot check how things are progressing

• Identify problems that may prevent goals from being achieved

• Make adjustments to avoid the problems and get the project back on track

– Summative• After development, see how well it all came out• Lessons learned may be applicable to future projects, but

are too late to affect the current one.• Needed for reporting back to project sponsors on success

of the work.

Page 11: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Spot check

• Divide into pairs so that each member of the pair is from a different project.

• One member of the group looks at the other person’s project.– Try to use it– Give feedback on usability

• Switch to the other project and repeat• About 5 - 7 minutes on each project • What kind of evaluation was this?

Page 12: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Usability evaluation

• Lab-based formative evaluation– Real and representative users– Benchmark tasks– Qualitative and quantitative data– Leads to redesign where needed

• After deployment– Real users doing real tasks in daily work– Summative with respect to the deployed

system– Useful for later versions

Page 13: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Usability inspection

• Lower cost option than full lab-based testing• Applies to early designs, well-developed

designs, and deployed systems• Does not employ real users• Expert based

– Usability engineering practitioners

• May be guided by typical user tasks• Seeks to predict usability problems that users

will encounter.

Hartson 04

Page 14: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Sample evaluation

• Digital library evaluated by a usability expert, results reported.– See references: Hartson and Perez-

Quiñones – NCSTRL (“Networked Computer Science

Technical Reference Library”)– Still present at ncstrl.org

Page 15: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Inspection categories

• User classes– Know your user– Example from the cited study:

• Scientific researchers in computer science• Administrators

– Do not use the regular interface, so not evaluated

• User tasks– Search for technical reports on a set of criteria– Browse the collection– Register– Submit– Harvest

Hartson 04

Page 16: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Search expanded

• Search options– Simple search

• All bibliographic fields• Group results by archive (now also Discovery year)• Sort

– Advanced search• Focus on specific fields with filter options

Hartson 04

Page 17: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Results - 1

• Submit and Harvest tasks not evaluated– Specialized domain requirements– Need evaluation with real users to do meaningful

testing

• Report on Problems Found– Usability problem types

• Wording, consistency

– Functionality• Search and browse functionality

• Problem = anything that impacts the user’s task performance or satisfaction.

Hartson 04

Page 18: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Categories of Problems

• General to most applications, GUIs– Wording– Consistency– Graphic layout and

organization– User’s model of the

system

• Digital Library functionality– Browsing– Filtering– Searching– Document submission

functions

Hartson 04

Page 19: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Wording• About 36% of the problems in the case described in

the paper • “Precise use of words in user interfaces is one

of the most important design considerations for usability”

• Clear, complete, correct – Button and tab labels– Menu choices– Web links

• Crucial to help users learn and understand functionality

• Easiest problems to fix if someone with right skills is on the team. Hartson 04

Page 20: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Search and Browse functionality

• Pretty basic to what a DL does!• 18% of the problems were in that area.• Designers consider these separate functions• Users see them as extremely closely related

– Find the desired resource– Should be designed together

Hartson 04

Page 21: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

“Usual Suspects”

• Digital libraries prone to the same design faults as other interactive systems– Consistency

• In the example, “group” and “archive” were used interchangeably

• Different labels for the same concept used in different places

– Simple search on tab, Search all bibliographic field at function location

• Multiple terms referring to the same concept confuse users, slow learning

– Standardize terminology and check it carefullyHartson 04

Page 22: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Usual Suspects - 2

• Problems with Feedback– Clearly indicate where the user is

in the overall system• Clicking a tab does not result in

highlighting or any kind of feedback about which tab is the currently active choice.

• Selected institution (archive) highlighted when chosen, but not maintained after some other actions.

Hartson 04

Page 23: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Usual suspects - 3• Wording

– Use of jargon or slang, or unclear or missing labels• Challenge for users• Example in NCSTRL

– Several dates used. The labels for the dates do not clearly described what each represents.

– “discovery date” which is different from “accession date”» Discovery date -- probably a developers’ term, and

not likely to be of interest to the user.

– Use terms that are meaningful to users without explanation whenever possible. Resist presenting data that is not useful for user purposes.

Hartson 04

Page 24: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Usual suspects - 4

• Wording, continued– Example: “Submit to CoRR” tab

• Could be “Submit Technical Report(s) to CoRR

– Example: Search all bibliographic fields• Could be “Simple Search: Search all bibliographic fields

in selected archive (or for selected institution)”

– Other examples of unclear labels• Archive’s Set - technical term from OAI-PMH• DateStamp• Discovery Date

• Label for the user, not the developer

Hartson 04

Page 25: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Usual Suspects - 5

• Incorrect or inappropriate wording– “Search results” label for browsing results– hits (1-n) or total xxx hits displayed

• Not search results, just reports available for browsing

– Apparent use of combined code for browse and search.

• Label results appropriately, even scrupulously, for their real meaning.

Hartson 04

Page 26: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Usual suspects - 6

• Appropriate terms– Use of “hits” for individual search (or

browse) results• Commonly used• Inappropriate slang, according to usability

experts• Considered unattractive, even slightly offensive• Recommended: something like “Matches with

search term”– Cosmetic consideration can have a

positive affect on user’s impression of the site.

Hartson 04

Page 27: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Layout and design

• The whole point of a graphical user interface is to convey more information to the user in a short time.– The GUI must support the user needs

• Example problems in the NCSTRL evaluation– Menu choices - no logical order– Reorganize by task or functionality

• Organize task interfaces by categories to present a structured system model and reduce cognitive workload.

Hartson 04

Page 28: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Layout example

• Instead of randomly ordered tabs, group them by – Information links

• About NCSTRL• About CoRR• OAI• Help

– User tasks• Simple search• Advanced search• Browse• Register• Submit technical reports to CoRR

Hartson 04

Page 29: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Graphical design

• Proximity of elements suggests associations and relatedness– Search button very close to OR radio box– Applies equally to all parts of the dialog

• Consider the implications of placement and association of graphical elements.

Hartson 04

Page 30: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Start off right

• Any application should have a home page that explains what the site is about and gives the user a sense of the overall site capability and use.

• NCSTRL starts with the Simple Search page, with no introduction.

Page 31: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

DL specific problems• Searching, filtering, browsing

– User view: all are aspects of finding a needed resource

– Developer view: differences based on what must go into an index to support searching, how filtering is combined with searching to form a new query, etc.

• Usability suggestion: combine search, browse, filter into one selection and navigation facility.– Give users the power to combine these elements to

serve their needs.Hartson 04

Page 32: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Iterative search

• Search is often implemented as a one-shot function. – Users want to iterate on their query string to

improve results• NCSTRL does not show the query that produced the

given results.

– Users want to prune the result set by applying a subsequent query to just those results

• Not available in NCSTRL• Examples where it is available?

Hartson 04

Page 33: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Browsing

• NCSTRL allows browsing only by institutions (archive)– Other possibilities

• Date• Author• Subject

• Allow user activity that will serve user needs. Try to find out what users want before making decisions about services offered.

Page 34: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Portal

• “A portal <is> a single point of access to distributed systems that provides services to support user needs to search, browse, and contribute content, often linking to shared existing functionality at other sites.”

• Portal pass through problem– Does the portal add service, or just provide

a link to a collection of other sites?

Hartson 04

Page 35: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Portal - submission

• NCSTRL - submission to CoRR• Link opens to another page, not directly

offering the opportunity to submit.• Disconnect for the user between the

original page and the action promised.• Link directly to the service offered

without any intermediate pages unless needed in support of the service.

Hartson 04

Page 36: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Summary for NCSTRL case

• System exhibited many typical problems with user interfaces

• Investigation illuminated some issues specific to digital libraries or other systems for retrieving information.

Page 37: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Spot check

• Given all those points (in the bold and different color type), pick one that strikes you as especially relevant for your project and say how you will address it. – Do consider all of them when working on

your project – just pick one to talk about now.

Page 38: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Ensemble – an early page design Your initial thoughts?

Page 39: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

First serious revisionThoughts?

Page 40: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Mock up - 1

Page 41: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Mockup - 2

Page 42: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Mockup – 2a

Page 43: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Mockup - 3

Page 44: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Today (21 March 2012)

• See www.computingportal.org

Page 45: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Recommendations

• Based on our earlier review of usability characteristics, what is your advice to the Ensemble team?

• Spend a few minutes in discussion with one or two others, then report back.

Page 46: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Video Digital Libraries• Video digital libraries offer more

challenges for interface design– Information attributes are more

complex• Visual, audio, other media

– Indicators and controlling widgets• Start, stop, reverse, jump to

beginning/end, seek a particular frame or a frame with a specified characteristic

Source: Lee 02

Note: Youtube started in 2005. This material was published in 2002. It is of interest to see how youtube compares with the desired characteristics of a video library

Page 47: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Video Interface Features

• Cataloging– Semi-automatic tool– Manual tool– Threshold adjustable

before automatic segmentation

• Textual Query– Natural language (or

keyword)– Category or keyword list

browsing– Audio information for

indexing, browsing• Intelligent frame selection

• Video browsing– Text description– Transcript– Single keyframe– Storyboard– Option re granularity of keyframe

set– Interactive hierarchical keyframe

browser– Keyframe slide show– Video summary playing– Playback– Transcript + playback synch– Keyframe + playback synch– Text search + playback and/or

keyframe synch

Source: Lee 02

Page 48: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Spot check

• Which features are present in youtube?

• Which ones would really enhance that collection?

Page 49: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Common features for Video DLs

• Most systems use a textual querying interface and few systems provide any form of visual query interface, probably indicating the need for further development in this area;

• Most systems use keyframe(s) as their video browsing method;

• Playback is provided in all listed systems, indicating that playback is regarded as a most important interface feature;

• Whereas most systems provide more than one video browsing method (often transcript + playback and/or keyframe + playback), browsing aids such as synchronization between different browsing methods are not often facilitated.

Source: Lee 02

Page 50: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Stages of Information seeking in Video Digital Libraries

• Browsing and then selecting video programs (as a collection)

• Querying within a video program (content querying)

• Browsing the content of a video program• Watching (part of) a video program• Re-querying the video digital library and/or

within a video program

Source: Lee 02

Page 51: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Summarizing stages of information seeking and the interface elements that support them as described in four researchers’ work.

Source: Lee 02

Page 52: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Granularity in Video Browsing

• Abstraction– Reducing the information available to a

manageable, usable subset

• Traditional video & audio browsing– Sequential, single access point, linear nature of

the medium– Constrained by time– Fast forward

• Difficult to see the content• Need to return to the beginning to repeat search

Source: Lee 02

Page 53: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

A scenario

• Directory with 100 (or 1000 or…) video files.• No information except the file name.

– Maybe reasonable name, but not very descriptive

• You want to find a particular clip from a party or a ceremony or some other event.

• What are your options?• What would you like to have available?

Spend a bit of time now talking about this.

Page 54: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Video Abstraction• Levels to present: (from Shneiderman 98)

– Overview first– Zoom and Filter– Details on Demand

• Example levels (from Christel 97)

– Title: text format, very high level overview– Poster frame: single frame taken from the video– Filmstrip: a set of frames taken from the video– Skim: multiple significant bits of video sequences

• Time reference– Significant in video– Options include simple timeline, text specification of time

of the current frame, depth of browsing unit

Source: Lee 02

Page 55: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Informedia-II Digital Video Library

• Carnegie Mellon project from the DLI program• Capture audio and video from news programs

and documentaries• Full-content search and retrieval• Retrieval of video paragraphs based on

spoken or typed query. • Words extracted from soundtrack, closed-

captioning or text on the screen.

Source: http://www.informedia.cs.cmu.edu/dli2/index.html

Page 56: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Info

rmed

ia in

terf

ace

Page 57: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Ano

ther

vie

w o

f qu

ery

resu

lts f

rom

Inf

orm

edia

-II

Page 58: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Wha

t do

we

thin

k of

thi

s in

terf

ace?

W

hat

is

here

? H

ow d

o w

e us

e it?

Page 59: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Keyframe browsing

• Extract a set of frames from the video – Display each as a still image– Link each to play the video from that point

• Selection is not random– Video analysis allows recognition

• Sudden change of camera shot• Scenes with motion or largely stationary

– Video indexing based on frame-by-frame image comparison

• Similar to thumbnail browsing of image collections

Source: Lee 02

Page 60: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Source: Lee 02

Keyframe extraction for display on browsing interface

Page 61: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Keyframe extraction

• Manual– Owner or editor explicitly selects the frames to be

used as index elements

• Automatic– Subsampling - select from regular intervals

• Easy, but may not be the best representation

– Automatic segmentation - break the video into meaningful chunks and sample each

• Shot boundary detection - note switch from one camera to another, or distinct events from one camera

Source: Lee 02

Page 62: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Displaying the frames

• Once the key frames are selected, display them for effective user interaction– Storyboard

• Miniaturized keyframes in chronological order• Aka keyframe list or filmstrip

– Slide show• Keyframes displayed one at a time

– Hierarchically arranged• Good when content is structured

Page 63: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

More detail

• For much more detail about Video browsing and presentation, see Lee 02.

Page 64: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

Summary• Much of digital library user interface design

and usability analysis is the same as that of other web services– Keep the user central in the design phase– Be careful about word use– Organize the graphics and layout carefully– Think about the user experience

• Some special considerations about DL usability have to do with DL services– Search, filter, browse– Connections with other collections to which this is

a portal

Page 65: Digital Library User Interface and Usability. Goals Discover elements of good interface design for digital libraries of various sorts Consider examples

References

Adam, N., Holowczak, R., Halem, M., Lal, N., and Yesha, Y. “Digital Lbrary Technical Committee” cimic.rutgers.edu/ieee_dltf.html

Christel 97: Christel, M., Winkler, D. and Taylor, C. (1997) “Multimedia abstractions for a digital video library” Proceedings of the 2nd ACM International Conference on Digital Libraries (DL ‘97), Philadelphia, PA July, pp 21-29

Hartson, H. R., Shivakmar, P, and Perez-Quiñones (2004) “Usability inspection of digital libraries: a case study” International Journal of Digital Libraries 4: 108-123

Hill, L., Dolin, R., Frew, J., Kemp, R., Larsgaard, M., Montello, D., Rae, M., and Simpson, J. “user Evaluation: Summary of the Methodologies and Results for the Alexandria Digital Library, University of California at Santa Barbara. www.asis.org/annual-97/alexia.htm

Lee 02: Lee, H., and Smeaton, A. (2002) “Designing the User Interface for the Físchlár Digital Video Library” Journal of Digital Information, Volume 2, Issue 4 May 2002 http://jodi.tamu.edu/Articles/v02/i04/Lee/#2

Shneiderman 98: Shneiderman, B (1998) Designing the user interface: strategies for effective human-computer interaction, 3rd edition (Addison Wesley Longman)

Wactlar, Howard, “Informedia II Digital Video Library: Auto Summarization and Visualization Across Multiple Video Documents and Libraries” http://www.informedia.cs.cmu.edu/dli2/index.html