Interactive Design
Definition
Interactive design is the design of the interaction between the users and the product. It’s goal is to enable users to achieve their objectives in the best and efficiant way possible. Most often those products are websites and apps. Interactive design is about experience and how it behaves, rather than look. It is important to know where one is in a system and what you can do next and what’s going to happen when you’ve gone there.
Precedents
Precedent #1 – My Grandmother’s Lingo
My Grandmother’s Lingo is an interative site that teaches you Marra, an Australian Aboriginal language that is slowly being forgotten. Users progress through the site by being taught phrases in Marra, using their microphone. As the user learns more about Marra, they also learn about the motivation and story behind the website.
At the end of the website’s journey, you are taken to the map of Australia, giving you the option to share the site to help spread awareness and keep the language alive.
This site’s interactive journey, through animation and voice recognition, is engaging and helps spreads awareness to support a cause in a unique way.
Precedent #2 – Every Last Drop
Every Last Drop is an interactive website that teachers the user about water use and one can be more water savvy. Users scroll down to view facts about water use worldwide and how much water is used for certain tasks.
After the user scrolls down to the bottom of the site, there is s short video about how to save water.
The site is very charming and engaging through it’s animation interaction, where as you scroll down elements scroll and slide across the screen at various points. All the illustrations are flat designed. It is a fun way to present a cause in an approachable way.
Precedent #3 – 30 Pieces, 30 Species
30 Pieces, 30 Species is an interactive site that spreads awareness about 30 endangered species. Users cycle through 30 pieces, by scrolling or clicking. The style of the illustration is very reminiscent of tangram.
Users also learn about the animal and why it is endangered. It includes information such as it’s date of discovery, history of it’s population and it’s population decrease. The interactive also a video for each species. It also pushes the user to further research and look at more information about these endangered species, by linking other websites that give the user an option to join the cause.
The site is very graphic and illustrative in it’s design and displays it’s content and information in a fun, engaging and unique way.
Information/Instructional Design
Definition
Information/Instructional design is a type of design that explains how to do something or how it works, by providing steps, that are sometimes backed up with diagrams and images, for the user to follow and complete their desired task efficiently and more manageable. By simplifying content users are able to digest and apply what they’ve learnt easily.
Precedents
Precedent #1 – Mickey Mouse Paper Toy Template
The image depicted above is an example of instructional design and is an image of a Mickey Mouse paper toy template. With this template the user follows the instructions on the right of the template to fold and build a Mickey Mouse paper toy.
The template features step by step instructions, additional instructions such as the instructions on the actual paper toy pieces and also a model so the user can see what the final product looks like.
Precedent #2 – Airplane Safety Manual
The airplane safety instructions card above provides a guide on how to stay safe on an airplane, during the flight, during take offs and landings and during emergencies.
The guide features simplified diagrams that aren’t overly complicated and are straight to the point. The diagrams are coloured grey with addition of the colours yellow, green and red to add emphasise and to further the instruction, so that the instructions are clear and simple to understand by a range of people.
Precedent #3 – AHA Heartsaver CPR AED
The manual above provides a guide on how to perform CPR on someone before an AED (Automated External Defibrillator) is present.
The guide features realistic looking diagrams on the left that read from left to right and down. They are simplified and clearly show what the user has to do. On the right of the page are step by step instructions on how to perform CPR, including, acknowledging the situation and calling professional medical help.
Extra Interactive Links
- Polish Christmas Guide – The interactive provides fun illustrative graphical animations to present to the user how Poland celebrates the holiday. http://polishchristmasguide.com/
- Wake It Up – This interactive is a mini-game where the aim is to wake up your web browser. The website was created to promote the use of animation. http://wakeup.isadoradigitalagency.com/
- Solace – Solace is an interactive that tells a bizarre nd unique story, where users progress by clicking and dragging elements around the screen. http://www.rememberspook.com/#
- Inside Abbey Road – Inside Abbey Road is an interactive that uses Google map’s street view feature to journey through Abbey Road Studios. https://insideabbeyroad.withgoogle.com/en
- Wind and Words – Wind and Words is a website that records all scripts, diaglogue and interactions between the entire cast from the tv series, Game of Thrones. http://beta.wind-and-words.com/
- (Un)Trafficked – This website spreads awareness about human trafficking in India. Users progress through the story by making choices to save a character from trafficking. http://bharatyatra.online/untrafficked/
- Cyclemon – This site allows the user to scroll through various kinds of bicycle illustrations that match themed backgrounds. http://cyclemon.com/index.html
- MapsTD – This site is an interactive game which uses Google Maps. Users input any location in the world and defend the location through a tower defence style game experience. https://www.mapstd.com/
Reference List
Barclay, D. (n.d.). MapsTD. Retrieved from https://www.mapstd.com/
Boehm, E & Noon, J. (n.d.). Solace. Retrieved from http://www.rememberspook.com/#
Bryan James. (n.d.). 30 pieces, 30 species. Retrieved from http://species-in-pieces.com/#
Every Last Drop. (n.d.). Retrieved from http://everylastdrop.co.uk/
Inside Abbey Road. (n.d.). Retrieved from https://insideabbeyroad.withgoogle.com/en
Isadora. (n.d.). Wake it Up. Retrieved from http://wakeup.isadoradigitalagency.com/
Merixstudio. (n.d.). Polish Christmas. Retrieved from http://polishchristmasguide.com/
Paper Toy. (2011). Papertoys Mickey Mouse [image]. Retrieved from http://www.paper-toy.fr/papertoys-mickey-mouse-x-2/
Pom, T & Orthonormai. (n.d.). Cyclemon. Retrieved from http://cyclemon.com/knowm/knowm.html
SBS. (n.d.). My Grandmother’s Lingo. Retrieved from https://www.sbs.com.au/mygrandmotherslingo/
Safety Card Qatar Airways B787-8 (1) front [image]. (n.d.). Retrieved from https://www.pinterest.com.au/pin/229542912237330700/?lp=true
Shigotonin. (n.d.). How to Get A Cpr Card Sample Aha Heartsaver Adult Cpr Aed Wallet Cards 100 Pack [image]. Retreived from https://shigotonin.club/how-to-get-a-cpr-card/how-to-get-a-cpr-card-sample-aha-heartsaver-adult-cpr-aed-wallet-cards-100-pack/
Wind and Words. (n.d.). Retrieved from http://beta.wind-and-words.com/
(UN)TRAFFICKED. (n.d.). Retrieved from http://bharatyatra.online/untrafficked/
Annabel Crawford's Blog 