Planning Tools for Interaction

Instructions

1. Plug toaster in at powerpoint.
   
2. Remove bread from bag.
3. Is the bread frozen? If so, defrost in microwave.
4. Place bread slices into toaster slot.
5. Adjust desired cooking time.
6. Push lever down.
7. When toast is released, check if properly cooked. If not, repeat step 6.
8. Remove toast from toaster.
9. Place toast on cutting board.
10. Remove knife from drawer.
11. Remove butter from fridge.
12. Scrape butter using knife.
13. Apply butter to toast.
14. Apply favourite spread.
15. Consume.
    

Flowchart
(Click on image for full size)

Storyboard

Below are 3 examples of what an interactive tutorial may look like that would teach the user how to make toast.

Moodboard

Below is a moodboard created from the description provided in tutorials.

Moodboards allow us to create a theme for a project by recognising colours, textures, items, activities and other characteristics that a specific user might enjoy. These can then be incorporated into products/systems to allow the user to relate.

Information/Instructional Design

Definition

Information or Instructional Design refers to the process of maximising the effectiveness of instructions and other learning experiences. Information/instructional design plays an important in web browsing as it allows interactive and instructional designers of the website to relay instructions and directions to the user by using simple diagrams, icons and images that can be easily and universally understood.

Examples

Examples of Information and Instructional Design can be found in everyday life and can be found in not only electronic or web based media, but also print media including newspapers and magazines. Examples of the incorporation of Information and Instructional Design can be found below:

• Hahn Superdry Promotion Website
  

The Hahn Superdry website provides information as well as instructions to the user to guide them through the process of entering a promotion through easily read labels, icons and images.

• W3Schools Website

The W3Schools website provides an endless amount of instructions to users who wish to learn HTML and CSS and other web-design processes. The website has written instructions as well as interactive components and tutorials that allows users to check their progress by creating and previewing what their own page would look like.

Interactive Design

Definition

Interactive Design is a form of design that takes into consideration the end-user's want and need to interact with and change/modify a product/system/service with the product/system/service responding to and providing feedback to the user.

Products that come from this area of design are mostly electronically based and have had played a large part in the development of Web 2.0.

Examples

As interactive design has been used to create the websites that have shaped Web 2.0, the examples will be the same and include Facebook, Myspace, Twitter, Flickr etc. A few others have been listed below:

• Foursquare

Foursquare is an interactive website for mobile phones that allows users to share information to other users on sports, restaurants and other events in their area while also helping individuals meet up.

• Supercook

Supercook is an interactive website that allows the user (you) to list the ingredients you have in your fridge and the site will provide a variety of different recipes.

Bill Verplank explains interactive design.

Web 2.0

Definition

Web 2.0 is referred to as the second generation of design and browsing and refers to the cumulative changes to the way software/web designers and end users utilise the web. It has a higher focus on interactivity between the user and the site or 'space' they view by giving the user control. This allows them to edit and alter content, giving them more involvement in the development of site. Increased interaction between the user and other users gives the user the feeling they are involved in a community. The term was first coined in 2004 after the O’Reilly Media Web 2.0 Conference (an annual conference, last year held in San Francisco) and refers more so to a change in the software being developed for the web rather than any actual improvement in technical specifications.

Examples

Web 2.0 refers to sites where the users are able to interact with each other and make changes to the site as they view it including uploading videos, photos, comments and altering contents. The most common examples of this are forums, chat sites, blogs, video sites and ‘spaces’. Some of the most widely known Web 2.0 sites include:

• Facebook

• Wikipedia

• Myspace

• Youtube

• Flickr

• Twitter