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