Interaction Design (IxD)
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.
Perception
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
Affordances
All actions that are made physically possible by the properties of an object or an environment.
Empathy
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
Motivation
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
- 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
- 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
