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.

What is Web 2.0?

Web 2.0. Everyone has heard of this. And everyone has a different opinion on what it is.

The textbook definition of it is "The change from static text webpages to interactive media webpages." For an example of the former, take any old "Build A Wepage With HTML" tutorial. You'll make one as your first shot. For the latter...

Youtube. Google. Myspace. Twitter. Facebook. Blogspot. Wordpress. DailyMotion. Yahoo. Dogpile. Tripod. Pick any one you like, they're all what's generally called "Web 2.0."

Technically, the textbook definition is right. Technically. It's like calling a dog a domesticated wolf. Technically you're right, but the truth is far more complex.

I'll expand upon this in later posts. Web 2.0 is a lot more interesting than you'd expect.