A couple weeks ago I wrote about the common UI problem of illustrating "-Ness." Here's a classic example of how it can bite you in the butt. The above grid of images are used to illustrate categories on a team's landing page within the NBA's website.
The visual design is telling me "clicking into this square you will be taken to All Boston Celtics" (Boston Celtics-ness, vs. Jacket-ness, Wall Hanging-ness, etc.) but the functionality tricks me, and sends me just to this specific shirt.
I can presume why they did this. Users saw the product, clicked into a category page of all-like product, and some of them expected to see the product that they had clicked on. These (relatively small subset of) users didn't see it and called the call-center and complained. The call center folks called the online folks. And somewhere down the line someone told the UI Designer to make the image linkable to the specific product. Oh dear.
The shirt should appear as the first product in the category page, and the entire square (light-red, above) should link to that page. If the site structure doesn't allow you to merchandize the shirt in the top-left corner of the category page, you should supply two clear and distinct text links in the above creative.
Comments