CMPT 363: User Interface Design

Fall 2022

Week 2: Introduction to HCI/UX (Cont’d)

Instructor:Victor Cheung, PhD
School of Computing Science, Simon Fraser University

© Victor Cheung, 2022

Think about
how the user
would feel
about this Would you
want to use
this (and for
how long)?

Think about
how the
others would
feel about this

Notice anything odd?

Source (Sept 2022): https://en.shiftall.net/products/mutalk 2

 Recap from Last Lecture

• User Interface Design

• Poor designs could lead to frustration and even worse consequences
• Design towards usable, useful, and meaningful technologies
• Designing user interfaces is not a trivial task
• User interfaces are everywhere and touch on many aspects

3
 Today

• HCI & UX
• Their focus and relationship
• Importance of good user interfaces
• Why do we need & how to design good user interfaces

4
 Computer Performance VS Human Performance

• Human performance is more or less constant

5
Slide idea by Bill Buxton
 Why Are User Interfaces Important?

• Help people to do things faster and more accurate

• There are well-defined methods and techniques to make interfaces like that
• Usefulness of the interface is critical to sales
• People want “user friendly” products
• People leave a website if it’s hard to use, buy another brand if a product doesn’t do the job
• “accessible”, “comprehensive”, …etc
• Fun watch: Jony Ive’s adjectives https://www.youtube.com/watch?v=fHphFfv14wc

6
 Why Are User Interfaces Important? (Cont’d)

• Quick Poll: How many of you read the user manual when you buy a new device?

• Many people don’t read user manual and just use the system
• Many rely on the interface to “walk them through” or “offer assistance when needed”
• Fun read: Novick & Ward. 2006. Why don’t people read the manual?
https://scholarworks.utep.edu/cs_papers/15/

7
 What is HCI & UX?

• Human-Computer Interaction (HCI) is defined as (Hewett et al. 1992, p.5)

• a discipline concerned with the design, evaluation and implementation of interactive computing
systems for human use and with the study of major phenomena surrounding them
• User Experience (UX) is defined as (Norman & Nielsen)
• a topic that encompasses all aspects of the end-user's interaction with the company, its services,
and its products

• User Interface (UI) is only one element of HCI as well as UX!

8
Thomas T. Hewett, Ronald Baecker, Stuart Card, Tom Carey, Jean Gasen, Marilyn Mantei, Gary Perlman, Gary Strong, and William Verplank. 1992.
ACM SIGCHI Curricula for Human-Computer Interaction. Technical Report. Association for Computing Machinery, New York, NY, USA.
 9
Thomas T. Hewett, Ronald Baecker, Stuart Card, Tom Carey, Jean Gasen, Marilyn Mantei, Gary Perlman, Gary Strong, and William Verplank. 1992.
ACM SIGCHI Curricula for Human-Computer Interaction. Technical Report. Association for Computing Machinery, New York, NY, USA.
 What About UX?

• Historically, HCI was concerned primarily with the interaction between the user
(human) and the system (computer), and how things get done
• Mostly focused the time & place where the interaction is happening
• UX covers a wider range of emotions and felt experiences
• Also covers more than just computers
• Watch Steve Jobs talked about customer experience
https://www.youtube.com/watch?v=r2O5qKZlI50

10
 Designing for The User, Not Yourself

• In both HCI & UX, the (human) users play a crucial role
• How they use & perceive the system
• How they feel about the experience of using the system
• …
• It is therefore important to understand the users when designing the user interface
• What are they capable of (or not capable of)?
• What do they need?
• …
11
 A User-Centered Design (UCD) Approach

• A systematic way of understanding Understand

context of
and designing for end users use

• An iterative process
• End users are involved in every step
Evaluate Specify
designs requirements

• More on this approach later

Create design
solutions
12
 Con si de r T h i s
E l evator Con tro l
De si gn

Which button would you press if

you want to go up?

How would you redesign the

interface to make it clear?

Think further: What does “up”

actually mean? Does that mean you
want to go up? Or you want the
elevator to up to you (if you are
not at the ground floor)?

13

Source: https://uxdesign.cc
 Funny Bits: Myth about USB

• Myth: in general, it takes 3 trials to

correctly plug a USB to a socket

• How would you redesign the interface

to make it clear?

14

Source: https://www.starecat.com
 Many Examples (Both Good & Bad) in The World

15
http://www.usabilitymatters.org To Park or Not to Park? by Nikki Sylianteng
 How Should We Design?

• Take these into consideration:

• Who is using the design
• Different people have different needs and capabilities
• What activities are being carried out (or what does the user want to accomplish)
• Criteria vary depending on the activities (e.g., policy, requirements)
• Where, When, & How the activities are taking place
• Constraints exist (e.g., need to make little noise, distractions)

16
 Good Designs Address All Three

• They optimize the interactions to match with user’s activities and needs, at the right
place at the right time
• Examples:
• Smartphones for seniors
• Gas machine interfaces in Canada
• Electronic recipes in kitchens

17
 Practical Steps to Take Who, What, What, When & How
into Consideration

1 2 3 4 5
Consider what Consider what Think through Listen to what Use user-centred
people (users) are might help them what might they want and get design techniques
good and bad at with the way they provide quality them involved in during the design
currently do things user experiences the design process process

18

Based on Sharp, Rogers & Preece (2019), Ch. 1.2

 How about Interaction Design?

• Covers more than just the user interface

Designing interactive products to support the way people

communicate and interact in their everyday and working lives Designing spaces for human
– Sharp, Rogers & Preece communication and interaction
– Terry Winograd
The why as well as the how of our daily
interactions using computers The art of facilitating interactions
– John Thackara between humans through products
and services
– Dan Saffer
19
 HCI, UX (Design), & Interaction Design

UX Design on Venn Diagram. Image by Dan Saffer. 20

Source: https://uxplanet.org/the-brief-understanding-of-ux-design-4b4078488dfa
 Break & Activity (10-20min)

• Break for 10 minutes, during this time, think about a frustrating moment with a
hardware/software that you encountered (e.g., didn’t know how to open)
• Think about what you wanted to do and what made the experience frustrating
• And whether you found a solution (and how)

• For the next 10 minutes, talk to your classmate about the example
• Compare the goal and the cause
• Compare the solution and how the solution was found

21
 Usability

• An important term/metric often used between interaction designers

The characteristic of being easy to use, usually … a quality attribute that accesses how easy
applied to software, but relevant to almost any user interfaces are to use
human artifact – Usability 101: Introduction to Usability
– http://www.usabilityfirst.com

The ease with which people can employ a particular tool or other
human-made object in order to achieve a particular goal
– http://en.wikipedia.org

22
 Usability Goals

• Learnability
• How easy is it for users to accomplish basic tasks the first time they encounter the design?
• Efficiency
• Once users have learned the design, how quickly can they perform tasks?
• Memorability
• When users return to the design after a period of not using it, how easily can they reestablish proficiency?
• Errors
• How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
• Satisfaction
• How pleasant is it to use the design?

23

Source: https://www.nngroup.com/articles/usability-101-introduction-to-usability/
 It Is Not Easy to Have Them All

• Sometimes not even possible

• Command Line Interfaces are efficient, but hard to learn
• Systems can provide shortcuts to be efficient, but require users to memorize them
• To prevent errors, systems might be annoying by asking users to confirm a lot
• What’s pleasant to someone does not always be pleasant to everyone
• Depending on the situation you might have to pick some and emphasize on

24

https://tenor.com/view/thanos-infinity-war-infinity-gauntlet-gif-8751820
 Design Principles

• Used by interaction designers to aid their thinking when designing for user
experience and reach the usability goals
• Generalizable abstractions that applies to different aspects of the design
• Derived from a mix of theory-based knowledge, experience, and common-sense

• Most common ones are:

• Visibility, feedback, constraints, consistency, and affordance

25

Source: http://www.id-book.com
 Design Principle – Visibility

• Make relevant parts, their meaning, and what needs to be done obvious

26
Source: left- https://www.givegoodux.com/visibility-5-principles-interaction-design-supercharge-ui-2-5/
right- https://medium.com/@sachinrekhi/don-normans-principles-of-interaction-design-51025a2c0f33
 Design Principle – Feedback

• Tell user their action caused something in a timely manner and what has been done
• Can be provided in many ways, e.g., sound, highlight, animation, …etc., or any combination of them

“click”

Click me

Click me Click me

 Clicked
27
 Design Principle – Constraints

• Restrict possible actions that can be performed

• Can be provided visibly or physically

28

Source: http://www.baddesigns.com
 Design Principle – Consistency

• Design interfaces to have similar operations and use similar elements for similar
tasks, for example:
• Use “ctrl” plus first initial of the command (e.g., ctrl+C, ctrl+S, ctrl+O)
• Layouts and colour schemes are similar across devices

• Internal & external consistency about operations & interfaces

• Behave the same within an application (gets harder when becoming more complex)
• Behave the same across applications (gets harder when becoming more varied)

29
 Design Principle – Affordance

• Display attributes that allow people know how it is used, for example:
• Handles for holding
• Doors for pushing/pulling
• Buttons for pressing

30
 Real VS Perceived Affordance

• Computer interfaces are typically virtual and do not have affordances like physical objects
• Norman argues it does not make sense to talk about interfaces in terms of real affordances
(https://jnd.org/affordance_conventions_and_design_part_2/)
• Affordance for interfaces is instead better conceptualized as perceived affordances
• learned conventions of arbitrary mappings between action and effect at the interface
• some mappings are better than others

31

Image source: left- https://developer.apple.com/design/human-interface-guidelines/

 Summar y

• HCI & UX
• Importance of good user interfaces
• How do we design good user interfaces
• Usability (goals)
• Design principles (guidelines)
• Affordances for computer interfaces
• Some differences from traditional objects with physical forms

32
 Post-Lecture Activity

• Read these
• Chapter 1 of ID-Book: What is Interaction Design?
• Usability 101: Introduction to Usability
https://www.nngroup.com/articles/usability-101-introduction-to-usability/
• An Introduction to Usability Design
https://blog.marvelapp.com/introduction-user-experience-design/

• Think about what makes a design bad? And what makes a design good?
• What words (qualities) would you use to measure how good/bad a design is?
• For each of the 5 design principles, find 1 example from real objects, then find 1 example
from computer interfaces (different from those given in the class) 33
 Exercises

• For each of the design, state which principle is it most likely based on:
• Make the “add to cart” button in a shopping website bigger and increase it contrast against the
background
• Change the cursor shape to a ↔ when the user hovers the mouse cursor over an edge of the
window to let them adjust the window size
• All the labels of buttons in the interface begin with an action verb like “remove”, “add”, “edit”
• Show a loading animation when the system is processing the user’s request
• If an item is not available for purchase, grey it out and make it not selectable

34
 Assignment 1

• Available on Canvas by the end of today

• Submit on Canvas
• Due on Sep 23, 11:59p
• Begin your document with a cover page stating that it is Assignment 1, followed by your name, SFU email, and student ID
• Name the file in this format: Firstname_Lastname_9-digit-studentID_Assignment1.pdf
• 2-day late penalty – 10% of max mark per calendar day

35
 Assignment 1 – Details

• Good/bad/interesting UI examples • Heuristic Evaluation

• Illustrate with photos & annotation • Isolate problematic/good elements

NOT: “Labels used in the interface come from

buttons have lights, terms in the classroom, and presented with
“the lights on the buttons provide or instructions are familiar icons at consistent locations”
feedback to user when ready/selected” unclear
OR
“the sign provides no clear instructions to NOT:
user on how to do X (they might have Corresponding heuristics are “matching
done Y without knowing it’s wrong)” between system & real-world” and
“recognition rather than recall”
36