Usability Fuck Up

published on

October 30th, 2010 and tagged with Front End DevelopmentInteraction DesignUsability

the coop usability failure

Right, so I got an email from my local grocery store since I have a member card. This is great, that way I can save money by buying what is currently being sold out cheep. It's a win-win =). However, I read this month's issue on the cell, with images disabled, and reacted that this time, there were no discounts on the groceries, only on partner deals with travel agencies and such. Now I'm not that interested in that so it got me thinking, I hit show pictures and: BAM! there the grocery discount where, hidden in an image. Inaccessible to a lot of people. That's what we swedes call a usbility fuck up!

Here is a print-screen of what I received with my images turned off, which I do to save on internet transfer costs. As you can see, they first mention the month that this newsletter applies to, and then a commercial for a Spa-travel to Tallinn. No mention of the groceries. However, as you will se in the following image, one of the squares between is actually an ad for groceries that I was interested in.

The email shown without pictures turned on

And here is the image as it is presented to visbly able user with images turned on. The half price on Taco products seemingly just appeared out of nowhere.

The email shown with pictures turned on

However, as a web developer, I know better. I dug up the inspector and fired away, here is the code used to present the image:

<a href="http://clickredirect.com/lr3.asp?mKey=632882&cKey=123665" target="_blank">
<img height="87" width="600" border="0" src="http://www.relationbrand.com/secure/login/medit/users/medmera/_coop_medmera2-Tacos_spakryssning_och_tavling/6.jpg">
</a>

I would’ve done it  this way:

<a href="http://clickredirect.com/lr3.asp?mKey=632882&cKey=123665" target="_blank">
<img height="87" alt="We now offer certain taco products from Santa Maria at half price!" width="600" border="0" src="http://www.relationbrand.com/secure/login/medit/users/medmera/_coop_medmera2-Tacos_spakryssning_och_tavling/6.jpg">
</a>

So in the future, please mark up you’r images that have meaning with the alt-attribute, it helps at least both blind and mobile users!