Interaction


This module covers week 2 of the course.

Note that this material is subject to ongoing refinements and updates!

Interaction design is a process

We will return to processes in IxD later in the course, but for now, know that there are four stages in IxD:

Conceptual design

At the early stages of the IxD process, it’s important to conceptualise what a proposed design solution will actually do. This helps to:

We can make claims and assumptions about how users might engage with a design. According to Sharp et al.:

“by an assumption, we mean taking something for granted that requires further investigation; for example, people now want an entertainment and navigation system in their cars. By a claim, we mean stating something to be true when it is still open to question" (2019, p. 71).


We need to consider unknowns during the early stages of a project. Assumptions should be questioned and reconsidered early on in the process.

Analysing the problem space:

Conceptual model

Understanding the problem space is necessary before moving onto the "design space". Before deciding upon elements like the style of interface, user behaviour, and functionality, a conceptual model should be developed.

A conceptual model is:

“...a high-level description of how a system is organized and operates”
(Johnson and Henderson, 2002, p26)


A conceptual model enables:

“...designers to straighten out their thinking before they start laying out their widgets”
(Johnson and Henderson, 2002, p28)


The key parts of a conceptual model include:

According to Sharp et al, there are five types of interaction:

It’s important to remember that interaction type differs from interface style. For example, an interaction type could be conversational, browsing, or responding. An interface style supports particular interaction types. Interface styles include menus, gestures, touch, or voice.

Prototyping with wireframes

We will return to prototyping later in the course, but for now, we will look at using wireframes to mock up our interaction/interface ideas. What is a wireframe?

“Initial conceptual models may be captured in wireframes—a set of documents that show structure, content, and controls. Wireframes may be constructed at varying levels of abstraction, and they may show part of the product or a complete overview” (Sharp et al., 2019, p. 445).


Wireframe basics (note that we won't need to create interactive wireframes in this course):

Justinmind (2021). The ultimate guide to wireframe design [Video file]. https://www.youtube.com/watch?v=7rw1tZwrccU.

There are a number of online apps that allow you to create wireframes of varying levels of fidelity, but we will be using Lunacy in this course to create medium-fidelity wireframes.

Emotional interaction

This term is used to encompass two separate, but related ideas:
Emotional AI/affective computing: “Designing technology to detect and recognize someone’s emotions automatically from sensing aspects of their facial expressions, body movements, gestures, and so forth” (Sharp et al., 2019, p. 165).

Emotional design

Emotional design (Norman, 2005) occurs at three levels:

Listen to Norman himself explain what these three levels mean.

CNN (2015). Don Norman and his theory on emotional design [Video file]. https://www.youtube.com/watch?v=G7MeRkDkRN4

Expressive interfaces

Technologies used in:

Six core expressions typically measured:
Sadness, disgust, fear, anger, contempt, and joy

Type of facial expression chosen by AI through detecting presence or absence of:
Smiling, eye widening, brow raising, brow furrowing, raising a cheek, mouth opening, upper-lip raising, and wrinkling of the nose (Sharp et al., 2019, p. 180).

Persuasive technologies

Anthropomorphism

Anthropomorphism is the tendency for us to give human qualities to animals and objects.

Social robots are a recent step in emotional design. There are many examples of these in Japan, such as:

  


  


Back to top | © Paul Haimes at Ritsumeikan University | View template on Github