CMPT 363: User Interface Design
Fall 2022
Week 13: General Interface Design Principles
Instructor:Victor Cheung, PhD
School of Computing Science, Simon Fraser University
© Victor Cheung, 2022
Recap from Last Lecture
• Evaluating Interfaces with Users: Experiments
• Lab experiments
• Why, what, where, who, how
• Terminologies
• Hypothesis, independent/dependent variables, relationships, conditions – things you need to decide
• Between-/within-subjects – ways to test your designs
• Confounds, validity, reliability – things to check when planning, analyzing, & reporting results
2
Today
• General interface design principles
• Visual design principles
• C.R.A.P. design principles
• Gestalt principles
• Interface-specific considerations
• Different (computer) user interface types (cont’d)
• Future
• Dark patterns of interface design
3
General Interface Design Principles
Visual design & Gestalt
4
The Dominating Interface is Still GUI
• Easy to manufacture, lots of ways to improve (e.g., resolution, colour space)
• Compatible with many media (e.g., images, videos, texts)
• Easy to learn, use, and remember
• But! GUI does not automatically mean a good interface
• Many software systems are never used due to poor UI design
• E.g., hard to find items, input mechanisms that are hard to use
• There are some design principles that we can follow to make it better! Top: Netflix’s search keyboard
Bottom: Playstation’s search keyboard
5
Visual Design Principle #1 – Spacing
• Areas without content (sometimes called “negative space”)
• Margins, gutters, column-spacing, line-spacing, padding
• “Macro white space” – space between major layout elements (e.g., margins)
• Control overall amount of information available, draw attention
• “Micro white space” – space within content elements (e.g., line/paragraph-spacing)
• Helps with readability
• Reading/Watching:
https://www.interaction-design.org/literature/article/the-power-of-white-space
Typography tutorial: https://www.youtube.com/watch?v=QrNi9FmdlxY Margin/gutter setup in MS Word
6
Visual Design Principle #1 – Spacing – Example (1)
7
Google’s landing page
Visual Design Principle #1 – Spacing – Example (2)
8
Google’s result page of searching “user interface design”
Visual Design Principle #2 – Grouping
• Law of Proximity: we perceive things closer to together as being related to each other
• Good grouping allows users to quickly learn about the interface by association, and find things quicker
• Also makes mistakes less likely to occur (e.g., un-related buttons put further away from each other)
• Reading:
https://www.interaction-design.org/literature/article/don-t-put-that-there-the-importance-of-proximity-in-design
9
Visual Design Principle #2 – Grouping – Example (1)
• Which one is better?
10
Visual Design Principle #2 – Grouping – Example (2)
• What happens if we don’t have space?
• Use dividers or containers
11
Visual Design Principle #3 – Simplicity
• It is important to not overwhelm user with “visual clutters”
• Otherwise will lose user’s attention easily, and more prone to make mistakes
• Some ways to achieve simplicity
• Hide infrequently used functions until they are needed (e.g., collapsed menu, tooltip)
• Provide good defaults that people are likely to use
• Incorporate wizards to help simplify/guide complex or infrequent tasks
• Reading: Not a simple interface
https://www.ui.expert/blog/using-visual-simplicity-in-user-interface-design/ Cragslist Vancouver
12
Visual Design Principle #3 – Simplicity – Example
Wikipedia’s landing page 13
C.R.A.P. Design Principles
• Contrast – make different things stand out from each other, bring out dominant elements & mute lesser ones
• Repetition – repeat conventions throughout to tie elements together
• Alignment – visually associate related elements by lining them up
• Proximity – group related elements, separate unrelated elements
• Reading:
https://vwo.com/blog/crap-design-principles/
14
Contrast.R.A.P Design Principles
• Can be by colour, size, weight, shape
Attention
15
C.Repetition.A.P. Design Principles
• Maintain consistency in ways of presenting information (e.g., colour, size, weight, shape)
16
SFU’s website
C.R.Alignment.P. Design Principles
• Place elements in association with some invisible guiding lines
(e.g., edge/center alignment, left/right/center/justify)
Edge alignment
Center alignment
17
https://960.gs/
C.R.A.Proximity Design Principles
• Same as Grouping, plus a little bit of Spacing
VS
18
Gestalt (Visual Perception) Principles
• “Form”, “shape” in German
• A group of visual perception principles developed by German psychologists in 1920s
• Built on the theory that “an organized whole, is perceived as greater than the sum of its parts”
19
https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
7 Gestalt Principles
• Source: https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
Proximity Common Region Similarity Closure
20
Symmetry Continuation Common Fate
10Min Break – Examine The Use of C.R.A.P.
21
https://support.apple.com/ https://www.nytimes.com/
Interface-Specific Design Considerations – Web
• Web interfaces are becoming more like GUIs (e.g., online portals, web apps)
• Need to consider how to design, present, and structure information and system behaviour
• Navigation is also important
• Useful readings:
• https://www.interaction-design.org/literature/article/don-t-make-me-think-key-learning-points-for-ux-design-for-the-web
• https://blog.hubspot.com/blog/tabid/6307/bid/30557/6-guidelines-for-exceptional-website-design-and-usability.aspx
• https://www.codementor.io/design/tutorial/6-ux-web-design-best-practices
• https://www.uxpin.com/studio/blog/web-layout-best-practices-12-timeless-ui-patterns-explained/
• Top 10 Mistakes in Web Design: https://www.nngroup.com/articles/top-10-mistakes-web-design/
22
Interface-Specific Design Considerations – WIMP Icons
• Icons should map representation to what they are referring to
• Similarity (e.g., picture of file to represent a file) – most effective, but doesn’t work for abstract actions
• Analogy (e.g., picture of scissors to present “cut”) – useful for abstract actions/representations
• Arbitrary (e.g., use ‘x’ to represent “delete”) – versatile, but requires learning, might create confusion
similarity arbitrary analogy
23
analogy similarity similarity
Interface-Specific Design Considerations – WIMP Menus
• Use drop-down arrow to indicate presence of sub-menu
• Don’t change menu item names dynamically (use bullets & checkmarks to
show selection)
• Each menu has at most 25 items in that level (if not consider toolbars or
sub-menus)
• Organize menu items into 7 or less groups, put separators between them
• Provide access keys & shortcut keys (for quick access and accessibility)
• Start menu item names with a verb, noun, or noun phrase, follow
hierarchical structure (e.g., Insert > text)
Refer to this for more details
https://docs.microsoft.com/en-us/windows/win32/uxguide/cmd-menus 24
Interface-Specific Design Considerations – Mobile
• Mobile devices are intended to be used on the move and help users to engage in a variety of activities
• Order rides & food
• Online banking, dating, shopping, meetup
• Entertainment, social media
• Lookup maps, way-finding
• …etc.
• Need to consider
• Smaller screen size, less input space, bursts of usage
• Users expect fast response, personalized/streamline experience
25
What’s in the Future?
Advancements in materials and sensing techniques
26
Flexible Displays
27
Flexible Displays – Foldable Devices
https://www.samsung.com/ca/smartphones/galaxy-fold/
https://www.motorola.ca/smartphones-razr/p 28
Wearables
• Electromyographic (EMG sensors)
• Photoplethysmography (PPG sensors)
https://developerblog.myo.com/raw-uncut-drops-today/ https://www.allaboutcircuits.com/news/fitness- 29
technology-heart-rate-monitors/
Brain Activities
• Establishes a communication pathway between the user’s brain waves and an external device
https://choosemuse.com/muse-2/ From ID-Book p251. Original source: Brown University 30
Human-Robot Interaction
• Humanoid computers, automated assistants
31
Future Visions
• How many of them are here now? Do they all make sense? What do they have in common?
• Corning’s Vision (in 2013): https://www.youtube.com/watch?v=PfgmlVxLC9w
• Intel’s Vision (in 2014): https://www.youtube.com/watch?v=9Tw-f3i-08k
• Microsoft’s Vision (2015): https://www.youtube.com/watch?v=w-tFdreZB94
• …
• Microsoft’s Mesh (2021): https://www.youtube.com/watch?v=Jd2GK0qDtRg
32
The Cortical
Homunculus
• A distorted representation of the human
body based on a neurological “map” of the
areas and proportions of the human brain
dedicated to processing motor functions, or
sensory functions, for different parts of the
body – Wikipedia
• Shows opportunities on how we can design
interfaces that best cater the capability of
different parts of our body
33
By File:1421 Sensory Homunculus.jpg: OpenStax Collegederivative work: Popadius - This file was derived
from: 1421 Sensory Homunculus.jpg:, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=88916983
DARK PATTERNS OF INTERFACE DESIGN
34
What Are Dark Patterns?
• “Tricks used in websites and apps that make you do things that you didn’t mean to, like buying or signing up for something.”
– Harry Brignull (UX specialist)
35
https://www.youtube.com/watch?v=Zmv7cRELFtM
Tricks Used in The Dark Patterns
• Visual Interference – making things hard to see so users can’t
see them easily
• Bad contrast
• Small fonts
• Different shapes
• Hidden until you scroll, expand, or click through
mensjournal.com Discord app
36
Tricks Used in The Dark Patterns
• Obstruction – adding friction to make things
hard for users to do a certain thing
• Visual interference
• Easy-in-difficult-out
A couple of
weeks!?
37
Tricks Used in The Dark Patterns
• Negative Options – adding things to users by default
• Defaults
• Opt-out instead of Opt-in
• Trick Questions – using confusing languages to
misguide users
• Double-negative (“choose YES if you do not want to…”)
• Opposing questions in the same section
Source:
https://www.deceptive.design/types/trick-questions
IKEA
38
One More Example…
• Ads in disguise
This is an ad
• Think: which of Norman’s
Fundamental Principles of This is also an ad
Interaction is misused here?
This is also an ad!
39
https://notepad-plus-plus.org/downloads/v8.4.7/
Why Do We Need to Know This?
• Reminder – so that your designs don’t fall into those things
• Public knowledge – if it is known by everyone, it’s harder to pull off
• Name & shame – companies will stay away when their practice
damages their branding/reputation
• Raise awareness – ultimately establish a “code of conduct” or even
regulations to protect users from those tricks
Source: Brignull’s 2010 talk
40
Summar y
• General interface design principles
• Visual design principles – help organizing visual elements (what to include, where to place, how to present)
• C.R.A.P. design principles – general guidelines for presentation
• Gestalt principles – understand how human perceives visual content
• Interface-specific considerations – understand the context, users, and capabilities of the technologies
• Different (computer) user interface types (cont’d)
• Future – flexible displays, wearables, brain activities
• Dark Patterns of Interface Design
• Tricks – making you do things you didn’t mean to, or can’t do things easily the why you want to
41
Post-Lecture Activity
• Read/watch these (and those in the slides)
• Deshdeep, N. How to Use C.R.A.P. Design Principles for Better UX?
https://vwo.com/blog/crap-design-principles/
• Gestalt Principles
https://www.interaction-design.org/literature/topics/gestalt-principles
• Harry Brignull’s talk on Dark Patterns (in 2010, 22m)
https://www.youtube.com/watch?v=zaubGV2OG5U
• Do the Course Experience Survey by Dec 6
https://www.sfu.ca/course-experience-surveys.html
42
Guest Lecture on Dec 2
• Dr. Angelica Lim
• Title: Multimodal Machine Learning for Human Robot
Interaction (HRI)
• Learn about the area of human-robot interaction and some
of the challenges and design considerations when creating
interfaces integrating voice, gesture, and face
43
