History of Emoji Timeline


Timelines, Visualization
Pleading Face Emoji

Introduction

When tasked with creating a timeline relevant to the history of information design, the emoji came to mind. In my Information Technology course, we learned that the now ubiquitous messaging icons took decades to achieve the mainstream usage (and understanding) that they command today. I thought it would be interesting to give a high-level overview of the history of the emoji for a lay-person – someone who is reasonably familiar with technology, but not an expert in Information Science or Web Development. Emojis no longer belong to a single generation, nationality or creed – they are used globally and in a wide variety of circumstances – all technology consumers could benefit from a deeper understanding of how they came to be.

Materials

I used the Timeline.js tool by Knight Labs in order to build out this timeline. Timeline.js is a low-code (and open-source) solution with a relatively low learning curve – the timeline is generated based on inputs into a Google Sheets spreadsheet, a format that many technology users are familiar with. Theoretically, I could have used JSON to make the timeline highly interactive and customized, but that was beyond the scope of my abilities as well as the expectations of the lab. 

Process

I did not use a single dataset for the lab as there wasn’t one article or piece that clearly captured the full history of the emoji to my satisfaction. Instead, I collated ~20 key events from across the various sources I reviewed and arranged them in chronological order. I then selected the top 10 events that I felt were notable in the history of the emoji as well as provided a good narrative arc for the timeline.

Sample of Document outlining all emoji events, star indicates selection for final timeline of 10 events

After finalizing my set of 10 events, I began to populate the timeline.js linked google spreadsheet so that I could have a shell for my timeline.

Google Sheet with Emoji Timeline Details

Once the timeline content was defined, I searched for imagery that was representative of the specific timeline events while also being distinctive from other images within the timeline. There was a fair amount of trial and error here, but I ultimately settled on 10 images that I was happy with that displayed well on my timeline.

Results  

I think the timeline effectively captured the development and rise of the emoji for a non-technical audience. There were many intricacies involved in the preparation and infrastructure-building for a technology like ‘emojis’, so I aimed to give enough detail to credit and acknowledge the key players while not losing readers from a non-Information Science / Computer Science audience. The imagery presented key examples of how the emojis change over time and why the developments were valuable. The background colors indicated three eras: orchid for when the emoji first entered the public consciousness, dark orchid for when the emoji began to be adopted and explored by the public, and indigo for when the emoji became a part of contemporary communication practices.

Orchid – Emoji Era 1
Dark Orchid – Emoji Era 2
Indigo – Emoji Era 3

From an aesthetic perspective, I felt like the timeline.js tool did a great job of rendering my timeline in a visually pleasing manner. The pairing of the sans serif header fonts and serif descriptions was visually clear, as was the spacing of content on the page (image vs. header vs. caption vs. description). The inclusion of both the arrow buttons as well as the interactive timeline with thumbnails enabled users to navigate the timeline in their preferred method. 

Screenshot of timeline page with navigation arrows and sans serif + serif font pairing

Reflection

Aesthetic: Initially, I selected backgrounds in a pink hue and went from a tint to a shade over time to represent the use and understanding of emojis becoming more widespread over time (darker hue indicated greater awareness). However, the pink backgrounds failed to provide sufficient contrast to make the timeline legible given the white text. Since I didn’t want to change the type color, I chose a purple hue instead and shifted into darker indigos to suggest shifting eras of emoji. This design decision was much more effective and kept my work accessible for potential audiences with vision challenges.

Original low contrast timeline (light background hue + white typography)

Content: I provided a general history of emoji’s, but in a future iteration I would consider making my topic more granular as there was a large volume of information available. I could have easily focused on only the literal expansion of the emoji library and demonstrated the growing number of emoji options since their original inception. Alternatively, the timeline could have been more focused on the history of emojis from a web standards / Unicode Consortium perspective. To add more methodological rigor, I would consider putting together a rubric or some sort of selection criteria for choosing specific timeline events. The approach I used for this timeline was largely driven by intuition and narrative flow, rather than clear and objective criteria. 

General: Captioning images was challenging. I found myself struggling to provide succinct and clear descriptions of images and their connection to the timeline. This step was incredibly important for those with vision impairments or technological limitations that may have prevented them from seeing my timeline images as intended. In a future iteration, I would dedicate more time to research how to write effective captions to ensure that my work can be interpreted consistently by all audiences.

References

https://blog.emojipedia.org/apple-emoji-turns-10/ 

https://www.hackreactor.com/blog/the-invention-of-emojis-a-brief-history 

https://news.umich.edu/emojis-how-we-assign-meaning-to-these-ever-popular-symbols/

https://www.unicode.org/reports/tr51/

https://www.unicode.org/reports/tr51/#Introduction

https://web.archive.org/web/20071012051803/http://www.cnn.com/2007/TECH/09/18/emoticon.anniversary.ap/index.html