So you have a great product, and it’s time to sell it! What better way to do that than on the web? Anyone can get to it and a conversion is just a click away! Perfect! Then why do so many great, high end products have such a shitty representation online?

Case study: Maker’s Mark

Like most, I indulge in a relaxing cocktail now and then, and one of my favorites happens to be Maker’s Mark (specifically Maker’s 46).

www.makersmark.com is a very simple and clean design, and I praise them for this. It’s easy to navigate, your social media links are always visible, and it’s colorful and engaging.

But try this: click on the second navigation link labeled ‘Live Feed’. Now click on the eleventh link labeled ‘Embassy’. Holy Moly! What was all that?!? Whew, I’m glad I’m not drinking while surfing this site! I may have lost my dinner!

The mad scrolling that happens when you click non-adjacent links is not only jarring, but they have the absolute effect you do NOT want to sell on your site when it comes to a product such as alcohol. The effect is totally unnecessary as well; the developer could easily add some script that would make the transitions a bit more user friendly, maybe through a dissolve effect on the slides (They actually aren’t slides, but merely one long vertical site), or minimally just adjust the easing.

The easing is seriously compromised by the following: click on a different link, any one. Click on that same link again. Sometimes a re-scrolling effect happens (particularly in Chrome). The site will go to a different slide and reload the current one. Now after you have clicked twice on said link, now click on a totally different link. Did the slide load? The answer is yes and no. There is a delay on the slide load which makes you think the site isn’t responding. Do you know what happens when your user doesn’t think your site isn’t responding? They bail. Fast.

Case study: Gunnar

I’m a big gamer, and us gamers love toys that give us an advantage. Gunnar markets gaming glasses to help your eyes during those long caffeinated gaming sessions. I’ve never used them, but I guess they could be good for some of us.

These glasses are about the $100 price point, which isn’t an ‘oh my lord’ amount of money, but it’s enough to hit it out of the impulse buy ballpark. The problem here is they are selling a premium product, yet their site – this particular page geared toward Call of Duty fans –  http://www.gunnars.com/shop/Call-Of-Duty-MW3-Gaming-Eyewear.html has some navigation issues.

The main problem with their navigation is the hit space on the links. The first ‘products’ link is fine, but then it gets askew as it goes horizontal. Notice that ‘How they work’ gets cut off by the last two letters. You can see this as your mouse pointer changes over the r and k in ‘work’, or on mac, you can see this visually via the outline that gets put around the navigation link:

gunnar

gunnar

The other link’s outline is skewed as well:

gunnar

 This is due to image map (in a table no less!) coordinates being off as well as the the elusive outline CSS property. Here is how to fix the latter:

outline: none;
-moz-outline: none;
-webkit-outline:none;

Easy huh? So easy, you wonder why they don’t fix up their navigation. A little polish will go a long way.

Now click the red GUNNAR banner. After the site loads, click your back button and go between the two pages. Notice how the navigation jumps? The margin is different on these pages (courtesy of the cart implementation), as well as other pages within the site. This is a minor issue, but it’s just plain annoying. There is just no need for it.

For an added treat, open the following page in Firefox (I tested this on a PC): http://www.gunnars.com/advanced-computer-eyewear/ as you scroll, you will see divs jumping up and down a few pixels.

Again, these are minor issues, but if you want to sell a premium product, you have to have a premium site to reflect professionalism.

Parallax sites

These are kind of the ‘new thing‘ in web design, and it is basically a layering effect where the background of a site moves at a different rate of the content. I personally find these sites extremely jarring, but a lot of companies are jumping on this bandwagon. Vodka maker Grey Goose is one example of this, similar to the Maker’s Mark site as a vertical scroll. You can see other examples of parallax sites here. Given that this type of design annoys me, I wouldn’t spend much time if any on the site, let alone buy something, and caution against the use of them.

Our feelings guide us

We as humans respond to visuals more than anything. Simple effects influence our behavior and can lead to buying a product or abandoning a shopping cart. In turn, this feeling we form about a product influences our real world actions. For example, for a web geek such as myself, I will associate Maker’s Mark with a bad site design when I’m shopping at BevMo. If I was ambivalent about their product, it could be the one thing that tips the scales out of favor.

Bottom line: do not underestimate how your online representation influences real world actions.

Often times, the problem is not the product or even the company itself. It is the agency that has handled their advertising for so long has not taken into account the idea of user experience. Many agencies are rooted in a print industry, which doesn’t translate directly to a web space when selling a product. Often times you will have executives with printouts and screenshots in their hand in a meeting about the website, but who never actually play with the site themselves, clicking every link or crowd sourcing what they have built. It looks great, but fails on experience.

Click on your links. Navigate around your own site. What experience are you associating with your product?

Advertisements