April 29, 2012

Warning: like everything on the Internet, this post features cat pictures

Guide to Housecat Coat Colors & Patterns
This is one of the neatest infographics I have ever seen. In case the title isn't a dead giveaway, this poster-sized graphic is designed to help you (via text descriptions and illustration) discern the detailed, technical term for the coloration of any given house cat. You can see a full sized copy of the image here. In certain cases, this table can even help you determine the breed of the cat in question, as it includes some unique, breed-specific coloration patterns at the bottom. I've become obsessed with it recently, flipping through photos of my friends' cats and trying to determine their patterns. It's just fun for me. But that is slightly beside the point. What's fascinating to me is that I can look at this illustrated guide, and, based on its contents, decide that my cat, Momo, is a brindled, golden smoke tortoiseshell. See "Exhibit A."

Exhibit A
If I had the inclination, I could even tell you what color type Happycat of Cheezburger fame falls into. See "Exhibit B."
Exhibit B
Exhibit B
Obviously, neither Momo nor Happycat look anything like the illustrated cats in the infographic. I'd dare you to find any photograph of a real cat that resembles them--they are cartoons.

The human brain is remarkably good at making the connection between an animated object or creature, and the reality of that thing or organism. For example, despite their differences, I know that this:
Image from Wikipedia entry "Giraffe"
Image from Wikipedia entry "Giraffe"
and this:

Image from http://media.photobucket.com/image/giraffe%20cartoon/Butifully/lemmling_Cartoon_giraffe.png?o=14
Image from Photobucket
both represent the same thing. How is that possible? The cartoon giraffe doesn't even have any legs to speak of! And I am not unique in this ability. Most people, from the very young to the very old, would recognize that here we have two depictions of the concept of "giraffe." This is assuming they are familiar with the idea of what a giraffe is, in the first place. Where and how do we develop the concept? How does it remain constant or change in the face of the wide variety of less-than-realistic illustrations we run into?

I'm sure there's more research for me to do here, but in the meantime, I'm curious as to whether you all have anything to add!

April 23, 2012

Playtime!


For those of you also in my Information Design class this semester, this post will look a bit familiar. I really enjoyed the subject, so I wanted to cross-post this here, as well.

Fiona & Grandpa at the park
Taking readings both from last week's coverage of wayfinding, and the Information Design Handbook's chapter on aesthetic principles into consideration, I started thinking about something that we haven't heard much about, yet. Periodically, in the reading's coverage of aesthetics and visual cues, there would be a mention of impaired vision or making allowances in your design for the elderly. I started wondering about people on the opposite end of the age spectrum. What is it like to design information for kids? Combine that with our readings on wayfinding, and I started to think about playgrounds--specifically playgrounds that feature those massive, colorful plastic complexes of slides, ladders, monkey bars, bridges, etc.

As I started to think more about how designing a playground system might work, looking at pictures of playgrounds, I asked myself, how does a child know? What about this structure says to them "Climb here," and "Don't climb there"? Kids of all ages are in varying stages of testing the limits of the world, learning what works and what doesn't. How does the designer communicate proper use of objects? The designer can't rely on the reading abilities of all kids who might interact with their work, so they must communicate intended use without the help of words, right?

One thing I've noticed is that even playground equipment systems have a flow to them. Entrance points are usually ladders, exits are almost invariably slides. There's nothing that says a kid can't climb down a ladder, but slides are usually a more fun way to get around. There's also nothing stopping the occasional contrarian from deciding to climb up the slide, but that usually incites the wrath of the kids waiting to go down it. It's a bit like a large scale, 3-D game of Chutes & Ladders.

Image from childrensplayequipment.com

From the examples I've seen, it seems that some playgrounds use color as a method of communication, whereas others use it primarily as decoration, and as a method for marking the equipment as a "for kids" structure. In the picture below, for instance,  notice that all the ladders are brown, and all the slides are green. Contrast that with the photo above, in which I can't really discern a communicative color scheme, other than "This must be fun, because it's so bright!" The noise created by lots of bright, saturated color is what our culture uses to indicate that something is kid-friendly.

Image from AAA State of Play

I can't imagine that the designers of the above equipment somehow accidentally color-coded the pieces this way, and I wonder whether this design is actually effective. Given the comparatively dull color scheme, perhaps this one was designed more with parents in mind--for the people who supervise the children, or walk them through the playground. I think there's more digging to be done on this topic, and I'd be interested to hear other opinions!


April 11, 2012

Folders and Tags: Reflections on Vannevar Bush


“When data of any sort are placed in storage, they are filed alphabetically or numerically, and information is found (when it is) by tracing it down from subclass to subclass…The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain. It has other characteristics, of course; trails that are not frequently followed are prone to fade, items are not fully permanent, memory is transitory. Yet the speed of action, the intricacy of trails, the detail of mental pictures, is awe-inspiring beyond all else in nature.” – Vannevar Bush, As We May Think, 1945, p. 43

What jumps instantly to my mind upon reading this quote is first, agreement–that my brain navigates subjects by association–and second, the fact that the machine through which I access or search for a large percentage of the information I seek–my computer–doesn’t work that way.

You wouldn't know it, but there are thousands and thousands of images scattered throughout these folders.
You wouldn't know it, but there are thousands and thousands of
images scattered throughout these folders.
My desktop runs Windows 7, which organizes files (and allows me to choose how to organize them) into folders. Folders can be nested within each other. For those of you who are unfamiliar with this operating system, here’s a screenshot of what my Pictures folder looks like:

I can move or change these folders any which-way I like. I can delete them, change their names or put them in a different folder entirely. If I have a file that falls under more than one of my folder categories, I can copy that file and put a copy in each location.

The funny thing I’m noticing as I write this, is that it’s hard for me to describe what a folder system is really like without referring to the word “folder” as a unit very frequently. I realize that to us, it probably sounds like a ridiculous hypothetical to ask how someone with no knowledge of how this organizational system works would navigate and find the information they’re looking for on a computer, but I watch my older family members go through this painful process on a regular basis. I once actually did a physical demonstration of files/folders–using our filing cabinets at home–to illustrate the hierarchical nature of how information is organized within Windows.

Both images are screenshots made by me.
All images are screenshots made by me.
Tagging, on the other hand, operates using a similar function to the human brain, using associations designed by the user. For instance, I use Evernote to take notes for many of my classes, meetings, etc. While I can give each new “note” a title and organize sets of notes into “notebooks,” the tagging feature is what I actually use to organize my different notes by subject. I create each individual tag as I need it. I have a different tag for each class, for my job, and for certain meetings. Tags lack the hierarchical structure of the folder system, but it saves the user disc space as well as time in trying to remember where they categorized a particular note/file, and one item can have multiple tags. So, if I have one note tagged as both “613″ and “616,” and I click on either of those tags in the left-hand menu, that note will appear in both lists. It has a similar effect to copying a file into two separate folders, but, as previously mentioned, saves disc space, and is much easier to navigate.

Ladies and gentlemen, the hashtag.
Ladies and gentlemen, the hashtag.
Twitter is another prime example of how tags are useful. Without the ubiquitous hashtag, the sheer volume of individual tweets would be impossible to navigate. Twitter users tend to use hashtags in which they’re interested to find new people to follow, and I imagine the entire community would be much more disjointed were it not for the hashtag drawing users together. The one thing tags don’t really lend themselves to is browsing. They are great for locating specific items, but if a user simply wants to poke around and see what’s there, tags might limit search results unnecessarily.

I’d be curious to hear other opinions on this topic. Are tags actually more useful/”better” than the folder system? Are they just a better idea in terms of user interface? I’ve heard a few people describe tags as how we’ll navigate computer folders in “The Future,” and having grown up using Windows, I shudder to think what a chaotic mess my folders would be if I traded that for tagging each file.