Information/Instructional Design

Information Design, also known as Instructional Design, involves the incorporation of information to help empower the user to learn something. This may be to learn a skill, such as playing the guitar, or how to cook pancakes. Wikipedia describes Instructional Design as a process that consists of "determining the current state and needs of the learner, defining the end goal of instruction, and creating some "intervention" to assist in the transition."

Three examples of Information Design are shown below, highlighting just how broad the range of information that is being communicated can be.

W3 Schools - An educational website that assists the user in learning basic up to advanced web design skills. The site provides access to tutorials, reference material, examples and even access to certifications for the skills they have learnt.

(click image for full size)

Mr Tones - This site allows the user to access the scripts for creating mobile phone ringtones on the phones built in composer. The user can search for his/her favourite song and access the information that lists the order of key presses necessary to compose this tone on the handset.

(click image for full size)

Ultimate Guitar - Guitarists are able to access tablature of their favourite songs, which can be used off screen or can be printed off for further reference. These 'tabs' teach the user the necessary strings and frets to be played in order to recreate the song.

(click image for full size)

Interactive Design

Interactive Design, (or interaction design), is described by Stanford University's Professor Terry Winograd, as "the design of spaces for human communication and interaction." It is human centred design aimed to use technology to make information easily accessible to the user. Bill Verplank, an interaction designer also from Stanford University, breaks down interactive design to 3 main factors that must be communicated between the user and the technology.

These are:

1. How do you do? (what aspects help the user know how to use the technology?)
2. How do you feel? (how does using this technology make the user feel?)
3. How do you know? (what aspects of the technology reassure the user that they are interacting successfully?)

Some examples of websites that successfully 'tick all the boxes' of interactive design are:

The Portfolio of Stephano Dinamarca Fernandez

Stephano's index page clearly lays out calling cards for his different projects with graphics relevant to the associated project. When the user selects one of these icons, they are taken to a page that communicates the project with use of text and graphics.

(click images to view full size)

AS Colour - Sydney based suppliers of blank clothing.

The website uses a hierarchy of neutral colours to communicate what is important to the user and to guide the eye to the appropriate links.

(click images to view full size)

Yellow Pages - Australia's premier phone directory.

The website allows users to search for contact details of residential estates along with businesses. Searches can be specified by localities and other options and results are displayed in a list form with the option to view locations on a map.

(click images to view full size)

Get toasted!

1. Plug toaster into power outlet
2. Turn power on
3. Remove bread clip from bread bag
4. Make sure hands are dry
5. Retrieve slice of bread from bread bag
6. Inspect for mould and other un-wanteds
7. Drop slice of bread into the toaster
8. Set toasting level - Do you want it lightly toasted or burnt?
9. Using the lever on the side, lower the toast into the toaster until a click is felt
10. Allow bread to toast, being careful that no body parts or other objects are in/around the slot
11. Observe bread - Is it toasted enough?
12. If yes - Press cancel button / If no - wait for bread to pop up
13. Is the toast too hot? If s - Wait until it is cool enough to touch. If not - Remove bread from toaster being careful not to touch any hot components of the unit
14. Prepare with condiments to taste

FLOWCHART

(click image for full size)

INTERACTIVE TUTORIAL
This is an example of instructional design put into a graphic context. This style of design would benifit from being used in a Flash type file.

STAGE 1 - Locate Toaster


(click image for full size)

STAGE 2 - Plug Toaster into Power


(click image for full size)

STAGE 3 - Turn Power ON


(click image for full size)

Web 2.0

So what is Web 2.0?

Web 2.0 is considered the "second generation" of the world wide web. It incorporates dynamic and shareable content within it's applications in order to facilitate and promote interactivity, interoperability and social networking. Web 2.0 has allowed users to create their own dynamic environments on the web which can be used to network with other users, enhancing the experience of information sharing and the usability of the web.

Possibly the most prevalent examples of Web 2.0 in today's technologically charged society are social networking websites, as seen below:

The original boom in social networking sites was seen with MySpace. MySpace allowed users to customise their page's appearance, music and content and promoted interactivity between users via page comments, picture comments and private messages. This is the MySpace page of popular drummer Travis Barker. Note the heavy use of graphics in the page layout.

(click image for full size)

More recently, MySpace has lost popularity as Facebook started to boom. With more than 400 million active users, Facebook is currently the leading social networking site. Below is the Facebook page of Travis Barker, notice the difference in content on the page, with far less graphics and more textual based content. Users of Facebook communicate with one another via wall posts, messages, picture comments, and status updates.

(click image for full size)

With more than 35 million users updating their Facebook status per day, the market was made clear for the site Twitter. Twitter is very heavily text based networking site where users simply update (or 'tweet') their status or comment on other users pages. Simple graphic backgrounds are the graphic extent of Twitter however a new image sharing application called TwitPic has been developed.

(click image for full size)