Design Guidelines and Models - Lecture 5 - Human-Computer Interaction (1023841ANR)

This lecture forms part of a Human-Computer Interaction course given at the Vrije Universiteit Brussel.

1. 2 December 2005
Human-Computer Interaction
Design Guidelines and Models
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
beatsigner.com

2. Beat Signer -Department of Computer Science [email protected] 2October27, 2023
Design Guidelines
▪Design guidelines are based on human psychology: how
people perceive, learn, reason, remember and convert
intentions into action
▪Over the last 40 years various guidelines and heuristics
have been defined and adapted / extended for new
interface types

3. Beat Signer -Department of Computer Science [email protected] 3October27, 2023
Eight Golden Rules of Interface Design
▪Strive for consistency
▪Seek universal usability
▪Offer informative feedback
▪Design dialogues to yield closure
▪Prevent errors
▪Permit easy reversal of actions
▪Keep users in control
▪Reduce short-term memory load
Ben Shneiderman

4. Beat Signer -Department of Computer Science [email protected] 4October27, 2023
Ten Usability Heuristics for UI Design
▪Visibility of system status
▪Match between system and real world
▪User control and freedom
▪Consistency and standards
▪Error prevention
▪Recognition rather than recall
▪Flexibility and efficiency of use
▪Aesthetic and minimalistic design
▪Help users recognise, diagnose and recover from errors
▪Help and documentation
Jacob Nielsen

5. Beat Signer -Department of Computer Science [email protected] 5October27, 2023
Visibility of System Status
▪Keep users informed
about what is going on
(system state)
▪feedback after each action
(as quickly as possible)
▪builds up trust
▪Users learn about the
outcome of previous
interaction and can plan
the next steps

6. Beat Signer -Department of Computer Science [email protected] 6October27, 2023
Visibility of System Status …
▪Provide feedback about
what action has been
done, allowing users to
continue with their activity
▪audio, tactile, verbal, visual
or a combination of this
feedback

7. Beat Signer -Department of Computer Science [email protected] 7October27, 2023
Match Between System and Real World
▪Use words and concepts
familiar to the users
▪Follow real-world
conventions
▪natural mapping
▪skeumorphic user interfaces
-e.g. recycle bin icon

8. Beat Signer -Department of Computer Science [email protected] 8October27, 2023
User Control and Freedom
▪Actions often performed
by mistake
▪need “emergency exit” to
leave unwanted actions
▪Support undo and redo
▪fosters a sense of freedom
▪Show clear way to exit
current action
▪e.g. cancel button

9. Beat Signer -Department of Computer Science [email protected] 9October27, 2023
Consistency and Standards
▪Internal consistency
▪within a single product
▪External consistency
▪maintain consistency across
products by for example
following standards
▪e.g. shopping cart feature on
e-commerce websites
▪Consistent interfaces are
easier to learn and use

10. Beat Signer -Department of Computer Science [email protected] 10October27, 2023
Consistency and Standards …
▪Place information and controls in consistent locations
▪based / supports on perceptual patterns / frames
▪Internal and external keystroke consistency
▪e.g. CTRL-X and CTRL-V
▪External consistency of gesture-based interfaces?
J. Johnson, DesigningwiththeMindin Mind

11. Beat Signer -Department of Computer Science [email protected] 11October27, 2023
Error Prevention
▪Two types of errors
▪slips are unconscious errors
caused by inattention
▪mistakes are conscious
errors based on mismatch of
user’s mental model
-inaccurate or incomplete
information
▪Design to prevent
mistakes
▪provide accurate and easy
understandable information

12. Beat Signer -Department of Computer Science [email protected] 12October27, 2023
Error Prevention …
▪Design to prevent slips
▪large click targets
▪put space between targets
▪warn users of incompleteness
▪prompt users to confirm actions
▪e.g. do not place ‘save’ menu entry next to ‘exit’ menu entry
▪…
▪Make risky operations hard to do
▪‘Delete All’ with confirmation defaulting to ‘Cancel’
▪ask confirmation from multiple users
▪Prevent permanent errors by supporting undo
▪Prevent “high-cost” errors first

13. Beat Signer -Department of Computer Science [email protected] 13October27, 2023
Recognition Rather Than Recall
▪Reduce a user’s memory
load by making elements
and actions visible
▪limited short-term or working
memory
▪Seeing / hearing and
choosing is easier than to
recall and type
▪Recall
▪reactivating a neural pattern
when the original stimulus is
absent

14. Beat Signer -Department of Computer Science [email protected] 14October27, 2023
Recognition Rather Than Recall …
▪Use pictures where possible to convey functions
▪e.g. toolbar icons
▪people recognise pictures very quickly
▪We also recognise small versions of the pictures
▪e.g. thumbnails of slides in presentation overview
▪Provide cues to let users know where they are
▪e.g. different screen backgrounds when having multiple screens
▪Simplify authentication
▪e.g. biometric authentication rather than remembering passwords
▪Avoid designs that have modes (or provide visible
feedback about modes)

15. Beat Signer -Department of Computer Science [email protected] 15October27, 2023
Flexibility and Efficiency of Use
▪Offer accelerators like
keyboard shortcuts and
touch gestures
▪Support personalisation
and customisation by
tailoring content and
functionality

16. Beat Signer -Department of Computer Science [email protected] 16October27, 2023
Aesthetic and Minimalistic Design
▪Interfaces should not
contain irrelevant
information
▪focus on the essentials
▪aim for high signal-to-noise
ratio

17. Beat Signer -Department of Computer Science [email protected] 17October27, 2023
Help Users Recognise/Recover From Errors
▪Inform users when error
occurred (recognise)
▪clear error messages
▪Tell users what went
wrong (diagnose)
▪Offer users a solution
(recover)
▪shortcut to solution
▪provide undo function
-operations within an app or more
complex transitions (e.g. order in
online store)

18. Beat Signer -Department of Computer Science [email protected] 18October27, 2023
Help and Documentation
▪Ensure that it is easy to
search for help
▪Present contextual help
and documentation
▪focused on the user’s task
▪List concrete steps to be
carried out

19. Beat Signer -Department of Computer Science [email protected] 19October27, 2023
Visibility
▪Visible functions ensure
that a user knows what to
do next
▪voice mail system vs. marble
answering machine
▪Non-visible functions might
be harder to use
▪sensor-enabled faucets
▪sensor-enabled lights
▪…

20. Beat Signer -Department of Computer Science [email protected] 20October27, 2023
Simplicity
▪Balance offered features
vs. ease of use (usability)
▪Do not oversimplify and re-
move necessary features
-“users want complexity”
(Don Norman)
“In anything at all, perfection
is finally attained not when
there is no longer anything to
add, but when there is no
longer anything to take
away.”
Antoine de Saint Exupéry
Complexremote controls

21. Beat Signer -Department of Computer Science [email protected] 21October27, 2023
Mapping
▪Natural mapping makes it
easy to understand which
control performs which
action
▪“If a design depends upon
labels, it may be faulty.
Labels are important and
often necessary, but the
appropriate use of natural
mappings can minimise the
need for them. Wherever
labels seem necessary,
consider another design.”
Seat adjustmentin a Mercedes-Benz
Kitchen stove withnaturalmappingon theright

22. Beat Signer -Department of Computer Science [email protected] 22October27, 2023
Mapping …
▪What about an alternative
light switch design making
use of natural mapping
(without labels)?
John Rambow, flikr.com

23. Beat Signer -Department of Computer Science [email protected] 23October27, 2023
Gestalt Principles
▪Law of proximity
▪items that are closer together
appear to be grouped
▪Law of similarity
▪similar-looking items appear
grouped
▪Law of Continuity
▪visually-aligned items are
perceived as continuous
forms
▪…

24. Beat Signer -Department of Computer Science [email protected] 24October27, 2023
Information Design
▪Poor information design can disrupt reading
▪uncommon or unfamiliar vocabulary
-interrupts the reading process, e.g. “Please reauthenticate” vs. “Login again”
▪tiny or fancy fonts
▪text on noisy background
▪contrast of text and background
▪information buried in repetition (noise from text itself)
-e.g. selection list with the following entries
•Backlit Keyboard (English) & User’s Guide (English)
•Backlit Keyboard (Western Spanish) & User’s Guide
•Backlit Keyboard (French) & User’s Guide
▪centred text
-eyes are trained to go back to the same horizontal position
▪Don’t disrupt reading – support it!

25. Beat Signer -Department of Computer Science [email protected] 25October27, 2023
Guidelines for Using Colours
▪Use distinctive colours
▪users can most easily distinguish colours on the colour-perception
channels (red-green, yellow-blue and black-white)
▪Separate strong opponent colours
AVOIDTHIS!

26. Beat Signer -Department of Computer Science [email protected] 26October27, 2023
Guidelines for Using Colours …
▪Distinguish colours by saturation and brightness as well
as hue
▪avoid subtle colour differences
▪check whether elements are distinguishable in greyscale
▪Avoid colour pairs that colour-blind people cannot
distinguish
▪Make use of existing tools for selecting (colourblind-
friendly) palettes
▪e.g. https://coolors.co

27. Beat Signer -Department of Computer Science [email protected] 27October27, 2023
Video: Inattentional Blindness

28. Beat Signer -Department of Computer Science [email protected] 28October27, 2023
Change Blindness

29. Beat Signer -Department of Computer Science [email protected] 29October27, 2023
Change Blindness …

30. Beat Signer -Department of Computer Science [email protected] 30October27, 2023
Inattentional / Change Blindness
▪Our goals strongly focus our attention
▪Tendency to only perceive and notice things that match
our goal
▪“following the sent of information toward the goal”
▪might miss changes at other parts of the screen
▪Our limited peripheral vision might further reduce the
things we see on a screen
▪show information where users are already looking at
▪use visual features / channels that that popout (e.g. blinking) to
highlight a change

31. Beat Signer -Department of Computer Science [email protected] 31October27, 2023
Affordances
▪Term affordance introduced in 1977 by psychologist
James J. Gibson in the 'The Theory of Affordances'
▪defined as all possible actions with an object in an environment
independent of an individual's ability to recognise these actions
▪Don Norman refined the term affordances in the context
of human-machine interaction
▪only those possible actions with an object that can be recognised
by an individual
▪an affordance of an object tells us something (gives us a clue)
about how to use the object
▪good interaction design will take affordances and the related
discoverability into account
▪screen-based interfaces offer perceived affordances which are
learned conventions

32. Beat Signer -Department of Computer Science [email protected] 32October27, 2023
Video: The Norman Door

33. Beat Signer -Department of Computer Science [email protected] 33October27, 2023
Fitts’s Law (1954)
▪Fitts’s Law predicts that the time to point
at an object using a device (e.g. mouse) is
a function of the distance from the target
object and the target object’s size
�=??????log
2Τ??????�+1.0
T = time to move the pointer to the target
D = distance between the pointer and the target
S = size of the target k = constant
▪The further away and the smaller the object, the longer
the time to locate it and point to it
Paul Fitts

34. Beat Signer -Department of Computer Science [email protected] 34October27, 2023
Fitts’s Law (1954) …
▪Make click targets (e.g. buttons, menu items, links) large
enough that they are quick and easy to hit
▪Checkboxes, radio buttons and toggle switches should
also accept click on their label to increase the area
▪Place important targets near the edge of the screen
▪“infinite target size“ along screen edges (if not other screen
connected to that edge)
▪On smartphones consider using menus that people can
easily reach with their thumb while holding the phone

35. Beat Signer -Department of Computer Science [email protected] 35October27, 2023
Design-Pattern Guidelines: Study Guide
▪Additional specific design guidelines for specific interface
patterns based on the Ten Usability Heuristics for User
Interface Design
▪input controls
▪forms and wizards
▪tooltips and dialogues
▪icons and indicators
▪menu design
▪navigation elements
▪search
▪https://www.nngroup.com/articles/design-pattern-guidelines/

36. Beat Signer -Department of Computer Science [email protected] 36October27, 2023
Material Design
▪Design language
developed by Google
▪Android-oriented
▪grid-based layouts,
responsive animations,
depth effects, …
▪https://m3.material.io/

37. Beat Signer -Department of Computer Science [email protected] 37October27, 2023
Apple Human Interface Guidelines
▪Design guidance for
common actions and
experiences
▪entering data
▪file management
▪feedback
▪searching
▪undo and redo
▪https://developer.apple.com/
design/human-interface-
guidelines/

38. Beat Signer -Department of Computer Science [email protected] 38October27, 2023
Exercise 5
▪FIGMA prototyping solution

39. Beat Signer -Department of Computer Science [email protected] 39October27, 2023
References
▪ Designing the User Interface: Strategies for
Effective Human-Computer Interaction, Ben
Shneiderman et al., Pearson (6th edition),
April 2016, ISBN-13: 978-0134380384
▪ Designing with the Mind in Mind: Simple Guide to
Understanding User Interface Design Guidelines,
Jeff Johnson, Morgan Kaufmann (3rd edition),
November 2020, 978-0128182024
▪ The Design of Everyday Things, Don Norman,
Basic Books (revised and expanded edition),
November 2013, ISBN-13: 978-0465050659

40. Beat Signer -Department of Computer Science [email protected] 40October27, 2023
References ...
▪Eight Golden Rules of Interface Design
▪https://www.cs.umd.edu/users/ben/goldenrules.html
▪Ten Usability Heuristics for User Interface Design
▪https://www.nngroup.com/articles/ten-usability-heuristics/
▪Visibility of System Status
▪https://www.youtube.com/watch?v=cTtc90jCULU
▪Match Between System and Real World
▪https://www.youtube.com/watch?v=0TAt9Pln51g
▪User Control and Freedom
▪https://www.youtube.com/watch?v=MXuk-fdbr0A

41. Beat Signer -Department of Computer Science [email protected] 41October27, 2023
References ...
▪Consistency and Standards
▪https://www.youtube.com/watch?v=Ibndy9KLOSQ&t=1s
▪Error Prevention
▪https://www.youtube.com/watch?v=imS9s1DUY-I
▪Recognition Rather Than Recall
▪https://www.youtube.com/watch?v=imS9s1DUY-I
▪Flexibility and Efficiency of Use
▪https://www.youtube.com/watch?v=LoTdRTBB8BQ
▪Aesthetic and Minimalistic Design
▪https://www.youtube.com/watch?v=ZgbRmeWDgd0

42. Beat Signer -Department of Computer Science [email protected] 42October27, 2023
References ...
▪Help Users Recognise, Diagnose and
Recover From Errors
▪https://www.youtube.com/watch?v=cCun-ReLTFI
▪Help and Documentation
▪https://www.youtube.com/watch?v=iIQVRzatb50
▪The Norman Door
▪https://www.youtube.com/watch?v=yY96hTb8WgI
▪Colour Palette Generator
▪https://coolors.co
▪Material Design
▪https://m3.material.io

43. Beat Signer -Department of Computer Science [email protected] 43October27, 2023
References ...
▪Apple Human Interface Guidelines
▪https://developer.apple.com/design/human-interface-guidelines/
▪Inattentional Blindness
▪https://www.youtube.com/watch?v=IGQmdoK_ZfY
▪Change Blindness
▪https://www.youtube.com/watch?v=VkrrVozZR2c

44. 2 December 2005
Next Lecture
Evaluation Methods