Information and Instructions: Examples To Live By

It's example time!

>INSTRUCTIONAL DESIGN

First example: Signage. This example is a simple one, which I mentioned in a previous post. That is, a stop sign.

http://johnochwat.files.wordpress.com/2008/08/stop_sign1.jpg

It's clear and to the point: Stop. Because it is a road sign, we know this means to stop our vechicle. However, this sign could be improved by noting when you may stop stopping. Of course, it is assumed that you passed a driving test to come this far.

Here's another example, but instead, it's the iPhone's user guide:

Link

(Sorry it's in crappy HTML, but the .PDF won't load)

Let's flip to page 5: Activating your iPhone.

As we can see, the manual outlines what you need to activate your iPhone, and how to go about doing it. It is important to note that while it assumes that the owner has no clue as to what to do, it does not have a condenscending tone to it, and outlines what must be done clearly and simply. The iPhone user guide does not contain images, which may have improved it, but helps in proving an important point that many people forget:

Design does not equal graphics. A common problem with many would-be designers is forgetting this important rule. First, they produce the image, and then try to fit the design to their vision, whereas any good designer knows that it's rather the other way around.

>INFORMATION DESIGN

Now on to the info dump. The examples for information design may be a bit drier than those that have come before, but if you pay close attention, you might learn a thing or two.

For our first foray, we'll focus on a calendar. Yes, a calendar is an acceptable example of information design. It supplies you with information (what day it is) and whether or not this day is special (Queen's Birthday, etc). It is also slightly interactive in that you can add special occasions of your very own to remind you.

Here's a link to one, from something I hadn't even considered possible: Google Calendar
The Calendar

And for the next example, we have this:

OM NOM NOM

The ever-present graph, the classical example of information design. Trendy as hell and just as confusing, this graph supposedly informs us of what countries are eating these days (these days being those days, way back in '03). Unfortunately, it only tells us the totals and the colour code, leaving it up to use to figure out the numbers of what which country is om nom nom-ing away at.
The title also makes two massive generalisations, and then only investigates ten countries - and this part of the graph shows only four.

As we've seen time and again, it pays to pay attention to what you read. You might learn something.

Interactive Design: Design Done Right

Here be examples of interactive (AKA interaction) design!


Contained within this post are several examples of interactive design. One of these is the game Team Fortress 2, made by Valve. Another is Andy Fould's website and Google. You cannot escape Google.



First off, let's start with the most fun: Andy Fould. When you first rock up to his site (which needs Flash - be sure to download the latest version), you'll be treated to two coloured blocks - one red, the other orange. The red block offers various amusements to the viewer, with the Pen And Ink flash being of particular note. The orange, on the other hand, allows access to the site, a news tidbit, and Fould's "experiments." Afterwards, it becomes a showcase for Andy's work. It is important to note that the entire website is very user-friendly, which is critical to the experience. Whenever designing, keep user-friendliness in mind.

Now onto Google, the looming giant. Google thrives off interactivity. It stopped being just the most-used search engine in the world ages ago. In a response to its ever-growing popularity, it has branched out into (okay, deep breath):

Google Maps, Google Videos, Google Calendar, Google Mail, Google Scholar, Google Images, Google News, Google Chrome, Google Groups, Google Directory, Google Talk, Google Translate, Google Mobile, Google Notebook, Google Desktop, Google Book Search, Google Blog Search, Google Picasa, Google Docs, Google Code, Google Labs, Google Earth, Google SketchUp, and Google Orkut.

That's not a complete list, by the way. This is what is known as Google. Google is interaction design.

...

That's right, I had another example, didn't I? Well then, let's move on to Team Fortress 2.

This is quite possibly the best FPS ever, if only because of the effort Valve puts into responding to the community surrounding it. Yes, you heard right! Game designers who actively respond to their customers after they've bought the game! Who'd a thunk it?

The biggest selling point of the game is the level of interactivity. It's called Team Fortress 2, ya'know, because you have to work as a team. With complete strangers. Interestingly enough, because Valve constantly adjusts the game in response to the community, it works, increasing the ability of its end users to work in a team with people they met just a minute ago.

Protip: Turn your sound down. Your ears will thank you for it.

Web 2.0: An Example Or Two

Our old friend, Web 2.0, is everywhere. For example, this blog qualifies as Web 2.0. As does every other blog set up by my fellow UWS bloggers. But when you get down to it, they look like nothing more than glorified text pages. What makes them Web 2.0?
According to Web 2.0 Validator (http://web2.0validator.com/. A useful test, but should be taken with a grain of salt), signs include:

> Uses HTML, XML and Cascading Style Sheets (CSS)
> And referring to several Web 2.0 sites.

There are other clues, but these two tend to be pretty important. HTML by itself is the quintessal Web 1.0 - a static webpage of text. XML allows for those oh-so-helpful gadgets blogspot runs: the RSS feed, the blogroll, even the link tab. And CSS are responsible for the way everything looks similar no matter what page you go to - but perhaps that is better considered Web 1.5, because they feature heavily in both Web 1.0 and 2.0 websites.

But let's get mainstream now. These are your Big Guns of Web 2.0. The market leaders. They pretty much dictate the nature of Web 2.0. In other words, if these guys do it, it's Web 2.0.

Google (http://www.google.com/) you must know. Its sheer web presence has elevated to the point where its very name has passed into common vocabulary. "Just Google it." Google has been at the very frontier of Web 2.0 ever since it rose its ugly head back in the 90's. (1997, to be exact - BackRub doesn't count). Ever since then, they have expanded horizons with innovations like Google Maps, Google Earth, Google Images, Google Scholar, Google Flavours-Of-Icecream... the list is becoming near-endless.

And then there is Youtube (http://www.youtube.com/), which is effectively Google for videos (except Google has that covered too, with Google Video). Home to internet memes like the Rickroll (Click here for an introduction) and the dreaded IT'S OVER 9000!, AMVs (Anime Music Videos) and fansubs galore. Home to old, discontinued shows, video game montages, and people sobbing into their cameras. Also, Chad Vader.
It's no surprise then that Youtube is one of the most popular sites still online. Not content to sit, twiddling their collective thumbs, Youtube's team are forever increasing the versatility of their site. It has annotations, which allow video creators to create some form of commentary, subtitles to aid those hearing-impaired, and playlists to allow an unbroken viewing experience by queueing up the videos you want to watch in advance.
They also do in-video ads too, nowadays, but Google cannot be far behind.

And, finally, Digg. Digg (http://digg.com/) is one of many Web 2.0 sites that exist only to advertise other sites by public opinion, but Digg (and it's older and nerdier counterpart, Slashdot) are perhaps more well-known to the general internet populace than most. A surprisingly large number of people will visit a site simply because it was on the front page of Digg and its kin (ones to watch include Design Float, DZone and Blogg-Buzz). Thusly, Digg can control (to an extent) what lives and dies in the internet world.

I hope these have been helpful to you. Look them up if you've got the time to.