Interactive Design

While the term Interaction Design can be somewhat broad and encompassing, at its core it refers to designs that can be manipulated by a user’s input. Although this term can be used to describe the interactions one might experience when interfacing with a physical object, more often the term is used in the context of a digital setting, commonly referring to interactive websites or applications.

Interactive Designs exist to be utilised and altered, and therefore a prerequisite understanding of their targeted audience is required before being constructed. The success of any interaction relies on the designers ability to recognise and understand the needs and behaviours of the end-user. Through research and investigation, a designer can gain insight into the relevant traits of their audience, and then transform and distil this information into the interactions experienced within an interface.

The finished result is an experience that responds and conforms accurately to the expectations of the end-user, presenting them with options and tools required to reach their destination succinctly and effortlessly.

Examples

A Year in Space

Pre 1.png
A Year in Space

This website narrates a story through its interactive carousel that sections and displays different points in the journey of astronaut, Scott Kelly through its full screen videos. The user is guided through the traveller’s journey with easy to understand navigation as each moment is revealed through the simple click of an arrow found at either edge of the screen. Additionally, the website provides consistent signalling of user placement with large numeric buttons running across the bottom that highlight the currently location within the slideshow. To the sides of the videos are short excerpts of information that retract when necessary to provide more room for the main content.

50 States of Waste

Pre 2.png
50 States of Waste

The 50 States of Waste website visually displays the total monetary loss of political television advertisements by failing to persuade voters and swing specific states. This interactive provides the user with a large dynamic map of the United states, which allows each individual state to be clicked upon to view further information. The states found within the map employ varying colour intensities to convey the amount of money wasted in comparison to each other allowing the user to quickly identify the most wasteful states by their darker tones. The map is manipulatable by effortlessly clicking and dragging, and can also be manipulated via directional buttons identical to those found within Google Maps. The specific information of each district remains hidden until called upon via the click of a state. At the top of the page is the option to toggle the highlighting of the top 10 most wasteful states or to view the entirety of the available districts. In addition to this is the option to search for a specific coded district through the convenient input and search feature.

Qantas Dreamliner

pre 3.png
Qantas Dreamliner

This interactive website features a manipulatable 3D rendering of the Qantas Dreamliner passenger jet. As the user moves their cursor across the screen, the 3D image rotates slightly along with the horizon and clouds in the background to give the illusion of depth and realism. Hierarchy is conveyed through the user’s ability to click on various parts of the plane which are then displayed before being able to click around them once more to view them in more intimate detail. These details are displayed through short animations which convey various intricacies and available features to the user. Running along the bottom of the page is a timeline of events that displays the history of this particular airline model. This timeline is displayed in clickable buttons which bring up full pages of information. The user is able to return to their original starting position at all times with the click of the cross found in the upper right corner. In addition to this, the remainder of the website can be accessed through the options hidden within a hamburger menu present at all times.

References
Kerrigan, B. (2012). Woman working on a computer [Photograph]. Retrieved from https://commons.wikimedia.org/wiki/File:Woman_using_computer.jpg
Targeted Victory. (2016). 50 states of waste [Screenshot]. Retrieved from http://www.50statesofwaste.com/index.html?p=top10&d=1
Time Inc. (2016). A year in space [Screenshot]. Retrieved from http://time.com/space-nasa-scott-kelly-mission/
Qantas Airways Limited. (n.d.). Introducing the Qantas Dreamliner [Screenshot]. Retrieved from https://dreamliner.qantas.com/explore
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s