Usability vs Creativity

Ok, my work life has been interfering with my enjoyment of web sites for some time. I may have to step onto the pulpit here to proclaim the importance of usability on the web.

My daily work consists of working on corporate consumer sites, designing usable interfaces for the web. In this work I look at a lot of web sites and I have a mental list of quite a few that really irk me. But nothing irks me more than when I am interested in a product, a product I may purchase I might add, and then I am presented with a user experience that is so poor that my desire for the product is totally killed.

“Crumpler Bags”:http://www.crumplerbags.com/index.php is just such a site and a product. I was reviewing one of my favorite blogs, “Commutebybike.com”:http://commutebybike.com/ and found a cool image of the Crumpler hard laptop case. Wow! Cool product. So I go to the web site. Low and behold, it is possibly the worst consumer product web site I have ever seen. That is a stretch, there are worse. But it is pretty bad. Let me give you a few reasons why.

* Navigation

All Flash sites can be done well, or poorly. Typically the failing is in how the information is laid out, (or the information architecture), and how the navigation is handled. On the crumpler site when I finally receive the home page after watching their none too clever flash loader, I receive their home page. The home page has no text navigation present on the page by default. The user has to roll over each item to reveal its meaning. Clever, but pointless some text above or below each item to indicate to the user what each item is would instantly allow the user to see what they wanted to click on. All of the navigation is non-standard and tells no story the user is familiar with when the page finally loads.
User’s don’t care about your clever artists, they want your information. If they don’t find it, they will go somewhere else, so why make them guess.

* Annoying Music

This is more of a pet peeve than a usability issue, but why would you put annoying/blaring music on your site by choice in 2007? Why…. And then to make it worse, the shutoff for the music was the music symbol in the lower left. Why not make the music off by default and if the user happens to find your icon they can turn it off and on at will, rather than coming to a page with annoying music that is controlled by non-standard navigation that is not labeled.

* The diarrhea button

I have a sense of humor, the diarrhea button was pretty sweet. However the chain pull where you have to click and drag to clear the poop from the screen was a drag, it took me a while to find it and know what it was for. Maybe a little text to explain it would help? More non-standard controls that interfere with finding information, no matter how much it appeals to my juvenile sense of humor still makes a poor impression.

* The shopping experience

I finally find the computer bags link on the bottom and go to the shopping experience. All of the products are listed in a scroll bar frame at the top. Not great, in terms of being able to see all of the offerings at once on one page that scrolls, (yes user’s scroll), but it’s ok. The computer bag is selected on the page, I do have some clear default options that are labeled. If all I wanted to do was go with the default option and click to add the item to the cart I would be fine. But let’s say for now I wanted to look at the tech specs first. The tech specs display below the product area, and are displayed on a color background that is hard to read, not organized very well. As red/green color blindness is the most common amongst men, 7% of most adult male populations, why, oh why would you do this?….

Let’s say after not being able to understand the nav, or shut off the music, or clear the diarrhea from the screen you chose to purchase this computer bag. Once on this screen, I have a page where I am being asked to make a purchase decision on a colorful product, with no picture of the product. I have to select the product with the tiny drop down box, with no color sample from a color abbreviation name. So let’s say I can’t remember what color red/dk red is, how do I go back and look at the color on the last page? Oh sh#t I can’t. This page has no navigation to go back to the previous page to look at the color selection. So I hit my back button to look at the color selections. Now I’m pretty sure I like red/dk red, so now I am going to go back to the cart, oh sh#t how do I get back to the cart? Hmm there is no navigation to do that. I can either click add to cart, or use the forward button in my browser. I’m pretty savvy, I hit the forward button. Oh terrific, it adds another bag to my cart, now I have to remove the second item from my cart.

Guess what, no I don’t! I’m leaving the site and buying another “Chrome Messenger Bag”:http://www.chromebags.com/ product because their site kicks ass.

User testing and thinking about how someone will actually use the web site you make will sell your products.

You can still have your diarrhea button, but you gotta get the basics down first.