Posts Tagged With: design analysis

#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

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?


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

This Blog Post Is A War

Blogging, as a practice, exists as a one-person discourse.  It can turn into a two (or more) person discussion with comments, but in many cases a blog post is written, posted, and then never directly modified after that.  Depending on the nature of a particular blog, it can end up as a stand-alone piece of writing, in which case it can be seen as similar to a book or other published work.  Other blogs, of course, directly encourage comments and discussion.  The writer can decide whether or not to allow comments, whether to filter the comments (such as by deleting spam, flaming, or other negative posts), and whether to reply to them.  Thus a blogger has full control over whether their post remains a one-person discourse or a ‘conversation.’

As we learned, there is a difference between whether a discussion is considered a conversation or an argument.  Thus a blog post (and the resulting commentary) can also be considered either a conversation or an argument.  In this case, I consider this blog post to be an argument.  I am making a point (that this blog post is an argument), I am offering evidence to support my point (by describing the ways in which it is an argument), and I am attempting to persuade any readers to accept my point of view.

(The fact that it’s an argument about whether it’s an argument is rather meta.)

Obviously, this particular blog post is likely to generate responses (since they’re required for class participation anyway).  Regardless of the nature of the responses, I feel confident that I can continue to apply the ARGUMENT IS WAR metaphor to this blog post by claiming THIS BLOG POST IS WAR.

You might be inclined to disagree with this statement (which, if you do, automatically makes me win, since you’d be arguing).  If you disagree with me that THIS BLOG POST IS WAR, we would have opposing viewpoints, and I would be trying to convince you that mine is correct.  Even if you choose not to voice your disagreement, the THIS BLOG POST IS WAR metaphor still applies; I could claim victory without resistance, which is what happens in war when one side surrenders, and surrender is one of the valid conclusions to the WAR metaphor.

There is, however, another possible perspective.  You could claim that by agreeing with me, this would be only a conversation (not an argument) since there needs to be conflict in order for it to be an argument.  However, if you take this perspective, there are only two possible outcomes, both of which would lead to your defeat.

1. You disagree with me and claim that this is only a conversation, at which point you are making an argument against my point, and have thus been drawn into my argument.  We would then be on opposing sides trying to convince each other, and thus the WAR metaphor will have been satisfied.

2. You can decide to agree with me in order to keep it as a conversation.  However, by agreeing with me, you will be taking the stance that THIS BLOG POST IS WAR.  My goal, as stated above, is “attempting to persuade any readers to accept my point of view.”  If you agree with my point of view, I have accomplished my goal, and thus achieved victory without a fight.  Thus, even if you attempt to hold only a conversation instead of an argument, you have played into my hands, and thus I prove my point that THIS BLOG POST IS WAR.

Perhaps this is why the WAR metaphor is so prevalent in our society (such as the WAR on drugs, the WAR on poverty, and so forth).  While there are some people who like to claim “it takes two to argue,” I’ve demonstrated here that this simply isn’t the case.  If one person attempts to argue, and the other refuses, they are playing into the metaphorical concept of WAR as already discussed.  This concept extends into the WAR metaphor further by the idea that one side in a conflict can choose to surrender without a fight; they are still considered ‘conquered’ even if they never attempted to put up any resistance.

Categories: class activities | Tags: , , , , , , | 6 Comments

#IAMondays Information Architecture Analysis

Messages for Japan Homepage

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  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!

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

Blog at