How Quake Quiz uses metaphor to prepare us for earthquakes

When we think of intuitive and gripping web design, we often think of simplicity, utility and pretty pictures. Upon closer examination, an intuitive website is really just one that conveys metaphor effectively. Jason posted a neat little website on Twitter called Quake Quiz that uses graphics and text to inform San Francisco residents what to do in the event of an earthquake.

When loading Quake Quiz, you’re greeted by a dancing hipster. This character reveals information about the site’s target audience, and perhaps even the designers themselves. The user is then presented with six different locations represented as images. So, clicking on the house graphic will prompt the site to load the guidelines for safely handling an earthquake in the home.

Before we even begin to absorb the information the website wants to transmit to us, we are already subconsciously thinking of their message in terms of metaphor. For example, the home depicted in the graphic is a home as one would conceive a home in San Francisco to look like, not like a home in New Jersey. The sloped street and the thinness of the house indicate a house in a city setting, not one in a suburban setting. Just as how the scenario of “bring some chairs to our meeting” (bean bag chairs? Rocking chairs?) is raised in Metaphors We Live By, we are viewing the idea of home in the context of the situation.

When we click on the house, the house gets frontally dissected, creating the sense of putting us inside the house so we can see all its rooms. Even though we normally experience being inside a house from a different perspective (feeling the floor beneath our feet, being constrained by four walls) we understand the animation to mean that because we can see inside of the house, we must be inside of it.

Because a computer cannot actually cause an earthquake for us to experience, it simulates one by shaking the screen violently while the man in the house yells “Earthquake!” Again, the site operates on the assumption that we are constantly interpreting its meaning through their formation of language. Then, the site allows you to click on various objects in the house. Because we are viewing these metaphors as objects, we can draw conclusions about what they are meant to mean to us. Clicking the telephone, for example, doesn’t allow you to make a phone call the way an actual phone does. Instead, the phone is a metaphor for communication (as in communication is vital to surviving an emergency).

Metaphors like these continue throughout the website. The artists depict a man in a wheelchair in the “at work” section of Quake Quiz, but, before we click on him to read the information associated with him, we’re already thinking, “What do handicapped persons do when they’re caught in an earthquake at work?” These subtleties streamline the Quake Quiz experience, and, combined with its visual style, make the site and information contained within memorable.

Categories: #IAMondays | Tags: , , , , | 2 Comments

Post navigation

2 thoughts on “How Quake Quiz uses metaphor to prepare us for earthquakes

  1. Devon

    I love your ideas about the metaphors on this website. I don’t even acknowledge things like you point about a telephone signifying communication–but you’re right! Similarly objects like the speakers and the radio on the “Beach” scene signify connection a connection to humanity and a way to find out safety information and updates.

    On the beach scene was also see the sign showing tsunami evacuation routes, which have significance to us in new ways since we have become more aware of the tsunamis across the world recently. Our understanding about tsunamis has grown due to the more recent media coverage of tsunami’s in Japan and other Eastern countries. The sign on this scene, therefore, has a larger impact now that we are aware of the damage, death, and destruction caused by these natural disasters.

    This site does a good job of picking out signifiers and signs that are metaphorical and literal in meaning. I think these details enhance the educational experience and make it memorable and shocking.

  2. This was an interesting website to pick for discussion. Like Devon, I like how you brought things back to previous blog posts (icon metaphors). This was a great way to show how metaphors inform our understanding of events and places. Good job also of identifying weaknesses in the presentation. I think you did a good job of explaining what the point of the frontal dissection does. Like any good metaphor, the site gives us a better understanding of the truth of an event by a clear example.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Create a free website or blog at

%d bloggers like this: