The commute to work the other day was that classic British trudge in the rain-not-rain which soaks you to the bone despite existing as a seemingly inert omnipresent grey smear. You could call it Cornish weather. Or maybe a grand soft day if you're in Ireland. I suppose it's drizzle, but it's a bit closer to mist. Hard to explain to your Spanish cousin, but if you're the BBC, you solve it with a simple icon of which Gerd Arnz would be proud.
 |
| The BBC's icon for drizzle |
I'd never seen this weather symbol before. I'm not sure how long it's been in existence, but it must be quite new (I'm British. I own a smartphone. Ergo, I check the BBC Weather app like a teen checks Snapchat). So I had a dig around, asked someone I know from the internet called Jeeves, and found an old BBC piece on the redesign of their weather services, written by Melanie Seyer. It's a fantastic read, which - given the speed of how digital design develops - is still a relevant overview of a complex project, discussing research, user experience and graphic design. Curiously, it's briefly mentioned they were trialling a new symbol for drizzle. In 2011. Maybe I'd just never bumped into it?
Regardless, it's a thing of small beauty. It sits perfectly within the complete set of BBC weather icons and is a lovely bridge between the light rain icon and 'MIST' (one of only three which use words as adjectives - FOG and SAND STORM being the other two). Which got me thinking, imagine if mist absolutely definitely without a doubt needed an icon. What would it look like? How would you do it?
I did actually go through a brief design period of wanting to pare all messaging down to iconography, to the point of madness whereby I wanted to subtitle Stanley Kubrick's The Shining using only icons. Maybe the effect of reading too much Isotype history, or working on games which had to be localised in multi-languages. Instruction and information as a graphic was often an elegant workaround; pictures speaking a thousand words and all that. However, sometimes just one simple word is the quickest way to cut through and deliver your message.
Take the much maligned 'burger bar' for example.
 |
| IKEA's burger bar, appears top right on the nav. |
It's a symbol many web users take for granted as an instruction to open a hidden menu. However, herein lies a classic design problem: no matter how intuitive you could argue this particular design pattern is - it's still a part of a language recondite to any user who's unfamiliar with it. (There's a wider UX conversation we could have right now, but I'll let Cassandra Naji do it better so I can stay on point - this is just a pithy blog entry after all).
Anyone who's owned a smartphone from the start has had the benefit of learning iteratively, in tandem with the developers who create these user interfaces. New actions, swipes, hidden features, 3D Touch - they've been drip-fed to us. Now imagine it's 2017 and you've never picked up a smart phone before. No matter how intuitive the design of the OS may intentionally be, there's still an incredible learning curve involved. Intuitive design only works as part of a complex and myriad series of learnings undertaken by the user - not just technologically but socially. For the burger bar to work, you need to already have an idea of interfaces hiding content which can be revealed. You also need to decode the metaphor of three horizontal lines and what they could represent. A stack of content? Greeked text? A concertina? A delightful Rococo chest of drawers? Then there's action and consequence. Will tapping it make something happen which the user doesn't want to happen? And I haven't even mentioned the alternatives to the burger bar. Apple's Avocado on toast (I made that name up BTW) or the 9x9 cluster of dots. All variations on a theme trying to convey an action for which there is no set visual standard. Confusing.
 |
| Top: Apple's burger, bottom: Wired's burger. |
So, three questions the user may ask themselves when trying to find the menu:
Where is it?
What is it?
What happens if...?
So, assuming the website is created for an English speaking audience, If we simply replace the icon with the word 'Menu', then the user need only ask the first question. It's an elegant simplification which seems counter-intuitive to the aesthetic simplicity of an icon, but it works. Which brings me back to 'MIST'.
Mist doesn't need an icon in this context. Mist is a atmospheric condition which affects visibility. It's damp. It's almost physically not there, but is. It's similar to fog. But it's not fog. It's mist. So, back to my original question, how would you create an icon for it? My answer: I wouldn't bother. Let it simply be 'MIST'.
Want some extra reading?
One of the original members of that small BBC design team, Adam Morris, writes about his experience on Medium.
The BBC’s guidelines on iconography (GEL - Global Experience Language) across their brand, including the weather.