The art of writing great release notes

One of the first tasks I was given as a technical writer was writing a set of release notes. For the most part it involved pulling together and reading through developer notes, removing jargon and rewriting the text in concise English that customers could understand.

More often than not, the release notes felt like a bit of an afterthought, a chore that developers put off until the very last minute. While it might sound fairly simple, writing release notes is an important and yet under-appreciated task that requires more skill, care and attention than it is sometimes given credit for.

Although it is still fairly common to find release notes that simply state “bug fixes and improvements”, companies are investing more and more time and effort in make their release notes stand out. So, what is the purpose of release notes? And what is the best way to write them?

What are release notes?

Release notes, sometimes called the change log or “app updates”, comprise of the documentation sent out with the latest update or version of your product that informs customers what has changed and what is new in the release.

Google technical writer Sarah Maddox gave the following advice about release notes:

“The most important function of release notes is to let customers know that something has changed in the product, particularly when that something may affect the way the customer uses the product.”

At least they were honest!

“The change may be a new feature in the product, an entirely new product, a change to the way the product works, a change to the way the customer uses the product, the removal of a feature, or even the deprecation of the entire product.”

Some key questions to think about when writing release notes are:

  • What has changed in the latest version of your product?
  • Why has that thing changed?
  • How does this change impact the user?
  • What does the user need to do differently as a result?

If you answer all of those, you won’t go far wrong.

Although there are no official guidelines to writing release notes, there are some general principles you can follow to ensure your release notes are informative and useful.

Make your release notes more engaging

Historically release notes have always been quite dry and technical, so not much effort

was made to engage with customers. However, they have experienced something of a renaissance in recent years with more and more companies using release notes as an extension of their brand’s voice and an opportunity to engage with customers.
Photo by Maliha Mannan on Unsplash

Hometap head of product Adam Sigel said he looked forward to app updates to not only find out about new features but also because he hoped to find something good to read:

“Release notes are a really interesting engagement opportunity to me — most people don’t read them, but those that do represent a highly targeted audience of very engaged users. Every company with an app has to write them, and I love to see who treats it like an opportunity instead of a chore.”

Head of Growth at Paystack Emmanuel Quartey added: “App update release notes are a very small user touchpoint, but with just a little bit of imagination, they can be a way to connect with users on a whole other level.”

While some companies have started to use release notes as a small platform for expressions of creativity and comedy, it’s not an entirely risk-free art form.

The risks of being too creative

However, speaking at the Write the Docs conference, technical writer Anne Edwards said she felt that “funny, quirky and friendly” release notes were often too wordy so either the main message was obscured or they created more work and confusion for the reader, especially for non-native English speakers.

She raises some valid points but when Tumblr produced a release note that was basically a 471-word fanfic-style story featuring its founder David Karp, it went viral and featured in the Guardian newspaper and Business Insider:

 

Some people might not have found that release note very helpful because it contained no information about what was actually in the release but it demonstrated the power that a humble release note can have as a marketing tool.

Medium is another company who are creative and off-the-wall with their release notes, no doubt a reflection of their mission to inspire creativity in the millions of people who use the platform. Medium’s release notes have appeared in the form of haiku, a fake Slack conversation, song lyrics and even an ASCII picture of a bug:

However, even the Medium writers behind the release notes admitted they were having to reign in some of the creativity of their content because users wanted more details about what was in each release version. In an interview with Verge, Medium’s community manager Nick Fisher, said:

“The most common blowback we get is from people who want to know what’s in the release. They hate these because they have no idea.”

Finding the balance between funny and useful

There is sometimes a fine line between being funny and being irreverent so it’s no surprise that some companies have started to come under fire for their release notes. People don’t always appreciate jokes or zany content if it doesn’t also provide any meaningful update about the product they’ve invested their time and money in.

 

https://twitter.com/jaredsinclair/status/633407338347634688

In her Tech Crunch article “App Release Notes Are Getting Stupid”, writer Sarah Perez said she felt some companies were being irresponsible and disrespectful to customers by not providing decent information in their release notes:

“This inattention to detail is a disservice to users, who no longer have the benefit of understanding what the updated app will now do — or not do — as the case may be […] They don’t know what functionality has changed or how the user experience is being affected. They don’t know if the changes are even bad or good.”

She continued: “At the end of the day, if a developer wants to have fun with the release notes, that’s up to them. But no matter what, they should still feel a responsibility to their customers to communicate what’s being installed on the end users’ devices.”

Slack felt the need to apologise for their overuse of humour a few years ago but in general they’re good at striking the right balance between providing release notes that are both funny and useful to the end user:

Asana is another company that is recognised for funny and informative App Store release notes (see here, here and here). However, interestingly Asana also produce a more formal and straight-laced version of their release notes on their website. Perhaps this is a good way to appeal to different audiences in your customer base.

Watch your language!

It might sound obvious but it’s important to be careful and professional about the language you use in release notes. At a previous employer, one of my developer colleagues wrote the following as a placeholder for one of the tickets for some internal release notes:

TBD - a shit tonne of configuration changes

The documentation team missed it and although we found it funny at first, our smiles soon dropped when we realised the release notes had gone out to a customer. The shit hit the fan so to speak 💩.

Remember to be human

Remember that you’re a person speaking to another person when writing release notes. It’s another layer of user experience that helps connect you connect to your customer on a human-to-human level. For example, “We are doing x for you”:

Think about visual design

Most of the focus typically goes on the content of release notes but it’s also worth considering the visual design of your release notes. Some companies are going the extra mile to make their release notes pages visually interesting. GatherContent has a colour-coded, interactive updates page:

GatherContent’s release notes contain an animated bug!

Similarly, Todoist use different emoji as visual aids to inform their customers of the different change types in each release, using a ⚙️ for improvements, 🐛 for bugs and ⭐for new features:

Product designer Rob Gill wrote a brilliant post about release notes design in which he advocates (among other things):

  • Using bullet points.
  • Creating titles that stand out.
  • Adding spacing so users aren’t faced with a wall of text.

Reward people for reading them

Release notes are a great opportunity to reward loyalty, especially as the people who read them are more likely to be your most dedicated and loyal customers. PolyMail took this approach and rewarded users who read their release notes with stickers:

PolyMail co-founder Brandon Shin, who wrote about how they make release notes more exciting in this post, said: “We looked for more ways to grow this feeling of appreciation and interaction. Sometimes we tucked in small prizes in the release messages, giving stickers to people that always took the time to read through.”

It doesn’t have to be a physical reward. Citymapper recently rewarded readers of their latest update by telling them about their new transport pass that will save you money in London.

Do you have to use release notes?

Not necessarily. Facebook took the somewhat controversial decision to no longer produce detailed release notes and produce in-app notifications about new features and changes instead. It wasn’t particularly popular with some users:

Amidst the backlash, a Facebook engineer posted on the MacRumours website, to defend the decision.

“… to describe every one of the thousands of changes that go into our mobile applications each and every release, the plain fact is that is just impossible. Many changes are under the hood for performance and bug fixes.”

He went on to describe the difficulties of providing release notes for pieces of work on features that haven’t been released yet and argued it was easier to provide in-app walkthroughs rather than putting blurbs in the App Store.

“We’re not trying to keep secrets from you. There are just simply better ways of telling you what’s interesting when those features are ready for you.”

Do people actually read release notes?

Yes, apparently they do. I’ve also been conducting a survey to see how many people actually read release notes, how regularly they read them and why they read them. The results were a lot higher than I thought they would be:

At the time of writing I had 364 responses, with 83.2% saying they read release notes or app updates. I’ll write about my findings in my next post so watch this space!

Some takeaways…

Ultimately, release notes are totally subjective. Some readers just want the factual information, while others want to be entertained. My advice would be:

  • Make your release notes engaging if it’s in keeping with your brand.
  • Being funny and creative is fine but balance it with meaningful content.
  • Take care with your language.
  • Remember to be human.
  • Don’t forget about design and spacing. Walls of text are not appealing!
  • Reward your readers for reading them. It doesn’t have to be a physical reward — secret content or early access features are rewards too.

In the end it is up to you to get the style and balance that is right for you and your company but as long as your release notes provide users with meaningful and informative content, they’re definitely worth the time and effort.


Resources

  1. How to write a release note — Sarah Maddox (Google technical writer): https://ffeathers.wordpress.com/2017/08/19/how-to-write-release-notes/
  2. Great Release Notes — Adam Sigel (April 19th 2015): https://medium.com/@adamsigel/great-release-notes-508b5f74989e
  3. The one user touchpoint almost every mobile app ignores — Emmanuel Quartey (January 11th 2015): https://medium.com/product-notes/the-one-user-touchpoint-almost-every-mobile-app-ignores-94ecfaf990f6
  4. Learning to Love Release Notes — Anne Edwards (September 2018) http://www.writethedocs.org/videos/prague/2018/learning-to-love-release-notes-anne-edwards/
  5. I drank beer and wrote release notes with the Medium release notes team — Casey Newton (Verge, Feb 10th 2016) https://www.theverge.com/2016/2/10/10938420/medium-release-notes-drinking
  6. App Release Notes Are Getting Stupid — Sarah Perez (Tech Crunch, April 9th 2015): https://techcrunch.com/2015/09/04/app-release-notes-are-getting-stupid/
  7. A little thing about release notes — Slack Blog (April 4th 2016): https://slackhq.com/a-little-thing-about-release-notes
  8. As a Designer I want better Release Notes — Rob Gill (March 3rd 2017) https://uxdesign.cc/design-better-release-notes-3e8c8c785231
  9. Facebook engineer defends decision to stop producing release notes — Mac Rumours (October 15th 2014) — https://www.macrumors.com/2014/10/15/facebook-youtube-iphone-6-support/

How to write the perfect error message

Error messages are seemingly so innocuous but they’re actually incredibly important in ensuring good UX and keeping your end user happy. A good error message informs your customers what went wrong, why it went wrong and what they can do to resolve it. Microsoft’s Windows developer centre guidelines state the following:

 “Effective error messages inform users that a problem occurred, explain why it happened, and provide a solution so users can fix the problem. Users should either perform an action or change their behavior as the result of an error message.”

If you get that wrong, it can not only lead to frustration and low product satisfaction but in the worst cases you might lose credibility with your customers or end up being ridiculed on social media.

Although getting error messages right isn’t always easy, there are simple steps to follow to ensure you don’t leave your end users in the dark (or rolling around on the floor in fits of laughter).

Check your spelling and grammar

Accurate spelling and grammar is vital in terms of ensuring your audience understands the message you’re trying to get across. The professional quality of your external facing content also reflects the professional quality of your product and your brand.

Although spelling mistakes and typos can sometimes be quite harmless and funny, if your content lacks accuracy, you also run the risk of causing confusion. If you’re not confident about your choice of wording, ask a technical writer or content specialist for help.

Be specific

Default error messages like “There has been an error” or “An error has occurred” are really unhelpful. Don’t just tell your end users that something happened, tell them why and what they can do to fix it.

Dubbed as “the least helpful error in Windows history”, Microsoft presented users with an error message that simply stated “Something happened” when they tried to install Windows 10:

Ahh something happened…

This error message was so bad it became something of a social media meme with users ridiculing how unhelpful it was. The solution, which was revealed by someone on Reddit, was as simple as changing your language settings but the text was so ambiguous it could have remained a total mystery.

Provide the right amount of detail

If you can explain what has gone wrong, then add a description in non-technical terms so your user understands the context. It’s great to be polite but simply posting an error message saying “Sorry” or “Oops” doesn’t really help anyone.

If you’re going to “sorry”, follow it up with an explanation of what happened and offer some actionable steps so the user can resolve the problem.

Avoid jargon and developer speak

Remember that you aren’t talking to another developer. Your end user doesn’t read code or care about the internal processes involved in making your product work. Break down what’s going on in simple terms that anyone could understand.

In this example where the user was trying to create a new password, the validation error message text is overcomplicated and contains developer jargon.

It would have been much better to say something like: Please try again. Your password needs to contain both lower and upper case characters and a special character.

Another example of bad developer jargon appears in the Microsoft dev center guidelines under the heading “incomprehensible error message”:

Don’t be a robot 🤖

What’s an MM error? What’s a standard FsRtl filter? What does this 0xC00000EA code mean? This error message might explain the problem from a developer’s perspective but it leaves you with more questions than answers.

Be a human and friendly

While you’re thinking about how to avoid using jargon and writing in developer speak, it’s also good to remember to be human. Your end users don’t want to feel like they’re being spoken to by a robot. Remember to speak their language and be friendly in your messaging.

This error message from the Meta Stack Exchange site is a good example of how you can be human and friendly in your messaging:

“It’s not you, it’s us…”

Sure, it isn’t particularly specific but it is apologetic, it makes it clear the error was not your fault and informs you that the error has been recorded and someone will look at it.

Be clear and unambiguous

Ambiguity doesn’t help anyone. Presenting your users with some vague message that offers no practical information about what is going on and what they can do to solve the problem is really unhelpful.

If your error message is confusing, it has failed its primary objective. Think about what you are trying to tell the end user, how they will process that information and write it in the clearest possible terms.

If you’re unsure, get a tester or someone in a non-technical department to read the text and see if they can make sense of it.

Be concise

Users do not want to read your life story in an error message. If something has failed, an error message should be a short, concise piece of text that informs the user what went wrong and provide a potential resolution to the problem.

So much text!

Research by the American Press Institute found evidence that shorter sentences resulted in greater understanding:

  • For sentences that were 8 words or less, readers understood 100% of the information.
  • For sentences that were 14 words long, readers understood 90%.
  • For sentences that were 43 words or longer, comprehension dropped to less than 10%.

On that basis, there is an argument for keeping your sentences short. That is the recommendation of author Martin Cutts, who offers the following advice in the Oxford Guide To Plain English:

“Over the whole document, make the average sentence length 15–20 words…More people fear snakes than full stops, so they recoil when a long sentence comes hissing across the page.”

Voice and tone

Choosing the right voice and tone for your error messages is really important. You shouldn’t use an accusatory tone that makes the user feel like they’ve done something wrong or that the error is their fault:

Don’t make your user feel like a criminal!

You might want to consider ensuring the tone you use is in keeping with your brand. Slack is known for being quite playful with their messaging:

Anna Pickard, Slack’s head of brand communications, said their friendly, sometimes playful tone of the editorial copy was a vital part of supporting the product and making users feel like they’re talking to a friendly co-worker:

“It is sometimes funny, sometimes serious, sometimes just plain and informative, but throughout, it should feel like nothing more than a person, talking to another person. Human to human.”

Apple’s Human Interface guidelines advise using a friendly tone helps to avoid sounding accusatory or judgemental:

“People know that alerts notify them about problems and dangerous situations. As long as you use a friendly tone, it’s better to be negative and direct than positive and oblique.”

Add humour when appropriate

Having a sense of humour is good but it normally only works if you’re helping the end user at the same time. However, sometimes trying to funny can fall short of the mark if your error message isn’t particularly helpful:

Github’s 404 page mimicking Obi-Wan Kenobi’s famous quote from Star Wars is a nice example of combining humour and knowing their audience:

In Mailchimp’s content style guide they recommend only trying to be funny when it comes naturally and not forcing it when it’s inappropriate:

“…feel free to be funny when it’s appropriate and when it comes naturally to you. But don’t go out of your way to make a joke — forced humor can be worse than none at all. If you’re unsure, keep a straight face.”

Think about colour and design

It is important to think about the colour and design of your error messages so they are UX friendly and accessible to all of your users’ needs. Don’t choose colours for your font and background that are too similar or will be difficult for people with colour blindness to distinguish between:

Don’t use colours that clash or would be difficult for people with colour blindness to read.

Some general guidelines to follow are:

  • Avoid using font and background colours that clash.
  • Think about accessibility. Users with colour-blindness might not be able to distinguish between shades of red and green.
  • Be consistent if you are going to use colours to denote different types of alert. E.g. Green for a success message, yellow/orange for transient warnings and red for an error message.
  • Choose a font and background colour that contrast nicely.

Red is the most common choice for error messages and associated icons for a reason. In his paper about colour associations, psychology professor Dr Arlen C. Moller noted how red often conveyed negative information in everyday life and had objective connotations with danger in the form of fire and blood.

Meanwhile research on colour psychology by professor Andrew J Elliot from the University of Rochester found that people’s attention was drawn to the colour red much faster than other colours:

“In research on color and selective attention, red stimuli have been shown to receive an attentional advantage… Participants’ visual search times were faster for desaturated red (relative to several other colored) targets”

Summary

In summary, when creating your next error message remember to think about the following things:

  1. Spelling and grammar. Accuracy is important.
  2. Be specific. What happened?
  3. Provide the right amount of detail.
  4. Avoid jargon and developer speak.
  5. Be human and friendly.
  6. Be clear and unambiguous.
  7. Be concise. If in doubt, aim for 15–20 words per sentence.
  8. Choose the right voice and tone.
  9. Add humour but only when appropriate.
  10. Think about colour and design.

TL;DR —Write your error messages in concise, friendly and non-technical language that everyone can understand. Otherwise they’re pretty useless.

Resources:

  1. Microsoft Windows Dev Center guidelines on Error Messages: https://docs.microsoft.com/en-us/windows/desktop/uxguide/mess-error
  2. “Windows 10’s ‘Something Happened’ error is turning into a meme”, WIRED article: https://www.wired.co.uk/article/windows-10-something-happened-error
  3. How to make your copy more readable: Make sentences shorter: http://prsay.prsa.org/2009/01/14/how-to-make-your-copy-more-readable-make-sentences-shorter/
  4. Slack’s Editorial Soul: Anna Pickard on writing the brand experience: https://www.contagious.com/news-and-views/slacks-editorial-soul-anna-pickard-on-writing-the-brand-experience
  5. Apple’s Human Interface Guidelines on Alerts: https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/alerts/
  6. Voice and Tone: Mailchimp Content Style Guide: https://styleguide.mailchimp.com/voice-and-tone/
  7. Basic Hue Meaning Associations: Arlen C. Moller: http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.438.157&rep=rep1&type=pdf
  8. Color and psychological functioning: a review of theoretical and empirical work: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4383146/

UX Design: The Good, the Bad and the Ugly

The Good

One of the nicest pieces of UX design I’ve come across recently is the Monzo banking app. When a friend from university said he was part of team setting up a bank it piqued my interest, partly because it sounded so ambitious and partly because I worked in the payment industry at the time.

monzo_horz_lightbg

Founded in 2015 as Mondo before a legal dispute forced them to change the name, they are part of the new crop of so-called “challenger banks”, set up to battle the old guard of banking institutions who are losing touch with their customers, the smartphone generation in particular.

Their USP is that Monzo is built with the latest modern technology (developed in Google’s coding language Go) so is “as smart as your phone”, easy to use and is able to offer instant notifications when payments are made.

monzo-screen

spending

It’s difficult to convey how nice the UX is in a still image but the app is incredibly clean and intuitive and makes it a fun way to map your spending. As you make purchases on your Monzo card they appear instantly in your app where you can see the name of the merchant, the amount spent, as well as map location, the category that your purchase fits into (entertainment, transport, groceries etc) and it is possible to attach a receipt and a note, completed with emojis. Overall, it’s just a very pleasing app to use.

The Bad

One my tasks at work is to send out version releases and patches using a piece of software called BizWizard which is made in Sweden. I’m going to be brutally honest, the old version of the product really sucked and I dreaded using it because I had so many issues with it.

bizwizard_retina_660

For starters, it wouldn’t run on Google Chrome and would crash unless running with Edge or Firefox.  I also found that most of my time on Bizwizard seemed to be spent watching the same grey progress bar as it slowly moved from screen to screen:

bizwizard

I thought it might be related to the amount of messages being stored but it is slow to navigate between most screens, even those without much data. It just made the entire experience of using it very dull and frustrating.

I’m not going to be totally negative about Bizwizard because the latest version is a dramatic improvement and for the most part, it’s really easy to use. I just encountered one more issue that I didn’t like in the new version of the content editor, which is that when I finished writing a message, my natural inclination was to click the prominent blue Revert button at the bottom of the screen, assuming that was the Save button (See screenshot below):

bad-ux
The Revert button which tricked me into thinking it was a Save button in BizWizard.

It’s probably a result of using Confluence, where the Save button is in the button right (see below), but as a result of clicking Revert my text was wiped with no way to undo or get it back. Very frustrating as a first time user of the new version.

confluence
The Save button in Atlassian Confluence.

I suppose I can’t be too hard on BizWizard for creating a button in a similar style and position to Confluence but it shouldn’t have so much prominence because it is a more natural place for a Save button. I’ve sent my feedback to them so it’s up to them whether they change it or not.

The Ugly

Linkedin is actually an app I use quite a lot and occasionally use to share my blog posts but unfortunately there are quite a few things I don’t like about it and the overall experience.

linkedin

Apart from the feeling that the “professional network” is striving to turn itself into Facebook and forever tries to force connections on you, there are other things that annoy me and just make it an unpleasant and sometimes annoying user experience.

Take the homepage for example, there is just so much going on. It’s just a bit of an information overload and makes me want to close it down. See screenshot below:

linkedin-2

There are so many things that demand your attention here in my opinion, with the orange warning bar about emails at the top, the yellow button begging to be pressed so I can reconnect with colleagues (not today thanks), blue links encouraging me to improve my profile and grow my network, an advert asking me to try Hired today, and a tab informing me I have one new update (and that’s having already read my notifications). It’s just far too much, like a needy kid screaming for attention, a lot of it just unnecessary and off-putting. It ruins the user experience.

In contrast, the smartphone app version is actually really nice to use and much cleaner than the web version. It’s a much more enjoyable user experience with a nicely designed UI and much less information to deal with. See screen below:

linkedin23

The only negative is the red notifications are often unclear so I don’t always know what I’m getting notifications for and there still seems to be an ongoing issue with messages/emails,  for example receiving and sending duplicates of the same message.

As a technical author I do find myself looking at software and applications through the eyes of a first time user/ tester so I’m maybe I’m being harsh with my criticism but development teams should always consider the user, their experience and how they would expect or like your product to work. If your product doesn’t work how they would expect it to, if they find it difficult to navigate or if they find the overall experience annoying or frustrating then they are unlikely to want to use it again and that’s bad news for business.

Please note: User experience is always going to be subjective so some people may agree or disagree with me about these examples. It goes without saying that all of the opinions above are my own and not those of my employer!

Snapchat’s UX: A Confusing Mess?

Snapchat might be the image messaging app of choice for today’s teenagers, with 10 billion daily users, but in my opinion the UX and interface design is a confusing mess and others seems to agree (‘Why is Snapchat’s UI so bad?’, ‘The Generation Gap of Snapchat’, and ‘Snapchat Built to Be Bad‘ are just some of the top hits when you search “Snapchat UX” in Google).

It’s frustrating but even as a fairly technical 31-year-old who has mastered the likes of WordPress and Twitter, I don’t think I’ve ever found  an app that is so un-intuitive. It seems the only way to learn how it works are by reading the various on-board prompts or through trial and error.

iphone-160307_960_7201

Take the home screen for example, my biggest issue for new users is that the majority of the icons are not universal. I’ve circled the icons I believe are fairly universal in green and highlighted uncommon/unknown icons in red:

iphone-160307_960_720

So of the seven icons/functions, only three (camera rotation, messages and take a photo) are obvious, the others are all ambiguous. Snapchat actually tells me that the ghost icon is where my contacts and settings ‘live’ through a bit of on-boarding but as for the small circle at the bottom and the dots in the bottom right, I’d have no idea unless I clicked them. Even the ‘flash’ icon in the top right isn’t the standard lightning bolt flash that you would expect to see on most cameras. Why make it ambiguous? It seems totally illogical but is it intentional?

The "stories" screen gave me a headache but that's another story...
The “stories” screen gave me a headache but that’s another story…

There are several theories to why it has been so successful despite having this seemingly un-user friendly design. One theory is the bad UX is intentional. By making it difficult for new or older users, its difficult for parents to look up posts by their children and their teenage friends without knowing their screen name. As a result posts remain personal. This theory was in part confirmed by CEO Evan Spiegel: “We’ve made it very hard for parents to embarrass their children. It’s much more for sharing personal moments than it is about this public display.” Similarly Amin Todai from Canadian creative design agency One Method wrote a blog post likening it to creating a new language that only under 30s could hear: “By virtue of it having an incomprehensible user interface, Snapchat has essentially created a new language that only people under the age of thirty can hear. Like a dog whistle for teens, except with more pictures of dicks and boobs.”

“Snapchat has essentially created a new language that only people under the age of thirty can hear. Like a dog whistle for teens, except with more pictures of dicks and boobs” – Admin Todai

That last comment brings me to the other reason that teenagers and others have flocked to Snapchat despite the poor UX/UI: dicks and boobs – the pornography aspect. It became an instant guarantee of seeing up to 10 seconds of nudity, whether it be horny teenagers wanting to see their love interests naked or glamour models sharing their goods, ultimately sex sells and Snapchat was offering it up , whether intentionally or not, to millions for free. In the same way that pornography is addictive, so is celebrity and there are a huge number of celebrities on the site, all offering instant snippets of their lives for all to see. The Kardashians, the Jenners, Justin Bieber, the Jonas brothers, are just some of the celebrity users who appeal to the teenage  and young adult Snapchat audience.

biebs.jpg
Snapchat users like Justin Bieber attract a younger audience.

The other theory is that Snapchat is basically more about fun than function and that is what gets people using it. Irrespective of how awful the UX is, youngsters will keep coming back because they find it fun to use, to share moments and stories, and to mess about with the different effects, filters and lenses to make funny photos and videos. Ultimately, I think all three of these theories have had some part to play in Snapchat’s success and there is clearly a generation gap in play here but maybe that’s the point, its popularity is down to it not being popular with my generation because we were never its target audience, it was always intended to be more fun for the younger generation it resonates with.

The Origin of the Hamburger and Other Icons

The emergence of the three-lined “Hamburger” menu icon in modern interface design was so fast I had just assumed it was a relatively new creation. However, after a bit of research I discovered its origins were far more rooted in the history of technology than I first thought. It was software designer Geoff Alday who made the discovery, which he wrote about in this blog post, learning that icon was first used back in the early 1980s on the interface of the Xerox Star work-machine, one of the grandfathers of the modern personal computer. You can see it shown in the middle of the screenshot from 1981 below:

2016-07-07 16_19_22-Start
A bit-mapped screenshot from the Xerox Star workstation released in 1981.

Norman Cox, the designer behind the icon, said its design was meant to be “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. Cox later told the BBC it was jokingly referred to as the “air vent” icon. He said: “At Xerox we used to joke with our initial users that it was an ‘air vent to keep the window cool’. This usually got a chuckle, and made the symbol more memorable and friendly.”

“At Xerox we used to joke with our initial users that it was an ‘air vent to keep the window cool’. This usually got a chuckle, and made the symbol more memorable and friendly” – Norm Cox, former Xerox designer

The icon didn’t really appear for nearly 30 years until it was adopted as a menu icon by social networking site Path, which launched in 2010, and then later Facebook and Apple iOS applications, meeting a growing need for more content to fit onto smaller smartphone screens via the use of menus. It has since become widely-accepted as a menu icon by UI designers and can found everywhere from web browsers Google Chrome and Mozilla Firefox, to news websites such as the BBC and others.

2016-07-08 13_46_49-Photos-firefox

2016-07-08 13_47_24-Chrome

2016-07-08 13_51_08-Home - BBC News

2016-07-15 14_53_20-News, sport and opinion from the Guardian's UK edition _ The Guardian

After some more research I soon discovered that there were a number of other prominent icons and symbols still used today that first emerged in the 1980s. Apart from the ‘Hamburger’ icon, Norman Cox is also attributed with creating the document icon, which was another part of the Xerox Star interface. This image here shows the design development. After Cox, one of the most prolific designers of the 1980s was Susan Kare who worked for Apple Macintosh. Descendants of her early designs that still exist today include icons such as the lasso, the grabber, and the paint bucket. You can see some other the examples of her work in the screenshot below:

02_macicons
A selection of designs by Apple Macintosh designer Susan Kare.

She also came up with the command key design (⌘) that still appears today on most Apple keyboards. Kare apparently discovered it while browsing through a symbol dictionary and found it was commonly used on signposts in Scandinavian countries to mark places of interest. When asked by MacFormat magazine about the longevity of her icons she said: “I am very grateful and appreciative that some images I designed almost 30 years ago are still in use. I believe that symbols that are simple – not too many extraneous details – and meaningful can have a long life span.”

Other icons that have survived since the 1980s are shown in the table below:

  Icon  Name  Designer/Creator
menu-alt-512 Hamburger icon Norm Cox for Xerox Star.
ios7-document-icon Document icon Norm Cox for Xerox Star.
command-symbol_318-74882 Command icon Susan Kare for Apple Macintosh.
Susan-Kare-fill-icon-660x660 Fill icon Susan Kare for Apple Macintosh.
mouse-cursor-icon Mouse icon* Douglas Englebart for Xerox PARC
common-search-lookup-glyph-128 Search icon  Keith Ohlfs for NeXT Inc.

*The mouse cursor arrow originally pointed upwards but because resolution was so low it was easier to draw an arrow at a 45 degree angle.

The Role of Text in UX

As software and apps become more user-friendly and commonly-used icons become universally understood, there is a growing tendency to scrap text.

Microsoft experimented with the minimalist icons-over-text approach in their release of Outlook 1997. As you can see from the toolbar, they left out the text descriptions and as a result non-experienced Outlook users apparently stopped using the toolbar altogether:

2016-07-06 16_01_02-ToolbarCompare-11-1-2005.png (590×113)
Microsoft Outlook 1997
Several designs later, with Outlook 2000, they had a rethink and text was added back in:

2016-07-06 16_06_09-outlook01.gif (768×537)
Microsoft Outlook 2000
While more recent designs are less icon-assisted and text has even clearer prominence:

2016-07-06 16_09_20-Inbox - james.scott@hoistgroup.com - Outlook.jpg
Microsoft Outlook 2013

Digital designer Thomas Byttebier makes some excellent points about the importance of using text in his blog here, with the concluding statement being “when in doubt, the best icon is a text label.” He lists a number of extremely popular apps and sites where icons are pretty ambiguous. Take Instagram and Spotify for example. Are people aware of what this icon actually does?

2016-07-06 17_13_37-Start

2016-07-06 17_12_09-Spotify

In both cases this in-tray icon is for accessing your inbox and sending direct messages but I think the messaging feature is clearly overlooked in both applications. When I asked friends who have been using the applications for several years whether they were aware of the messaging feature they just looked at me blankly. One said “Oh, that bikini thing”, the other thought it was a basket. So there’s clearly a lack of clarity over the  purpose of the icon but whether that’s due to the ambiguous design or a lack of need, I’m not sure. It’s probably a bit of both.

Twitter have also had some issues with ambiguous and non-universal icons, often presuming that users will just intuitively understand what the icons do and sometimes getting it wrong. As a result Twitter’s user growth has actually slowed as new users that are attracted to the site often have a hard time catching on to how it works.

pict--iphone-screen-template---messages--messages---templatepict--iphone-screen-template---messages--messages---template2

The arrow icon for ‘Reply’, the envelope icon for ‘Message’ and the ellipsis (three dots) ‘More Options’ icon are recognisable but the heart icon for ‘Like’ will only be familiar with people who have used Instagram and other social media. A new user is unlikely to know what the ‘Retweet’ icon does unless they are familiar with Twitter’s basic concepts. It is interesting to note that Twitter have added text labels to the bottom five icons (highlighted in green in the image above) because other than perhaps ‘Messages’ their function is not obvious to the user.

While documentation is sometimes seen as an afterthought in the development process, in my opinion the text and written content is an inherent part of user experience for all software, no matter how intuitive the UI designer thinks his icons are or user-friendly the product is. If you want to avoid ambiguity, text will always be the best way to get the message across to the user.