Home > UX and Prototyping > Emoji design: a UX guide for would-be emoji designers
Emoji can help you say more with less in your UI design, and boost the user experience among all demographics

Emoji can help you say more with less in your UI design, and boost the user experience among all demographics

It’s said that an emoji speaks a thousand words, right? Well in 2015, an emoji was named word of the year by Oxford Dictionaries. And two years later the cute little critters got their own movie. Emoji are dominating popular culture and changing how we communicate.

UX design is no different. Since emoji burst onto the scene and into our lives back in 2011, UX and UI designers have been brushing up on their emoji design skills. And while not every UXer wants to know how to make your own emoji, anyone involved in UI design should know the impact that a innocuous smiley face has on the user experience.

Never one to shrink from a UX design challenge, Justinmind set out to understand just how emoji impact UX design. We’ve also rounded up some best practice tips for all budding emoji designers out there.

emoji-design-trend-over-time

Interest over time for ’emoji design’

The origin of emoji 

Emojis originated in Japan through a big telecoms company, Docomo. They’re the ones who created the small emoji heart on their pagers (remember those?) in the mid-nineties. Fast forward to today and the emoji is ubiquitous. Even your grandma’s using them. 👵

So what are emoji, exactly? Emoji are small digital images that are used to express something, namely an emotion. Whether you’re experiencing bouts of untold joy or in the depths of a negative emotion, there’s an emoji for you. You can find the little critters on iOS and Android, all over social media and slowly cropping up in emails and in online marketing. Trends show that searches for emoji design have slowly been climbing as emoji become more popular among demographics.

Emoji design: who designs them and using which UX design principles? 

Emoji are Unicode characters. That means each emoji character is assigned a numerical code. The ice cream emoji is U+1F366, for example. This means that UX designers from companies like Apple, Google, Twitter, Samsung and Microsoft can all design their own unique ice cream emoji and all of those will be assigned the same code. Twitter, for example, uses a flat design instead of a 3D style like Apple for their emoji, designed by The Iconfactory.

emoji-examples

Image credit: unicode.org

Emoji aesthetic is down to the designer’s discretion although there are certain fundamental emoji design principles which designers should stick to:

  • Maintain the industry standard shape of the emoji
  • Characters and things should maintain the same direction/orientation (a change of direction can change the meaning)
  • Stay neutral in terms of race, ethnicity and gender
  • Square aspect ratio

Emoji design and user experience

Emoji use differs depending on the medium, as with ordinary spoken language which will change depending on the context. The most popular emoji on Twitter is the face with tears of joy whereas on Instagram it’s the face with heart eyes. Could it be that emoji better express emotion than text? Emogi, a real-time emotional intelligence platform, discovered that emoji are better at conveying emotion than words and that they’re becoming the preferred communication tool among all demographics.

74% of people have said they use emoji. Emojis are so prolific that you can get emoji suggestions and replacements on your iPhone in the form of an emoji keyboard. In a cyclical nature, we have gone from cave paintings to words back to imagery. This makes sense since we are visual creatures who are more likely to remember content with imagery.

Does this mean an emoji in a popup notification or an email subject line make a difference? Well, yes, it turns out. Experian discovered that 56% of brands that used emoji in their subject line received higher open rates. So not only can an emoji put a literal smile on a user’s face, it can also encourage them to open emails. Perhaps it’s time to start using these images more frequently in UX design. An emoji can help save space by saying more with less,  which is great when crafting subject lines for emails that may be too long.


Download Justinmind and start creating hi-fi prototypes today

DOWNLOAD FREE


When to use emoji in your UI design for UX wins

It turns out that the same parts in our brain light up when we look at a smiley emoji as when we look at a real life human face, according to neuroscience. Can this little bit of science be used in UI design?

For emoji to really work it must be put in the right context. You wouldn’t want a winky face in an email about debt collection, nor would a worried face be appropriate when you’re being informed that you’ve got a computer virus. UX designers must know their audience before showing off their emoji skills. And not all email clients will render emoji properly.

Since emoji can act as metaphors, they can be used when displaying the status of something in a new, more interesting way. Imagine you created an online banking app in Justinmind (really cool case study on just that here!) The status of your finances could be represented using an emoji. For example, if you’ve spent below your allocated budget, a smiley face could be used. Likewise, a worried face if you overspent. But use emoji with caution…

Instagram allows users to use emojis in hashtags so users are no longer constrained to searching using words but can search a sentiment and find related images. In this way, emoji are able to capture the tone of something and the mood of somebody better than text.

When emoji damage the user experience

UX designers may have a problem with using emoji in UX design. While emoji can simplify the user experience, there is the risk of over simplifying it and as a result the emojis may not be understood by a larger audience. Or people may be over zealous in their use of emoji.

But, some companies, like Chevrolet, have gone as far as writing entire press releases in emoji. And take project management tool Slack. Slack enabled a custom status feature which means users could put relevant emoji in their status – for example a little bus could be used to show someone is commuting to work. But, Monique Marchway points out that these emoji  are being used more for creative self-expression and the colors have become distracting and their original purpose changed. Talk about emoji overload.

For younger people emoji are just another language they’re fluent in; for mature or inexperienced users, emojis may present a user experience problem. That’s why knowing your audience is imperative when deciding to put emoji in your UX. Although, interestingly, it was revealed that emoji aren’t just something hip twenty-somethings use. A survey was carried out among people over 55 years of age and it turns out that emoji are pretty well understood. More than 90% of people surveyed could identify emoji correctly, indicating that perhaps older people aren’t as out of tune as we like to think.

Find out more about UX best practices for older users in this Justinmind interview

Conclusion

Emoji can add personality and pizzazz to your UI design, allowing users (and designers!) to express themselves in a more emotive way and add a little more fun to the user experience. The emoji design principles will help guide any budding designer who wants to create a new emoji design but proceed with caution – using the emoji too much or too intensely can cause consternation and put people off the UX design.

download_free

Steven is the web editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *

Download Free