This morning, I gave a presentation to our library staff to show and discuss our possible wireframe prototypes, as well as the analysis that informed the designs. It’s a sort of visual summary of our redesign-related blog posts to this point. The embedded version here is small, but you can view the full presentation here.

Prototypes

Here are six possibilities (A – F). We’ve used Ad*Access as an example, as it is our most-visited collection:

Analysis

The ideas in the prototypes stem from our analysis of the current site, per the following:

Web Analytics

• Collection homepages are big attractions. How big? Our most popular collections’ homepages are visited even more often than our portal page. Other than our main library homepage and our guide to citing sources, the AdAccess, AdViews, & EAA homepages were the most-visited pages in our entire library website (from June-Dec 2009).
• From our portal page, people are 3x more likely to browse to a collection homepage than they are to do a cross-collection search.

Interviews With Collection Sponsors

• Make it clear and obvious what a user should do upon visiting. Most people either want to search or browse. Put the search & browse options front & center.
• Move the paragraphs of text to a separate ‘about’ page.
• Give a visual taste of what kinds of things are in the collection.
• Show the most popular items in each collection.
• Let people more easily browse all of the available metadata for each collection (e.g., browse all companies in an ad collection).
• Use a better combination of fonts & colors to help the pages from feeling boring.
• Give each collection more character by using graphics that enforce branding.

Feedback Forms & Other User Feedback

• Avoid the “wall of text”; make the “home page copy read more like web copy.”
• Feature timelines more prominently
• Having two search boxes (one for inter-collection & one for intra-collection searches) is confusing.

Ideas From the Implementation Team

• Build a smart template that is 1) unified enough to make collection-publishing efficient and the user experience consistent, but 2) flexible enough to allow each collection to be individually branded (if desired) and to present the most optimal arrangement of browsing options given what’s in the collection.
• Incorporate blog posts on collection homepages, so experts have the ability to write about each collection on an ongoing basis.
• Provide advanced navigation options (like linked term clouds, timelines) for all collections.

Inspiring Examples from Around the Web

What do you think? Join in the conversation here in the comments, or comment anonymously via our feedback form.

Prototypes

You can review our five initial prototypes (A through E) here.

Emphasis has been placed on ways to ease navigation by providing clear, easy ways to browse and prominently displaying visual content that highlights an assortment of interesting materials from our collections.

Analysis

We’ve uncovered several important requirements for the new portal page through the variety of research methods we employed:

Web Analytics

1. Many search queries are for formats, decades, and collection names. It is essential we provide a means to filter items accordingly.

2. Based on web analytics collected in 2008, people are nearly three times more likely to visit individual collection homepages than to conduct a cross-collection search. These numbers show how important it is to put our collection list front and center so it can be easily identified and browsed.

Usability Tests (Spring 2008)

1. Undergraduates liked the carousel of images because they could see actual items from the collections.

2. The overall design and appearance of the current page was described as “clean”, “simple”, “nice” and “easy to understand”. These are fundamentals that should take precedent when reformulating the portal page.

Feedback Forms and Other User Feedback

1. Discovery could be improved if image collections are listed by both first and last name in the Browse A-Z list, as many people look for the photographer by surname, e.g. consider putting the Sidney D. Gamble photograph collection in both the Ss and the Gs.

2. Flatten the navigation and reduce the necessary clicks to get to collections and items.

Interviews with Our Collection Sponsors

Most highly desired improvements:

1. The current label of “featured collection” is confusing and should be clarified or eliminated.

2. Remove anchor links, reduce scrolling, and give collections more prominence.

3. Add a way to get items by format, as that is a common use case.

Ideas from the Implementation Team

1. Create more visualization discovery tools like maps, timelines, and term clouds.

2. Increase the dynamic content to liven up the page and keep it from feeling stale.

3. Fashion interface elements that cycle through content, hide/show elements, and load new content without loading a new page.

4. The portal page should provide more previews of what’s in the collections to give users a better visual taste of what’s interesting.

5. Feature timely, relevant posts from our blog(s) and better integrate what we and others are saying about our collections using social media tools.

Inspiring Examples

Below are a few example websites that demonstrate thoughtful and innovative solutions to many of our requirements (see the whole set here):

Prototypes

There are five examples here; some are searching across all collections and others are searching within a single collection. Particular areas of interest for us: location of the ‘Narrow by’ facets, display of results for matching digital collections or matching digital exhibits, collection branding & info.

Analysis

Here’s what we have learned about our search interface from our various evaluation methods:

Web Analytics

1. About 75% of searches are within-collection searches; 25% are cross-collection.
2. The majority of searches are for various topics, though many users search for items from a particular decade (”1920s”), format (”advertisements”), or collection (”Gamble”).
3. Some users attempt to retrieve every item possible through search (”*”, “all”, “a”)

Usability Tests (Spring 2008)

1. Users found it easy to narrow results using the facets on left, though some wanted this section to be more legible.
2. Users were able to easily toggle between the grid and list views of results.
3. Users were only moderately successful distinguishing searches within a single collection versus searching across all collections.
4. Most users didn’t understand that they could remove their “narrow by” selections in the breadcrumb trail.

Feedback Forms and Other User Feedback

1. It’s unclear what the difference is between the “search this collection” box versus the “search all collections” box.
2. Searching should enable people to discover more Duke content & collections beyond the items that are in this particular system.

Interviews with our Collection Sponsors

Most highly desired improvements:

1. Provide an Advanced Search option.
2. Return collections in search results in addition to items.
3. Return our digital exhibits in search results.
4. Better distinguish intra- and cross-collection searching.
5. Support the exploration of a particular format (images, video) or time period (1960s) regardless of the ‘collection’.
6. Have persistent navigation where users can explore broad categories from any page.
7. Enable users to navigate from one item to the next in a search result.
8. Let users mark items for later use (shopping cart).
9. Connect people to Duke’s relevant resources outside of this system that match the keyword searches. Especially important in ‘no results found’ screen.
   

• See all feedback (Duke library staff access only)

CIT’s Ideas for Helping our Collections be Used for Instruction

1. Enable users to create their own collections of items.
2. Provide a slideshow view.
3. Be able to search our collections from within other systems like Wordpress (Flickrpress model).

Other Ideas from the Implementation Team

Here are some additional ideas we’ve had in our implementation team discussions:

1. Add search term highlighting (to present the matching keyword in context), especially for texts
2. Provide navigable visualizations of results (timelines, maps)
3. Spell-check (Did you mean?) feature
4. RSS feed for search results
5. Enable a blank search to retrieve every object in the system (or collection)

Inspiring Examples

Below are a few example sites that provide compelling and inspiring solutions to some of the design challenges we’re facing. See the whole set, with annotations, at Notable.

We have learned a lot about how to improve our item pages and we’ve gathered great examples from around the web as inspiration.  We’re now ready to share some wireframe prototypes.

There are four different wireframe prototypes here. Use the ‘Jump To’ section at the top to look at versions A, B, C, and D.  Preferences? Ideas? Concerns? Questions? Let us know what you think!

In addition to incorporating the feedback and ideas we’ve gathered so far, here are a few additional key things these designs attempt to address:

• Bring the objects to life by enabling comments and both encouraging and capturing discourse around them in other places on the web (like Twitter, blogs, Facebook).  We’re looking at different services to help meet this objective.
• Add a main navigation bar to help people more easily browse for the kinds of things we know they often look for via searches.
• Increase engagement with the site from the item pages by providing enticing leads to related stuff, whether entire collections or individual objects.  We want to see item pages less as destination pages, and more as jumping-off points to the rest of our content.
• Let items belong to multiple ‘collections’ though maintain strong context, branding, and contact info for the item’s primary collection.
• Help the site better serve an international audience. We’re considering using the Google Translate widget as one approach.  You can see it in action at sites like the Museum of London and Powerhouse Museum.
• Incorporate new posts from our blog & Twitter account to keep fresh content on the page and encourage people to connect with us.

We’re taking a user-centered approach in planning the new Digital Collections web interface to ensure that our new design meets the needs and expectations of the people who use it.  One way to discover those needs is to analyze our web traffic in an attempt to decipher user intent when searching and browsing materials in our site.  Valuable patterns exist in this data that can help us optimize the site’s utility and performance by supporting actual user information-seeking behaviors.  Lou Rosenfeld recently wrote a terrific blog post about this “bottom-up analysis” on A List Apart.

Using aggregated data from Google Analytics, we studied searches performed in our site from the period between May 1^st and November 1^st this year.  We found that Duke Digital Collections was searched approximately 131,000 times during this six month period; that’s an average of 717 searches per day.  The average user spent about three minutes on the site after entering his or her search query and viewed nearly four pages.  Visitors also adjusted their searches with keyword refinement 26% of the time.

Only three percent of these unique searches were entered from the homepage.  Eight percent— a whopping 11,121 unique searches—were entered directly from the Ad*Access portal page, while other popular start pages included the Historic American Sheet Music collection (5%), the Duke Libraries homepage (5%), and the Emergence of Advertising in America collection (3%).  Search engines and referring sites are responsible for the majority (81.8%) of DDC’s traffic, helping to explain this phenomenon.  Links from search engine results and links from social media services like StumbleUpon (19.2% of all referrals), Digg (1.9%),  Facebook (1.3%), and Twitter (0.9%) often lead users directly to item pages, bypassing our portals or homepages entirely.

Over 62,000 distinct searches were conducted, though we’ll focus on the top 500.  The most frequent search, “beauty,” was entered 643 times; by comparison, the #500 search, “clean,” was entered 24 times.  The bulk of keyword searches in our system (421 of the top 500, 84.2%) were entered in the form of single term queries.  These queries were largely topical and exploratory in nature, allowing the user to browse through various results.  In other cases, entire phrases or names of persons were entered into the system when a user had a more specific subject in mind (this was especially true for searches conducted in Historic American Sheet Music, where users often looked for specific titles of scores or names of composers).

Many searches (37 of the top 500), were for years, whether for a specific year or an entire decade.  Top examples include: 1920 (312), 1950 (147), 1920s (138), 1911 (99), 1850 (88), 1930 (88), 1920’s (87).

Other users search for items of a particular format (18 of the top 500 queries).  Examples:  music (187), advertising (127), book (76), poster (74), ad (75), cookbooks (68), sheet music (65), advertisements (58).

Some users search for entire collections by name–e.g. gamble (68), Gamble (50), adviews (44)–though the system currently doesn’t adequately support that function, since it only indexes and returns matching items.

And finally, some users appear to want a way to see everything that can possibly come back in search results, using queries like “a” (71), “all” (41), and the “*” wild card (32); our system does not currently perform this kind of retrieval.

Using the Many Eyes toolkit we have created three data visualizations of the most frequent search queries in two of our most popular collections, Ad*Access and Historic American Sheet Music, and one for the website at large.  Various search terms can easily be parsed at a glance, allowing one to see their frequency and trends.

A couple of caveats about the data that will help to qualify and clarify:

• Searches performed within the AdViews collection—launched July 21st—are mostly not reflected in this data.  Up until Oct 21st, the AdViews site used a different method of searching (relying on MIT’s SIMILE EXHIBIT code that searched on-the-fly after each keystroke without generating a new URL).
• Links to search results (canned searches) count as searches.  Going to page 2 of search results counts as doing a new search, too, as does toggling list/grid view.

Top 500 Duke Digital Collections Search Terms

Top 100 Historic American Sheet Music Search Terms

Top 50 Ad*Access Search Terms

How do we make Duke Digital Collections happen?  Well, obviously, our secret is glamour, which comes as no surprise to those of you who know us.  But as with Miss Denney in this advertisement from our Ad*Access collection, there’s a bit more to it than that, and it takes a lot of work to get there, especially since we try to avoid disturbing fatigue lines and “crepey throat” along the way.  (We know this ad is tiny here, but trust us, it’s worth clicking on to experience its full glory.)

We were recently asked to write about the Duke Digital Collections program for the Duke University Libraries Magazine.  The results appear in five articles in the Fall 2009 issue of the magazine, and you can read them online here.  Among other things, you can read about the history of digitization at Duke, the global reach of our digital collections, the creative interfaces we use to open the doors to our collections, the behind-the-scenes steps in the creation of a new digital collection, and how our digital collections are being used in the classroom.

Thanks to our friends at the magazine for giving us the opportunity to talk about the Duke Digital Collections program!

Before designing new item pages for our Digital Collections site redesign, we looked around the web to find exemplary sites to inspire us as we apply what we have learned while assessing our current item pages.

We looked for sites where items are presented with both clarity and context. We also looked for sites that present obvious ways to interact with an item (such as comment on it, bookmark it, or get a closer look) or help people discover related items to keep them engaged with exploring the site.

We love digital collections sites that are comparable to ours and have included some good ones here, but we were sure to look beyond library sites for inspiration as well. Sites like Flickr, YouTube, and Amazon are familiar to far more people than library sites, and their design patterns condition us all with certain expectations when we encounter any new or unfamiliar site. The goal is to find good example solutions to the challenges present in each aspect of the design, and to use the best parts of each for inspiration.

Here are 10 item page interfaces that inspire our thinking as we redesign ours.

What do you think? Are there other sites with features we should emulate? Leave us comments here on the blog, or create a free Notable account and post your comments on the annotated screen captures above.

Related posts:

Item Pages: What We’ve Learned

This includes over 50 new products and brands, such as the American Association of Railroads, Burma Shave, Bounce, Eastern Airlines, Folgers, Glade, Pepto-Bismol, Prell, Sanka, and Zest. We’ve also added many new commercials for Crest, some fantastic Hasbro toy commercials from the 1970s, and much more.

The AdViews Highlights album now features over 40 commercials with closed captioning and audio descriptions created by the National Center for Accessible Media for users with hearing or vision impairments. Users can take advantage of these accessibility features using the Preferences and Controls menus in iTunes. We’ve also improved the indexing of the collection, making it easier to search for and discover AdViews content from the Libraries website.

Many thanks to Duke Libraries staff and interns, to Duke OIT, and to A/V Geeks for their excellent contributions to the project.

The digital collections team will promote some new AdViews commercials during the next few weeks on Twitter — follow us! http://twitter.com/dukedigitalcoll

Here’s what we have learned about the item pages, broken down by source:

Web Analytics

1. Our most-accessed items get viewed mostly via external links, especially from social media tools (like StumbleUpon) and Google Images.
2. More than 3/4 of item page views are for the medium image view as opposed to the details view.

Usability Tests (Spring 2008)

1. Users recognized the social media tools we chose to put in the ‘Add To’ section, but didn’t anticipate using those particular services.
2. Users were able to easily toggle between the details and the image view.

Feedback Forms and Other User Feedback

1. It’s good to have multiple image sizes available.
2. It’s unclear how to get to all of the details for an item.

Interviews with our Collection Sponsors

Desired improvements:

1. A comment box on items for users to contribute information.
2. Better page-turning for multi-paged items.
3. A way to get a citation for each item.
4. Connection to info about item’s archival source collection.
5. Easier printing, especially for multi-page items.
6. Clear display options for seeing the item and/or its metadata.
7. Multiple export options–especially for multi-page items.
8. Cleaner metadata display, separating technical from descriptive metadata.
9. Customized presentation of items for certain collections or item types.
10. Clarity to user what the rights / acceptable uses are for each item.
11. A way for items to be identified as part of more than one ‘collection’, especially broader collections like ‘documentary photographs’ or ‘moving images.’

CIT’s Ideas for Helping our Images be Used for Instruction

1. Integration w/social media tools (like ShareThis) and blogging platforms.
2. A ‘download’ button (where allowed) w/multiple size options, esp for use in PPT.
3. Copyable ‘Embed code,’ including citation.

Other Ideas from the Implementation Team

To accompany all the ideas and info gathered above, here are a few additional ideas we’ve had in our implementation team discussions:

1. Ability to export items in PDF, especially for multi-paged items
2. Automatically-generated ‘Related Items‘
3. Integration with our internal metadata editor so staff can edit from public interface
4. Permalinks with URL handler
5. Full-text display alongside images where available
6. Aesthetics: page should be wider; item title needs more prominence

Now, what do we do with all this feedback? First, we’ll share good example interfaces from around the web that tackle some of these same issues in various ways. Once we’re feeling fully inspired, we’ll draw up some prototypes to share. Stay tuned!