Interaction Design (IxD)

vishal gupta
6 min readApr 26, 2021

User Experience Design — Physical layout of information within the application

User Interface Design — Visual treatment of the flows and wireframes

Interaction Design — Reaction between UI elements and your users when they are interacting with them

5 Dimensions of Interaction Design

Dimension 1: Words

Using the most appropriate words during the correct place and time in your system helps make a user’s experience more understandable and smoother

Dimension 2: Visuals

Photography, icons, illustrations, and any graphical elements

Dimension 3: Space

Modern software design holds white space in high regard. A cluttered layout is an unintuitive layout and will make it more difficult for users to interact with the system.

Dimension 4: Time

Time is media that changes over time, such as animations, video or sound

Increase user engagement, excitement and give more clear feedback.

Dimension 5: Behavior

User’s reactions to the product

Sensation & Perception

Sensation and perception are stages of processing information taken in from sensory stimulation; that is touch, smell, taste, hearing and vision.


A user’s ultimate experience of the world and typically involves further processing of sensory input

Influenced by our past experiences, present learnings, and even our expectations

Eye-tracking & Banner Blindness

Gestalt Principles

A set of theories in psychology, describing how humans naturally perceive objects as organized patterns and groups.

Gestalt Principal -Proximity

Used to group similar information and organizing content

Gestalt Principal -Similarity

Objects with similar characteristics are perceived as belonging to a group or pattern

Common grouping methods: color, size, shape, texture, dimension, and orientation

Gestalt Principal -Closure

The mind’s tendency to see complete figures or forms even if a picture is incomplete, or partially hidden by other objects

Decreases the number of elements needed to communicate information

Gestalt Principal -Continuation

Points that are connected by straight or curving lines are seen in a way that follows the smoothest path

Items placed in a certain row or direction can be seen as a group

Gestalt Principal –Common Region

Elements will look like they belong to one another if they are sharing an area with a clearly defined boundary

Gestalt Principal –Common Fate

Elements moving in a similar direction are perceived as related

When movement is implied, by surrounding elements or shape, effects can still be seen


All actions that are made physically possible by the properties of an object or an environment.


The ability to understand your user’s feelings.

How to Show Empathy

Adopt the mindset of a beginner

Ask what, how, and why

Qualitative research — User interviews, Cognitive mapping , Diary studies

Recruit diverse users


A user’s motivation is what initiates, sustains, and directs their behavior.

Extrinsic Motivation

Looking for tangible rewards

Users are less inclined to complete an interaction if these extrinsic rewards are removed

Intrinsic Motivation

Derived internally

Driven by internal factors that users are in control of, and find personally rewarding

Most successful way of motivating

Achievement , Affiliation, Power

Achievement — Problem solving and learning new skills

Affiliation — Growth in family and social relationships

Power — Influence others. Gain status and recognition

Goal-gradient Effect

Users will modify and accelerate their behavior as they get closer and closer to their goals

Credit card points, profile building, and unlocking achievements

Mental Models

An explanation of a user’s thought process about how something works in the real world; an internal representation of an external reality.

Mental Models

  1. Based on belief, not facts

2. Users bring their knowledge with them to every situation, problem, and interaction

3. Vary by knowledge, age, interest, mental ability, stress, fatigue, and state of mind

4. Help users make predictions on the future

5. Simpler form of actual representation

“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”

-Jacob’s Law

Mental Models

  1. Build for your user’s mental model

2. Helps make sense of usability problems in your design

3. A user’s mental model may have errors

4. Teach a more accurate mental model at an earlier stage of the user experience

5. Mental models evolve with experience

Reasoning & Logic

The methods your users use to identify a solution to their motivation, when faced with a decision.

Reasoning & Logic Methods

Difference Reduction — Reduce the amount of available options

Sub-Goal Decomposition — Breaking down large tasks into smaller, easier sub-tasks

Analogy — Apply a similarly used solution to a new problem

Transformation — Alter an unfamiliar problem into a previously completed one

Reasoning & Logic

There isn’t always one correct answer in decision making, but rather, the most logical answer to move forward with

Users are generally not rational thinkers

Optimal users take into consideration all the information at their disposal

Satisficersjust want the answer to be good enough

Pain vs. Value

The amount of pain and frustration a user will endure when making an uninformed decision, Vs how detrimental or rewarding the outcome will be

Interaction Design Model

Phase 1: Perceive — Perceived Affordances

It can be difficult for a user to understand interactions if affordances, content, and functionality are hidden. Perceivability is more than just the visuals of your interface

Perceived Affordances: visuals indicating interactions such as layer visuals, animations, or transformation of objects

Good design decisions will increase your applications interaction perceivability

Users should quickly be able to process their options to find the action most relevant to them

Phase 2: Predict

Multiple action paths and predictions can add to cognitive load and reaction time

Interaction confidence + perceivability = probability of interaction

Users will choose a path with high confidence in the prediction that the interaction will get them to their goals.

3 Stages of Feedback

1: Acknowledge with hover/rollover, down/press states. Color, animation, sound, etc.

2: Process request with loading indicator, temporary disabled buttons

Never leave user wondering

3: Display interaction results

Feedback and results further shape mental model

Positive feedback means continued engagement

Use delighters where appropriate to create emotional connections

Misguided feedback may inhibit trust, and lead to abandonment

4. Ambient feedback: subtle continuous updates, such as heart rate monitoring

5. Anticipatory feedback: shown before interaction is taken

Phase 5: Learn

Meaningful feedback in sync with predictions, and help in achieving goals increases repeat interactions

The practice of repetitive or similar tasks helps our users learn more quickly.

Emotions connections are the most powerful force to have with users

Retention increases with user learning and enjoyment

Learning isn’t easy though and often not retained

The more complex the system, the higher chance of forgetting

Phase 6: Remember

Users bring past interactions they remember with them to new interactions when they are encountered

Easier to reference something a user already knows, then to learn something new

Consistency and system cohesiveness help jog user’s memories

How Users Remember

Discrimination — Products that are different to one’s users have used in the past

External Consistency — Consistency across entire product line ensures quicker referencing

Internal consistency — Ensure the system itself is consistent between styles & elements

Identifiably Analogous — Products that are similar to one’s users have used in the past