HCI 6
Interaction design process
- First: we find what people need and what exists now. We talk to people and read documents to understand
the system.
- Second: we look at the information and find the main problems. We use simple tools like personas and
scenarios.
- Third: we make the design. We create a prototype, test it with users, and improve it.
- Fourth: when the prototype is good, we build the system, write instructions, finish the design, and start
maintenance.
Interaction design process (iteration)
We make a prototype using design rules. Then we test it with real users and make it better. We can change the
prototype and test it again. Experts or real users can check the system.
Design Trade Off
Design Problem
Time is limited, so we must choose what to work on. We cannot fix everything.
What is harder?
Finding problems is not very hard.
But choosing which problem to fix is harder, because time is short.
Conclusion:
Finding problems is easy. Deciding what to fix is harder.
Know your users!
Who are the users?
They can be young or old, expert or [Link] must think about real, specific users, not a “general user.”
They are usually not like you.
Talk to them:Interviews, working with users.
Watch them:Videos, observations, things they use.
Use imagination:Create personas — imaginary but realistic users.
Target audience:The group of people who are most interested in the product.
Segmentation:Dividing people into small groups based on age, interests, or behavior.
Personas:Fake but realistic users made from research.
Scenarios:A short story about how a user uses the system.
User flow:Steps a user takes to reach a goal.
User stories are short sentences about what a user [Link] help the team understand the user’s needs.
Format:As a user, I want something so that I get a benefit.
Example:As a traveler, I want flight delay notifications so that I can change my plans.
Persona
A persona is a detailed example [Link] person is not always [Link] can be many personas
for different user groups.A persona is like a “fake user” we use in design.
We ask: “What would Betty think?” Details are important because they make the persona feel
real.
Scenario
Scenarios are stories used in [Link] show typical ways users use the [Link] help the
designer think in detail and find problems early.
Scenarios are useful for designing
What will users want to do?
We check step by step.
What can they see? (sketches, screen shots)
What do they do? (keyboard, mouse, touch)
What are they thinking? (easy, confused, happy, or lost)
Do the walkthrough to find problems early.
Scenarios with physical artifacts
A mock-up is a simple [Link] try a task with [Link] see what works and what is a problem.
Scenarios are useful for communicating
Scenarios help people communicate (designers, clients, users).Examples are easy to [Link]
can be used again.
Scenarios are linear
A scenario shows only one path of how a user uses a system. It is easy to understand because it
is a simple story. But it has no choices and no special cases. So we need to use several
scenarios to understand the system better.
Levels of interaction (within application)
Users interact with a system in different ways:
Choosing widgets (menus, buttons, words).
Screen layout design.
Navigation between screens.
Interaction with other apps or the operating system.
Goal seeking behaviour
Users know only a small part of the [Link] each step they must see if they are closer to
their [Link] screen must show what to do next.
Navigation: 4 golden rules
Users interact with a system at different levels, and a well-designed interface must always help
them stay oriented and in control. To achieve this, the system should clearly communicate four
things:
1. Knowing where you are
The interface must make the user’s current location in the system obvious.
This can be done through:
clear page titles,
highlighted menu items,
progress indicators or breadcrumbs.
2. Knowing what you can do
Users must be able to recognize which elements are interactive.
Examples:
Links should look like links (e.g., underlined or styled differently).
Buttons should visually look pressable.
Disabled elements should appear inactive (e.g., greyed out).
The user should never have to guess what is clickable.
3. Knowing what will happen
Before the user takes an action, they should understand the outcome.
Good design uses:
descriptive button labels (“Delete File”, “Save Changes”),
meaningful icons with labels,
tooltips that explain actions.
Users should not need to “try and see” — that slows them down and increases errors.
Modes also matter:
If the same button behaves differently in different modes (e.g., text editors like vi), the system
must make the mode clearly visible.
4. Knowing where you’ve been
Users should understand the actions they have already taken.
Systems can support this by:
showing feedback after important actions,
visually distinguishing visited links,
maintaining history or summaries.
Example:
During checkout, showing an order summary reduces the need to go back and double-check
information.
In short
A good interface always helps users maintain orientation by making it clear:
✔ Where they are
✔ What they can do
✔ What will happen
✔ What they’ve done
This reduces confusion, speeds up tasks, and helps users feel confident while using the system.
Hierarchical diagrams
Screens or states are usually organized based on functional criteria (what each part of the
system does).
Sometimes they are grouped by user roles or user types.
This creates a hierarchical structure where pages are placed into logical groups, making
navigation clear.
Example:
A messaging system menu: Inbox, Sent, Drafts, Settings — all grouped by function.
People understand hierarchies, but users have different mental models and vocabularies.
Designers must know their users and offer helpful suggestions. Deep hierarchies are hard to
navigate, and Miller’s 7±2 rule is for memory, not menu size. The classification must feel
natural and match the user’s purpose. The best approach is to allow many items on a screen
but keep them clearly structured.
Network diagrams (interaction flow)
This describes a task-oriented user [Link] shows different paths through the system, explaining
what leads to what and what happens after each [Link] may include branches and loops,
such as returning to a previous step.
Example: a flow map for a shopping-cart system.
Interaction with the environment
Each program exists within an ecosystem of other devices and apps.
This creates:
Style issues: platform standards and consistent UI
Functional issues: standard formats, cut-and-paste support
Navigation issues: embedding data, attachments, integration with other apps
Layout design – A basic approach
Design starts with understanding the user:
Ask: What is the user doing?
Think: What info do they need, what comparisons, and in what order?
Design: Form follows function.
Using solid design principles makes the layout more pleasant, intuitive, and usable.
Layout design – Visual hiearchy
This means there is a visual hierarchy, mainly created by using different text sizes. Larger text
shows more important information, while smaller text indicates lower-level details.
Principle of visual hierarchy
The most important elements should look the most important.
Visual hierarchy guides the viewer’s eyes: first to the key information, then to the secondary
details.
Basic ways to create visual hiearchy
Visual hierarchy is created by using position, size, color, shape, spacing, and proportion to
show what is most important.
Position: Important elements are usually placed at the top.
Size: Bigger elements attract more attention.
Typography: Headlines are larger and bolder than body text to highlight key information.
Color: Bright colors stand out more than muted [Link], the strongest color is used for
interaction elements. Saturated colors stand out more than gray colors, and bright colors stand out
over dark ones (and vice versa).In short: A more vibrant color attracts more attention.
Space can be used to separate blocks or even to organize elements.
Grouping means that elements placed close together appear more related or more important.
Things that are logically related should also be physically [Link] human brain naturally looks for
structure, logic, and patterns, helping us interpret the world.
Some Gestaltic princibles
Common region
When elements are placed inside the same closed area (box, card, container), our brain sees
them as a group.
Proximity
Elements that are close to each other look more related than elements that are far apart.
Similarity
Elements that look similar (same color, shape, size, texture, or orientation) are perceived as part
of the same group.
Using Similarity
The similarity principle means things that work the same should look the [Link] helps
users quickly recognize buttons, links, and other repeated elements.
4 Fundamental principles of graphic design/ Basic ways to create visual
hiearchy
Proximity: Group related elements together so users see the connection.
Alignment: Keep elements visually lined up to create order and clarity.
Repetition: Repeat styles (colors, fonts, shapes) to create unity and consistency.
Contrast: Use differences (size, color, weight) to highlight the most important elements.
Von Restorff Effect (Isolation effect)
Items that look different from others are easier to notice and remember.
For contrast to work well, the difference must be clear and strong. Small or weak differences
between fonts cause visual [Link], don’t use two fonts that look almost the same (like Arial
and Verdana) on one page.
How to pair fonts
A classic font pairing method is to use a decorative serif for headings and a simple sans-serif for
body text — or the opposite: a clean sans-serif for headings and an easy-to-read serif for the
body.
Text alignment / layout and readability
Left alignment:
People in Western countries read from left to right, so left-aligned text is the easiest to read.
Centered text:
Never center long paragraphs. Centered text should only be used for short titles or headings.
Right alignment:
Right-aligned paragraphs are hard to read because the starting point of each line changes,
making scanning difficult.