Story

Everyone loves a good story; whether it is a book, or a movie, stories help to communicate the message to the user through content and the display of the resource [1]. Content in this sense can be categorized as a photo, video, text; pretty much any type of informative information you want the user to know. In the sense of a web design, having this type of communicative narrative through a website can help to enhance the usability and enjoyment of the user. As such, they can also be used to guide the experience of the user through the message to help them better understand.

This post will aid in the understanding of website Easter Eggs, a sub-topic I chose under the category of Story (that I received for a class presentation). We will talk about what they are, why they can be helpful, as well as examples and inspiration to implement this in future designs and sites.

Easter Eggs

Easter Eggs, who doesn’t love them? No I’m not talking about those beautiful patterned eggs that you color and decorate on Easter Sunday. Instead I am talking about those hidden photos, messages, or text that can be found in a wide variety of media. Still no clue what I’m talking about? Well let’s talk about this topic in more detail.

Easter Eggs are intentional hidden messages, jokes, or features that are placed in media. Curious about where an Easter Egg first popped up? Well I was too, so let’s travel back to a time where video games were the “it” thing. It’s 1979, and Atari’s Adventure was being developed. Atari had a reputation for not publically crediting game designers of their work, so game programmer Warren Robinett took matters into his own hands and inserted a message after the game’s completion in a partial attempt to gain recognition for his work [2]. Needless to say gamers found it, and Atari personnel began to apply the term “Easter Egg” when alerting of a secret addition. Although I didn’t grow up in the era of Atari, I am a huge Disney/Pixar fan, and they are known for sneakily placing Easter Eggs intelligently in most of their movies (Pixar’s A113 being one of the most popular ones).

Easter Eggs in Web Design

But we’re not here to talk about movies or games as fun as they might be, we’re here to talk about Easter Eggs in Websites. Yes that’s right, Easter Eggs have made their way into our beloved web world, and I’m so glad they did!

In terms of websites, Easter Eggs are relationship builders between the organization and their audience [3]. Since you are unable to meet your user face to face this is a great way to help convey and make your bond a little stronger. In terms of marketing however, it’s a huge plus, why? Three words, word of mouth! Just think if someone finds one of your awesome Easter Eggs they’re more likely to tell their friends about it and to check out your site. In addition it’s quite memorable as well as interesting and will stick with the user. On top of it all, Easter Eggs show a level of thought and creativity, and might make your users think more deeply about the website and how much attention to detail went into it. But above all of that, Easter Eggs are mostly about having fun with the users. Below is a great quote from a UI designer at HubSpot:

“”Our customers spend a lot of time using HubSpot, and making it feel a little less like work goes a long way toward making it a more enjoyable experience. It makes people wonder what else is hidden, and it encourages exploration.” [4]

Examples of Easter Eggs in Website

Talking about Easter Eggs and the overall idea is great in theory but how do we creatively apply this to real world applications? This is one of those topics that to me is most understood in examples. Below, I have compiled a list of 5 different ways to integrate Easter Eggs in your website:

1 – Google’s cannot connect dinosaur

Turning a negative into a positive, who better to do this than Google? We’ve all been there our Wi-Fi isn’t working and all were trying to do is look up when the next season of OITNB comes out on Netflix. So without fail that Google dinosaur appears to tell you the bad news, you .. don’t.. have .. an .. internet .. connection ::insert dramatic music:: Oh the horror! Google uses this page alert as a way to maybe help to turn that frown of yours upside down. In case you haven’t accidently hit the space bar with this page up, do it, the dinosaur starts running and you all of a sudden find yourself in a quick game in which you have to help him jump over the cactuses. Personally, I think this is a great example of how to help the cheer up the user in a potentially stressful situation (even as with Google if the problem is out of your control to solve – after all it’s not Google’s fault you don’t have an internet connection).

2 – Konami Easter Eggs

Konami Easter Eggs is one of those secret societies that you have to be a part of the cool kids club to get into. Just kidding – with a few simple key strokes you too can unlock a world full of hidden secrets. Okay, I’m making this seem way cooler than it is but Konami Easter Eggs is a great secret that users cannot just stumble upon. Instead with pressing this exact stroke sequence:

up arrow + up arrow + down arrow + down arrow + left + right + left + right + B + A [5]

They could be prone to a website that has fun hidden content. For example, Vogue’s UK website http://www.vogue.co.uk/ has an awesome Konami Easter Egg, upon entering the site simply type the code, and .. wait, was that, no it couldn’t have been. Yes, yes you are correct a dinosaur just ran across Vogue’s UK website wearing a hat. Enter the code again and guess what, the dinosaur changed his hat! How fun! Interested in what other sites use Konami Code? http://konamicodesites.com/ what a fun way to add a secret to your site (I don’t know about you but I’m tempted to just try it on every site to see if anything bites)!

3 –Wistia’s yearbook page

https://wistia.com/about/yearbook

 

I am a huge sucker for company a page that display’s their employees or as Wistia calls theirs, the “yearbook”. I think it’s a great way for users to be able to put a face to who they are or would be working with. I also think it’s a fun way to show the company’s internal personality and can help a potential employee gain a sense for how work life could be. Wistia’s yearbook page is a great example of how a business company could place an Easter Egg in their website. Upon entering the page if you hover over the photos you will notice that the hover changes to person in the picture to a different position. If you type in the word “DANCE” the page comes to life and all of the employee’s pictures start dancing to music, how fun!

4 – Black Acre Brewing

http://blackacrebrewing.com/home/

 

This Easter Egg is one of my favorites, and the best part is it’s an intentional one, meaning you are meant to find it when you click on a certain link (hint hint). Because this is a beer company in order to access their website you have to acknowledge that you are over the age of 21. Well what if you aren’t? Try it for yourself J This is another great example of how to go above and beyond to react to a link, rather than your typical sad pop up saying “Sorry you’re not 21 come back when you’re old enough”. Hats off to you Black Acre Brewing.

5 – Coca Cola

If you go to http://www.coca-colacompany.com/ and search around for an Easter Egg you might come up empty handed. That’s because Coca Cola added an Easter Egg for web designers to find, or anyone else that happens to stumble across the inspect element button. If you are viewing the page you can right click and choose inspect element which will pull up the code for the website and a trick web designers will access if they are interested in see the fonts, colors, or simply how the site is put together. A secret fun way to add an Easter Egg is just how Coca Cola did it, placing it in the code! Coca Cola’s logo appears written in characters and symbols how creative! Another instance is if you want to give a shout out to anyone accessing your code and letting them know jokingly that you’re “watching them”. Hey, web designers like to have fun too!

Here are 2 more to find on your own:

https://www.amazon.com/gp/site-directory/ref=nav_shopall_fullstore

^^( highlight the very last bit of white space under the copyright 1996-2016) you might just find something.

Although these are some of my favorite examples they don’t even begin to scratch the surface of Easter Eggs hiding in websites. Do some research; there may even be some in your favorite sites you visit every day! If anything, I hope this post helps to bring awareness to alternative ways to interact with your users, to enhance your story, and keep them coming back for more. Happy designing!

Resources:

  1. http://jayres.github.io/Web-Interactivity-and-Engagement//chapter-2/#elements
  2. https://en.wikipedia.org/wiki/Easter_egg_(media)
  3. http://www.dtelepathy.com/blog/inspiration/24-endearing-easter-eggs-for-your-inspiration
  4. http://blog.hubspot.com/marketing/best-internet-easter-eggs-list#sm.00008u3kutgrkcu1s2j20hm8og9ns
  5. https://www.buzzfeed.com/nicolenguyen/up-up-down-down-left-right-left-right-b-a?utm_term=.uqmwRjm0z#.soXw9g0Y4