INTERACTION DESIGN

 Principles of interaction design

 Affordances and constraints
 Interaction styles (command-line, graphical, tangible, etc.)
 Information architecture and navigation design
 PRINCIPLES OF INTERACTION DESIGN

 Interaction design is the practice of creating interactive digital products, systems,

and services that are user-centered and support effective and enjoyable user
interactions.
 User-Centered Design, Visibility, Feedback, Consistency, Learnability, Flexibility &
Efficiency, Error prevention & handling, Simplicity, Accessibility, Hierarchy & Visual
Structures, Aesthetics, Context sensitivity and Iterative Design & Testing.
 AFFORDANCES AND CONSTRAINTS

 Affordances and constraints are key concepts in design that help shape user interactions
with products, interfaces, and environments. Understanding and leveraging affordances
and constraints is essential for creating intuitive and usable designs.
 Affordances:
 Definition:
 Affordances refer to the perceived or potential actions that an object or environment
enables or suggests to a user. They are the properties or qualities of a design that indicate
how it can be used or interacted with.
 Perception of Affordances:
 Users perceive affordances based on their prior knowledge, experiences, and cultural
background. Affordances should be designed in a way that aligns with users' mental
models and allows them to intuitively understand how to interact with the design.
 AFFORDANCES AND CONSTRAINTS

 Different Types of Affordances:

 Perceived Affordances: The actions that users perceive are possible based on the
design's visual or sensory cues.
 Actual Affordances: The actions that are truly possible based on the physical or
functional characteristics of the design.
 False Affordances: Design elements that appear to offer certain actions but do not
actually support them, leading to user confusion or frustration.
EXAMPLES OF AFFORDANCES

 Examples of Affordances:
 Buttons: A raised button suggests that it can be pressed or clicked,
indicating an action to the user.
 Handles: A handle on a door suggests that it can be grasped and pulled or
pushed to open or close the door.
 Icons: Recognizable icons, such as an envelope icon representing email,
afford the action of opening or composing emails.
 AFFORDANCES AND CONSTRAINTS

 Constraints:
 Definition:
 Constraints are limitations or restrictions placed on a design that guide or restrict
users' actions. Constraints help users understand the boundaries and available
options within a design.
 Different Types of Constraints:
 Physical Constraints: Physical properties or limitations that prevent or guide certain
actions. For example, a USB connector is designed with a specific shape that
restricts incorrect insertion.
 CONSTRAINTS

 Semantic Constraints: Constraints imposed by the meaning or logic of a

design. For example, selecting a past date in a calendar application is
semantically constrained to prevent illogical choices.
 Cultural Constraints: Constraints influenced by cultural norms, conventions, or
expectations. For example, a red color in many cultures signifies danger or
alerts the user.
 Benefits of Constraints:
 Constraints provide clarity and structure to users, helping them understand the
available options and reducing cognitive load.
 Constraints can prevent errors and misuse by guiding users towards
appropriate actions and preventing unintended interactions.
 INTERACTION STYLES

 Interaction styles refer to the different ways in which users can interact with digital
interfaces and systems. These styles define the modes and methods through which users
input commands, navigate, and engage with the system.
 Command Line: In command line interaction, users input text-based commands to perform
actions or request information. Users type specific commands, often following a predefined
syntax, and the system responds accordingly. Command line interfaces offer precise
control but require users to have knowledge of the available commands and their syntax.
 Graphical User Interface (GUI): GUI is a visual interaction style that utilizes graphical
elements such as icons, buttons, menus, and windows. Users interact with the system
through direct manipulation of graphical objects using a pointing device, such as a mouse
or touch screen. GUIs are widely used due to their ease of use and visual representation of
actions and objects.
 INTERACTION STYLES

 Menu-Based: Menu-based interaction involves presenting users with a hierarchical

structure of menus and submenus that contain available options. Users navigate through
the menus and make selections by choosing from the presented list of options. Menu-
based interfaces offer a structured and guided interaction flow.
 Form-Fill: Form-fill interaction style involves users providing input through filling out forms
or fields with relevant information. Users enter data into input fields, select options from
dropdown menus, and interact with checkboxes, radio buttons, and other form elements.
Form-fill interaction is commonly used in web forms, applications, and data entry
interfaces.
 Natural Language: Natural language interaction enables users to communicate with the
system using natural language, such as spoken or written sentences. Users can issue
commands, ask questions, or request information in a conversational manner. Natural
language interfaces rely on natural language processing (NLP) techniques to interpret and
respond to user input.
 INTERACTION STYLES

 Gestural: Gestural interaction style involves users interacting with a system through
physical gestures, often using touch-sensitive surfaces or motion-sensing devices. Users
perform gestures such as swiping, pinching, tapping, or rotating to manipulate objects,
navigate, or trigger actions. Gestural interfaces are commonly found in touchscreen
devices and virtual reality systems.
 Voice-Based: Voice-based interaction allows users to interact with systems using spoken
commands or voice recognition. Users vocalize their requests, and the system processes
and responds accordingly. Voice-based interfaces rely on speech recognition technology to
convert spoken words into actionable commands.
 Augmented Reality (AR) and Virtual Reality (VR): AR and VR interaction styles involve
users interacting with digital content and virtual environments through immersive
technologies. Users can manipulate virtual objects, navigate through virtual spaces, and
perform actions using specialized input devices or through natural gestures and
movements.
 INTERACTION STYLES

 Multi-Modal: Multi-modal interaction combines multiple interaction styles, allowing users to

interact using a combination of input methods. For example, a system may support touch-
based gestures along with voice commands or gestures combined with eye-tracking. Multi-
modal interfaces aim to leverage the strengths of different interaction styles to provide a
richer and more flexible user experience.
 INFORMATION ARCHITECTURE (IA)
AND NAVIGATION DESIGN
 Information architecture (IA) and navigation design play a crucial role in organizing and
presenting information within digital interfaces. They focus on structuring content, creating
intuitive navigation systems, and facilitating users' ability to find and access information
effectively.
 Information Architecture (IA):
 Information architecture involves organizing and structuring information to support effective
navigation and retrieval. It aims to create a logical and coherent framework for content
organization.
 IA focuses on understanding users' needs and mental models, categorizing and labeling
content, and defining relationships between different information elements.
 Techniques such as card sorting, user research, and content audits are used to identify
user requirements, define content hierarchies, and establish the overall structure of the
information.
 INFORMATION ARCHITECTURE (IA)
AND NAVIGATION DESIGN

 Content Organization:
 Content should be organized in a way that reflects users' mental models and
supports their goals. Group related information together and create categories or
sections that are meaningful and intuitive to users.
 Consider organizing content based on topics, tasks, or user personas, depending
on the nature and context of the information.
 Use clear and consistent labeling to help users understand the content and navigate
through different sections.
 INFORMATION ARCHITECTURE (IA)
AND NAVIGATION DESIGN

 Hierarchical Structures:
 Hierarchical structures, such as menus or nested folders, provide a clear and
organized way to represent the relationship between different levels of information.
 Establish a meaningful and logical hierarchy by breaking down content into
categories, subcategories, and further levels as needed.
 Ensure that the hierarchy is intuitive and matches users' mental models, making it
easier for them to locate and access information.
 INFORMATION ARCHITECTURE (IA)
AND NAVIGATION DESIGN

 Navigation Design:
 Navigation design involves creating navigation systems that enable users to move
through the information space and find what they need.
 Primary navigation elements, such as menus, should be prominent and
consistently accessible across the interface.
 Use clear and descriptive labels for navigation options to help users understand
their purpose and expected outcomes.
 Provide visual cues, such as highlighting the current page or section, to give
users feedback about their location within the interface.
 INFORMATION ARCHITECTURE (IA)
AND NAVIGATION DESIGN
 Search Functionality:
 Incorporate a search function to allow users to quickly find specific information or content.
 Design the search interface to be easily accessible and prominently displayed.
 Implement search algorithms that deliver accurate and relevant results, considering factors
such as keyword matching, filters, and sorting options.
 Breadcrumbs:
 Breadcrumbs provide users with a trail of links that show their current location within the
website or application's hierarchical structure.
 Breadcrumbs help users understand the context and navigate back to higher-level sections
or pages.
 They can be displayed horizontally at the top of the page or vertically in a sidebar,
depending on the design and layout.
 INFORMATION ARCHITECTURE (IA)
AND NAVIGATION DESIGN
 Consistency and Predictability:
 Maintain consistency in navigation design across the interface to enhance learnability and
usability.
 Use standard navigation patterns and conventions that users are familiar with to minimize
cognitive load.
 Ensure that navigation elements are predictable and behave consistently, allowing users to
anticipate the outcome of their interactions.
 User Testing and Iterative Design:
 Conduct user testing and gather feedback to evaluate the effectiveness of the information
architecture and navigation design.
 Iterate and refine the IA and navigation based on user insights and observations.