mindful design: everything you did and didn’t want to know about emoji

mindblownemoji

When designing a product, you need to remember – you are not designing for yourself: You are designing for the user. Product design is a sacrificial form of art. Personal opinions, ego, and creative license come second to usability and function. 

Emoji is one such product that many use but few stop to think about. So much more goes into Emoji design than one might assume. Emojis aren’t just fun little pictures; they are language aids used to enrich text with emotional value, clarify intent, substitute words, and bring nonverbal flare to an otherwise flat form of communication. Design, in general, is already complicated enough, but when you’re developing a product that will undoubtedly be used as a form of communication – the stakes become even higher. 

Emoji Vendor Design

emojivendor

I specialize in the science and art of facial expressions and have acted as a consultant on Emoji expressivity for large tech firms. (Most recently, I was contracted to help with the design and animation for Facebook’s new Care Reaction.)

Advising on Emoji expression design has taught me a lot about the considerations that go into design for widely-used products. You need to think about things like:

  • Readability
    • Because emojis are so tiny, each design must be made simple and clear to maintain readability.
  • Consistency 
    • In an emoji set, each design needs to be consistent with the next. This means that shapes for facial features like eyes, eyebrows, and mouths need to be limited and interchangeable. Other factors such as line thickness and color palette must also be taken into account.
  • Brand Cohesiveness
    • In addition to intra-design consistency, the design of the entire emoji set needs to match the overall branding of their vendor – e.g. Apple’s brand is simple and clean, so their Emoji designs need to follow suit. 
  • Communication
    • Does the emoji communicate its intended meaning to the user?
  • And approximately 10,000 other stresses

Imagine all of these considerations – but with the added pressure of creating something used to communicate thoughts and translate complex human emotion onto a 2D circle with dots for eyes and a line for a mouth!

 

You now have to think about:

  • Stylization vs. Realism
    • Because emojis were made to mimic human expression, each emoji is a stylized representation of something real. Representing reality through stylized design is not an easy task.
  • Translating Simplicity
    • Translating an expression from a complex human face to a simple shape design takes creativity and strategy. There are many obstacles you will be faced with during this process. For example, the disgust emotion is typically expressed with a wrinkled nose or raised upper lip. Emojis don’t have noses, and their lips are too simple to convey subtleties of a raised upper lip. There is currently no emoji that represents disgust from facial expression alone; instead these emojis are often aided with added props – like “vomit.”
  • Expressivity
    • After transforming a complex expression into a simple design, you then need to amp up the look to retain expressivity.

How Emojis Are Made: An Insider’s Scoop

storksemojimade

Emojis are further complicated by the fact that in order to become official, each design (which can be submitted by anyone) must first be approved by the Unicode Emoji Subcommittee. Unicode is “an information technology standard for the consistent encoding, representation, and handling of text expressed in most of the world’s writing systems.” Though the general representation and key terms (referred to as the “CLDR short name”) for each approved emoji are standardized, the specific design requirements are very loose and unregulated. Once an emoji is approved and assigned its unique code, individual emoji vendors like Apple, Facebook, Google, Samsung, and Twitter create their own stylized versions of each emoji representation.

The main issue with multiple vendor designs for each emoji comes into play during cross-platform communication. If an iPhone user messages a Samsung user, the Samsung user will only see the Samsung emoji design, and vise versa. Before Samsung updated their look, their Emoji design choices were incompatible with other vendor designs. This inconsistency made room for a lot of user confusion.

Back in the day, this was Samsung’s “grimacing face”:

samsung old grimace mean

This is Samsung’s “grimacing face” design now: 

current samsung grimace

And this is the current list with everyone’s designs:

akkavebdrs

Think about the endless opportunities for misinterpretation when an iPhone user playfully sends their Samsung friend a “grimacing face.” Because the Samsung version has furrowed brows, narrowed eyes, and an aggressive mouth, its grimace is hostile and angry-looking. The Apple version, on the other hand, conveys a neutral “oops” or “yikes” sentiment with its fear-like mouth shape and relaxed, open eyes. Such impactful design variations should not exist. There should be design specifications made for each smiley. The user should not be subjected to the artistic whim of the vendor. It is the vendor’s responsibility to design mindfully and pay attention to what other vendors are doing. 

Behind the Scenes on the Subcommittee

For a brief while, I was a member of the Unicode Emoji Subcommittee (ESC), repping Facebook along with the rest of FB’s Emoji Team. During my time on the ESC, I learned a a bit about their behind-the-scenes politics:

  • Once an emoji is assigned a CLDR short name, there is no going back. Even if an emoji’s meaning morphs over time due to linguistic trends and evolution, the original CLDR short name stays the same. Because emojis act as a part of language, they will inevitably evolve with language. 
  • There is a good amount of resistance among vendors regarding their in-house design style. Apple is the least collaborative and the most secretive. Meanwhile Google and Facebook are collaborative, engaged, and communicative. In the last couple of years, Google has really stepped up their emojis to better flow with the other vendors.
  • In addition to being the least cooperative, Apple is also the biggest trendsetter in Emoji design. Apple dominates in style and significantly impacts the way many emojis are/have been designed (especially the early Emoji sets).
    • NOTE: I still love Apple’s design quality. In some ways, it’s a good thing they dominate the style – but they definitely have room to improve their collaboration skills.
  • There is quite a large misrepresentation of age, gender, and color within the Unicode Consortium. Membership is pretty open, so this misrepresentation is not necessarily Unicode’s fault. Dear Emoji vendors: Please support diverse representation by encouraging mixed demographics to participate in committees like ESC – committees that make decisions that affect us on a global scale.

Pains of CLDR Naming & Evolution of Language

If you knew the CLDR short names of some common emojis, you’d probably be surprised. As mentioned, Emoji is subject to the same evolution as language; we also have no way to predict how the general population will interpret and use new (or old) emojis. Sometimes we use new emojis the way they were intended to be used – other times, not so much. It’s a gamble.

Since emoji interpretation and meaning is fluid, while the CLDR short name is set in stone, the CLDR short name often becomes outdated. 

A couple of notable emojis with outdated or inaccurate CLDR names are:

  • “pouting face”
  • “person tipping hand”

Pouting Face

The red, angry-looking emoji is called “pouting face” – not “angry face. Apple’s original design for “pouting face” was red; because Apple is a trend-setter – the “pouting face” over “angry face” is, has been, and will likely remain the red face. 

angry vs. pouting face emoji

Though the CLDR name for “pouting face” essentially makes no sense, the CLDR name is by no means a blocker. Luckily, the words that trigger the emojis on your devices are not tied to CLDR short names. If you type “angry” while texting on an iPhone, the “pouting face” will show up. Ironically, if you type “pout,” “pouty,” or “pouting face,” the red-faced emoji does not make an appearance as a suggested option.

Person Tipping Hand

Another emoji with a CDLR short name that totally missed the boat is – “person tipping hand. Throughout its existence, “person tipping hand” has been used to convey attitude, sarcasm, and sassiness. “Sassy” is the iPhone trigger word for this emoji. However, it was originally created to represent a person in the service industry.
Screen Shot 2020-04-27 at 3.45.38 AM

Now for the Mindful Part

Emojis carry various, nuanced meanings that not only change over time but differ across cultures and communities. Because there is no universal Emoji design, and because each Emoji vendor takes their own artistic liberties when creating Emoji sets, there will always be room for confusion during cross-platform communication. Just like a real face, adding a pinch to the mouth corner or creating the illusion of an eye bulge can quickly transform an emoji into a new expression yielding an altered message. Every pixel counts.

While we cannot control the intentions or subtle variations of Emoji, we can encourage design consistency

In order to minimize miscommunication and misrepresentation of intent, it is every vendor’s equal responsibility to consider the impact of the tiny details they choose to use in their designs.

Some closing notes and recommendations

Recommendation for all vendors:

facewithahnd

“Face with hand over mouth” needs direction. Apple and Facebook’s designs for this emoji feature open eyes, while everyone else’s design features smiling eyes. The smiling eyes greatly affect the way this emoji is interpreted. With smiling eyes, “face with hand over mouth” looks giggly – as if it is covering its mouth while snickering. The open-eyed Apple and Facebook designs, on the other hand, appear shocked.

There is no right answer for how the eyes should look in this design – but they must be consistent. Either Apple and Facebook need to adjust their eyes, or the other vendors need to adopt the Apple and Facebook look for this expression. 

Recommendation for Windows:

Screen Shot 2020-04-27 at 12.42.56 PM

All vendor designs for “grinning face” are consistent – except the Windows design. Windows needs to recreate this design with an open-tooth smile.

Windows, all you need to do is change your “grinning face” mouth to match your mouth shape from “grinning face with big eyes,” and then you can be in sync with everyone else.

Recommendations for Unicode:

Though Facebook’s “pouting face” appears yellow in the Unicode Emoji List, Facebook’s “pouting face” actually adheres to the red-faced standard. This is how you can tell: 

Unicode, you need to update your chart.

More recommendations for Emoji vendors & people of the world:

As I discussed earlier, there is a lack of diversity on the Emoji Subcommittee. It is each vendor’s responsibility to encourage their employees from different demographics to get involved. Additionally, technical professionals and students can join for only $75 and $35 per year (respectively). Check it out, and see how you can get involved.


Notes & Resources for Further Learning

Focus on Faces:

As mentioned, I specialize in the art and science of facial expressions. For this reason, I have chosen to focus this post on the design of smileys in specific. There are plenty of other challenges that come with designing non-expression-based (i.e. objects, symbols, etc.) Emoji.

Shout outs: 

Here are a couple of sources that inspired me to learn more about the linguistics of Emoji:

  1. Talk the Talk on RTR FM
    Talk the Talk is an Australian linguistic talk show. I recommend listening to their talk on the evolution of Emoji.
  2. The Emoji Code: The Linguistics Behind Smiley Faces and Scaredy Cats
    The Emoji Code is a book on the linguistics of Emoji. It covers the history, psychology, sociology, and anthropology of Emoji use. T
    alk the Talk introduced me to this book in their other Emoji episode.

More Informative Sources

  • https://emojitracker.com
    • Emoji Tracker shows you a live feed of which emojis are currently being used on Twitter / how they are being used.
  • https://emojipedia.org/
    • Emojipedia is an emoji search engine that lets you browse and learn about each emoji.

Grammar of the word “emoji”

I spent a good amount of grief contemplating the capitalization of the word “emoji.” When I read The Emoji Code, the author, Vyvyan Evans, outlined when to properly capitalize. According to Evans, you’re supposed to capitalize the “e” when Emoji is referred to as a system; however, other sources – including the Buzzfeed Style Guide (which I love) – do not capitalize the “e.” If you notice inconsistent capitalization in my writing – now you know why.

My information quest on Emoji capitalization led me down another rabbit hole on the plurality of Emoji. Some sources say the plural of “emoji” is “emoji,” but I ended up going with the Buzzfeed Style Guide version of addressing emoji plurality – which pluralizes “emoji” as “emojis.”

More on Emoji capitalization & plurality: