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 2: Interaction – Interactivity

What is interaction and interactive design?

In interactive design, there are 5 key design areas that contribute to the design of interactive products. These are:

  • Interactivity
  • Information Architecture
  • Time and motion
  • Narrative
  • Interface

You can’t interact with anything unless there’s an interface and you can’t design an interface unless you’ve sorted out the underlying information design first.

What does an interactive designer do?

Bill Verplank’s definition of what interactive designers do:

‘An interaction designer needs to answer three key questions, about how people act, how they feel and how they understand.’

“A person we’re designing for does something and we provide affordances. As designers we design the way that the machine gives feedback and finally there’s the question of what kind of knowledge do we expect of our users. Can we design good maps for them to hold in their heads? Can we design the emergency procedures step by step on how to do things? Thats the first step of what we interaction designers do.”

Something interaction designers have to pay attention to is cognition, how humans process information, how they perceive the world, what their internal mental model is of the outside world, especially when they’re designing for something on screen. It’s very different to a physical object in a way that someone perceives what they can do with the thing. Though this concept of affordances can actually be translated to screen interaction.

Sharp, Rogers and Preece define interactive design as:

“..designing interactive products to support people in their everyday and working lives.”


When we think of the adjective interactive, we think of a specific meaning;

  • of or relating to a program that responds to user activity (computer science)
  • working together so the total effect is greater than the sum (2 or more)
  • capable of acting on or influencing each other

What is interaction?

A few common interactions that you might have during the day include ones with mobile phones, vending machines, books, online shopping websites and even conversations.

In an interaction, your needs, wants and desires have an effect or response that you can both understand and recognise and you can do this through your eyes, ears, touch, taste and smell.

Continuums of Interactivity:

One way to consider the meanings of interactivity, is to envision all experiences and products as inhabiting a continuum of interactivity.

Interactivity can include the amount of control the users or audience has over the tools, pace or content, the amount of choice this control offers and the ability to use the tool or content to be productive or to create. Therefore all products and experiences can be placed along this continuum. It’s important to note that there’s no good or bad side of this continuum, the only judgement should be is if the level of activity or place along the continuum is appropriate to the goals of the experience or messages to be communicated.

Gillian Crampton Smith says:

“…one of the things we need as interactive designers is a clear mental model of what it is that we’re interacting with. We need to know where we are in the system, we need to know what we can do next, where we can go and what’s going to happen when we’ve gone there.”

“When we design a computer based system or a machine, we’re designing not just what it looks like but how it behaves and we’re designing the quality of the way we interact with it and this is really what interaction design is, it’s designing this quality. For instance, if you’re playing a game, the kind of interaction and the kind of attention you’re prepared to give to it is very different from if you’re programming your central heating.”

“Interaction design needs a fusion. It’s not just vision, it’s not just sound. It’s a mixture of things that happen over time, visual things, sonic things, moving images and we need to draw on existing disciplines to make a new type of design which is interactive design.”