Design 1, 2, 3: Make Your Camera-Store Website Clutter Free

Posted Monday, November 30th, 2009 by Heather, in eCommerce Web Site Design

I recently made a dSLR camera purchase. I put a lot of research into it, and even though Amazon.com won out (they had this amazing rebate), I checked out some of the area camera stores online to whet my spending appetite.

Someone had recommended a store, so I started at that website. They have a fairly good site with some good things going on: product comparison functionality, browsing refinements, detailed product information, etc. But as a designer, I just couldn’t get past some of their fundamental design mistakes. In my opinion, the design is a bit dated among other things. But this post isn’t about my opinion, it’s about three quick tips that could vastly improve the design and usability of their website. (And if you don’t think the site’s design is important, read my recent post on factors that influence website credibility.)

Okay, so here are this month’s Design 1, 2, 3 tips. This is the homepage of the camera store, the first 600 pixels:

And here are my recommendations:

1. Distractions: The hot pink squares (four total) all move. The ticker slides non-stop. The classes’ module slides every five seconds. The main banner fades in and out every 12 seconds. The hot deals module swaps out every 20 seconds. It’s a lot of movement in roughly 230 pixels of height. I’m sure it’s meant to be attention grabbing, but instead it’s very distracting. In my case, I’m an interested, prospective customer trying to find the dSLR category, but my attention is being diverted by a camcorder video class, photography competitions and hot deals on cameras I’m not interested in.You might ask, but what about the person who comes to the site not knowing what they’re looking for–don’t all those banners help them? The answer, maybe. But who’s really your desired consumer? The person with their money in their hand or the person who happens to walk into your store while window shopping? Let whatever the main attraction is, be the main attraction. At most, use one rotating/flash banner.

2. Clutter: In the hot pink circles, you can see orange triangles in the navigation bar. And honestly, they’re just clutter. If you want to include an indicator to show that the menu is a drop down, why not make it subtle? Don’t make it an overly large, bright orange triangle with white stroke? I’d recommend a small, inverted carrot or plus sign in navy blue. The top navigation has so many links that reducing those indicators could help give a few extra pixels of white space.

3. Clutter: Somewhat funny, tip number 3 is also about those orange indicators. In the navigation, they represent something hiding under that piece of navigation. But if you notice, there are orange triangles all over the page. They’re visually different (barely) because they do different things. My problem is that the triangles with the navy blue stroke don’t do anything. They point to that specific header’s content. (E.g. “Upcoming Classes” points to the upcoming classes’ module.) If the user doesn’t understand which header goes to which content, it’s a design flaw.

Remember, poor design can disappoint and dissuade your visitor. Don’t lose conversions and customers because you haven’t given your site a critical eye or because you haven’t let someone else give your site a critical eye.

Mentioned in this post:
Homepage :: Penn Camera

Design 1, 2, 3 is a monthly review to improve a design element in at least three easy steps. Want something given the 1, 2, 3 treatment? Mention it in the comments.