Information Design: How To's and What For's

Time for another definition: information design. Simply put, it's about the flow of information from you to someone else, and how to structure that flow most efficiently.

Everyone has seen webpages, or heard lecturers, or read books, with really great ideas that they just can't get out properly. That's where information design comes in, to assist with layout, presentation, and structuring to turn useless data into meaningful information.

CityRail Timetable:

Cityrail Timetable for Macarthur to City Line. www.cityrail.info. Accessed 23.3.10.

A train timetable doesn't seem designed, does it? It's a pretty sensible way of structuring the information. But imagine if instead of a table, the numbers were all in a paragraph. No easy comparisons, no quick checks. Putting the times into a table makes the data legible, clean, and easily sorted. Not all information design is revolutionary, but it's still important.

Charting The Beatles:

Deal, M. Charting the Beatles - Authorship. http://www.flickr.com/photos/44927243@N05/4263875951/sizes/l/in/pool-1245660@N25/. Accessed 23.3.10.

Charting the Beatles is a project by designer Michael Deal, to quantify aspects of The Beatles, from record sales to album contributions to chord use, in easy to use graphics. In the thumbnail above (representing authorship), you can probably see a lot of yellow and blue - that's Paul McCartney and John Lennon respectively. Without having to go through the information yourself, you can make discoveries about the information's significance - data has become information, becoming wisdom.

America: Where We Live:

Lertola, J. America - Where We Live. For TIME Magazine, http://www.time.com/time/covers/20061030/where_we_live/. Accessed 23.3.10.

This image, created for Time Magazine, shows where the American population is located on the continent. Using taller peaks for larger portions, this illustration clearly transforms what would have started as a mass of statistics into a clear, understandable graphic that reveals some perhaps unexpected truths.

And that's the key to information design: turning data into information by sorting, visualising, or illustrating.

Toasters: A Mood Board

This is a mood board for a man described thus:

"Johnny Smith
John is a 75-year-old retired carpenter who still enjoys hikes in national parks and ridding his Harley-Davidson. He looks forward to the local club raffle and a catch up with the boys on a Thursday evening. He also enjoys playing bingo, listening to local radio and watching old western movies with his wife Jill. As he gets older and has to visit the hospital more often, he prefers quick and efficient healthcare with simple, bold instructions and hospital signs. He aims to enjoy the rest of his life traveling a little and spending time with family, especially his grandchildren.

• Location: Hobart
• Toaster Usage: Unfortunately Johnny has never used a fancy new electric toaster.
• Computer/Internet Usage: PC, Occasionally browses the Internet with the help of his grandchildren.
• Computer Skill: Novice user. Finds things too complicated on the computer to use. Has an email but doesn’t know how to use it properly."
  

And some image credits:

Wood image from Wedge, G. Decorative Artist. http://www.decorativeartist.ca/Faux%20finishes/Wood.jpg, accessed 17.3.10.

Carpenter from Ghosh, A. Old Carpenter at Work. http://photo.net/photodb/photo?photo_id=7163735, accessed 17.3.10.

Forest from SFGate Blogs. SFGate Blogs. http://www.sfgate.com/blogs/images/sfgate/green/2008/11/19/yosemite-national-park.jpg, accessed 17.3.10.

Motorcycle from “BikerSwag.” Biker Swag Photography Web Design. http://www.bikerswag.com/images/P_06THAW12.jpg. Accessed 19.3.10

Clint Eastwood from Thought For the Day. http://kirkweisler.com/t4d/2009/01/. Accessed 18.3.10.

Hospital Signage from Hara, K. Katta Civic Polyclinic Signage System. http://www.ndc.co.jp/hara/home_e/katta/index.html. Accessed 20.3.10.

Pub from Hotel Geneve Suisse. http://www.astoria-geneve.ch/pub/pub_britannia_v2.jpg. Accessed 17.3.10

Grandfather and children from http://sunsite.berkeley.edu/FindingAids/dynaweb/calher/jvac/figures/j14GC-160A.jpg, Accessed 19.3.10.

Toast: A Text Treatment

The following is a step-by step text treatment of the production of toast. This is the raw material that I later refined into my flowchart.

START
1. Plug toaster in.
2. Turn toaster on.
2a. (Is toaster on? If no, 1.)
3. Set toaster temperature.
4. Place bread in toaster.
5. Push lever down.
5a. (Does bread begin to toast? If no, 2a.)
6. Wait until toast pops.
7. Wait for toast to cool.
7a. (Is toast suitably cooked? If no, 3.)
8. Consume toast.
END

As you can see, I made a few adjustments when turning it into a flowchart, but not a lot; I was pretty comfortable with what I had to start with.

Toast: Previsualisation

Some theoretical slides in a "how to make toast" application. This is a good way to look at the basics of your design strategies without bothering with the subject matter.


Do you know how to make toast yet?

A Toast Flowchart

So. Is everyday toastmaking too challenging for you? Here's the process in convenient flowchart form.

(Seriously, this is a good example of the benefits of flowcharts, and how they allow you to simplify a process into its crucial steps.)


Click the flowchart for a larger version, or a PDF is available on Scribd here.

Interacting With Interactive Design

Now that you've got a handle on web 2.0, what's next? Interactive design, or interaction design, is, quite simply, the design of things that we interact with. These days, it's commonly used to refer to web and computer interface design, because of their ubiquitousness in today's society; but it can also refer to anything from product design to packaging.

Sturgeon's Law, written by American science fiction writer Theodore Sturgeon, states that "ninety percent of everything is crud." (see Sturgeon's Law). This principle applies to design, too. For all the brilliant design there is on the web, there's a lot of bad design. To save you the trouble of sorting, I'm going to show you a couple of the good examples.

picocool: Picocool, an archive of good design, is itself an example of good interactive web design. The site is designed in simply black and white, with colour only entering the site in the large pictures. Below the picture is an auto-generated set of related designs, which are easily clicked and open in new windows. Any text about the object is in a clear paragraph to the right of the image. These features together combine to make a sleek, simple piece of interactive design that is easy to use and interactive, while still providing the maximum information.

BBC Doctor Who Website:

Rather the opposite of Picocool, the BBC's website for hit program Doctor Who is a colourful, picture-filled extravaganza. As the main audience for the site is children (the show's intended primary audience), the site has been built to allow maximum engagement. There is little to no text, only simple explanatory captions, that make it easy for younger audiences to access pages on the site. While the site is not as "sophisticated" as other websites, it is not intended to be - it works perfectly for the intended audience.

Google:

Finally, we come to Google, possible the best piece of interactive design ever created. More or less nothing but a logo and the interactive search bar, Google's simple, minimalistic design made it stand out among other cluttered search engines of the early 21st century. Updated to currently include a top bar with links to other Google services, and with copyright links below, the Google homepage is still one of the best-designed pages on the internet.


And that's interactive design. As I hope I've shown above, good examples of interactive design don't have to be simple, and they don't have to be complex - they need to suit their audience. Whether you're shooting for designers, children, or everyone, you'll be fine as long as you take their needs into account.

Web 2.0 and You

So. You've heard people talking about Web 2.0, the current "big thing" on the internet. But what is it, and how does it change the way you work with the internet?
When the internet was first introduced to the general public, owning and maintaining a website was hard work. Companies of professionals capable of building websites quickly sprang up, but this was still a costly exercise.

Slowly, more and more of the world obtained access to the internet. The debut of hosting sites, such as Geocities (owned by Yahoo), allowed everybody to create their own page on the internet - provided they had the coding knowledge necessary.

Web 2.0 is what came next.

A typical Geocities site. Expression was considered more important than style.
http://blog.hostgator.com/, Accessed 11 March 2010

Web 2.0 is the name that's used to refer to a whole host of online tools that feature user-generated content, rather than content produced by companies or "web professionals." This extends to everything from wikis, where users compile information about a specific topic into one location; to blogs, where one or more users post news or opinions to their own online journal (like the one you're reading now); to social networking sites, where users create profiles and recreate existing social networks while simultaneously adding another, online dimension.

Whew. That's a lot to take in, isn't it. Here's the easy way to break it down. Imagine the difference between a lecture and a tutorial. In a lecture, the lecturer produces content (the lecture) that you (the users) listen to, take notes about, and absorb. In a tutorial, though, everyone (users again) gets involved. The users can generate new discussions, segue (or link) to other, related information, and everyone is given an equal footing.

Still having trouble? Here are some examples:

Facebook:

Along with MySpace, the emo teen to its cool older brother, Facebook in many ways defines the Web 2.0 movement. As a website, it has no raw content. Every page is either a user's profile or information, a page for a group to join and discuss, or dedicated to providing options for customising your Facebook experience. There's no company providing a product, no massive corporation trying to shill their wares, just a place for people to connect.

YouTube:

Like Facebook, YouTube is one of the defining sites of Web 2.0. Perhaps moreso than other social media, YouTube has been seized by users and companies alike. It has surpassed television as the debut location for music videos and film trailers, and introduced the "vlog" to a whole generation.

TvTropes Wiki:

The wiki is another staple of web 2.0, an area where users can collaborate their efforts to write content. At the TvTropes wiki, users (called "tropers") work together to document narrative conventions as seen in television, film, writing, and other media. By working as a group, rather than individually, they are able to construct a list of knowledge that is greater than the sum of its parts.

So that's web 2.0. By working together, users are able to create content for themselves that exceeds what any would be able to do on their own.