Studio Task 3: The End Is In Sight

Now to finish off the dreaded classwork monster, with three A5 images. Beware, as they all have rather large image sizes, so if your internet connection isn't the quickest, don't open them all at once.

First up are what you'd call concept art. They're storyboards for an interactive presentation on how to make toast. Yes, we are still talking about toast.

http://i46.photobucket.com/albums/f146/DuFiat/CS4-is-horrible.png

http://i46.photobucket.com/albums/f146/DuFiat/CS4-is-horrible-2.png

As you can guess, I have no love for CS4.

The next image is concerned with what you'd call the audience. A very specific part of the audience - this 'mood board' (a collage made to reflect the interests and habits of part of the audience) is for a fictional viewer of the above fictional presentation. Let's call him John. John likes Westerns and a drink at the pub, which is why I've put such images in. Mood boards help designers get a feel for their audience. This may seem silly, but they are an important part of the design process.

http://i46.photobucket.com/albums/f146/DuFiat/Mood-Board.png

With that, classwork is done. Now we may continue onto happier topics.

AAARGH PHOTOBUCKET

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.

Information Design, Instructional Design: Which Is It?

Of all the topics I have to talk about, information design and instructional design are the most straightforward. Instructional design tells you what to do (remember that flowchart a few posts back?), and information design provides you with information. Now the basics are out of the way, let's look deeper...

>INFORMATION DESIGN

As mentioned above, information design provides information, or data. However, it is important to note that successful information design also provides a means of understanding said data. This can be done through graphics, text, audio, interpretative dance, whatever-have-you.
Also, information design can be used to disguise data. Take, for example, a survey about donut consumption. A bar chart says that donut-eating is up 30% more than last year. Informative, sure, but very misleading. 30% of what? Whose donuts? Which flavour? Where?

Summary: Information design can inform and increase understanding, but it can also hide the facts. Its usefulness is directly proportional to how much data it provides.

>INSTRUCTIONAL DESIGN

This is really quite simple. Instructional design, which often goes hand-in-hand with information design, tells you what to do. Every time you see a stop sign, you're looking at instructional design at work. Manuals? Maps? Exercise tapes? It's all instructional design, my friend.

That's all for now, I'll be back later.

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.

Interactive Design: A Definition And An Introduction

Interactive design. Sounds simple, no?

Firstly, let's try the simple, confusing and unclear definition: Interactive design is used to create interactive works.

Well, great, what does that mean?

Interaction design is all about using many different concepts to help draw the end user into an experience. Sometimes, the end user becomes so involved that they become one of those concepts themselves. The most obvious example of interactive design is a game. Using visuals, audio, text, film, interaction, time and motion. Most likely, there are others parts to it as well, but for the life of me my brain can only remember so much.

Interaction design i all about involving the end user by using the aforementioned concepts to the best effect. But that doesn't mean using all of them - I'll expand upon this in the examples post.

It burns us!

It's flowchart time! For toast!

>Second lesson: Enthusiasm - even if it's nothing more than a couple of exclamation points - can be really useful in drawing your audience in. Just use them sparingly, and no more than one ! to a sentence. Otherwise people think you've got problems.

They're right.

Ahem. Continuing on.
Since Blogspot seems to have a problem with images, here's a link to the picture. If Photobucket gives you any guff, just leave a comment and I'll do my best to sort it out.
http://i46.photobucket.com/albums/f146/DuFiat/FLOWCHART_2_FUPB_2.png

A flowchart isn't for the funny stuff. You can work it in there, but for the most part, leave it alone.

I hate Photobucket.

It be a curse, a curse, I say...

Toast. The final frontier. These are the works of the student known online as Mask Superman, boldly going where toast has gone before.

Through a series of Studio Tasks, my classmates and I have plumbed the depths of making toast. Using a toaster. This is heavy stuff, right here. As a present, from me, to you, I'm posting it up on here.

Well, mainly I'm posting it because I have to, but there were some sentimental feelings in there.

Here we go! The first article - A step by step description to making toast:


Making Toast

A step-by-step description

This description assumes you already have bread and a toaster.

1. Make sure toaster is plugged in.

2. Is the toast free of foreign material? If not, remove any offending material. Such materials include forks, cockroaches, spies and burnt pieces of toast. Remove anything that is not part of the toaster.

3. Turn power switch and toaster on. Take one slice of bread and insert it into the appropriately shaped slot in the toaster.

4. Is the bread frozen? If so, press the 'Defrost' button. Press the 'toast' button, and wait until the toaster is finished.

5. Turn the knob surrounded by numbers to about halfway. This is to ensure the toast is not burnt and therefore useless.

6. Press the toast button, and wait for the toaster to finish toasting your bread.

7. Is the toast burnt? If so, swear loudly at your toaster, and shake your fist angrily. Then repeat from step 1 with a different slice of bread, but when at step 6, turn the knob to a lower number than before.

8. Repeat steps 1 to 8 until you have two slices of toast. Place them on a clean plate.

9. Turn toaster off. Turn power switch off.

10. Devour toast with much delight and relish.

-

A lesson can be learned here: just because your content is serious (in other words, by following this guide, you will be able to make toast) doesn't mean you have to sound like a robot. Spice things up a little! People respond better to humour, showmanship, and above all the feeling that what they're reading was penned by a human being. Also, don't insult your audience, despite however superior it might make you feel. It doesn't work. It never works. Stop.

Next post - Flowchart!

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.

A couple of links I think you'll all enjoy.

This one was an eye-opener. If you read nothing else about Web 2.0, read this:
http://www.paulgraham.com/web20.html

Here's one not to go to, unless you want to get laughed out of life:
http://www.wikipedia.com/

Seriously, crack is better for your brain than this. The reason I bring this website up is so I can point you towards what Wikipedia would be if it was actually useful and had standards:
http://www.interaction-design.org/

Be sure to read through it. A couple more of these later on.

And yes, this post was once... A RED HERRING!