Interaction Design

Interaction Design Basics

Design:
Design is the process of creating solutions to problems or improving existing things.
Interventions are the actions or changes made during the design process to address those
problems or improvements. Goals are what you want to achieve with your design, and
constraints are limitations or restrictions you have to work within, like time or budget.

The Design Process:

This is the step-by-step approach to creating a design solution. It starts with understanding the
problem, then brainstorming ideas, planning, creating, testing, and refining until you have a final
product.

Users:
Users are the people who will use your design. They have different needs, preferences, and
abilities. Understanding those helps you create something they'll find useful and easy to use.

Scenarios:
Scenarios are detailed stories that show how someone might use your design in real life. They
help you understand how your design will be used and what features it needs.

Navigation:
Navigation is about making it easy for users to move around and find what they need in your
design, like clear menus or buttons. It's like creating a map so users don't get lost.

Iteration and Prototypes:

Iteration means repeating the design process to make improvements. Prototypes are early
versions of your design that you test with users to see what works and what doesn't. You keep
refining and testing until you have a final design that works well.

Interactions and Interventions

Designing interactions goes beyond just creating interfaces; it's about shaping how people
interact with things and each other. For example, think about how a stapler in an office changes
the way people work.

With a manual stapler, the interaction involves writing, printing, and then stapling papers one by
one. But with an electric stapler, the interaction style changes because it can staple automatically
after you write and print without the need for manual stapling.

When we design interventions, we're not just designing physical objects or systems. We're also
designing how people use them and everything surrounding them. This includes things like
documentation, manuals, and tutorials that help people understand how to use the technology. It's
not just about what we make, but also about what we say and do to support people in using it
effectively.
What is design?
Achieving goals within constraints means reaching your aims while dealing with limitations.

Goals are what you're trying to achieve or the purpose behind your actions. It's important to
understand who you're doing it for and why they want it. For instance, if you're designing a new
app, your goal might be to make it easy for users to order food quickly because they're hungry
and want convenience.

Constraints are the limitations or restrictions you have to work with. These could be materials
you have available or platforms you're designing for. For example, if you're building a website,
you might be constrained by the capabilities of the web development tools you're using.

Trade-offs is the compromises you have to make because of these constraints. You might have
to sacrifice some features or aspects of your design to meet other requirements. For instance, you
might need to simplify the design of your app to make it load faster on older devices.

So, achieving goals within constraints means figuring out what you want to accomplish, who
you're doing it for, dealing with limitations like materials or platforms, and making trade-offs to
get as close to your goals as possible given those constraints.

Golden Rule of Design

Part of the understanding we need is about the circumstances and context of the particular design
problem. However, there are also more generic concepts to understand. The designs we produce
may be different, but often the raw materials are the same. This leads us to the golden rule of
design:

Understanding your materials is like knowing what ingredients you have in your kitchen
before you start cooking.

For Human-Computer Interaction (HCI), it means understanding two main things:

Understanding Computers: This involves knowing the limits and abilities of computers, the
tools you can use to interact with them (like keyboards and touchscreens), and the different
platforms they run on (like Windows, macOS, or Android).

Understanding People: Just like you need to understand who you're cooking for and what they
like to eat, in HCI, it's important to understand the psychological and social aspects of people.
This includes how they think, feel, and interact with technology. It also means recognizing that
people make mistakes sometimes, and designing systems that account for this.
By understanding both computers and people, you can create designs that work well for the
people who will use them and take advantage of the capabilities of the technology.
To err is human
Accident reports often blame "human error" when things go wrong, like in airplane crashes,
industrial accidents, or hospital mistakes. But think about it this way: if a concrete lintel breaks
because it's holding too much weight, do we blame the lintel for the mistake? No, we blame the
design because we know how concrete behaves under stress.

Likewise, blaming people for mistakes isn't always fair. Humans make errors, especially under
stress. We know how users behave in different situations, so it's important to design systems that
account for this. We should treat the user as well as we treat physical materials in design,
understanding their limitations and designing with them in mind.

The user
The process of design

Think of the design process like building a house.

Requirements: This is like knowing what you need in your house, such as the number of
bedrooms or if you want a big kitchen. It's about understanding what's there and what you want.

Analysis: Here, it's like sorting out the details. You figure out the best way to arrange the rooms
and understand how everything will fit together.

Design: This is where you decide how to build the house and make choices about what it will
look like. You choose the paint colors, the type of flooring, and other details.

Iteration and Prototyping: It's like making rough sketches or models of the house to see how it
will look and if it works well. You might realize you need to change something and go back to
the drawing board a few times.
Implementation and Deployment: This is when you actually build the house and move in. You
put everything together according to your plan and start using it.

In some cases, like with houses, people might realize they need a better design after they've
already built something and found it doesn't work well. This is similar to what happens in some
companies with Human-Computer Interaction (HCI) professionals. They're sometimes called in
too late, after a system has been built and found unusable, instead of being involved from the
beginning to ensure usability. In other cases, usability is seen as just testing, like checking to
make sure everything works, rather than an integral part of the design process.

… but how can I do it all ! !

Imagine you're planning a party, but you only have a limited amount of time and resources. You
have to make trade-offs, like deciding whether to spend more time decorating or preparing food.

Similarly, in design, especially with limited time, you have to make trade-offs too. You might
not have time to fix every little problem or make everything perfect.

Usability is about finding problems in your design and fixing them to make things easier for
users. But you have to decide which problems are the most important to fix because you can't fix
everything.

Sometimes, if you try to make a system too perfect, you might end up spending too much time
and effort on design. It's like planning an overly elaborate party that takes up all your time and
energy, leaving you exhausted before the party even starts!

So, in simple terms, in design, you have to make choices about where to focus your time and
effort, fixing the most important problems first, and avoiding getting bogged down in trying to
make everything perfect.

User focus
Know your user

"Who are they?" refers to the people who will use what you're designing. They might not be
exactly like you, so it's important to understand them.

To understand them:

Talk to Them: Have conversations with the people who will use your design. Ask them
questions to learn about their needs, preferences, and challenges.
Watch Them: Observe how they interact with similar things or how they go about their daily
tasks. This can give you insights into their behaviors and habits.
Use Your Imagination: Put yourself in their shoes and imagine what it's like to be them. Think
about what they might like or find difficult about your design.
In simple terms, to understand the people who will use your design, talk to them, watch them,
and use your imagination to see things from their perspective.

Persona
Describing an "example" user is like creating a character for a story. This user might not be a real
person, but they represent the kind of people who will use your design. Let's call her Betty.

To make Betty feel real:

1. Give Her Details: Describe Betty in detail, like her age, job, hobbies, and preferences. The
more details you give, the clearer the picture of Betty becomes.

2. Think About What Betty Would Think: Imagine how Betty would react to your design. What
would she like about it? What might confuse or frustrate her?

3. Details Matter: Pay attention to the small things that make Betty who she is. Maybe she
prefers certain colors or finds certain tasks difficult.

By creating a detailed description of Betty, you can better understand the needs and preferences
of the people who will use your design.
Example Persona
let's break down Betty's description in simple terms:

Age and Job: Betty is 37 years old and has been a Warehouse Manager at Simpkins Brothers
Engineering (SBE) for five years. She's been with the company for twelve years.
Education: Betty didn't go to university but has studied in her evenings and has a business
diploma.
Family: She has two children, aged 15 and 7, and prefers not to work late because of her family
commitments.
Computer Skills: Betty did a basic computer course at work some years ago but couldn't finish
it when she got promoted. So, she's not a computer expert, but she knows the basics.
Physical Condition: Betty's vision is perfect, but her right-hand movement is slightly restricted
due to an industrial accident three years ago.
Work Attitude: She's enthusiastic about her job, willing to delegate tasks, and open to
suggestions from her staff. However, she feels uneasy about the introduction of another new
computer system, as it's the third one during her time at SBE.
In simple words, Betty is a hardworking Warehouse Manager at SBE, balancing work and family
life. She's not a computer whiz but is open to learning new things. She's had some challenges due
to an accident but remains positive and committed to her work.

Cultural Probes
Direct observation can be tricky, especially in sensitive environments like psychiatric facilities or
homes. To gather insights, researchers use probe packs. These packs contain items like a glass to
listen at walls, a camera, or a postcard. People are given these packs to open in their own
environment. They record what's meaningful to them.
Probe packs help in various ways:

Inform Interviews: People's responses to the items in the probe packs can provide valuable
information for interviews, guiding the questions researchers ask.
Prompt Ideas: The items in the packs can spark ideas or observations that might not have come
up otherwise.
Enculture Designers: By experiencing the environment through the probe packs, designers can
better understand the context in which their designs will be used.
In simple terms, probe packs are like toolkits filled with items to help researchers learn more
about people's lives and experiences in their own environments.
Scenarios
Stories are powerful tools in design because they help us communicate with others, validate
different models, and understand dynamics.

Linearity in stories means that they follow a straight path, just like how time in our lives moves
forward in a linear way. However, this linear approach doesn't always show alternatives or
different paths we could take.

In simple terms, stories for design are like following a timeline from start to finish, but they
might not show all the other paths or choices we could have taken along the way.

Users will want to know what they can do with a design. To understand this, designers create
step-by-step walkthroughs. These walkthroughs show what users can see, like sketches or screen
shots, what they can do, like using a keyboard or mouse, and what they might be thinking as they
interact with the design.

This step-by-step walkthrough is not just a one-time thing; designers use it over and over again
throughout the design process. In simple words, it's like following a map that shows you what
you can see, do, and think at each step of your journey with the design.

Scenario – movie player ..

Brian wants to watch a new film called "Moments of Significance" and thinks Alison might like
it too, even though she doesn't usually enjoy artsy movies. To check if she'll like it, he decides to
download it from a movie sharing network. He uses his work computer for a faster connection,
but he feels a bit guilty because he knows it's illegal to download movies without paying for
them. However, he plans to go to the cinema to watch it legally.

Once the film downloads, Brian transfers it to his personal movie player using Bluetooth. He
navigates through the player's menu using arrow keys and selects the option to connect via
Bluetooth. On his computer, a notification appears, indicating that it has recognized the movie
player. Brian then drags the downloaded film onto the player's icon, and it starts downloading
onto the player's screen, showing a progress indicator.
Also play act …
Playing act involves pretending to use a mock-up device, like an internet-connected Swiss Army
knife. Let's break it down:

Imagine you have this special Swiss Army knife that can connect to the internet. Now, let's
pretend to use it:

Opening the Device: First, you'd "open" the device, like you would a real Swiss Army knife,
maybe by pressing a button or flipping a switch.

Navigation: Next, you'd pretend to navigate through the device's features, like scrolling through
options on a screen or pressing buttons to select different tools.

Connecting to the Internet: Let's say you want to connect to the internet. You'd pretend to go
through the steps, like selecting the Wi-Fi option and entering a password.

Using Different Tools: Just like with a real Swiss Army knife, you'd imagine using different
"tools" on the device, like browsing the web, checking emails, or watching videos.

… Explore the depths

"Explore the depths" means delving deeper into different aspects of design:

Explore Interaction: This involves understanding what happens when users interact with a
design. For example, when someone clicks a button on a website, what happens next? Exploring
interaction means looking at the sequence of events and actions.
Explore Cognition: Cognition refers to how users think and understand things. When they
interact with a design, what are they thinking? What do they expect to happen next? Exploring
cognition means considering the mental processes users go through.
Explore Architecture: This refers to what's happening "under the hood" of a design, like the
software code or the structure of a building. Exploring architecture means understanding how
things work internally, even if users can't see it.

Using scenarios helps in several ways:

Communicate with Others: Scenarios are like short stories that designers, clients, and users can
easily understand. They show how a design will be used in real-life situations, making it easier to
communicate ideas and expectations.
Validate Other Models: Scenarios can be compared with other models or ideas to see how they
stack up against each other. By "playing" scenarios against other models, designers can see
which one works best or if adjustments are needed.
Express Dynamics: Scenarios go beyond just screenshots or appearance. They describe the
behaviour of the design in different situations, showing how users will interact with it over time.
Linearity
Linearity in scenarios means that there's one straight path through the system or story. Let's
break down the pros and cons:

Pros:
- Life and Time are Linear: Just like how our lives move forward in a straight line, linear
scenarios are easy to follow because they're like stories with a clear beginning, middle, and end.
- Easy to Understand: Linear scenarios feel natural because they're like everyday narratives,
making them easy for people to grasp.
- Concrete: With a linear path, errors are less likely because there's a clear sequence of events.

Cons:
-No Choice, No Branches: Linear scenarios don't allow for choices or different paths, which
means they might miss out on unintended consequences or alternative outcomes.

So:
To overcome the limitations of linear scenarios, it's helpful to:
Use Several Scenarios: Create multiple scenarios to explore different possibilities and
outcomes.
Use Several Methods: Combine linear scenarios with other methods, like branching scenarios or
user testing, to capture a broader range of user experiences and potential issues.

Navigation design
Local Structure: This refers to the structure within a single screen or page of a website or
application. It's about how different elements are organized and how users navigate within that
specific screen. For example, on a webpage, the local structure might include the layout of text,
images, buttons, and other interactive elements.

Global Structure: This refers to the overall structure of the entire website or application. It's
about how different pages or screens are connected and organized to create a cohesive
experience for users. For example, the global structure of a website includes the navigation
menu, linking different sections and pages together, and providing an overarching framework for
users to explore the entire site.

In simple terms, local structure deals with how things are arranged on one screen or page, while
global structure deals with how different screens or pages are connected and organized across the
entire website or application.

Levels
Widget Choice: Picking the right tools for your design, like menus and buttons.

Screen Design: Organizing elements on a single screen so they look good and work well
together.

Application Navigation Design: Helping users move around and find what they need within your
app.
Environment: Considering the broader context of your design, including other apps and the
operating system.

The web …
Widget Choice: Selecting appropriate elements like buttons, forms, or menus for the web page to
ensure user interaction is intuitive and effective.

Screen Design: Organizing content, images, and other elements on a web page to create an
appealing and user-friendly layout.

Navigation Design: Planning the structure and layout of menus, links, and navigation bars to help
users easily move around the website and find what they're looking for.

Environment: Considering factors like different web browsers, screen sizes, and devices users
may access the website from to ensure consistent performance and usability across various
environments.

Physical devices
Widget Choice for Physical Devices: Selecting the appropriate physical components or controls
for the device, such as buttons, switches, touchscreens, or dials, to facilitate user interaction.

Screen Design (if applicable): Organizing visual elements and information displays on any
screens or interfaces present on the physical device, ensuring clarity and usability.

Navigation Design (if applicable): Planning the layout and functionality of any navigation
systems or controls that allow users to move between different functions or features of the
device.

Environment: Considering the physical surroundings and conditions in which the device will be
used, including factors like lighting, temperature, ergonomics, and potential interference from
other devices or environmental conditions.

Think about structure

Local Structure (Within a Screen): This refers to how elements are organized and interact with
each other on a single screen or interface. It's about the layout and design of the screen itself.

Global Structure (Movement Between Screens): This involves how users navigate between
different screens or pages within a website or application. It's about the overall flow and structure
of the entire system.

Relationship with Other Applications: This considers how your application interacts with other
applications or services. It's about ensuring compatibility and seamless integration with other
tools or platforms.
In simple terms, local structure is about what's happening on one screen, global structure is about
how users move between screens, and the relationship with other applications is about how your
app works with other software.

Local structure
Much of interaction involves goal-seeking behavior. Users have some idea of what they are after
and a partial model of the system. In an ideal world if users had perfect knowledge of what they
wanted and how the system worked they could simply take the shortest path to what they want,
pressing all the right buttons and links.

Four golden rules

Knowing Where You Are: Users should always know where they are within the system or
interface. This helps them understand their current context and navigate effectively.

Knowing What You Can Do: Users should be aware of the actions or options available to them
at any given moment. This empowers them to make informed decisions about what to do next.

Knowing Where You're Going or What Will Happen: Users should have a clear
understanding of where their actions will lead them or what will happen when they take a certain
action. This helps them anticipate the outcome of their actions and avoid surprises.

Knowing Where You've Been or What You've Done: Users should have a way to track their
progress or review their actions within the system. This helps them keep track of their activities
and backtrack if needed.

Where you are – breadcrumbs

Breadcrumbs are a navigation aid that shows users their current location within a website's
hierarchy. They typically appear at the top of a webpage and display the path or trail of pages a
user has visited to arrive at their current location. Breadcrumbs help users understand where they
are within the website and provide a convenient way to navigate back to previous pages if
needed. In simple terms, they act like a trail of breadcrumbs, guiding users along their path
through the website's structure.

Beware the big button trap

Public information systems often have touch screens and so have large buttons. Watch someone
using one of these and see how often they go to the wrong screen and have to use ‘back’ or
‘home’ to try again. If you look more closely you will find that each button has only one or two
words on it giving the title of the next screen, and possibly some sort of icon. Quite rightly, the
button label will be in a large font as users may have poor eyesight.

It is hard to choose appropriate labels that mean the same for everyone, especially when the
breadth of the screen hierarchy is fixed by the maximum number of buttons. So it is no wonder
that people get confused. However, there is usually plenty of room for additional explanation in a
smaller font, possibly just the next level of button labels, or a sentence of explanation. It may not
look as pretty, but it may mean that people actually find the information they are looking for.
Modes
Modes are different states or settings that a device or system can be in, each with its own set of
functions or behaviours. Let's simplify the scenario:

Imagine a mobile phone has a "lock" mode to prevent accidental use. To unlock the phone, you
need to press a certain combination of buttons, like 'c' and 'yes'. This is a frequently practiced
action for users.

However, if someone forgets to unlock the phone and accidentally presses 'yes' while the phone
is in their pocket, it might go to the phone book. In the phone book, pressing 'c' typically deletes
an entry, while 'yes' confirms an action.

If someone accidentally presses 'yes' instead of 'c' in the phone book, they might unintentionally
delete an entry. Oops!

In simple terms, modes help control the behaviour of a device, but users need to be careful when
switching between modes to avoid unintended actions.

Global Structure

Hierarchical diagrams

Hierarchical diagrams often represent the different parts of an application, which can include
individual screens or groups of screens. These diagrams help illustrate the functional separation
within the application.

For example, imagine an e-commerce application. The hierarchical diagram might show separate
branches for different sections like "Home," "Product Catalog," "Shopping Cart," and
"Checkout." Within each section, there could be further branches representing specific screens or
functionalities.

In simpler terms, hierarchical diagrams break down an application into its various components,
like different sections or screens, and show how they are organized and related to each other in a
functional way.
Navigating hierarchies

Navigating through a lot of layers in a menu can be tricky. Instead of worrying about how many
things are in the menu, focus on how things are organized on each screen. Having lots of options
on each screen can help, but they should be organized neatly so it's easy for you to find what you
need.

Network diagrams
Show different paths through system
Network diagrams illustrate what leads to what and what happens when, including branching
paths. They're more task-oriented than hierarchical, focusing on the sequence of actions or tasks
users perform rather than just the structure of the system.
For example, imagine a network diagram for an e-commerce website checkout process. It would
show the sequence of actions users take, such as adding items to the cart, entering shipping
information, and completing the purchase. Branching paths might occur if users choose different
shipping options or payment methods.

In simple terms, network diagrams in UI design map out the steps users take to accomplish tasks,
showing the connections and branching paths between different actions or options. They're like a
roadmap that guides users through the interactive journey of using the system.
Wider still

Style Issues:

Follow platform standards for consistency.

Ensure uniformity in design elements.
Functional Issues:

Ensure smooth cut, copy, and paste functionality.

Navigation Issues:

Seamlessly integrate embedded applications.

Provide clear links to external resources or other apps.

Wider UI design considerations include adhering to platform standards and maintaining

consistency in design, ensuring smooth functionality for basic actions like cut and paste, and
providing intuitive navigation for accessing external resources or other applications.