Archive for the 'interface design' Category


NCSU Library Mobile

NCSU recently launched a new mobile website – and it’s very impressive!

It offers standard features like catalog search, locations & hours, etc., but also allows you to view a map of where available computers are and webcams of the libraries including the line at the coffee shop. Love it.

NCSU Library mobile NCSU Library mobile

Read about the interface: www.lib.ncsu.edu/m/about.html
View a demo of the site: www.lib.ncsu.edu/m/home/?browse=iphone

They also made a fun video to promote it:

Web Color Tools Round-up

A friend recently asked me for my favorite color picker tool so I thought I’d go ahead and compile them here plus some sites I use for color inspiration. Want more? Check out my delicious collection of webcolor links.

  • Adobe’s Kuler Browse color pallets or make your own from flickr photos!
    Kuler
  • Kris’s Color Stripes This blog is completely dedicated to making color palettes out of beautiful photographs and is great for anyone seeking inspiration or eye candy.color stripes blog
  • Color Blender This tool that lets you set a color and it suggests complementary colors to fill out your palette.color blender
  • Color Jack I just discovered this one and I think it’s super. Choose a point on the color wheel and it will show you different color combinations (complementary, analogous, etc.) to go with it.
  • Color Jack

  • The Daily Slurp Enter a couple of colors to view a showcase of other websites sporting those colors.Daily Slurp

Resources for iPhone development

Tutorial blog put together a nice list of tutorials, graphics, and code to help with developing for the iPhone.

http://tutorialblog.org/designing-for-the-iphone-resources/

I’d also add 2 nice omnigraffle stencils: Ultimate iPhone Stencil and Mobile – iPhone.

Mobile Mania – Library Websites

Ok, so I just got an iPhone (yay me!) and now I’m totally obsessed with mobile interface design. I’ve been looking at a variety of mobile interfaces so I thought I’d share some here.

I started with libraries that offer mobile versions of their library website. I’m also collecting Mobile OPACs, databases and non-library interfaces – so I’ll share those another time. Thanks to Superpatron for gathering a list of mobile versions of library web sites that I used as my starting point.

I’ve noticed that many of the mobile versions of library websites are basically lists of links (a few allow searching) that have no applied style. This seems to work most of the time. However, on the iPhone at least, some were a little difficult to use. Most of the interfaces required that I zoom in to read, click links, enter a search, etc. Ideally a mobile interface should actually be designed specifically for mobile devices… and when possible, designed specifically for various types of mobile devices. Now, as a quick disclaimer, I’ve only looked at these on the iPhone so they may function and look completely different on other devices.

My favorite interface I found was from the Yale Medical Library because it has obviously been designed with the specific needs of the mobile user in mind. I didn’t have to zoom, the search box and each link is styled to be easily clickable and it fit my screen perfectly.

Yale Medical Library

Here are screen shots of more or less all the ones I’ve found so far (I found a few more but they were fairly identical to another one I already had). Let me know if there are others I missed!

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

Footer mullet

I was talking to some folks today about our library website redesign plans and various web design trends…

One of the topics of conversation was the big footer trend. Our web designer described it as kind of a “mullet” (you know, business in front, party in back) because it lets you devote all the main screen real estate to serious content and then put all the fun stuff (like news & events, flickr images, featured/spotlight content, etc.) hanging out at the bottom.

The University of Louisville has a nice example of a big footer:
http://louisville.edu/
ULouisville

The group had mixed feelings about this web trend. What do ya’ll think?

What do you think about big web site footers?
View Results

Powerhouse Museum joins the Commons on Flickr

The Powerhouse Museum in Australia has just joined the Library of Congress to be the second member of the Commons on Flickr.

And BTW – Seb Chan’s Powerhouse blog Fresh + New(er) is one of my favorites and a fantastic source for interesting discussions about digital media, access systems, interface design, tagging and web2.0. I also love their opac/online collections site (really, it’s super cool, go play with it).

More info here:

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?

Giant prototyping

Paper prototpying dramatization

Here’s a cool video of paper prototyping in action (minus the tedious bits). The device being tested is a PDA for meeting new people.

{ found via www.guuui.com }

Next Page »