Planning Tools for Interaction

Flowcharts

A flow chart is a graphical way to layout steps, which help to complete a task or solve a problem. Flowcharts when designed effectively should be easy to understand and read. Flowcharts are a common tool used in the planning stages of interaction design, as they allow you to see what has to happen in order to reach the goal. A flowchart is made up of a series of relevant shapes and flow lines which guide you between each step. Below is an example of a flowchart describing how to make toast.

These are the steps involved in making toast.

1. Place toaster on a stable surface
2. Plug toaster in socket
3. Turn power switch on (is toaster on)
4. Open loaf bag of bread
5. Take out desired amount of toast bread ( generally 1 to 2 slices)
6. Pace slices of bread into toaster
7. Set toast settings to the desired level
8. Press down the lever to insert bread into toaster
9. Wait for toast to cook
10. Check darkness of toast (is it at desired shade)
11. Check toast is safe to touch
12. Place on plate and top with desired topping

Storyboards

Storyboards are yet another tool used in the planning stages of interaction design. They are a way to effectively display the visual events that are going to take place on screen. They generally contain indicators, like arrows and lines, which show what is going to happen or where something is going to move to. There is no set layout to a storyboard, it just needs to show the relevant information in a clear and easy to understand manner. Below are two slides from a storyboard describing how to make toast.

Moon Boards

Moon Boards are a visual way to represent information about a persona. They are made up of a variety of pictures that represent the persons, interests, lifestyle and other relevant information. Moon Boards allow for a quick reference and overview of the persona, without needing to read all the written text. Below is an example of a moon board, made for the following persona.

Johnny Smith

John is a 75-year-old retired carpenter who still enjoys hikes in national parks and ridding his Harley-Davidson. He looks forward to the local club raffle and a catch up with the boys on a Thursday evening. He also enjoys playing bingo, listening to local radio and watching old western movies with his wife Jill. As he gets older and has to visit the hospital more often, he prefers quick and efficient healthcare with simple, bold instructions and hospital signs. He aims to enjoy the rest of his life traveling a little and spending time with family, especially his grandchildren.

Location: Hobart
Toaster Usage: Unfortunately Johnny has never used a fancy new electric toaster
Computer/Internet Usage: PC, Occasionally browses the Internet with the help of his grandchildren.
Computer Skill: Novice user. Finds things too complicated on the computer to use. Has an email but doesn’t know how to use it properly.

About This Blog

This blog has been created for one of the subjects I am studying at university called Interactive Design 1. The main objective behind this blog is to help designers, students and the general public have a better understanding of Web 2.0, Interactive Design and Information/Instructional Design.

Examples of Information and Instructional Design

Both instructional and information graphics come in a variety of different forms. They can be both, picture / graphic based or completely text based or a combination of both. The following are just some examples of these styles of design.

This is one set of graphic based instructions designed for a book “Show Me How – 500 Things You Should Know”. It shows how to put up a tire swing. The instructions are clear and easy to understand while remaining quite graphic based.

This is a set of instructional graphics found in the inside of Wangler Jeans. They describe how to properly “slip into that special pear of jeans”. They are clear and easy to understand, with using minimal wording.

This set of images is part of the 2008 Feltron Annual Report. They are quite contemporary in style, but effectively portray the information required. Using only a small colour pallet they are able to easily distinguish between relevant pieces of information.

This piece of information design was designed by Alistair Roberts and documents some of the jazz music used in animated short films between 1929 and 1945. The design itself is clean and crisp and clearly displays the relevant information so that it can be easily read and understood.

This is the Lego 50th anniversary time line. It shows the progression of the company’s products over the past fifty years. It effectively provides a large amount of information about the company, in a relatively small area.

Refrences:

http://www.onefloorup.com/uploaded_images/January09/0105-HowTo.jpg
http://www.designverb.com/wp-content/images/2006/07/wrangler2.jpg
http://www.feltron.com/index.php?/content/2008_annual_report/
http://www.cartoonbrew.com/wp-content/uploads/jazzgraph_b.jpg
http://cache.gizmodo.com/assets/resources/2008/01/lego-brick4-timeline.jpg

Information & Instructional Design Definition

Information Design

Information design is the ability to create order and make sense of complex pieces of data and information, so that it is easier to read and understand. Information Design uses visual methods to explain complex forms of data which otherwise wouldn’t be understood. This is commonly done through the use of Information Graphics. Information Graphics use a combination of images, numbers and words to effectively communicate a point both visually and verbally. Information Graphics are ultimately designed to reveal the relationship and meaning of data so that it can be easily understood.


Instructional Design

Instructional design is the process in which data and information are turned into useful instructions to help guide people with every day tasks, giving them to opportunity to learn. Instructional designers conduct dense amount of research in order to develop strategies which are best suited to educate the target audience. The main aims of instructional design are to provide the instructions effectively, efficiently, appealingly while still remaining cost effective. The instructional designer uses a variety of different styles of interactive media in order to address the desired learning outcomes. These types of media can include flow charts, instruction booklets, Diagrams and storyboards etc. All instructional designs need to go through certain steps in order for them to be effective. These include development, evaluation, implementation, and maintenance.

Great Web Design Examples

There are a wide variety of websites on the internet, some are read only sites and others allow a lot more interaction. The following are just some examples of great interactive design websites on the internet.

Adidas Australia Website

Adidas home page consists of a set of pictures which only when you scroll over them does any information appear. This forces you to interact with the site in order to find the information you are after.
view this site at: http://www.adidas.com/au/shared/home.asp

Coca-Cola Australia


The Australian Coca-Cola Website is similar to the Adidas website as you have to scroll over pictures and diagrams in order to receive the information you require. The site is easy to navigate through, while also being easy to read and understand.
View this site at: http://www.cocacola.com.au/csol/

The Good Food fight - Eat Better America


The Good Food fight is a website set up by Eat Better America, allows you to have a virtual food fight with a chosen character. You are able to pic the type of food you want to throw, the person you want to verse and with the use of the mouse you are able to throw food at the person, while they throw food at the screen. This is a great example of an interactive design website.
View this site at: http://thegoodfoodfight.com/

Sketch Swap

The Sketch Swap website allows you to do just that sketch and swap picture online. The site opens to blank sketch pad, where you use the mouse as your pencil and you are able to draw anything you want. After you have finished, you simply name your sketch and then share it with the rest of the world.
View this site at: http://www.sketchswap.com/

The Graffiti Archaeology

The Graffiti Archaeology website allows you to interact and see how graffiti walls across America have changed over the years. This site allows you to flick through various stages these walls have gone through. Giving you a running commentary of the history of the wall while also allowing you to see some of the magnificent pieces of work.
Visit this site at: http://www.otherthings.com/grafarc/

Defining Interactive Design

Interaction Design is the design of spaces for human communication and action. Allowing humans to relate to a program, which responds to its users. Interaction Design is made up of a fusion of several things, rather than just one, these include sound, motion, images etc.

In an interview Gillian Smith, she gives the following definition of interaction design,
“In the same way that industrial designers have shaped our everyday life through objects that they design for our offices and for our homes, interaction design is shaping our life with interactive echnologies, computers, telecommunications, mobile phones, and so on. If I were to sum up interaction design in a sentence, I would say that it’s about shaping our everyday life through digital artefacts, for work, for play, and for entertainment.” (Smith, 11)

According to Nathan Shedroff, Interactive Design can be broken down into four main spectrums, each as important as the other. These are:

Feedback and Control - Focusing on how much control the audience has over the outcome or the rate, sequence or type of action and how much feedback exits in the interface.

Creative Experience and Productivity - Creative Experiences allow a user, creator, or participant to make, do or share something with others. Some experiences can be used more productively than others, but being creative and producing something are typically more interesting, entertaining and fulfilling activities.

Adaptive Experiences - Adaptive technologies are those that change the experience based on the behaviour of the user, reader, consumer, or actor.

Communicative Experience - Provides opportunities to meet others, talk with them, and share their personal stories and options, are always viewed as valuable and interesting. These experiences involve two or more people.
(Shedroff, 10-11)

Basically Interactive Design refers to the moulding of products and services which allow you to interact and experience a particular situation to the full extent, both physically and mentally.

References:

Shredroff, Nathan. Information Interaction Design: A Unified Field Theory Design. 1994. pg 1-15.

Smith, Gillian Crampton. “Forward” What Is Interaction Design? 2002. pg 7-20

Web 2.0 Examples

Web 2.0 allowed the formation of various technologies which changed the way we used the internet. These include:

Websites like Blogger.com allow anyone to set up a site about any topic they wish and freely express their thoughts and ideas. Sites like this can be used for factual information on particular topics or a personal blogs where the user is able to use it like a online diary.

The online encyclopaedia known as Wikipedia is completely run by the users. Allowing them to change and control the content of the page. It is available in a variety of languages allowing people to share information all around the world.

Flicker is quite similar to Wikipedia, but instead of sharing information you are able to share pictures. The user once again controls the content as anybody is able to add a gallery to the site and share pictures with the world.

Social networking sites like MySpace, Facebook and Bebo, allow people to connect, share and communicate from anywhere in the world. All of these sites are based on personal profiles, which are added, edited and controlled by the users.

YouTube is yet another example of Web 2.0 technology. Allowing you to upload and download any kind of video, including, News, TV Shows, Movies and Personal Blogs. Once again the user is controls the content, by adding videos and blogs.

Finally website like Second Life, allow the user to create a virtual world in which they control. Allowing the user to create the content which, can bee anything they imagine from something as simple as piece of clothing to something more complex like a complete town or theme park.