How to design notifications?
We’ve all skim read web notifications, not entirely sure what we’ve just agreed to, or diligently re-read an error message for the third time to triple check the meaning.
Often, error messages and notifications don’t feel designed. They are an afterthought after the rest of the web copy has been decided and deliberated on. But it’s in those moments where a user encounters a notification that their customer service experience can be made or broken.
Brand-led notifications
Over the past number of years brand guidelines have become working documents rather than something that gets filed away immediately after a brand rollout. They help companies make decisions around visual communication that ensure everything their customer sees feels ‘on brand’. At a dozen eggs, we expect these documents will soon reference the verbal and written parts of the brand, helping designers, developers and sales teams to make decisions.
Though our voice doesn’t change much, our tone adapts to our users’ feelings.
A great example of this is Mailchimp – they have an entire site – voiceandtone.com – dedicated to training Mailchimp writers about their brand. The company is known for its humour, but they use this carefully.
Mailchimp don’t joke around with people who are frustrated – they get to the point straight away.
Keep it short and sweet
Coco Chanel famously said “Before you leave the house, look in the mirror and remove one accessory.” The ‘less is more’ philosophy can definitely be applied to notifications. A few days ago I was on the Waitrose website, and came across this:
Prioritise your message. The above example feels confusing – partly because Waitrose is trying to say too much; first thanking me for updating my details, second, checking if I need to update more! The call to action isn’t obvious – where am I meant to be going next?
Use design tools to create impact. The use of headings, lists, buttons and colour should ensure your error messages retain clarity. John Saito – a designer at dropbox – speaks of the important of de-emphasising the less important words, and creating a visual hierarchy.
With a little thought around how your users interact with your website, hopefully communication will remain clear and on brand!