Interactive Design Definition and Examples

Interaction design aims to define and facilitate interaction between human beings by means of a product or a service. It focuses on the possibilities to create and encourage behaviour facilitating an exchange between people. A few examples of Interactive Design:

Award Website

Sparing use of CSS animation and really well considered rollovers make for a snappy feeling UI on the Award site.

Screen Shot 2013-03-23 at 9.40.21 PM

Screen Shot 2013-03-23 at 9.39.17 PM

Screen Shot 2013-03-23 at 9.40.07 PM

Kids Health: Just For Kids Website

Our experience with interactive design starts early. Educators know that people absorb information better when they are actively engaged in the process.

Kids Health run by The Hospital Sick Children in Toronto has managed to make health issues, entertaining through the use of interactive ebooks, multimedia videos, quizzes and heaps and heaps of games on their site.

Screen Shot 2013-03-23 at 9.57.11 PM

Sifteo Cubes

Sifteo cubes are like Lego bricks for the 21st century. The cubes communicate wirelessly to respond to each other and your gestures. The 19 games blend physical and digital interaction. The brainteasers engage kids more than mere button pushing or screen tapping. This is one great example of Interaction Design.

Screen Shot 2013-03-23 at 10.05.41 PM

Lecture 4: The Static and Kinetic Screen

Relating principles of static composition and visual hierarchy to contemporary definitions of interactive design.

Static: Is where things in print or on screen don’t move. It might take us time to read or scan an image, but within a reproduction, elements don’t move.

Kinetic: Relating to change over time or motion. When you hear kinetic in a discussion of media or interactive design, elements moving on screen or the change over time of an interactive product is normally the focus.

Andrew Polaine: Who is he?

Polaine describes himself as “an experienced designer focusing on playful interactions and service design research” within this idea or field of interactive concept development.

Interactivity through the concept of ‘play’

Play > Experience > Design

Polaine’s definition of interaction/interactive design:

“It is a combination of how the elements function:

  • What they do (What does your interactive do, the purpose and function of an interactive)
  • What they look like (What does your interactive look like)
  • What they look like they do (What does your interactive look like it should do)
  • The experience of using them (The experience of actually sitting down and using or the there and now of and interactive)

In many cases it’s about making complicated things easier and more pleasurable to use.”

What these considerations suggest is that interactive products or artefacts are complex and demand complexity in the design processes involved in producing them. Demanding that we combine an understanding of many design disciplines into our own personal design capacities.

Polaine, Andrew. “Any Polaine.” Desktop 251 (2009): 30-31

Considering Static Composition

The user’s gaze is still an integral element of usability especially with screen based media.

  • User = All senses and capacities, especially sight.
  • User = View + Use

The composition of graphic form is in fact user interface and interactive that requires consideration to improve usability and the relay of information.

Visual Hierarchy

In a static graphic sense, it’s the consideration and treatment of graphic or visual forms on a page; the screen. It is not only the treatment though, it’s also the relationship and effect these elements or forms have on each other.

Visual Hierarchy should always be considered as it is a vital part of the craft of being a graphic designer.

The principles of relaying information are shared by all fields: Graphic Design > Information Design > Interactive Design.

Considering points of interest and levels of visual information:

Composition is visual ecology:

  • A point of interest should not overtake a whole composition
  • A point of interest should not be too weak and hidden
  • No right or wrong, only appropriateness to purpose or brief.

Methods in dealing with Visual Hierarchy

Point of interest – The focus or draw card of a composition, usually the most important element of a composition. The entry or starting point of reading or digesting the visual information in a layout. Leader of visual hierarchy.

Contrast – Is the difference between visual elements within a work. The relative difference between light and dark areas.

Tone – The relative lightness or darkness of colour. Used whilst considering contrast. It helps establish contrast. Tone or the difference in tone is used to strengthen or weaken a point of interest.

Scale and weight – The relative size of graphic form; where the eye is lead through the composition via the dominants of size possessed by graphic form or graphic forms. Closely related to perspective and depth.

Visual hierarchy can also be established via the use of colour.

Typography or the use of type – There are two main concerns:

  • Legibility – How clear the text is visually
  • Readability – The degree to which meaning of text is understandable, visually and conceptually. Readability is not legibility.