Planning Tools for Interactive - Step by step text description

About This Blog

An Interactive Experience is an educational blog that makes understaning Interactive Design simple. The blog break down the complexity of Interactive Design and related subjects and terms, giving straightforward definitions and examples.

An Interactive Experience blog also links to other blogs, websites and RSS Feed in order to assist in a better understanding and appreciation for Interactive Design.

It is important for future careers such as; graphic designer, engineers, programmers, information designers, web designers and IT professionals (just to name a few) to be aware of Interactive Design and the effect it hold on current society and technology.

Interactive Design

Interactive design can be understood by breaking the term down into separate words.
According to The Budget Macquarie Dictionary, the word Interactive refers to the:

"Immediately responsive to commands, data, etc, as opposed systems arranged for batch processing." (213)

Keeping with The Budget Macquarie Dictionary, the definition of Design is recorded as;

"To intend for a definite purpose." (118)

When these two words are placed together their seperate definition are blended, forming the description of Interactive Design as;

"The development of a product that is intended to respond to an audience, in order to support them in everyday life."

In daily life we are continuously surrounded by interactive design. It is present by the way that we interact with our mobiles, computer, internet and video gaming, just to name a few. As Marion mentions on his website, these products and devices encompass interactive design because the user is working together with the device "a computer," to accomplish an aim. This is also known as Human - Computer Interaction.

Examples of interactive websites:

• Color Scheme Designer; As the user rolls over and clicks on a colours in the colour wheel, it reveals the contrasting colours that match well with the chosen colour, which can be used in a web design layout. It then shows the user an example of how the webpage would appear with such colours.
• Myspace.com - This website is a great interactive web design example, as it allows the users to change, manipulate and alter their own personal web page layout. The web page can also be changed daily with new blog and photo updates as well as updating the individuals mood.
• Maps.google.com.au - Google maps is a great website design, as it allows the user to zoom up on a state of their choice and see their chosen area from a satellite view, terrain view or map view.
• Secondlife.com - This website is an online, three dimensional, interactive website, that allows player to create themselves within a virtual world. In this interactive world users have control over their surroundings and themselves, while connecting with friends and socializing with new friends. The opening page for the site is interactive in its self as viewers can scroll along the screen by placing their mouse on the sides of the page where more information and menus are placed.

Work Cited:

Color Scheme Designer. Online. http://colorschemedesigner.com/. Accessed 15th March 2009

The Budget Macquarie Dictionary. 3rd ed. The Macquarie Library Pty Ltd: 1999. Print

Google Maps. Online. http://maps.google.com.au/maps?hl=en&q=second_life&um=1&ie=UTF-8&sa=N&tab=wl. Accessed 11th March 2009

Marion, Craig. What is Interactive Design and What Does It Mean To Information Designers. Online. "The Term Comes From Human - Computer Interaction." http://mysite.verizon.net/resnx4g7/PCD/WhatIsInteractionDesign.html. Accessed 26th February 2009.

Second Life. Online. "What is Second Life." http://secondlife.com/whatis. Accessed 11th March 2009

What is Interaction. Online. "Chapter Introduction." http://www.id-book.com/chapter1.html. Accessed 25th February 2009.

Web 2.0

Web 2.0 is viewed as "The second generation of World Wide Web" (Wiktionary.) It allows users of the web to come together as a community, in order to collaborate, network and interact with one another in a social environment. According to Good and Borgia, Web 2.0 assists in data becoming independent of its producers and its origianl site. It permits the ability for net users to place data from several sites "...on their own site to achieve new purposes." (Master New Media)

The term Web 2.0 was introduced in 2004 by Tim O'Reilly, while at a conference where the importance of the web and new applications appearing on the web were brain stromed between O'Reilly and MediaLive International. O'Reilly states;

"Web 2.0 is the Business revolution in the computer industry caused by the move to the Internet as a platform, and an attempt to understand the rules for success on that new platform."

(http://en.wikipedia.org/wiki/Web_2.0)

Which means that society has changed the way they use the internet, beginning to refer to it as a platform of interaction, collaborating and networking. Resulting in creating new rules and understanding of the purpose of the web.

Examples of Web 2.0 can be viewed on;

• FaceBook: http://www.facebook.com/// Myspace: http://www.myspace.com/

Myspace and FaceBook is a Web 2.0 site that allows net users to have an online presence. The users set up a web page that is completely deadicated to them; their interests, photos and video, their friends, their community, everything about the net user can be placed on this website. The sites are a social platform that invites people from around the world to interact and network, while welcoming new friendships.

• HousingMaps.com: http://www.housingmaps.com/

This website ues Google Maps and Craigslist's real estate to create a website which American's whom are intersested in moving or buying a new house, are able to view a satellite perpective of a home or location in which they wish to move to. By developing this Web 2.0 facility, it gives insight into the location of the property.

• Meebo: http://ww2.meebo.com/

This website allows users to interact with one another at the same time through "... multiple instant messaging services." (Master New Media) These services enable an individual to interact with all contacts from; AIM, MSN and YAHOO, at the same time without having multipule programs open up at once. Resulting in less hassle and confusion.

• Google Suggest: http://www.google.com/webbhp?complete=1&hl=en

Also known plainly as Google, this Web 2.0 site gives net users the ability to find information, websites, blogs, books and images all by a click of a button. Google is a browser - based appliaction and searches the entire web to find an answer to the suggested topic that the user typed in. It is convenient to net users as it makes seraching for data easier and quicker.

• YouTube: http://www.youtube.com/

This is a place where net users from around the world can upload videos to be shared with the rest of the world. You Tube shares videos on; current new events, interest and hobbies as well as funny home movies, which allow users to comment, interact and network with others across the world. With millions of hits made everyday the site strives on the ability to entertain and infrom users.

Work Cited:

Good, Robin; C.Borgia, Kevin. Master New Media. Online. http://www.maternewmedia.org/web_2/web_2_examples/web2_examples_of_service_and_applications_20051006.ht.%20Accessed. Accessed 4th March 2009

O'Reilly Media. Online. "What is Web 2.0?" http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html. Accessed 26th Feburary 2009

Sun Sign Graphic Design. Online. "Web 2.0." http://www.sunsigngraphicdesign.com/?q=node/6.. Accessed 2nd March 2009

Wiktionary. Online."Web 2.0." http://en.wiktionary.org/wiki/Web_2.0. Accessed 26th February 2009

Wisdump. Online. "Top 10 Web 2.0 Winners." http://www.wisdump.com/web/top-10-web-20-winners/. Accessed 4th March 2009

YouTube. Online. "Campany History." http://www.%20youtube.com/t/about. Accessed 5th Mrach 2009

Information Design

Information design is defined by Online Learning as;

"The representation of complex information in a visual form."

(http://www.online-learning.com/course_id_2.html)

It is the designing of information that is difficult to understand and interpret, made simple and uncomplicated. Spiekermann state in an online article about information design; "The design of information may first involve translating a message from one language to another, or from official or technical jargon into plain English, or from complicated diagrams into straightforward listings." (AIGA.)Which means that information designers need to use a variety of skills developed from; graphic design, industrial design and architecture, in order to interpret complex information into a visual method.

At present there is a need for more information designers due to the increase of companies releasing information on multiple technologies, resulting in a call for information designers to organise data so it is more understandable.

Examples of information design can be see in; road signs, instruction booklet, maps, forms and bills.

Road Sign: STOP SIGNS; This signs uses clear information design in many ways. It alerts the driver to be aware of the caution ahead through the use of the colour red in the background. The large, bold writing of STOP draws attention to the sign making it clear of the importance and seriousness to stop ahead. Also the use of an unusual shape attracts the eye of the driver in all weather conditions.

(Photo: Taken by Orlanda Ditcher)

Instruction Booklet: IPOD INSTRUCTIONS; This instruction booklet is clear information design as it evidently indicates the device that it shows instructions for on the front cover and the instructions inside are labeled under individual titles and subheadings, which are placed visibly in the index.

(Image: http://www.gearlive.com/gallery/image_med/626/-instructionbooklet)

Maps: TRAIN MAPS; This train map reveals clear information design as it un-complicates what usually would be difficult a diagram to understand. By using the colour coded key (located on the side of the page) it allows for the viewer to specify the correct train line that they need in order to get to their desired location. The colour are visually different, with no similar tones, allowing for the easy reading of the data.

(Image: http://peter-hoang.blogspot.com/ )

Work Cited;

Gear Live. Online. http://www.gearlive.com/gallery/image_med/626/-instructionbooklet. Accessed 13th March 2009

Online Learning. Online. http://www.online-learning.com/course_id_2.html Accessed 6th March 2009

Peter Hoang Blog. Online. http://peter-hoang.blogspot.com/ Accessed 13th March 2009

Serach CRM.com. Online. "Information Design." http://searchcrm.techtarget.com/sDefinition/0,,sid11_gci214367,00.html. Accessd 6th Mach 2009

Spiekermann, Erik. AIGA. Online. http://www.aiga.org/content.cfm/information-design_1. Accessed 6th Mrach 2009

Instructional Design

According to the Instructional Design website, Instructional Design is described as;

"The use of technology and multimedia to improve instructions, by examining the needs and systematic development of learning materials."

(http://www.instructionaldesign.org/)

After examining the learning needs and systematic development material, an instructional designer will decide on the best instructional method to enable for easy understanding and achievable outcome. These learning methods are modified to the needs of the learner while still considering if the instructions will be interesting and cost - effective. Most of the time instructional designers will develop multimedia interactive projects to address these objectives, which in this case they will work with multimedia designers.

According to Instructional Design Australia, examples of interactive designs created by instructional designers are;

• Learning Courses Online

Online courses invlove a community of people needing to gain access to a lesson or program over the internet. It provides knowledge and at home reference to the lesson for better understanding.

http://www.uws.edu.au/elearningws.edu.au/elearning: Can be viewed on UWS website where students are able to log into their course, through the VUWS (e-learning) and read through course content and tutorial instructions, in order to get a deeper understanding and education of the course.

The site lists all of the courses that a student is enrolled in over a semester. When the student clicks on a course name it takes them to all of the course content that has been uploaded, such as; reading, homework activities, lecture notes, assessment outlines and the unit outline. This site is an instruction design as it assists in learning and education and addresses the students learning and systematic development needs, making the student have a better undertanding of the course and having the ability to access the course information from home.

• Tutorials, Workshops and Computer - Based Training Programs

These three elements of instructonal design are similar in purpose, they all explain to a learner how to do something at their own speed and pace. They all give the learner the theory side of the lesson and allow the learner to put it into action with examples and practical work.

http://w3schools.com/: An example of online tutorials can be viewed on the w3schools website. It is here that a learner can preform interactive tutorials while on the net, learning how to write; HTML code, XHTML, CCS and many other multimedia based applications in real time.

For example the tutorial for HTML coding shows two screens, one with the html coding within it and a second screen that reveals what the coding protrays on a hypothetical website. So the learner types in HTML coding into the first window and by clicking on the edit button to reveal what the hypothetical website wiould look like with the use of HTML coding.

http://www.reworks.com/tutorial/: This is an example of computer - based training program. It goes through step by step how to use the program Refworks with speak bubbles and narrator which highlights what each stage, from setting up an account on Refworks to setting the program into action, encompasses. It makes the program easier to understand and work with for new users.

Work Cited;

Instructional Design. Online. http://www.instructionaldesign.org/ . Accessed 6th March 2009

Instructional Design Australia. Online. http://instructionaldesign.com.au/. 7th March 2009

Reworks. Online. http://www.reworks.com/tutorial/. Accessed 14th March 2009

UWS Home Page. Online. http://www.uws.edu.au/. Accessed 13th March 2009

W3 Schools. Online. "Full web Building Tutorials." http://www.w3schools.com/. Accessed 13th March 2009

Planning Tools for Interactive - FlowChart