#IAMondays: Interactive Movies

Wayne recently tweeted a link to an interactive movie, which was a fascinating experience. It shared some traits that relate to the concept I wrote about on the difference between linear and nonlinear stories, but there are some key differences here.

One of the key differences between this interactive movie and another type of nonlinear story is that this one is more easily repeatable. A user types their address into the site before the movie begins, and the movie then plays with Google Earth images of the user’s own hometown and address. I can share my movie with others so that they can see how the movie plays out in my hometown. There do seem to be minor differences… after watching the movie four times, it seems like some of the camera angles are randomized. The basic scenes are the same, however, as long as I type in the same address. This can be seen as an advantage over an interactive story with many more forking paths, since those types of stories seem to be hard to repeat without remembering the specific path you took through all of the steps.

Another advantage is that the same basic “story” can be seen by anyone with their own address added in. I can type in a new address, and essentially the same movie plays, with the only real difference being a different set of Google Earth images for the new location. The other elements (the running man, the birds, the trees, and the song) remain the same for each user. I mentioned in my previous blog post that nonlinear stories make it difficult for two users to share the same experience, including their ability to discuss what the experience was like. This interactive movie, however, gives everyone a very similar experience, with just a touch of personalization.

Of course, the disadvantage is that there isn’t a LOT of customization available here. Nonlinear stories have the advantage of being able to be experienced differently each and every time. This interactive movie, while it can be personalized for each user, is very close to the same every time it is played.

The balance here seems to be in how much decision the user is given in the course of a story. In a completely linear story, the user is essentially given no choice but to move forward and experience the story as it exists. In a nonlinear story, the user has a great deal of control, and their every decision can affect the outcome of the story. The amount of control given affects how customizable a story is. This interactive movie only gives the user a small number of decisions to make, and as a result the path of the story won’t ever change very much.

I think this idea of freedom versus control is at the core of making any type of nontraditional interactive story or movie. If you give the user too much control, it can be hard to maintain any sense of continuity in a story. If you give the user too little control, the story won’t really be interactive or customizable. The amount of control you give should be carefully and deliberately decided based on what type of story (linear or non) you want to create.

Linear or Non: Which is Better?

One of our readings last week was Afternoon: A Story, by Michael Joyce. While this was in some ways a very unusual and innovative story, I don’t know if I could say it had any advantages over a more traditional storytelling method.

In a traditional story, it’s generally expected that the reader will follow a linear path, page by page, from beginning to end. This might seem limited by modern standards in the digital age, but I think there are many advantages to it. In a traditional linear story, the tale is being told in a coherent, straightforward way. There is a beginning, a sequence of events, and an ending; the same ending every time. This means that the reader, if they ever read the story again, knows what to expect. It also means that two people can both read the story and discuss it, knowing they’ve both read the same story.

“Afternoon,” on the other hand, is different every time you read it. I’ve read sections of it four separate times now, and each time I’ve had a different experience. There doesn’t seem to be anything predictable about it.

Does this nonlinearity make it better, or worse?

I can see some entertainment advantages to a nonlinear story. When I was a kid, I frequently enjoyed Choose Your Own Adventure stories, which allowed you to take the same story down a different path each time you read it. A reader is more likely to re-read such a story, knowing they can enjoy a different experience each time. Other similar nonlinear media includes certain video games, and DVDs where the movie has multiple endings.

These nonlinear stories have just as much disadvantage, however. Sometimes, a reader might WANT to experience the same story again. The more complex the divergent paths in a story become, the less likely it is that the reader can ever experience the same story again.

This would become even more pronounced in a code poem that utilized a randomizer. In that case, odds are the reader will NEVER experience the same story again.

I think one of the big differences here is the difference between storytelling and entertainment. Both qualify as “art,” but one is vastly different from the other. I don’t think “Afternoon” qualifies as a “story” in the way one is traditionally defined. It doesn’t have a clear plot or ending. While it is still entertaining, and still artistic, it doesn’t have the same effect on the reader. Is it even possible to say what it is “about”? I have a hard time, after multiple divergent readings, really understanding what was going on in the story. Many of the individual “pages” seemed so disconnected from each other that it was hard to follow what was happening from one to the next. It seems like this is the price to pay for a more “artistic” piece; it becomes more unusual and unique, but at the same time harder to really understand.

In a way I’d compare that to the ideas of abstract art. A piece of art with no defined form can be interpreted differently by each person who views it. A more defined piece of art, however, simply is what is is (setting aside deeper analysis of symbolism and metaphor within a work).

I don’t know if it’s fair to say either a linear or nonlinear story is “better” or “worse.” However, it definitely has disadvantages that make it more complex and harder to understand.

#iamondays Website Analysis: Ellen Lupton Style

Ryan Scherf’s website (http://ryanscherf.net), tweeted by @CassieWrites_, is a perfect example of Ellen Lupton’s ideas about “Letters” and “Grids” from her book Thinking With Type (2010). Lupton addresses fundamental ideas of typography in her book and describes the ways in which we use typography in many areas of our lives.

Ryan Scherf’s website uses some of Lupton’s ideas about “Letters” in his headers. He uses multiple typefaces, which Lupton suggests must be done with care and attention to detail. Lupton writes, “Combining typefaces is like making a salad. Start with a small number of elements representing different colors, tastes, and textures. Strive for contrast rather than harmony,” meaning designers can’t just sneak different typefaces into areas and hope we no one notices (54). Scherf does exactly what Lupton suggests, choosing contrasting typefaces and colors which stand out and make viewers pay close attention to his words. Scherf chooses a more sophisticated, architecture-like font in white on a dark background to describe what type of work he does, and what he will be showcasing on his website.

He then sandwiches a more playful and colorful mixture of typefaces with different weights and leading to show what type of designing he does, or for what “platforms.” The use of these colors draws the eye down and around, while the different weights make each platform stand out to the eye.

The final piece of the sandwich is his location, which brings viewers back to the sophisticate, clean typeface.

As readers of Lupton will know, choosing a typeface is a big decision. The typeface you pick to represent your business says a lot about who you are. There are things to consider, like the history of the typeface, but there are also connotations that go along with certain typefaces. The two used by Scherf show a clean, almost minimalist classic feeling that seems professional; and a fun, chunky, and colorful feeling that shows a more unique and creative side. For a web designer, I think those combinations seem like a good choice. The typefaces Scherf uses show that he is professional, but also creative. That is the kind of person I would trust to work on my website.

Scherf also uses grids, which Lupton addresses in her book as well. His website runs on a linear grid, where examples of his work are in two columns, running vertically down the page. According to Lupton, linear grids in web design are a good choice for multiple reasons. Most importantly, linear design that uses tables and cells that flow in a line which is the easiest thing for devices for the visually impaired to translate into sound. These devices read webpages in a row by row fashion, so linear design translates most easily and clearly. Also, linear design is best for translation onto mobile devices. While funky, new-age web design may look neat on a desktop or laptop computer, the layout often gets skewed when it translates onto a mobile device. Linear grids in web design work best when there is little room, like on your phone (171)!

Within his own web design it appears that Scherf follows these same principles. Although not all of his work is completely linear, many of the spaces containing content are styled in a paragraph-like way that reads like a book. He also incorporates different typefaces in a purposeful manner.

Overall, Ryan Scherf’s website follows many design principles that Ellen Lupton stands behind in her book. He demonstrates his ability as a designer on his webpage. He chooses clean, functional typeface and a sensible grid system to make the most of his spaces.

Seeing Lupton’s ideas in practice helped me get a better grasp on many of her concepts. Now that I am more aware of how to put these ideas to work, I think I will pay more attention to these design principles when browsing the internet. How have the readings for class changed the way you look at things, such as websites, in your daily lives?

Works Cited

Lupton, Ellen. Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students. 2nd ed. New York: Princeton Architectural, 2010. Print.

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.

#IAMondays: Symbols as Metaphors

So, Devon posted a rather interesting site with some interactive icons.  While the overall design was very simple, the Simbly website has an interesting interface.  The icons shown on the site can be dragged around, which I found to be a lot of fun.  I even went so far as to record a video of bowling with the icons.

Looking back at this site after discussing and reading about metaphors, I got to thinking about the nature of symbols.  They’re essentially metaphors.

We understand icons and symbols only through other things.  The icons themselves are intangibles; you can see them, but not touch them (unless clicking on them counts as touching them, but if it does, THAT is a metaphor).  We don’t think of them in terms of the code that makes them function, but instead we think of them as objects.  If they’re objects, then it’s arguable that a website is a container, which contains the objects of icons.

Yet icons on a web page can be seen as more than just objects.  They’re perceived as having different functions and meanings.  We understand these meanings through the use of metaphor.  Here’s an example from Symbly:

A ‘battery’ icon from http://www.symb.ly/

When we look at that icon, we see a battery.  Beyond that, we see it as a partially-full battery, indicating that it needs to be recharged.  Yet even beyond that, we understand it as a symbol that represents the state of the physical battery (typically one inside a cell phone), and the icon is communicating that state to us.

All together, what we have here is a symbols that communicates to us the state (full/empty) of a physical object (the battery).

We can only understand that by breaking it down into multiple metaphors.  The icon itself is a representation. It isn’t the battery itself, but instead it tells us something about the state of the battery.  If we consider the OBJECT AS CONTAINER metaphor, the battery would be considered a container, and what it contains is electricity.  We know that, through our sensory perception, we can view a physical object and judge it’s state of fullness.  The battery icon draws on this basic concept by showing MORE white-filled area to represent MORE electricity in the container.

Yet the icon depicted on the Symbly site takes this a step further.  That icon is not actually representing the state of a physical battery; it is an ‘object’ that can be used on any website for a variety of purposes.  The actual use would depend upon the design of the site in question, though that use must almost necessarily be limited to our understanding of the meaning of the icon.  Depending on the context it is placed in, it could represent the state of a battery, the battery itself, the concept of electricity, or a number of other things.  Regardless of the actual placement and usage, the icon would be understood through the metaphors that connect it to the physical objects we think of when we see it.

Furthermore, the icon can represent other things that might not be related to an actual physical battery.  On the Symbly website, the icons are for sale at a certain price (a few are free, the rest come in ‘packs’ priced at £1.99).  Thus, if the icon represents an OBJECT and we can conceive of OBJECTS AS MONEY then therefore the ICON IS MONEY.  That is, the icon has a value related to how much we pay for it.  This is despite the fact that the icon itself has no physical existence; it is nothing more than a series of electronic signals that represent 1’s and o’s of binary code which are in turn translated by a CPU and processed by a video card before being displayed on a computer monitor by flashes of light.  Yet we pay money for it.

Does this mean that binary 1’s and 0’s are ALSO money?

 

#IAMondays Information Architecture Analysis

Website accessibility and ease of use are extremely important for authors and creators to understand. The more intuitive and easy-to-use your website is, the more successful it will be. It is valuable to consider what your website visitors are looking for in their online experience–and their needs are often based around the type of website being created. For example, the website http://www.messagesforjapan.com/  allows people to write to victims of the earthquake and tsunami that affected thousands of people. This website forms a community of understanding, hope, and relief for victims, and allows people all over the world to see how survivors are coping with their loses.

The goal of this website appears to drive its functionality. The homepage shows three columns that offer viewers a chance to see photos, read messages already written, or view the messages on a world map. This showcases the main purpose of the website up front–it is a messaged-based community that shares thoughts across the world. Each of the columns is interactive, and enlarges when hovered over. Because of the use of pictograms, it is easy to understand what each section means even if you are not extremely literate in English. There are also option along the bottom to change the language.

The “Read Messages” feed, which I was drawn to first, is constantly updating with new messages. I love that this feature shows the messages in both Japanese and English. I think it creates a more personal feel by showing the text in the language of the victims. When you click on the section it opens an interactive tree with message bubbles functioning as “leaves.” If you hover over the messages they display in Japanese and English, and some have a “From” section that allows you to see who sent the message and their country of origin. The bubbles, or leaves, also update automatically, but there is an option to refresh the entire tree when desired. The design is very functional and easy to understand. The color choices are soothing, and the leaf that allows visitors to write their own message is green rather than pink, making it stand out. Being able to sort through the messages by simply moving the cursor makes sense and seems extremely intuitive. Although this site is technologically advanced, it is not over complicated or showy.

In the photos column on the front page there are a few smaller sample photos that draw you in and make you want to see more. When you click the camera icon, the link brings you to a beautiful page filled with tags that move as you slide your mouse around. The description in the top left explains that tags with these messages were hung on trees, so the pictures on the website are displayed in a similar fashion. This creativity continues to add more connections between the Japanese people and those sending or viewing the messages. Like the messages page, you can sort through the pictures by simply moving your mouse from left to right. One of the only issues I found on this page was that the picture tags in the back row can be hard to see, but if you click on the pictures they do enlarge, and you can sort through all of the pictures easily. If I were to change anything, I would make it so that the back row of tags was visible in between the front row when the cursor is moved. I think that it what they were going for, it just didn’t work super well.

The last section I browsed through was the world map page. This page shows where in the world messages come from. I think it is fascinating and touching to see where the message of hope and support are being sent from, and I think this page does a very nice job of illustrating, with little dots, where messages are being sent. My only desire is that the color of the map was darker. It took me a long time to realize what color the ocean was and what color the continents were. This could just be my eyesight, but for people with visual disabilities this would definitely be a problem.

Overall, this website does a good job of illustrating creative design, intelligent use of space and color, and easy-to-use functions. Of course there are always places to improve, but each pages works well to grab people’s attention and help communicate the goal of the website. This is just one example of unique web design. Make sure to keep your eyes open for more functional designs and layouts as you browse the web!