Portal Page: Prototypes, Analysis & Inspiration

homemockupWe’d like to share some of our ideas for the future portal page to Duke Digital Collections. We have included highlights from user feedback that draw attention to important navigation elements, as well as examples of websites that have informed these designs. Please let us know what you think!


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.


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

<a href=”https://dukedigitalcollections.notableapp.com/website-feedback/27521/Smithsonian-Collections-Search-Center” mce_href=”https://dukedigitalcollections.notableapp.com/website-feedback/27521/Smithsonian-Collections-Search-Center”>View this feedback (Smithsonian Collections Search Center) on Notable</a> <a href=”https://dukedigitalcollections.notableapp.com/website-feedback/28424/BYU-Digital-Collections” mce_href=”https://dukedigitalcollections.notableapp.com/website-feedback/28424/BYU-Digital-Collections”>View this feedback (BYU Digital Collections) on Notable</a>

<a href=”https://dukedigitalcollections.notableapp.com/website-feedback/28501/ECU-Digital-Collections” mce_href=”https://dukedigitalcollections.notableapp.com/website-feedback/28501/ECU-Digital-Collections”>View this feedback (ECU Digital Collections) on Notable</a>

6 thoughts on “Portal Page: Prototypes, Analysis & Inspiration”

  1. These posts have been really great. It’s very interesting to see the process unfold when you are completely removed from it and objective!

    I like B and E because they put the most information above the fold (with B being slightly better at that). Our inspiration for Digital Collections home was to provide multiple ways of browsing right away. We lose some visual impact that way, but so be it.

    Another thing struck me as I was looking through your prototypes, and that was the use of “most popular” and “most viewed” etc. Now, the situation may be very different for you, but in our experience, we’ve found with our tag cloud that the top 5 or 10 so far outpace other terms they will probably never be dislodged from the top spot. It was for this reason that we defaulted to just a random assortment tag cloud…so that it would be more dynamic.

    Since those terms come from cataloguer-created metadata, maybe that’s an anomaly. However, (and I’ll have to look into it to be sure), but I think our most common search terms and heavily access items change rarely as well. I know for instance “majorettes” and “belk clothing” has been a top search term from search engines since we launched.

    At any rate, I just mention it since dynamic content seemed to be a goal for you. In our experience, we had to also introduce some of our own selections and randomness to avoid the ant-farm trail effect (wherein after the initial ant makes the path, all the others follow it).

  2. Thanks for the thoughtful, thorough feedback, Gretchen!

    Balancing the visual impact with the browsing options is certainly a challenge. We really like how you’ve accomplished that on your site with tabs and tactful javascript to hide, show, reorder, or cycle through different content.

    You make some excellent points about the effects of showing what’s Most Popular, and the ‘ant farm’ metaphor is spot-on. One way we might address that is by shortening the window for the calculation: the most-accessed items or most-searched terms might not change much month-to-month, but week-to-week, it could.

    We’re also big fans of your ‘Staff Picks’ collection(s). What a great idea!

  3. These prototypes are all great, but I prefer design B as well (with E and D as runners-up). Design B is clean and really conveys that the site includes many different types of items and collections for research and is not merely a nice “online exhibit” with some selected photographs and documents.

    I think having the tabbed box of lists (ala the Smithsonian) above the fold is the best use of screen real estate and provides an uncomplicated way to dive into the materials.

    If the image browser (filmstrip view) at the top could be configured to always display at least one item for each type (video, photos, documents, etc), I think that would help users get a sense of the breadth of the digitized materials available. You might want to include a label of some kind to identify what the filmstrip view includes (highlights, selected items, featured items…).

    Last, I’d like to see a more prominent or maybe a larger search box.

    Thanks for sharing these prototypes. Looking forward to the final design.

  4. Here is feedback on these prototypes gathered at a Digital Collections Implementation Team meeting today (1/20/2010):

    General layout. Liked the designs that show a lot of items, as opposed to one large image at a time.

    Search box. Try detaching the search box from the header. It should be up there persistently in sub-pages, but the portal can feature it more prominently.

    Most Popular. Will this change much? Won’t our most popular items & searches stay fairly consistent?

    Recently Added. Preference for designs that pull in new additions as this is likely to change more frequently than most popular. Also, we should provide an RSS feed of all new additions.

    Collection stats. Can we work in a running tally of the number of digital objects and collections?

    Blog integration. Can we feature recent blog posts more prominently? Perhaps worked into the large section that slides to feature collections and objects?

  5. Hi Sean,

    I would vote for a modified version of Design B:

    * Like the carousel of Design B
    * Like the tabbed facets from Design B
    * Like like that carousel and facets fill top portion of page (Design B)
    * Like the term “Online Databases” from design A and would include that as a tab within the tabbed facets
    * Would put feed from Digital Collections blog where “popular searches” is displayed — maybe list popular searches below the horizontal rule, but where the twitter feed is currently displayed.
    * Would put feed from Twitter where Exhibits is displayed — maybe put exhibits below horizontal rule where blog feed is currently displayed.
    * I like Noah’s suggestion to have the carousel display at least one of each item type.


Comments are closed.