31260 | 42017
Fundamentals of Interaction Design
Design Principles Recap
(Preparing for Journal Entry #3)
31260 | 42017 Fundamentals of Interaction Design 2
Design principles - which ones can you spot?
• Visibility
• Feedback
• Constraints
• Consistency
• Affordances
• Mapping
• Signifiers
Source:
[Link]
E42K7P5V&hash=item42679142dd:g:pWcAAOSwP2JjP-Y~&var=587081049577
31260 | 42017 Fundamentals of Interaction Design 3
Design principles - which ones can you spot?
× Visibility
✓ Feedback
× Constraints
✓ Consistency
✓ Affordances
× Mapping
✓ Signifiers
Good: feedback from hovering on
the image (pop-up zoomed image
on the right), “consistent
affordances” with clickable objects
either underlined, boxed or as Bad: too much visibility (all presented
buttons, signifier (“click to enlarge”. at once, cognitive and visual overload),
constraints (all options available at
once may lead to errors), no clear
mapping of sections and objects
31260 | 42017 Fundamentals of Interaction Design 4
Which design principles are in place here?
2
1. You tap on the locked screen and this icon (#1) shows up. What
principle is in action there?
2. And the time displayed here (#2), is been designed using what
principle?
3. The two icons at the bottom (#3), what principle do they follow?
4. And the text at the bottom (#4)… telling me how to interact, is a
good example of what?
3 3
4
31260 | 42017 Fundamentals of Interaction Design 5
Which design principles are in place here?
2
1. Feedback: after tapping, I know the phone is unlocked
2. Visibility: biggest text on-screen, central placement
3. Consistency: same shape, size, colour, mirrored
placement, use of well-known icons & Mapping: through
Gestalt grouping (although not very much proximity)
4. Signifiers: that I can start swiping from here
3 3
4
31260 | 42017 Fundamentals of Interaction Design 6
Design principles
• Visibility
• Feedback
• Constraints
• Consistency
• Affordances
• Mapping
• Signifiers
Source:
[Link]
31260 | 42017 Fundamentals of Interaction Design 7
Design principles
Good: visibility and mapping
(central image large, appealing,
clear title + line indicating a
sequence of videos coming),
feedback (drop-down menu options
change colour as you hover over),
externally consistent with UTS
identity and other UTS websites.
Bad: too much visibility (main image
takes over, while Create, Log in, and
My Media are barely visible in a
corner), weak feedback for clickable
objects, lack of internal consistency
in behaviour of menus (for same
type, some display upon hovering
over, others require clicking). Poor
mapping with important sections at
low hierarchy.
Source:
[Link]
31260 | 42017 Fundamentals of Interaction Design 8
Design principles (practise on your own by visiting the website)
• Visibility
• Feedback
• Constraints
• Consistency
• Affordances
• Mapping
• Signifiers
Screenshot of the website in 2024,
for reference and comparison
Source: [Link]
31260 | 42017 Fundamentals of Interaction Design 9
Design principles (practise on your own by visiting the website)
• Visibility
• Feedback
• Constraints
• Consistency
• Affordances
• Mapping
• Signifiers
Screenshot of the website in 2025
(explore this one)
Source: [Link]
31260 | 42017 Fundamentals of Interaction Design 10
What examples of visibility (good or bad) can you spot here?
31260 | 42017 Fundamentals of Interaction Design 11
What examples of visibility (good or bad) can you spot here?
Reasons for good visibility in this Reasons for bad visibility in this
interface: interface:
○ Clearly visible, draws attention ○ Not clearly visible
○ Good size, makes it stand out ○ Lack of contrast, reduced size
(e.g. search bar biggest UI ○ I have no idea what some
element) things mean
○ Contrasting colours ○ I don’t know how to interact to
○ Prominent placement affect some notifications
○ Based on metaphors (e,g, ○ Some elements may be only
search icon is a magnifying for expert/experienced users
glass, I think it’s a search
function; checks follow the
convention of correct)
31260 | 42017 Fundamentals of Interaction Design 12
Visibility
• Let users know there is an opportunity to interact: leading to discoverability and understanding
• Make it reasonably predictable what will happen
• Provide cues and information - but do not overdo it
• Good visibility means that obvious prompts and cues are present which:
• Lead the user through an interaction
• Guide them through a series of tasks
• Indicate what possible actions are available to them
• Communicate the context of the situation
31260 | 42017 Fundamentals of Interaction Design 13
Visibility prompts and cues
➢ Does it stand out? Is it easy to locate?
➢ Use of colour - does the colour grab attention?
➢ Contrast - is it easy to see given the background colour?
➢ Size - how big is it compared to the other elements on the interface?
➢ Prominence in placement - where is it placed on the interface?
the centre?
➢ Is the placement/location consistent with similar interfaces?
➢ How cluttered is the interface?
31260 | 42017 Fundamentals of Interaction Design 14
Which principle is in action here? Animation: Drag and drop
(+ confirmation)
Feedback communicates what action has source:
been done and what has been [Link]
Image-Uploading-Animation
accomplished, allowing the person to know
what to do next (and continue with the activity).
Feedback must be immediate and informative
• Location: where am I?
• Current status: what’s happening, and is it still
happening?
• Future status: what will happen next?
• Outcomes and results: what have just The uploading sequence (see link) demonstrates the
happened? completion of three stages via continuous feedback:
✓ dragging a document
✓ upload in progress
✓ upload complete
31260 | 42017 Fundamentals of Interaction Design 15
Feedback (types)
• Audio
• Text
• Animation
• Visual effects
• Tactile
• Olfactory
• x Combinations
Don’t get stuck on visuals only! Address as many human senses as possible!
31260 | 42017 Fundamentals of Interaction Design 16
What are the areas framed in red good examples of?
31260 | 42017 Fundamentals of Interaction Design 17
Constraints
• Restricting the possible actions that can be performed at one
point in time, usually limiting choices.
• Buy WHY?
o Help prevent users from selecting incorrect options (and making
mistakes)
o let people determine, without hesitation, the proper course of action (even
in a new situation)
• Examples:
o batteries must be inserted in a specific orientation
o a mouse cursor does not move past the screen
o you must not continue past a red light
o you can’t see the next question in a quiz until you answer the current one
31260 | 42017 Fundamentals of Interaction Design 18
What are the areas framed in red good examples of?
Internal consistency
(within the interface)
External consistency (across similar products)
31260 | 42017 Fundamentals of Interaction Design 19
Consistency
• A comparison: a relationship between two
interface/interaction elements
• Consistency can be in terms of:
o appearance (looks the same)
o visual metaphors, icons, elements used
o steps needed to accomplish similar interactions, or
o standard conventions
• Components with similar behaviours should have a
similar appearance
• Components with different behaviours should have a
different appearance
31260 | 42017 Fundamentals of Interaction Design 20
Affordances: to give a clue
One of these is different from the others, which one is it and why?
Hint: one requires additional “instructions” signifying the action…
31260 | 42017 Fundamentals of Interaction Design 21
Affordances: to give a clue (without any text)
• An attribute of an object - digital or tangible –
that provides a clue to its function and use, and
therefore communicating how to interact with it.
e.g. a mouse button invites pressing, a door handle affords pulling, a
3D-looking button suggests clicking on
“… if a surface is horizontal, flat, extended, rigid, and knee-high
relative to a perceiver, it can in fact be sat upon”. With these
properties, the surface “should look sit-on-able”.
(Gibson, 1979. The Ecological Approach to Visual Perception)
Take this idea and turn it into design!
Source: [Link] @conhate
31260 | 42017 Fundamentals of Interaction Design 22
Can’t have enough of Don Norman & affordances!
Check out this ‘Norman Doors’ video
31260 | 42017 Fundamentals of Interaction Design 23
Signifier
• Sign, label, hint, short instruction: e.g. “touch to start”,
“push to open”, “turn to release”, “press and hold” Signifier
• Usually needed when affordances fail, aren’t obvious
or well-designed.
• Implemented to reduce error in using something,
when users are found to be unsure of how to interact
with the design accurately or appropriately
• They are used to better communicate the purpose,
structure, and operation of the device to the people
who use it so that they understand how to use it
correctly. Not descriptors of the object but of HOW to ‘action’
31260 | 42017 Fundamentals of Interaction Design 24
Signifier
Signifier
NOT a
signifier
Image A Image B