Topic 4:

Interactive
Design
 Objectives

In this topic we will cover:

• Understanding user interactions and
feedback
• Designing intuitive user interfaces
• Gestalt principles and their application
Understanding user interactions and feedback
 User interface is about a
dialogue
what do you
The challenge is putting the want me to do?
dialogue in the right terms and in Here you go

the right order.

How to organize all the things
a user could want to do
• Users may not be good at
forming their questions,
expressing the needs. Do this for me.
To construct a good dialogue,
one has to spend a lot of time watching
a lot of different people
"talking" with it
Everything in the product design
contributes to this dialog
• from the button labels/placements to noises
to screen prompts
 Organising the dialogue:
task analysis

1. Identify the individual

tasks to be solved.
2. Each task is a goal.
3. Start with the big goal
and then, decompose
hierarchically.
 Participatory design

Involve all the stakeholders in

the design process

Both for learning about

needs and tasks and sharing
designs
Source: http://www.webdesignfanatic.com/participatory-design-valuable-
designers/
 Testing the UI

Testing the UI is like testing done early on, except now you
use the actual system.

1. Give the users a task and watch them work.

2. Take copious notes
3. Do not steer the user
Frustrations and failures are part of the game
 Typical and unfortunate
reactions
Typically, when project managers observe their design undergoing a usability
test, their initial reaction is:

Where did you find such stupid

users?
Or the typical engineer’s response:

It's designed right.

You are too dumb to use it correctly.

The users are telling you something. Listen to them!

 Listening to your users
• User feedback drives product improvements:
• Valuable insights from users help identify pain points and areas for
enhancement.
• Feedback is a compass guiding design decisions and feature
development.
• Different sources of feedback (surveys, analytics,
support tickets):
• Diverse channels for collecting feedback, including surveys, usage
analytics, and support tickets.
• Multiple touchpoints ensure a comprehensive understanding of
user needs.
• Iterative design process based on feedback:
• Embrace a continuous improvement cycle.
• Iterate on design based on user feedback, leading to user-centric
product evolution.
 Designing
intuitive user
interfaces
Jacob Nielsen’s 10
Principles Of UI Design
 Jakob Nielsen’s 10 Principles
of UI Design

• Match the real world

• Consistency and standards
• Help and documentation
• User control and freedom
• Visibility of system status
• Flexibility and efficiency
• Recognition, not recall
• Error prevention
• Help users recognise, diagnose, and recover
from errors
• Aesthetic and minimalist design
 #1: Match the real world

Examples
• Desktop
• Trashcan
 Directly manipulate objects

• User interacts with visual representation of data objects

• Continuous visual representation
• Physical actions or labeled button presses
• Rapid, incremental, reversible, immediately visible effects

• Examples
• Files and folders on a desktop
• Scrollbar
• Dragging to resize a rectangle
• Selecting text

• Visual representation and physical interaction are important

 Objects suggest specific actions
(manipulations) for use

Perceived and actual properties of a thing that determine

how the thing could be used
1. Chair is for sitting
2. Knob is for turning
3. Button is for pushing
4. Listbox is for selection
5. Scrollbar is for continuous scrolling or panning
 Natural mapping

Physical arrangement of controls Poor mapping:

should match arrangement of arbitrary
function arrangement of
stove controls
Best mapping is direct, but natural
mappings don’t have to be direct Good mapping:
• Light switches full natural
• Stove burners mapping of
• Turn signals controls and
• Audio mixer burners

Norman, Donald A., "Knowledge in the Head and in the World". The Design of
Everyday Things. New York: Basic Book, 1988. 77
 Actions should have
immediate, visible effects

Examples
• Push buttons
• Scrollbars
• Drag & drop

Kinds of feedback
• Visual
• Audio
• Haptic (conveyed by sense of
touch)
#2: Consistency and
standards

Users should not

have to wonder
whether different
words, situations,
or actions mean
the same thing.

Follow platform
conventions
.…
 #3: Help and documentation

Help should be
1. Searchable
2. Context-sensitive
3. Task sensitive
4. Concrete
5. Short
#4: User control and
freedom
Users may run in trouble by using a
system function by mistake and need
a clearly marked "emergency exit" to
leave the unwanted state without
having to go through an extended
dialogue
1. Provide Undo

2. Long operations should be allowed to be

paused/suspended
3. All dialogs should have a cancel button
#5: Visibility of system
status
The system should always
keep users informed about what
is going on, through appropriate
feedback within reasonable time.

1. change cursor to indicate action

2. use highlights to show
selected objects
3. use status bar to show
progress
 #6: Flexibility and efficiency
Accelerators
• unseen by the novice user
• may often speed up the interaction for the expert user such that the
system can cater to both inexperienced and experienced users. Allow
users to tailor frequent actions.
#7: Recognition, not recall

Minimize the user's memory load by making

objects, actions, and options visible.

The user should not have to remember

information from one part of the dialogue to
another.
Instructions for use of the system should be
visible or easily retrievable whenever
appropriate.
1. Use menus, not command languages
2. Use combo boxes, not textboxes
3. Use generic commands
4. All needed information must be visible
 #8: Error prevention

Even better than good error

messages is a careful design
which prevents a problem from
occurring in the first place.

Either eliminate error-prone

conditions or check for them and
present users with a confirmation
option before they commit to the
action.
 #9: Help users recognise,
diagnose, and recover from
errors
Error messages should
be expressed in plain
language (no codes),
precisely indicate the
problem, and
constructively suggest a
solution.

And they should be

polite…
 #10: Aesthetic and
minimalist design

Dialogues should not contain information which is irrelevant

or rarely needed.
Every extra unit of information in a dialogue competes with
the relevant units of information and diminishes their relative
visibility.
 Gestalt principles and their
application
• Gestalt principles are fundamental principles of perception
that help us understand how people perceive and make
sense of visual information.
• Key Principles:
1. Proximity: Elements that are close together are perceived as a group.
2. Similarity: Elements with similar visual characteristics are perceived as related.
3. Continuity: Elements arranged in a continuous line or curve are seen as connected.
4. Closure: The mind tends to complete incomplete shapes or patterns.
5. Figure-Ground: We perceive objects as either the main focus (figure) or the
background.

• Application:
1. Gestalt principles are widely used in design, including graphic design, web design, and
user interface design.
2. They help designers create visually appealing and effective layouts.