Design

Interactive Design

Definition

Interactive design is a form of design that goes beyond visual appearance but rather designing experiences for people. This form of design encompasses instructional design and graphic design in its favour to influence the interactivity to shape the desired outcome. This form of design is approached with the specific audience in mind and thinking of ways to guide this audience to the objective in the most efficient way possible by shaping their behaviours and solving problems. A quote that really drives this understanding home would be “shaping our everyday lives through digital artefacts for work, for play and for entertainment” by Gillian Crampton.

Precedent 1: Plastic Adrift

The site is about visually representing either the travelling of plastic debris or origin of plastic debris in the oceans around the world.

Visit site here: http://plasticadrift.org/

The user prompts this info by clicking anywhere on the blue sections of the map, indicating ocean where a yellow rubber duck will appear to show the location you clicked. Once the user has clicked, the timer on the top right of the interactive will begin prompting a colourful cluster of red, yellow and green which represent the levels of plastic debris floating in that area.

There is also an option on the top left of the interactive which allows the user to change the context of the plastic debris’ movement which prompts a pop up menu for you to choose. The “backward” arrow represents the origin of the plastic debris while the “forward” arrow represents where the plastic debris will end up. Due to the location of the interactive being placed within an website, the user can also access a variety of different pages located at the top of the screen in the main navigation.

Precedent 2: Google Cultural Institute

This website provides the user with a very in depth interactive experience through the world of performance arts. The concept of the interactive lies within a single scroll site that categorises all the different types of performance art and gives the user the option of experiencing different types of performances within a 360 perspective.

Visit site here: https://performingarts.withgoogle.com/en_us

Start Screen

The screen shown above is the start page where the user has the option to click on the primary navigation at the top which takes them down to a categorised section of 360 performance experiences within the site e.g. “Opera”. They also have the option to scroll freely or click the arrow within the circle at the bottom of the page which takes them to the “Music” category.

Once the user reaches one of the categorised sections, “Music”, as shown above, they have the option of starting the 360 performance or browsing through the carousel of available performances in that section and clicking on their desired performance experience.

Introduction Video

After the users click on a performance to experience, it will prompt an intro video with a narrated summary of the location’s history and performance. The user can either watch the entire video until the performance inevitably starts off they can start it early by clicking on “continue” in the bottom right corner.

The performance will play out with the user submerged within it via the 360 point of view where they are able to click and drag the screen to look around. In the bottom centre of the screen, the user is given the option to switch between two other camera angles of the performance labelled from 1-3 depending on the angle you’re already viewing from. You can also pause the performance to look around. The icons located on the top right of the screen allow the user to either mute the audio, share the experience via social media or show 4 video suggestions that the user can navigate to if desired.

Precedent 3: Make Me Pulse

Make Me Pulse is a simple site aiming to inspire users into the new year by providing inspiring words that have unique and enticing designs you can interact with.

Visit site here: http://2016.makemepulse.com/

Start Screen

When arriving to the site you are met with the screen above and apart from the shareability options in the bottom left corner, the only interactive option for the user is to follow the “Click & Hold” directions at the bottom.

After the user holds onto the screen, the words quickly cycle and whatever word appears on screen after you release your click is what you get to interact with. The gallery above demonstrates some of the words provided after they’ve been interacted with.

End Screen

After the user has cycled through all the available words, the end screen will appear finishing the start screen phrase paired with the positive message “wish you all the best for 2016”. The user will then have the option to restart the experience by clicking the button at the bottom.

Information/Instructional Design

Definition

Instructional/Information design is a form of design that provides a step-by-step experience for the audience to follow, presented in the most efficient way to guarantee a successful outcome. This allows for audiences to easily digest the information communicated to them in order to carry out the actions or prompt the secondary interactions.

Example 1: IKEA Instructions

Ikea Instructions to assemble the Billy Shelf

The instructions depicted above are from an IKEA instruction manual on how to build their “Billy Shelf”. The instructions are purely visual with absolutely no text and only guiding numbers and enumerated tools. It reads from left to right starting from the depiction of the final product underneath the word “BILLY” scrolling through the boxes depicting the rights and wrongs in a charming group of illustrations, the sectioned out “toolbox” and then starting with the first step indicated by the bold number “1”. This form of purely visual instructions make this accessible to multiple audiences to understand.

Example 2: Airline Safety Manual

Airline Safety Guide

The manual above provides a guide on airline safety with simplified yet helpful infographics. The correlation between the yellow boxes to indicate a new area of safety “Loss of Cabin Pressure” etc. and the same use of yellow used within the infographic to highlight the item of importance helps to bring cohesion between the safety protocol and the actions to enforce this. The use of contrast between grey tones helped highlight areas of importance by providing visual weight to bring emphasis such as the darker grey used on the person compared to the objects behind them. The infographics and use of vibrant red arrows are also very intuitive and easily understood.

Example 3: Electronic Guardian Angels

Electronic Guardian Angels concept infographic

The infographic depicted above comes from the Swiss Federal Institute of Technology in Lausanne based on a project they are looking to develop. The concept involves miniature sensors in their clothing to continuously monitor the user’s body and the environment to warn them of danger. The isometric view and toned down colour scheme really helps to tie in the scenario-like environment that tries to depict many aspects of daily life within a single frame, coming across as natural rather than forced. The use of a thin black line within the infographic also helps provide a journey for the viewers eyes to follow all the different scenarios to discover what their concept offers. The use of a vibrant pop of orange also adds to this while tying in to the key technologies on the bottom left.

Links

  1. My Grandmother’s Lingo:
    This site teaches users about the Aboriginal language of “Marra” as it is slowly being forgotten and requires users to repeat words and phrases into their microphone to progress. Visit site here: https://www.sbs.com.au/mygrandmotherslingo/
  2. 30 Pieces, 30 Species:
    A site that aims to bring awareness to 30 endangered species by building the animal with the same 30 pieces as you scroll down the site. Visit site here: http://species-in-pieces.com/
  3. Wake it Up:
    This interactive site provides a fun experience where the user is tasked with the goal to use different files to wake up a web browser within the time limit. This experience was created in order to promote web animation. Visit site here: http://wakeup.isadoradigitalagency.com/
  4. The Many Faces Of:
    The Many Faces Of is a site that acts as an interactive archive allowing you to learn about different actors and their roles through their own individually styled pages with videos, images, illustrations and interesting sections of info. Visit site here: http://themanyfacesof.com/archives/
  5. Solace:
    Solace is an interactive video where a man narrates a bizarre story to his mate, requiring different interactions from the user to prompt the narrative forward. Visit site here: http://www.rememberspook.com/#
  6. Noisli:
    This website allows users to access and customise a variety of different background noises with whatever combo or volume mix in mind. There are also 3 contexts to choose from at the top that mix and match the sounds for you. Visit site here: https://www.noisli.com/
  7. Kolmarden Zoo:
    A website provided by the Kolmarden Zoo that provides an interactive map of their Zoo with 3D renderings of designated areas complete with pop up cues informing the user of what the different areas of the zoo showcase. Visit site here: https://karta.kolmarden.com/overview/
  8. MapsTD:
    This site is an interactive game that allows users to input any location in the world and defend the location through a tower defence style experience. Visit site here: https://www.mapstd.com/

Reference List

Plastic Adrift:
Plastic Adrift. (n.d.). Plastic Adrift. Retrieved May 18, 2019, from http://plasticadrift.org/

Google Culture Institute:
Google. (n.d.). Performing Arts. Retrieved May 17, 2019, from https://performingarts.withgoogle.com/en_us

Make Me Pulse:
Make Me Pulse. (2016). Retrieved from ttp://2016.makemepulse.com/

IKEA Instruction Manual:
Danzico, J. (2017, January 10). How Ikea’s Assembly Instructions Champion Universal Design. Magenta. Retrieved from https://magenta.as/how-ikeas-assembly-instructions-champion-universal-design-fe2710ab5c36

Airline Safety Manual:
Qatar Airways Airline Safety Manual [Image] (n.d.) Retrieved May 17, 2019 from https://www.pinterest.com.au/pin/570338740291053996/?lp=true

Electronic Guardian Angels:
Behance. (2013, July 26). Electronic Guardian Angels. Retrieved from https://www.behance.net/gallery/10027269/Electronic-guardian-angels

My Grandmother’s Lingo:
SBS. (n.d.). Retrieved May 18, 2019, from https://www.sbs.com.au/mygrandmotherslingo/

30 Pieces, 30 Species:
30 Pieces, 30 Species. (n.d.). Retrieved May 18, 2019, from http://species-in-pieces.com/

Wake It Up:
ISADORA. (n.d.). Retrieved May 18, 2019, from http://wakeup.isadoradigitalagency.com/

The Many Faces Of:
PARAVEL. (n.d.). Retrieved May 18, 2019, from http://themanyfacesof.com/archives/

Solace:
Nexus Interactive Arts. (n.d.). Retrieved May 18, 2019, from http://www.rememberspook.com/#

Noisli:
Noisli. (2014). Retrieved from https://www.noisli.com/

Kolmarden Zoo:
Kolmarden. (n.d.). Retrieved May 18, 2019, from https://karta.kolmarden.com/overview/

MapsTD:
MapsTD. (n.d.). Retrieved May 18, 2019, from https://www.mapstd.com/

27 Fresh Interactive Design Examples:
Faisal, M. (n.d.). 27 Fresh Interactive Design Examples. Graphic Design Junction. Retrieved from http://graphicdesignjunction.com/2016/01/interactive-web-design/

10 Highly Interactive, Beautifully Illustrated Web Designs:
Alexander, R. (2012, May 8). 10 Highly Interactive, Beautifully Illustrated Web Designs. Sitepoint. Retrieved from https://www.sitepoint.com/10-highly-interactive-beautifully-illustrated-web-designs/?fbclid=IwAR2R1n4yd_6kfD40OQ_-v3mA4Y8VvdIcO2RjTfhlYTODRSybFGt2mvJnLHA

20 Amazing Interactive Websites For Your Inspiration:
Bear, C, W. (n.d.). 20 Amazing Interactive Websites For Your Inspiration. Web Courses. Retrieved from https://www.webcoursesbangkok.com/blog/interactive-websites/?fbclid=IwAR35MgKVBXPp-ufGpfoqj-_O4yPD05xSs83unZlEcf-vgDU_HeYKmb3-hIQ

Advertisements