How do you make good UX / GUI to present information to a mass-market audience with widely varying levels of education and attention-span?
This is a problem faced all the time by game designers and developers. It’s one of the most under-appreciated skills of the profession: good game developers know more about “presenting information and choices” than almost anyone else, anywhere. Because games are generally overloaded with info, and the dev teams have to filter that down and present it clearly – but if they get it wrong, the player’s in-game character dies, the game is lost, and the game itself tanks commercially. The developers then – ultimately – lose their jobs when the studio goes bust.
I’m going to start looking at non-tech examples of design and UX through the lens of game-design, and see where it goes…
Food: a fast way to self-poisoning
Here’s an interesting example where information-presentation is high-value/critical, but pervasive and difficult:
In most Western countries, the Governments ensure that all places that sell food publically – restaurants, cafes, bars, street vendors – meet or exceed good-health standards according to modern medical understanding.
Great!
But that’s a complex problem: especially, how do you “ensure”? If the food is bad, do you close down the business? The staff lose their jobs, the owners go bankrupt, the public never trusts that brand again? Is it possible for cheap food to continue existing in such a regime – or would the risk be too high, and all food would become expensive … ultimately unseating the Government itself (a population that cannot afford to eat is extermely scary to those in power!).
A common approach today is approximately:
- If it’s dangerous, shut it down. If a vendor is – for instance – infecting ANYONE with food poisoning on a recurring basis: force them to stop selling.
- If it’s merely risky, not poisonous but – perhaps – unhealthy: warn them, but let the public decide.
How?
UK’s 5-point Food Hygiene System
These stickers are common in UK food places. Almost everywhere has them displayed in the street window, even when the sticker says bad things about the establishment:
Thanks to the Web, it’s easy to read about this direct from the UK Government: food.gov.uk – the official website explaining the scheme.
From the website: “It’s not easy to judge hygiene standards on appearance alone, so the rating gives you an idea of what’s going on in the kitchen, or behind closed doors. You can check the ratings and use the information to switch to or choose a place with higher standards.
…
The scheme also encourages businesses to improve hygiene standards.”
That’s a huge amount of information – with enormous repercussions upon getting it wrong – that has to go out to a highly uninformed (most people don’t know, don’t care) mass audience. Let’s break it down…
Colour choice
The black border is part of the actual stickers:
This normally goes on a glass window, so the thick black border helps them stand-out, and makes sure that the pale green background is always in high-contrast to its surroundings.
The green is pretty unpleasant compared to normal Brand colours; I suspect that is deliberate.
Then the black border is re-used for the number-rating itself. So you have a contrast scheme: border – background – number. The key info has been isolated and made almost impossible to miss.
The most important info – the rating out of 5 – has been made the most visually striking item on the sticker
Weight
Let’s look at a blurred version. This is quick and dirty, but in my experience it normally maps very closely to where people look and what they notice (compared to doing proper eye-tracking studies):
- The unselected numbers disappear; their “button shine” effect causes them to blur themselves out of existence
- The selected number remains strongly visible: the pure flat render ensures it always has high contrast and clarity
- The thin / narrow lines of the font-face make most of the text disappear. Combined with the thin rule separating the sections, it all takes a back seat to the rating
- (unlike some provincial ratings I’ve seen in other Countries, where the local-authority’s own branded logo takes prominence, making their altruism appear … questionable)
- The words “food” and “rating” stand out anyway. Bracketed at the extreme edges of the sticker, and using letters that keep their structure under blurring (compared to the “hygiene” word)
- The “tick” is clearly visible. More on that later.
- The numbers take up almost exactly as much weight as the title + rule + tick combined
What am I looking at?
For the ignorant man-on-the-street (most of us, I think) this is the big question: Whatever; what is this and (why) do I care?
…once I get that (OK, the title helps a lot, but people skimread a lot), there’s a few things working all at once to help:
- Instead of a number, you’re given ALL the numbers, and one of them is VERY clearly “selected”; there is no doubt that this is an “out-of-5” rating of some kind
- …and that the rating goes 0..5 (not 1..5, nor 1..4, etc)
- The tick confirms exactly which rating the establishment has received. With 2-4 this isn’t a big deal – but with 1 and 5, where you might assume the number was larger because the graphic designer was bored and making it look pretty for no reason … the tick confirms “No, you didn’t misread it. This really is a 0” (or 5).
- The tab!
- The tab moves along with the number! No lack of clarity about whether it’s merely “bonus info”. Nope, this is explicitly part of the rating itself.
- What does a number mean, anyway? The tab tells us!
- The position of the tab is the 3rd emphasis on the number’s relative position. Relative position matters enormously to the public: “is this THE SAFEST place to eat? Maybe it’s not great, but IS IT THE BEST I’M LIKELY TO FIND?” etc.
- The numbers are all visible, and one is “selected”; the percentage left-to-right of the “selected” circle acts like a progress-bar showing how good/bad it is relative to the rest of the possibilities
- The tick does the same, but makes it even more explicitly “progress”-like
- The tab further cements this, by moving from left (bad) to right (good) with increasing scores
- The tab is smaller than the number; why? Probably because: a few words cannot hope to give detail on this particular establishment. People understand that a number is a gross simplification, but words incline them to see it as a detailed summary. So: de-emphasize the words and emphasize the number. The words are here to shine meaning on the number, and to give reassurance. e.g. some readers may assume that “anything less than 5 means I’ll get poisoned!” – dealing with Fear, Cultural differences, and General Ignorance is a daily struggle in mass-market UX.
More thoughts…
I find it interesting that the “normal” rating is 3/5 (exactly halfway if you rated 1,2,3,4,5), but ends up positioned slightly to the right of center.
This is partly a side-effect of starting at 0, but they might have arrange 1-5 on one line, and used a different sticker (maybe a red background, for DANGER!) for 0.
However, it provides another benefit: in a well-regulated market, “average” is actually a very GOOD thing! It’s something to be proud of. In Western societies, “average” is generally associated with mediocrity and connotations of failure.
Shifting the “average” score of 3 slightly towards the “perfect” score of 5 helps suggest to the reader that they ought to be pleased with that score, rather than disappointed.