Yeah bu…

Have you ever had a conversation with someone (or tried) but you couldnt get much in because they liked the sound of their own voice so much? I know I have, and generally after a few tries, I just give up or in. All of the things we learned (or didn’t learn) when we were young about listening and paying attention, not interrupting and waiting for another person to finish before our turn comes— were right.

Sometimes, as designers we can fall into the same trap. We get so wrapped up in what we want to say that there isn’t much room left for dialogue.

I’m guilty of this quite often in my design work, in fact this very site sports a significantly sized header, as do a great number of my sites. Often times as creatives, we want to bring impact to our viewers, we long for them to get the feeling of what we were inspired by, and in the process sometimes forget that this is only one element in a series of things that comprise what it is we are building. As the building progresses, we fill up more and more space. This additive design can quickly become a usability monster.

ob.servations

ma.gnolia and del.icio.us are two social bookmarking services that I would like to compare and contrast a bit. I’m choosing these two for a couple of reasons, one because I think they are both great, and two because they vastly differ in their approach.

First, lets take a look at the heart of a social bookmark— the link or (bookmark) itself.

Magnolia offers a large amount of information with each bookmark:

and in fact, this view presented above is the “less detail” view.

Delicious on the other hand is lighter on the information:

The most obvious thing here is the amount of real estate each takes up. Delicious is less than a third of the height of the Magnolia. This becomes extremely important as your library of bookmarks increases, which it will if you are a highly social bookmarker.

Big Heads, small heads

Before you even get to the bookmarks, you have to start from the top of the page down. Naturally at the top you have your site header. Lets take a look at how these two sites incorporate their headers. Below we have the profile views (Delicious shot compliments of my friend eleven26 who had more in his collection than I do at the present), which is the area where you spend alot of your bookmarking time.

Magnolia:

Delicious:

Yowza! Talk about real estate? What I really like here is how Delicious incorporates your profile information right into their branding. Just like someone who incorporates you into a conversation, you are right there next to them. One important thing to mention, is that the user of a bookmarking application is in a unique type of conversation, we are speaking with the application in order to communicate to a larger group of people. In this way an application should really do what its there to do and disappear. The user should be given the floor. This means that anything that would interrupt, distract or prohibit the user from speaking freely and uninibited needs to be removed.

Think again about why we are using it in the first place? We are there to build a collection of bookmarks. Building takes work, and not only that- keeping track of what you are building is just as important if not more important. I can’t count the number of times I’ve needed to find something in particular that I have logged only to come up empty handed after 10-15 minutes of searching for it.

All the more important to stick to the core of an app, focus on the user and minimize additive design and features. These last two screen shots should illustrate this clearly. Let’s take a look at a full screen shot of each service and think about how each has presented the users monologue (collection of bookmarks).

ma.gnolia profile

del.icio.us profile

Delicious has taken a bare bones approach- content (links) left, sidebar (tags) right.

Magnolia is a much more vertical, stacked approach, where much of your vital information (your bookmarks) are under the fold, and Magnolia uses frequent pagination in areas that take you away from the profile interface, while Delicious opts for less pagination and more scrolling.

Speak Softly and Carry a Big Stick

So what does all of this mean? Well, for me its a wake up call when it comes to my web development. I’ve got alot of work to do in my social communications. “Quick to listen slow to speak” comes to mind. And when it comes to social bookmarking usability, less is definitely more. But just like in the art of conversation we are always learning how to communicate and express ourselves with less and better chosen words, we have the same opportunity in our creativity.

We’re getting real together.