Information/ Instructional design

(1)

Information design is the method of turning facts, figures, numbers and statistics into useful information, and portraying this information in an appropriately designed way that expresses basic meaning to a targeted audience. This combines learning by computer interaction and human factor studies.

Information design and Instructional design are two forms that work hand in hand with each other. In a basic sense, what Information/ Instructional design is, relates to the expression of information such as facts and figures along with maximising the effectiveness of the way in which this information is articulated. Instructional design is helpful in showing responders how to do certain things. Below are a few good (and bad examples of Information/ Instructional design).

(2)

(3)

Here we have 2 extremely good examples of information/ instructional design. The first example is a poster made by the World Health Organisation outlining the devastating effects of poor hygiene in a confronting and effective manner. The second example is a chart referencing the deadliest drugs in the UK. As it is seen, it is a graph that is clear to read and understand.However, not all information design is clear. In fact, there is a number of poor examples when it comes to information/ instructional design. The picture below is a prime example of poor information design.

(4)

This chart is very muddled and confusing. This in turn shows how information design can be both good and bad. Although you can make sense of this chart after looking into it for a while. it is still in my books seen as poor design. due to the lack of text informing responders as to what is what.

(5)

This is a video which i believe is a good visual example of ways in which Information design can effectively be

portrayed.

Interactive Design

What is interactive design?

Well the definition of interactive is: Interacting with a human user, often in a conversational way, to obtain data or commands and to give immediate results or updated information. (dictionary.com)

And the definition of design is: to prepare the preliminary sketch or the plans for (a work to be executed), esp. to plan the form and structure. (dictionary.com)

Therefore one would think that interactive design is to 'prepare' a work in which a human user can obtain information.

However this definition is not quite there. When the words 'interactive' and 'design' are put together, the definition becomes the study of devices and programs in which users can interact.

Basically, what this means is that interactive design is highly centred around of course, interactivity within your electronic life. A type of interactive design that most people use every single day is in the form of websites.

Here are a few examples of what I find to be good/ effective web design:

(6)

(7)

As you can see in the above websites, they are laid out in such a way so that it is easy to navigate. Here they have clear page headings and obvious links. However, in the below website for UWS, I believe that it is quite poorly constructed. This is due to the large amount of clickable links along with the lack of any structure to the page. This ultimately makes it an extremely hard to navigate page.

(8)

Planning tools for Interaction

How to make toast. A detailed look into Information/Instructional design.

A step by step on how to make toast.

1. Get a working toaster.

2. Get a slice of bread.

3. Make sure it isn’t contaminated. (is there mould?)

4. Turn the toaster on. (is it plugged in?)

5. Adjust the temperature on the toaster.

6. Slot the bread into a toaster.

7. Press down the leaver till it locks into place (does it lock in the down position?)

8. Keep an eye on the toaster as it is cooking.

9. Wait for the toast to automatically emerge from the slots.

10. Remove the toast from the toaster (be careful as it WILL be hot)

11. Place toast on a plate.

12. Turn off toaster.

13. Add the desired condiments to the toast.

14. Eat and enjoy.

Flow Chart

Storyboard

This is a prototype storyboard about how to make toast.I have kept it to a minimalistic feel as this instructional design is here to teach and inform. Each step has an obvious picture, along with easy to understand language. The arrows are made up by warped pieces of toast, when they are clicked, it will take you seamlessly to the next step in the toast making process.

Mood board

This is a mood board dedicated to Johnny Smith

Web 2.0

What is web 2.0? This is one of the hardest questions to answer. Dictionary.com says that web 2.0 is the second generation of the World Wide Web in which content is user-generated and dynamic, and software is offered that mimics desktop programs.

However, the process of retrieving this information, and expressing on a blog site such as this is primarily expressing what Web 2.0 is.

In this day and age, everything we do on the internet is in fact an example of web 2.0. Sharing this information right now shows how internet has evolved into this form. Web 2.0 is portrayed in a lot of ways through sites such as Facebook, Myspace, Blogger, Youtube, Bebo to name but a few. These sites are primarily sharing information amongst many other internet users. This information may be about yourself, or about certain topics (like Web 2.0).

Here are a few visual examples of Web 2.0.

(9)

YOUTUBE: This is one of the biggest examples of web 2.0 youtube is a video sharing site, in which users can upload videos to share with the world wide web for everyone to see.

(10)

VUZE (p2p sharing): This is a P2P program (person to person) where people can download a vast array of things such as music, videos and games from other users computers thus giving the program its P2P tag.

(11)

GOOGLE: This is the worlds LARGEST search engine. Here you can search ANYTHING and get results. What this search engine does is directs you to websites that fits the criteria of your search.

(12)

This video is a simple but good example of how the world wide web has evolved into what it is now.

References:

⁽¹⁾ "News." Eismann SF Web. 24 Mar. 2010. .

⁽²⁾ "innovation playground Idris Mootee." innovation playground Idris Mootee. Web. 21 Mar. 2010. http://www.mootee.typepad.com/

⁽³⁾ "Health." Digg. N.p., n.d. Web. 23 Mar. 2010. .

⁽⁴⁾ "Information Design Watch ." Dynamic Diagrams : Information Design Watch Web. 23 Mar. 2010.

⁽⁵⁾" Did You Know 2.0 ." YouTube - Broadcast Yourself. Web. 19 Mar. 2010. http://www.youtube.com/watch?v=pMcfrLDm2u&feature=related

⁽⁶⁾" Apple." Apple. Web. 20 Mar. 2010. .

⁽⁷⁾" Latest Songs From MP3 & Music Blogs." The Hype Machine. Web. 17 Mar. 2010. .

⁽⁸⁾" Home." University of Western Sydney (UWS). Web. 24 Mar. 2010. .

⁽⁹⁾ "Broadcast Yourself." YouTube . Web. 14 Mar. 2010. .

⁽¹⁰⁾ "Vuze." Vuze. Web. 14 Mar. 2010. .

⁽¹¹⁾ "Google." Google. Web. 14 Mar. 2010. .

⁽¹²⁾ "Web 2.0 ." YouTube. Web. 14 Mar. 2010. .