Wait a minute, that’s not right!

Published on 6^th February 2009 in Usability, Websites, tagged Thunderbolt.

This is the story of a feature in the Thunderbolt Content Management System (CMS). It is so tiny, almost to the point of being insignificant, but the tale of its evolution demonstrates the value of detail.

Let me set the scene. When our articles have been through a peer review process, their author logs in to our CMS and submits it via a form. An editor then comes along and adds the screenshots and complementary images, does a final check and publishes the article. However, this isn’t always the case. Occasionally, our lovely staff writers will add the images themselves when they submit the article.

This is awesome for editors because it reduces their workload, but often they won’t notice that the images are already done. As a result, these articles will often sit in the queue, waiting for someone to take a look at them and realise that they could be published right away.

Clearly something needed to be done to solve this problem. So off I went and designed a solution. Any articles that needed images would be marked with a cute little icon:

I left it like this for a day or so, then realised: “Wait a minute, that’s not right!”

90% of our articles are submitted without images. With this design, all of those articles would be highlighted as not having images, but that doesn’t really add up. You don’t highlight a key phrase in a book by colouring in all of the other text.

So I reworked the design and came up with a different solution. This time, the articles which have no images are not given any special treatment, while the ones that are submitted with images are highlighted. It also allows us to show the three states of image content; the article just has screenshots, it just has complementary images or it has both. Here’s what I came up with:

The top article here has both sets of images, FF Tactics has just screenshots, Big Bang Mini has just complementary images and the last has none. This example may look at little cluttered, but in practice, only one of those articles would probably have images and need highlighting.

So what’s the moral of this story? What did I learn? Don’t always trust your instincts; they can be wrong. Make sure you really understand how something will work in practice. Most important of all, don’t hesitate to revise a solution, even if it is a tiny and insignificant detail.