Periodically, David and I will show you some Before & After examples of redesigns that we’ve done. This isn’t client work – just a chance to flex our skills and rework a design. The screen shot for this Before/After is taken from a product made by SirsiDynix – they make software for libraries. In particular, our town’s library uses this software (feel free to test drive it). There are a lot of things I’d like to fix about the way this software works (and looks), but for this exercise I just wanted to tackle the table of search results. As a user of this software, I had a lot of trouble reading the information in this table.

BEFORE - SiriDynix's library search for "dog" (click for full size)

Some of the things I wanted to fix in the table:

• Many items do not have photos. And the big blank spot where the photo is supposed to go just ends up making the page look like swiss cheese.
• The text with the title and publishing information just sort of falls across the page. It doesn’t seem to have much order to it. The fact that they’re all stacked on top of each other makes it hard to scan the titles, or even descriptions (to find video cassettes for example).
• There are few “alignment” lines on the page. The images on the left (where there are any) create a column, and the buttons on the right create a column of sorts, but there’s really no other alignment.
• Labels, like “Description” and “Media” are bold. Desktop applications used to bold labels, which I always found odd. I use bold to call attention to something, and I’m not sure what the label is worth calling attention to – the data would seem to be more interesting to the user.
• There is blue text that isn’t a link (the description) – folks, just use blue text for links please.
• The second item is a “video recording”, which is indicated by the icon next to “media”. But books aren’t really identified as “books” – there’s no media indicator for them. I’d like every type of thing in the list to get some sort of identification. Oddly, the last item in the list is also a video, but it isn’t marked with the same icon (and no it didn’t get clipped). It seems to be a bug in the data.
• There seems to be a lot of wasted space.
• I’m not a big fan of the aqua line between each entry. It’s heavy handed and adds to the clutter.

As I said, there’s plenty of other stuff on this screen I’d like to go after, but I’m going to exercise some restraint here. Here is the after screen, with a new table in place.

AFTER - SiriDynix's library search for "dog" (click for full size)

What did I do?

• There’s a new initial column that is used to show the type of object – book, video cassette, etc.
• Every object has a photo, even if it’s a placeholder “no image” photo
• The title, publisher, and description information now appear in their own column. This improves scanning.
• I’ve used dark gray to de-emphasize some information (such as publisher, publishing location, dimensions), leaving key information (such as publication date and number of pages) in black. One way to emphasize things is to make them bolder, bigger, more colorful. Another way is to de-emphasize the other things around them. But notice that I didn’t resort to making any of the text smaller than 12pt, because there are plenty of library patrons out there with reading glasses who don’t know how to make their browser zoom in.
• Bold is used for the book’s main title, non-bold text is used for the subtitle.
• I only use blue for links.
• I stacked the controls on the right. If I were to do a visual redesign of the entire page, I’d style these buttons to match the new look. But for this work I left them as typical form elements.
• Notice that we now fit all the same information in less space – there’s an extra 55 pixels below the last item in the redesign, meaning that for every 10 items we show we’ll save 110 pixels of screen real estate.

What do you think? Should I have done more? Did I overdo anything? What would you most like to change?