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 5: Interface Design Review

What is an interface?

  • A common boundary.
  • Between things.
  • A point of interaction. Not interaction itself. The interactive experience depends on an interface but is a whole ecology in itself. Interface is within interaction.
  • Medium across which data passes.

Interactivity has been one of the key value added characteristics of new media where old media offered passive consumption, new media offered interactivity. 

Interactivity: Ideologically and Historically

Old Media = Passive Consumption

  • For example, like watching television. You sit there and consume. One producer to many viewers, one to many.

New Media = Interactivity

  • Interactivity and new media being more aligned with many users collaborating with each other, or many to many as opposed to one to many. Web 2.0, social media and sharing have brought the idea of new media forward. Generally the term stands for a more powerful sense of user engagement with media text, a more independent relation to sources of knowledge.

Contemporary Interactivity: Interface Design Within Four Prominent Threads:

– Hypertextual Navigation

  • The user must use the computer and software to make reading choices in the database (Can be anything from the entire world wide web to a particular learning package, an adventure game or the hard drive on your pc.) The end result of such interactions will be that the user constructs for him or herself an individualised text made up from all the segments of text which they call up through their navigation process.

– Immersive Navigation

  • Hypertext = Extractive
  • Representations of space = Immersive
  • Immersive Media = Hypertext + Represented Space (E.g. Virtual reality, simulations and games)
  • (Hypertextual Navigation is extractive so we go and extract it as an outsider. However when we move from seeking to gain access to data and information, to navigating representations of space or simulated 3D worlds we move into this idea of immersive interaction, we are essentially immersed in or embodied by the interface.)

– Registrational Interactivity

  • To ‘write back into’ collective information
  • Examples: Updating Facebook, leaving comments on blogs, re-tweets, video responses and wikis, etc. This interactivity depends on other users in a collaboration and a system to freely allow collaboration via the user being able to write back into the interactive experience. A concern with Registrational interactivity is that the user forgoes control of information once it is entered into a system.

– Interactive Communications

  • Based on face to face human communication so we draw parallels or compare and contrasts from that standard or person to person connection. For example: A forum post would be considered less interactive than a live chat site. It’s the continuation of face to face storytelling, basically in a digital context.

Fundamentals of Screen Based Interactive Design Production

Visual-spatial thinking/Gestalt psychology:

  • “Visual thinking comes from the field of Gestalt psychology, which argues that humans respond, organise and assign meaning to elements in their visual field. This approach considers how users conceptualise functional wholes from the individual elements they perceive in the visual field”

Using Fundamentals or Principles:

  • Principles serve as broad guides
  • Draw on design theory
  • Emerge from print or poster design guidelines
  • User perception

6 Fundamentals/Principles:

1. Visual Focus

  • Use improved figure-ground contrast to signal which elements users should focus on.
  • Use animation and rollovers in navigation toolbars to indicate functional or clickable items.
  • Give contextual and visual cues greater visual distinction.
  • Develop style sheets that specify similar formats for level headings and spacing between text chunks.

2. Problem Solving

  • Highlight potential pathways to readers by using breadcrumb trails, site maps, indices and headers.
  • Develop navigation toolbars that suggest information pathways to users, which don’t just outline content.
  • Provide multiple navigation tools and choices for readers such as toolbars, search fields, drop-down lists, site maps etc.
  • Consider time in your design. Don’t make things take too long and provide alternative options like ‘skip’ buttons to allow the user to move past animations and solve their problems quicker if they want to.

3. Contextual

  • Place more contextual information, such as visuals cues, in higher site levels.
  • Provide detailed content in lower site levels.
  • Use shaded regions, tables, frames or other methods to anchor navigation tools in consistent locations.
  • Place content no more than 5 to 7 links or clicks from users, so content is not placed too far from users.

4. Conceptual

  • Use familiar icons, shapes and graphics that rely on prior user knowledge.
  • Place graphics in familiar contexts.
  • Provide text tags for images used in new contexts.
  • Use design metaphors to help users comprehend the arrangement and content of visual spaces.

5. Wholeness

  • Group related content using visual shapes, such as shaped boxes or rules, or by using space.
  • Use figure-ground contrast and grouping to help users identify relationships between elements.
  • Use breadcrumbs, site maps, indices, etc. to help users identify the sites structure (and filter information.)

6. Linear/Nonlinear

  • Linear Approach: Pages are only available in a straight line. For example, you can’t get to the last page from the first. The user is forced to go through the middle page to get to the end and back around to the start again. Essentially the user becomes trapped, and it is at this point in traditional web browser scenarios that the user goes for the browsers back button, or leaves the site frustrated and never to return.
  • Nonlinear Approach: Allows all pages to be accessible from every page.

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.