Planning tools for Interaction: Storyboard

Here are a few step of how to make toast in a storyboard.

Planning tools for Interaction: Mood board

This is a mood board for the following scenario:

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.

Planning tools for Interaction: Flowchart

Week 2 Studio Task
This is step by step instructions on how to cook toast.

1. Place toaster onto a flat surface.
2. Plug toaster into a wall power socket.
3. Turn toaster outlet switch on.
4. Insert one or two pieces of bread.
5. Move dial to the desired time/heat setting.
6. Push down the lever to cook the bread
7. Is it cooking?
8. Wait till bread cooks, toast will pop up.
9. Is it cooked.
10. Remove toast from the toaster.
11. Place the toast on a plat. Enjoy!

Examples of Information/Instructional design

Here are some examples of Information/Instructional design:
This is a very clear example of information design and this shows the mapping system for the train around Sydney. Each colour line is representative of transit line and has very clear translation of what where.This image is of the of graph that is about how American waste time sitting in traffic and it compares the times trough visually appealing design. each icon is different like the film, book and CD.

This shows a playful information design, as it gives the information about where the fruits has come and traveled from through a geographical graph.

This is an Instructional design example that shows how to make a shelter. This is very affective as it does not use any words but only uses visual imagery to guide the user.

Information/Instructional design

Saul Carliner defines information design as:

"Information design is the visual method of explaining and interpreting complex information and data to help the user achieve a particular objective"

This is the practice of gathering, filtering, and presenting information in accordance with effective design principles in order to understand and communicate to others the meaning of that information.
Instructional design looks at the practice of creating instructional tools and content to help make learning easier.This process consist of determining the current state and needs of the user, finding the end goal of instructions and creating involvement to help the transition.

Here is a video about information design:

Great web design examples

Here are some examples of interactive websites:

J.K Rowling - J.K Rowling's website is a very entertaining website giving users the ability to interact with the site. Searching through the site gives the user the feeling of looking through your desk trying to find a certain thing.

Adidas - This website is designed in away that so that the user receives the information through moving the mouse over each image to allow the text to pop up. Adidas is an entertaining site that uses type and graphics to create an engaging interaction searching the site.


Don't Click it - The website operates with no buttons but reacts when the users move their mouse to selected areas of the page to view the information and interacts by scrolling all over the page.

Interactive design

Interactive design is the relationship between the user and the systems they interact with. This interaction practice typically surrounds complex technology systems such as software, mobile devices, and other electronic devices. However, it can also apply to other types of products and services, and even organizations themselves. Interaction design defines the behaviour of an artifact or system in response to its users. The interaction doesn't only involve one-on-one like a telephone call for example but can be one-to-many like blogs, or even many-to-many like the stock market.
Interaction designers are typically informed through interactive cycles of user research. They design with an emphasis on user goals and experience, and evaluate designs in terms of usability and affective influence.

What is Web 2.0?

Web 2.0 is the term given to describe a second generation of the World Wide Web that is focused on the ability for people to collaborate and share information online. Web 2.0 basically refers to the transition from static HTML Web pages to a more dynamic Web that is more organized and is based on serving Web applications to users. Other improved functionality of Web 2.0 includes open communication with an emphasis on Web-based communities of users, and more open sharing of information. Over time Web 2.0 has been used more as a marketing term than a computer-science-based term. Blogs, wikis, and Web services are all seen as components of Web 2.0.

Here's a short video about Web 2.0.

Examples of Web 2.0

Web 2.0 can be best described through such sites as:
Myspace is a social networking website with an interactive, user-submitted network of friends, personal profiles, blogs, groups, photos, music, and videos
Flickr is an image and video hosting website, web services suite, and online community platform.
Youtube is a video sharing website where users can upload, view and sharevideo clips
eBay: an online auction and shopping website in which people and businesses buy and sell goods and services worldwide.
Facebook Users can join networks organized by city, workplace, school, and region to connect and interact with other people.
These sites have evolved from Web 1.0 to 2.0 as shown in this diagram by Tim O'Reillly and gives a better understanding of how Web 2.0 came about.
(http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html)