Archive for the 'design patterns' Category


Yahoo design pattern stencils

Yahoo recently released a great set of design stencils based on their design patterns. Even if you aren’t an interface designer, you might find these helpful for planning out your web form or site navigation. Omnigraffle is my tool of choice but they also have Visio and other image formats. If you’re in the market for more of the same – also try Graffletopia.

Yahoo Stencil

Library Web Design – Search Box Round-up

If you could only have one single feature on your library web page… what would it be?

Search, right? Except library searches don’t usually work like Google (yet)… That doesn’t mean library websites should hide their search boxes, all tucked away in the corner.

Here are a few lovelies I thought I’d highlight. I tried to stick mostly to search boxes that let the user choose which “silo” to search (so, more than just a web page search or catalog search) but a few single searches were worth including.

University of Virginia Library
Now that’s a dedication to giving up some screen real estate! It won’t even fit in my blog template. I bet this one doesn’t get missed. It also has a fresh “2.0″ feeling (as does the rest of the site). Oh, and one of the tabs is for Google Scholar… interesting!
UVA.png

British Library
The search box is in a very prominent location, and it’s very clear about what is being searched. The little descriptions of what each search option includes is a fantastic idea and I bet does a lot to solve those pesky terminology problems.
BritishLibrary.png

Free Library of Philadelphia
I’m not actually sure I like how you have to select the box to do a site search only… (I’d prefer it not have the message above about what’s being searched and instead have select boxes below that say “catalog,” “databases,” and “site search” and all are selected by default). However, I find their overall design irresistible and I appreciate that the “FIND” area is a good 1/3 of the main body content!
FreeLibOfPhiladelphia.png

University of North Carolina Libraries
When you select a different tab – the options under the text box change. Nicely designed and seems easy enough to use.
UNC.png

Vancouver Public Library
Catalog search only, but I really like how well it’s integrated into the overall site design. Very simple, yet still stands out.
VancouverPL.png

Yale University Library
This is the most simple example but simple is sometimes hard to do. It has a good amount of white space around it that helps set it out from the rest of the site.
yale.png

I found a few more nice onces – All are in my Search Box flickr set.

Any suggestions for other sites that have a nice, big search box?

“Ask Us” Service comparison of label terminology and graphics

With anything these days, there’s always tons of debate over terminology, categorization, and placement of links on a page… We’ve been debating & testing our “Ask Us” (email & IM reference) service for over a year now and we still haven’t settled on something we all agree on (and the user’s agree on). So, Shana Kimball and I decided to do a little comparison of how some other libraries are doing it.

We’re not including any judgments in this report because we don’t have any data about how successful these libraries are – it’s merely a comparison. I’m sure there are many other libraries that have enticing graphics or wordings that we missed so suggestions are welcome.

Ask Us graphics

Link to pdf of comparison chart (courtesy of the Usability Working Group).

Design Library of Library Designs

When designing websites and interfaces, it’s important to know when to try to be unique and when to go with a standard. I think users are more adept at adapting to new interfaces than we give them credit for… however, if there is a standard already in place that will enable users to not have to think about where to click or how to search – why not use it?

To help with this, I’ve started a flickr account to collect Library Designs. I started with about 20 of my favorite library websites and took screen shots of the home page and a second level page.

For my first themed set, I picked out the sites that prominently link to their library’s email or chat reference services. I’ll formally report on this later.

I’ll add to this as topics come up. If anyone has suggestions for nice library websites, opacs, or digital library interfaces – I’m open to suggestions!

User’s Lib Flickr Design Library

User’s Lib Flickr set