EXAMPLES OF INSTRUCTIONAL/INFORMATION DESIGN

Examples of Instructional Design

The site tutorialized.com features hundreds of instructional and step-by-step processes to achieve certain effects in flash and Photoshop.

The Adobe Design suite has an exquisite manual available online containing tutorials, technical help and tips for beginners and advanced users. It features an index and keyword search based navigational system to sift through the bevvy of information. Click here to view it.

Emily Springfield is an instructional designer. See some examples of her work on this page here.

Examples of Information Design

New York Times' "Ebb and Flow of Movies" Graph : An extremely information heavy interactive graph detailing the revenue of hundreds of movies on a scale of millions of dollars. It helps to compare the revenue's received by movie's over time since 1986 (where the graph starts) and also ones that were released around the same time. Sadly it only takes the US Box Office into account and ends after February 2008 but very interesting none the less.

The Google Zeitgeist is an inaugural release of information by Google every year. It details the most searched for keywords over the year, by month, subject and country. It uses a very simple point and click HTML based system that makes it easy for anyone to look through the information.

Obama's 2008 presidential campaign was very successful, he got elected after all. The Information design in the campaign played no small part in its success. This extremely image heavy website gives a great glance into the various formats he and many others used to spread conspiracies/facts/opinions to the voters and the world in general. The site can be seen here.

WHAT IS INFORMATION/INSTRUCTIONAL DESIGN?

Wikipedia says Information Design is:

Information design is the skill and practice of preparing information so people can use it with efficiency and effectiveness.

Its the sorting of data into something easily understood in a visual format. It involves creating tables, graphs and visuals to help the user interact with the information within a system.

Wikipedia says Instructional Design is:

Instructional Design is the practice of creating instructional tools and content to help facilitate learning most effectively.

Its where a designer creates elements within and around a system to help the user navigate around a page.

Things like tool tips, manuals and help sections are examples of this. They often define the success of an Interactive system. Without the user understanding how to interact, there is no way the system can reach its full potential.

PLANNING TOOLS FOR INTERACTION

This is a sample preliminary design process for teaching someone to use a toaster to make toast. It assumes you have BREAD and a TOASTER ready to use.

STEP-BY-STEP

1. Start
   
2. Get Toaster
3. Plug Toaster into Wall
4. Switch Powerpoint on
5. Get bread and place into Toaster
6. Adjust Cooking Settings
7. Push Lever Down
8. Has Toast Popped Up?
9. Is it Cool enough to Touch?
10. Take Toast out.
11. Enjoy.

GREAT EXAMPLES OF INTERACTIVE DESIGN

Dontclick.it is a great example of interactive design. It is an experimental site where the user interface does not involve any clicks of the mouse. It challenges the user to go through the site using cursor movement alone. It involves various methods for selection and navigation that are all clearly displayed. It is an oldie but a goodie.

Musicovery is a little web gem that uses a simple interface to provide music for anyone in any mood. The user picks the genre, the era and the dance to tempo ratio and the site plays music which fits into the category. It shows a chart showing the relationship between the song you are listening to and the ones around it.

Kongregate is a site featuring an astounding amount of flash-based games. It also allows people to chat with one another in game and provides achivements and high-score recording to give people more of an incentive to play the games harder and for longer. The site is very well set up to provide all this interaction.

WHAT IS INTERACTIVE DESIGN?

Wikipedia says Interaction Design is:

Interaction Design (IxD) defines the structure and behavior of interactive products and services. Interaction Designers create compelling relationships between people and the interactive systems they use, from computers to mobile devices to appliances; Interaction Designers lay the groundwork for intangible experiences.

Interactive Design is the design of spaces for human interaction in everyday and working environments. It involves the designing of an information infrastructure, the interface and layout. Interaction design is a crucial because its what allows us to communicate with and use modern electronic devices and computers.

WEB 2.0 EXAMPLES

MySpace - The original social networking phenomenon.

http://myspace.com/
Facebook - The successor to MySpace's social networking thrown. Still a ways behind in some respects, especially so for Musicians with no audio capabilities comparable to that of MySpace http://facebook.com/
Twitter - A very minimal chatting service where each user posts a single sentence update whenever they feel like it. Many celebrities, politicians and sportsman use it but beware of the fakes! http://twitter.com/
DeviantArt - A site for artists around the world to update their artistic creations. http://deviantart.com/
Threadless - T-shirt company based in Chicago in the US where the site's users upload artowrks and slogans for T-shirts. If the design is picked, a cash prize is awarded. http://threadless.com/
Amazon - Online shopping megastore that customises their advertising based on items users regularly browse and purchase.

http://amazon.com/
iTunes - A huge compendium of music and podcasts available for purchase and download. Like Amazon, it makes recommendations based on your music library.

http://itunes.com/

WHAT IS WEB 2.0?

Wikipedia says WEB 2.0 is:

A perceived second generation of web development and design, that aims to facilitate communication, secure information sharing, interoperability, and collaboration on the World Wide Web

In other more simplistic words, WEB 2.0 is the successor to WEB 1.0 where the contributors were highly outnumbered by the viewers. The cost and facilities to create personalised content online was just not available as it is today. WEB 2.0 describes the transition from an Internet where content is owned and controlled by contributors to an Internet where content is controlled, downloaded and uploaded by everyone for everyone.

Personalised content is generally as simple as creating a small profile with a Username, Password and Email address (sometimes even easier). Blogs, social networking (Facebook/MySpace etc.) and the Wikipedia phenomenon are just simple examples of WEB 2.0 applications. WEB 2.0 is characterised by customisation and user input. These sites are relatively useless without a userbase.