As time goes on and trends and design styles come and go, it’s no surprise that sometimes graphical user interfaces can reach a sort of shelf life. Look at any application from an old operating system, and you’ll probably cringe. I can name quite a few: Disco with its odd window control buttons (a hole which Adobe almost fell into) and Adium (themes can’t fix everything) are a couple popular ones, but there certainly are others.
One that has really stood out, though, is Delicious Monster’s famous award-winning cataloguing application, Delicious Library.
Don’t get me wrong; when I first saw this years ago, I thought it was the most beautiful application for the Mac. Clad in Tiger’s brushed metal chrome, it looked brilliant. Its themed shelving was unique at the time, and the developer added lots of neat little UI things over a number of versions (animations, etc.).
But even with the semi-recent release of Library 2.0 and Adam Betts’ theming work, it’s becoming a mess. A mix of old and new. Some things fit, some don’t. In my opinion, it took a turn for the worse when moving to Leopard.
(Quick interlude: I really like Delicious Library. In fact, I love it. That’s why I have it. That’s why I use it. Delicious Monster under Wil Shipley is doing a fantastic job, for the most part, with this application. This post is intended as a way to improve something that’s already working pretty well, but also for my own learning experience. So, hat tip to DM, keep up the good work, and maybe take notes, if you’re reading this.)
So let’s take a look at the interface if it was more modernized. I made this mockup using mostly resources already available in the application’s package (except the right sidebar), including the publish themes, so it’s not like I’m proposing anything groundbreaking here. Just a facelift with some rearranging, etc. I also suggest a few more improvements below that can’t be seen in the picture. For reference, take a look at a screenshot from the current version.

1. The Shelves List
Item counts are now hidden (show with the Option key), and there are better organization tools with collapsable folders. Both of those lead to a cleaner look and better usability in the long run. The theme, of course, is also extended to this.
2. Header
The search field was moved to the top of the window to better streamline the footer and make use of the space at the top. The view mode buttons are larger to fill in the newly-made space. I moved the sort options into a dropdown because they aren’t necessarily something the user will need all the time.
The leaves are a nice garnish that improve the application’s overall look, though don’t necessarily serve much purpose. In a final design, these would probably just be omitted altogether.
The theme is also extended here.
3. Information Sidebar
There’s a ton of freedom in designing for the sidebar. It’s intended to show all kinds of information, so there’s quite a bit that needs to go into a finished product. One thing that absolutely should be added is displaying information about shelves. You know, change the name, add a description, change sort and view options, etc.
Overall, I compacted everything and modernized the look a bit. The scrollbar is less intrusive by only appearing when you move your mouse over it, à la the iPhone. The image at the top can be clicked to show a zoomed view of the product in QuickLook.
Also, what ever happened to the popup information panes that were in some previous versions? I think it would be neat if we still had something like that, but either style works.
4. Shelf View
New scrollbar, lighting, and shelves. Not much else.
5. Footer Buttons
The old style (see the footer in the screenshot) is still pretty commonly used among apps, namely iTunes, iPhoto and tons of others. However, this is where most of the mess was. Even if the footer I designed wasn’t used, a number of things could still be done:
- Group items together: add & camera, edit & settings; example
- Ditch the hiding buttons, and put an Info toggle button to replace the one for the right sidebar
- Simplify the slider; Snow Leopard’s new Finder doesn’t use icons, so DL probably doesn’t have to, either
I wasn’t sure what to really do with the Publish dropdown, but I can imagine that it would likely stay in the final design. The configuration could be moved to the preferences, though.
There might not need to be two add buttons. In some applications (LittleSnapper is one example I can think of off the top of my head), options to add sources (shelves) are in a configuration dropdown.
6. Add Products Button
I’ll be honest here. It’s a pain to add products to DL. I usually can’t get the iSight scanning to work for a majority of things, and the add menu is slow and requires you to tell it what type of product it is (see screenshot). If it was replaced with a one-size-fits-all search box showing results as the user types, the experience could be drastically more smooth. Also, keyboard shortcuts are the way of the future. Simply pressing enter should bring up the view, I type, then press enter again to select the top result, or use the up/down arrow keys to browse around. Cmd+N doesn’t completely cut it. (The Hit List is a perfect example of an app that takes advantage of keyboard shortcuts in a good way.)

A mockup of what the add pane could be.
✦ ✦ ✦
I’m sure that there’s still plenty of room for improvement, and I probably broke at least a dozen Apple Human Interface Guidelines without even knowing it. Hell, for all I know, some elements may be infeasible from a programming perspective. If I was to revisit this in the future, though, I would focus even more on the user experience and less on the nice-looking graphics. One thing that designers often overlook — though a product should still be attractive — is how the UI’s chrome shouldn’t get in the way of things. In some ways, I’m guilty of this here where standard Mac OS X widgets would have sufficed (i.e., anything in the theme, etc.). However, I felt that something more was expected from the theming, because having just the shelves in that style felt detached and out of place.
I plan on doing more of these design explorations in the future. Even if I’m not being hired to do work for these companies, it’s a good learning experience, and one of the few ways to hone my skills. Although I probably won’t return to this project in the future, I’m interested in hearing what you think. I don’t claim to have a whole lot of experience in design outside of the Web when dealing with real-world applications, so every little bit helps.
