Design Exploration: Delicious Library

Delicious Library 2 Icon 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.

Delicious Library Mockup

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.)

Add Pane Mockup

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.

July 11th, 2009

Impracticality

A few people have emailed me over the past day voicing feedback on my Starbucks receipt mockup, based on an article by user interface designer Dustin Curtis.

Now, obviously, this concept is impractical in a lot of ways. Ink is expensive. Paper is expensive. It would take a while to print. The design wouldn’t even look good on paper. I suppose that it was worth a thought, though, and maybe is still a possibility for the future.

But what if we could still have this experience without those downsides? Maybe just ditch paper receipts altogether? It may be a huge undertaking to get people to adopt a system like that, but it’s not like we’re foreign to the concept.

Web retailers have been doing this for years. By emailing receipts, the cost would be next to nothing, aside from server costs. Plus, stores and restaurants would have room for innovation and, as emphasized in the last post, be able to improve the overall user experience and update an aging format.

I’ll keep this post concise, but I just want to thank everyone for their input. Just remember, though, that it’s still just a concept. Of course it’s not going to be perfect.

June 17th, 2009

The Little Things

I recently read Dustin Curtis’ article about how little things affect the overall user experience in a brand or product. In the piece, he mocked up what an ideal receipt from Starbucks would look like, describing it as an opportunity for a company to apply its branding and improve its image in the process. For fun, I decided to take a stab at it, and so this is my result:

My Starbucks Receipt Mockup

My own endeavor into receipt design. It provides a friendly and positive ending to a customer’s shopping experience, as compared to bland, forgettable receipts that are common today. I kind of want some coffee right now.

Imagine walking out the door with something like this. You almost want to keep it. Imagine if, as Dustin suggested, it was printed on thick, glossy paper. Maybe throw in some rounded corners to boot. (Starbucks trading cards. You heard it here first, folks.) Putting a little bit of extra money into this wouldn’t necessarily be so bad.

Experimentation aside, his post does make some valid points. When it comes down to it, users will notice if you’ve half-assed something, and so your product or brand will begin to lose appeal if you don’t focus on the details. You’ll probably disagree, but for me, even the most miniscule things can make the difference. For example, if the text label of a checkbox on a Website isn’t clickable, I find it irritating (especially when it comes to unchecking them for email subscriptions). If the default text in a search field doesn’t disappear when I click the box, I’m turned off. And so on and so forth. (See, you probably don’t even know what I’m talking about; that’s how picky I can be.)

Perhaps this is just because, as a designer, I focus on the details. But that doesn’t mean that these things won’t conglomerate and turn away the casual user. These possibilities always exist.

Even on this site, I’m constantly updating things to make the experience just that much better. I updated the tabs to make sure that they were more easily clickable and made it more obvious which one was selected. I updated the footer to make the subscribe link more readable. I fixed a non-issue to make sure that the site validates to W3C standards and works across most browsers (my apologies those of you still using Internet Explorer 6, but your browser is almost a decade old. Time to upgrade).

The receipt concept is just one example of how good design plays a role in how we live our everyday lives. However, it demonstrates that there absolutely is a lot of room for improvement in the future.

June 16th, 2009

Growing as a Designer

My infatuation with the Internet began around ten years ago. We had just gotten a computer chugging along with Windows 98, and signed up with AOL. Of course, back then, the Internet was a desolate place — compared to today, anyway. But, because of my age, none of that really mattered, since all of my time with it was just spent at the official Pokémon Website and searching my name on Ask Jeeves.

But it wasn’t long after that I actually wanted to do something with it; to be a part of it. I wanted to have my own special little place on the Internet. At the time, I knew absolutely nothing about networking or programming, so I retired my efforts back to playing video games (N64, anyone?).

It wasn’t until a little later that I discovered HTML, and learned the basics from an article and cheatsheet at HowStuffWorks. At the time, I was making the most hideous atrocities one could find on the Internet. I misused tables, I overused frames and the color yellow seemed to be pretty prominent on my palette. But I had to start somewhere.

By the time I had my first laptop, things really started to take off. I was an avid user of Angelfire and then Freewebs, and so was able to really experiment with things. It eventually led me yearning to learn more, so I bought a book on PHP. With these new tools at my disposal, I could suddenly do more than I had ever hoped for, both design- and programming-wise.

✦ ✦ ✦

Even now, I’m still exploring different styles and trying to find my own place in the design world. This site’s redesign is one example of my ever-changing skill set, and so my own personal foundation of minimalism and simplicity shows through. That’s not to say, however, that in a year or two, I won’t come back with something completely different. In fact, it’s pretty much guaranteed that I will. As my aforementioned skills change, I feel compelled to update my own site to reflect it and keep it modern. That’s what inspired the change from the previous design (and others before it), as well as the quiet logo update halfway through.

The truth is, though, nothing ever really stays the same. You may have noticed that I went out of my way to reminisce about the Internet of the olden days earlier in this post. Most of the mentioned entities still exist, but only some still hold a high place in the world. The others weren’t as lucky, having been (for the most part) replaced long ago by innovators who weren’t afraid of change — AOL with other ISPs, Ask Jeeves with Google, etc. Designers (and programmers) have to adapt to keep up with the ever-refashioned styles and trends of the Web.

The wonderful thing about the Internet, however, is that you don’t have to guess at the trends. The most common ideas are already laid out for us: Web 1.0 and Web 2.0 have come and gone, and now even Web 3.0 is being dreamed up by new innovators. Each “iteration,” so to speak, has its own defining characteristics, and if a Website doesn’t have them (where necessary) or something better, then it’s difficult to compete. These self-defined standards are integral to where the Internet is heading. With them, sites are ensured to work in a number of different browsers, and have relatively uniform elements that casual users can become used to and comfortable with (like sidebars on blogs, navigation at the top of page, or even graphics themselves), since designers often borrow concepts that work from others.

However, more profoundly, they’re also useful so that — to be blunt — user interfaces don’t suck. Maybe it’s just natural selection, but we’ve only seen mainly just positive design choices pull through above negative ones. If our casual user from before is turned away from a product because of poor decisions, then that product may ultimately fail, leaving others to succeed.

So what lies in the future? What specifically will the characteristics of Web 3.0 be, and how much of a role will good user interface design play in it? While there’s no sure way to tell where we’ll be in five or ten years, one thing’s for certain: without designers and innovators, the Internet would still be a desolate wasteland full of un-user-friendly sites, misused tables, overused frames, and — take a long, deep breath — the color yellow.

June 6th, 2009

Hello, World

Well, another day, another site redesign. Over the past year, my Web development business has taken off farther than I had ever imagined it could in that time period. I’ve gained so much experience and learned so many new things, that I’m proud to say that I have absolutely loved every minute of it.

This new Website is just the start of something bigger. I’m relaunching this weblog of sorts to share my own ideas and musings surrounding Web design, programming, or anything else that comes to mind. I also have some exciting projects down the pipeline that I can’t wait to share here.

But first, I just want to welcome anyone coming here after reading my article in The Post-Standard or on Syracuse.com. It’s been a pleasure being able to work with the Voices and CNY Teens editor, Chris Iven, in bringing the option of starting a business to Central New York teens.

I’ll likely post another article to this weblog in the near future chronicling the process I went through in further detail for anyone who’s interested in learning more.

For those who may not know me, I’ve been doing Web development for a little over a year, now. You can learn more about me on my about page, or ask me any questions about the article (or anything, really) or inquire about work. I’m looking forward to reading and responding to anything you send, so feel free to do so.

June 6th, 2009