All posts by Sean Aery

Website Redesign Portal Mockups

We’re on pace for launching our redesigned library website this fall. We will go live on October 14, 2013 (during fall break), but you can get a sneak peek now at some of the main “portal” pages we’re working on. Let us know how we’re doing!

Library Homepage



Homepage Mockup. Click to Enlarge Image or See Interactive Version (Duke IPs only)
Homepage Mockup. Click to Enlarge Image or See Interactive Version (Duke IPs only)

Features

  • Emphasis on searching
  • Vertical tabs for searching different kinds of resources (Books & More, Articles, All, Our Website)
  • Five quick links on right for common requests
  • Global navigation in the masthead

David M. Rubenstein Library



Rubenstein Library Mockup. Click to Enlarge Image or See Interactive Version (Duke IPs only)
Rubenstein Library Mockup. Click to Enlarge Image or See Interactive Version (Duke IPs only)

Features:

  • Visual panels showing diverse collecting areas
  • Vertical tabs for searching the catalog, collection guides (a.k.a. finding aids), or digitized collections
  • Buttons in upper-right for logging in (to Aeon special collections request system), and for contacting Rubenstein Library staff.

Lilly & Music Libraries



Rubenstein Library Mockup. Click to Enlarge Image or See Interactive Version (Duke IPs only)
Rubenstein Library Mockup. Click to Enlarge Image or See Interactive Version (Duke IPs only)

Rubenstein Library Mockup. Click to Enlarge Image or See Interactive Version (Duke IPs only)
Rubenstein Library Mockup. Click to Enlarge Image or See Interactive Version (Duke IPs only)

Features:

  • Tabbed search boxes to support common research needs (e.g., search for Scores at Music Library)
  • Simpler design with fewer links, emphasis on the key areas

Questions or comments about these designs? Leave us your feedback in the comments section below.

Visual Mockups for Our New Website

Our website redesign project is progressing quickly! We’ve taken everything we’ve learned from assessing our information architecture blueprints and our lo-fi wireframes, and have created a few visual mockups of simple interior pages that we’re ready to share for feedback.

The Designs

Our designs strive for a more modern look than our current site, and a closer resemblance to the main Duke website. While these versions use a common color palette, the main differences lie in the weight of the masthead, the way the pages are framed, and the fonts that are used within.

Design 1
Design 1

Design 1: Click to Enlarge Image or See Interactive Version (Duke IPs only)

Design Two
Design Two

Design 2: Click to Enlarge Image or See Interactive Version (Duke IPs only)

Design Three
Design Three

Design 3: Click to Enlarge Image or See Interactive Version (Duke IPs only)

Megadropdown Navigation

In the interactive designs (Duke IPs only), you’ll see the submenus drop down when mousing over the global navigation options in the masthead. The images within are likely just temporary placeholders.

megadrop-libraries

 

megadrop-about

 

 

Responsive Design

Since we know an increasing percentage of our website traffic comes via mobile devices, we’re designing the site so its display is optimized in different ways depending on the size of the viewport. You can test out the responsiveness by dragging your browser window to make it narrower or wider.

design-reponsive

Information Architecture Plans for the Library Website

Since we announced our website redesign project in January, we have been working hard to plan the new site. We’re doing everything we can to ensure that http://library.duke.edu will clearly reflect our many services and resources, will be easy to understand, and will connect you quickly to the information you’re looking for.

Here’s our “information architecture” blueprint for the new site. It’s a birds-eye conceptual view; it certainly doesn’t represent all of our pages and is still under review, but it shows how we’ve chosen to organize and label the main parts of the site.

lib-ia-1.3.1-20130311

Here are the main improvements over the current architecture.

  • Navigation. We’ll have a clear main menu (“global navigation”) that will persist at the top of our pages throughout the site. Our six main areas will be:
    • Search & Find, Using the Library, Research Support, Course Support, Libraries, and About Us
  • Organization. Our most important pages will be organized under one of the six main menu items, accessible via a “megadropdown” area that will appear when you mouse-over the main menu.
  • Labels. We’re getting rid of as much library jargon as we can in the site, and will instead use natural language to make things clear.
  • Search. We’re consolidating as much as we can to make it less confusing which search box you should use to look for different kinds of information.

Data-Driven Decisions

libclicks-2011-12
Map of clicks on library homepage, 2011-12. Click to Enlarge.

searchterm-treemap-2011-12
Treemap visualization of the top 100 search terms used in website search box, 2011-12. Click to Enlarge

Our decisions about the architecture are grounded in rigorous research efforts and we continue to assess and refine the plans at every stage of the project. To date, our plans have been developed and modified based on:

• Project vision & values statements
• Usage stats for our current website
• FAQs at our service points
• Usability testing
• Reverse cardsort testing
• Search term analysis for our current website
• Analysis of comparable websites
• Literature review
• Content inventory activities
• Feedback forms
• Stakeholder discussions (especially with faculty and student groups).

What’s Next?

Over the next month, we’ll be developing and sharing visual “wireframe” mockups that will show the actual layout for the site based on our information architecture. While you won’t see colors, fonts, and photos yet, you will see some low-fidelity representations of how the pages will look. We’ll definitely be seeking your feedback on those mockups they become available.

Staying Involved

We would love to hear your feedback! Please leave your comments for us below or email them privately to me at sean.aery@duke.edu. You’ll be able to follow the project’s progress using this link. http://blogs.library.duke.edu/blog/category/web-redesign/

RSS & the Library Catalog: Why & How

Last week, Duke Libraries launched a brand new interface to its catalog. There’s a lot that you can do with the new catalog that you couldn’t do before, so get ready for many new tips and tricks here on Library Hacks.

This post will focus on using RSS (really simple syndication). RSS “feeds” free you from having to constantly check web sites to see if anything new and interesting has been added. Instead, the information is delivered to you as soon as it is available. If you’re not familiar with RSS or would like a refresher, take a few minutes to watch this “RSS in Plain English” video by CommonCraft:

Of course, the library catalog is neither news nor a blog. So, you might ask, what can you do with RSS in the library catalog? You can…

Get alerted when items of interest to you are added to the catalog

Let’s look at some examples of items. I’ll use the first to demonstrate.
(Bookmarked with the “Save Search” feature):

Whether you are just browsing by clicking around or you have narrowed a set of results with a combination of search terms and selections from the left-hand “Refine Your Search” menu, you’ll see an RSS icon ( ) next to the number of results found.

Right-Click (or Option-Click) on the RSS icon to copy the feed URL. Click Copy Shortcut (or its equivalent–see below).

We have to add that feed URL to an RSS reader (also called an aggregator). I use Google Reader, so I’ll demonstrate with that. Feel free to substitute your aggregator of choice, or use your browser’s built-in feed subscription feature.

In Google Reader, click “Add subscription,” paste in the feed URL you copied from the catalog, and click “Add”.

Now that you have subscribed, any time an item is added to the catalog that matches what you were looking for (in this case, feature film DVDs at Lilly Library) the item will appear in your reader, just like new blog posts and news articles, with a link that will take you to the item in the catalog interface.

This is a great way to find out quickly and effortlessly about new additions to the catalog that match your interests.

Other uses of RSS feeds from the Catalog

Beyond delivering notices to your personal reader, you can use a feed from the catalog to generate a linked list of new additions that match a particular interest, and embed that in another web site. You could add a list to a blog, your Facebook profile, a course or departmental web site, or someplace else. The steps to do this will differ depending on which site, widget, or application you’re using, but use the same technique as above to get the feed URL.

RSS at Duke University Libraries

There are many other RSS feeds from Duke Libraries beyond the catalog. Subscribe to get library news, see job postings, or to read posts from Library Hacks or one of our several other blogs:
http://library.duke.edu/rss/index.html

Related resources