UX Design 1

Introduction to UI/UX

© Curtin University
School of Design & the Built Environment
https://unsplash.com/photos/UF5Kdm764RE
 COMMONWEALTH OF AUSTRALIA
Copyright Regulation 1969

WARNING
This material has been copied and communicated to you by or on behalf of Curtin University
of Technology pursuant to Part VB of the Copyright Act 1968 (the Act)

The Material in this communication may be subject to copyright under the Act. Any further
copying or communication of this material by you may be the subject of copyright protection
under the Act.

Do not remove this notice.

Slide 2
© Curtin University | School of Design & the Built Environment
The difference between art and design

The Artist The Designer

Creates to provoke thought Creates to solve problems for

and emotions others

© Curtin University | School of Design & the Built

Slide 3
Environment
Story time – part 1

© Curtin University | School of Design & the Built

Slide 4
Environment
Story time – part 2

© Curtin University | School of Design & the Built

Slide 5
Environment
Does this look familiar?

© Curtin University | School of Design & the Built

Slide 6
Environment
How did you feel trying to enroll?

© Curtin University | School of Design & the Built

Slide 7
Environment
Why did you feel this way?
• Poorly labelled links?

• Confusing navigation?

• A page layout that doesn’t neatly fit the screen?

• Nothing but lines and lines of text that didn’t provide useful information?

• Completing an accidental action that couldn’t be undone?

• Not being able to complete the task you were there to do?

• Not being sure if you’d completed a task or not?

© Curtin University | School of Design & the Built

Slide 8
Environment
What do UI/UX Designers do in a nutshell
• We make sure our users don’t have that experience.

• We learn about users and their needs to engineer their experiences

• We research and iterate to make decisions about our designs

• We make it possible and easy for users to achieve their goals

• We make the interface look good, work well and engage the user

• We craft a wholistic and robust experience

• Plus a whole lot more!

© Curtin University | School of Design & the Built

Slide 9
Environment
What is UX?
• User Experience - UX

• The process of creating products and services that deliver a meaningful and relevant
experience to users.

• “Encompasses all aspects of the end-users interaction with the company, it’s
services and it’s products.” (Gibbons, 2021)

© Curtin University | School of Design & the Built

Slide 10
Environment
What is UI?
• User Interface - UI

• This is what the user sees

• “The specific user touchpoint or asset the user interacts with.” (Gibbons, 2021)

• “The look, the feel, and interactivity of a digital product; the cosmetics of the
experience.” (Gibbons, 2021)

© Curtin University | School of Design & the Built

Slide 11
Environment
UX vs UI Infographic

© Curtin University | School of Design & the Built

Slide 12
Environment
What does it look like?
The end product can come in all shapes and sizes

© Curtin University | School of Design & the Built

Slide 13
Environment
What does it look like?
The process might look a little different to how you imagine

© Curtin University | School of Design & the Built

Slide 14
Environment
A brief history of UX

© Curtin University | School of Design & the Built

Slide 15
Environment
A more recent history of UX

Richard Dreyfuss Don Norman coins the Don Norman and

publishes, ”Designing term, “User Jakob Nielsen found Apple releases the first Adobe XD and Figma
for People” Experience” nn/group iPhone are released

1955 1993 1998 2007 2016

1991 1994 2003 2010 2021

IDEO is founded Jakob Nielsen Adobe releases the Ethan Marcotte coins The rise of the UX
publishes “10 Usability Adobe Creative Suite the term, "Responsive copywriter
Heuristics” Design"

© Curtin University | School of Design & the Built

Slide 16
Environment
 AFFORDANCE

© Curtin University | School of Design & the Built Environment Slide 17

Affordance

A property in which the physical

characteristics of an object or
environment influence its function
(Lidwell et. al, 2010).

The 2 domains of affordances:

• The physical world

• Digital space

© Curtin University | School of Design & the Built Environment Slide 18

Affordance
What physical cues are there to tell us how the cup and saucer function?

RESERVOIR: LIQUID GOES HERE

HANDLE SHAPE: TEACUP CAN BE HELD

BASE: FITS ON THE SAUCER

SAUCER: CENTRE GROOVE HOLDS

THE TEACUP. SHAPE ALLOWS FOR
SIPPING (READ MORE HERE)

Teacup & Saucer

Source: Malmaison, 2022

© Curtin University | School of Design & the Built Environment Slide 19

Affordance

In the physical world objects can contain

three types of affordance (Gaver 1991):

1. Perceptible
2. Hidden
3. False

THE IPHONE BACK TAP FEATURE

IS A HIDDEN AFFORDANCE Apple accessibility menu
Source: Apple, 2023

© Curtin University | School of Design & the Built Environment Slide 20

Affordance

The perceivable characteristics of an object

PERCEPTIBLE
AFFORDANCES
“I looked at it, I evaluated it, I figured out how to work it.”

No perceivable characteristics. Other evidence

HIDDEN
AFFORDANCES
”I didn’t know you could use it for that until someone told me.”

Obvious affordances with no real function

FALSE
“I have never been able to figure out what that thing is for!”

© Curtin University | School of Design & the Built Environment Slide 21

Affordance
In digital space, its important to consider
affordances even more carefully as physical
affordances don’t really apply.

Borowska (2015) identifies some key

affordances within digital interfaces:

1. Explicit 6. False
2. Pattern
3. Hidden
4. Metaphorical
5. Negative

© Curtin University | School of Design & the Built Environment Slide 22

Affordance

Explicit

As with perceptible affordances,

explicit affordances offer hints by the
appearance of an interface element
and/or any accompanying text labels.

Call to action on 'The Gourmet' site

Source: Medium, 2018

© Curtin University | School of Design & the Built Environment Slide 23

Affordance

Pattern

• This type of affordance leverages

conventions.

• They can be good shortcut tools, but

its important to note that conventions
change from time to time.

• Pattern affordances should only be

used in situations where the target
audience understands the Menu icons
conventions being leveraged. Source: UX Planet, 2023

© Curtin University | School of Design & the Built Environment Slide 24

Affordance
Hidden

• Hidden affordances in digital space may not

be obvious.

• Might be used to declutter an interface. Undo with Phone Shake

Source: Tapsmart, nd

• Can pose usability problems or even remain

unleveraged if users aren’t aware of it.

Curtin Blackboard LMS

Source: Perryer, 2022

© Curtin University | School of Design & the Built Environment Slide 25

Affordance

Metaphorical

1. Graphical interfaces that employ a

skeuomorphic design approach

2. Skeuomorphic design is when the digital

interface element resembles the real world
counterpart

3. Metaphorical affordances usually are

represented with icons or logos and some
are so prolific they have become a pattern
affordance. (Valorem Reply, 2023)
Apple Pay
Source: Apple, 2023

© Curtin University | School of Design & the Built Environment Slide 26

Affordance

Summary of Digital Affordances:

Explicit Has good hints Visual properties are obvious, perceptible and indicate
intended function.
Pattern Conventional Affordances set out by convention. Frequent use and
subsequent familiarity can establish convention.
False Surprise! Visual properties are obvious, but the function is
unexpected.
Hidden Figure it out yourself Function is not clear until user takes action to reveal it.

Metaphorical Just like the real thing! Affordances that leverage visual metaphor.

Negative * Crickets * No affordance, inactive state implies no current function.

© Curtin University | School of Design & the Built Environment Slide 27

 CONSTRAINT

© Curtin University | School of Design & the Built

Slide 28
Environment
Constraint
Constraint is a design method used to control or limit the actions that can be
performed on a system (Lidwell et. al, 2010).

• Physical
• Cultural
• Logical
• Semantic

Cherry Street Level Crossing Green Camera Lights

Source: Infrastructure, 2020 Source: Suarez, 2020

© Curtin University | School of Design & the Built

Slide 29
Environment
Constraint
• Physical – taking away or limiting the options available to the user to
enhance the design

• Cultural – using existing cultural conventions or knowledge a user has to

enhance the design

• Logical – using assumed logic the user has to enhance the design

• Semantic – using the specifics of the users situation and context to

enhance the design

Scan the QR code and have a read of this article on constraint

by Zacharia Curtis!

© Curtin University | School of Design & the Built

Slide 30
Environment
Constraint
UX Example

Visually indicating when an option

isn’t available to the user at that
particular moment.

MS view menu in Google

Source: Perryer, 2020

© Curtin University | School of Design & the Built

Slide 31
Environment
Constraint
UX Example

You can also limit certain functions to create

a specific user experience.

✖ No Library

Snapchat has limited functionality and

doesn’t allow users to permanently store the
images sent and received within the app.

© Curtin University | School of Design & the Built Environment Slide 32

 ACCESSIBILITY

© Curtin University | School of Design & the Built

Slide 33
Environment
Accessibility

Objects and environments should be

designed to be usable, without
modification, by as many people as
possible (Lidwell et. al, 2010).

The four characteristics of

accessibility:

1. Perceptibility Accessible staircase design

Source: AIA DC, 2023

2. Operability
3. Simplicity
4. Forgiveness

© Curtin University | School of Design & the Built Environment Slide 34

4. Accessibility

Designing for Perceptibility

Can a person’s brain perceive the content regardless of the senses they
use? Can a person access content despite being blind, low vision, deaf,
deafblind, dyslexia, or...__________

(‘Accessibility (A11y) & Universal Design’, n.d.)

Website Accessibility for Colour Blindness

Source: Fishvision, 2018

© Curtin University | School of Design & the Built Environment Slide 35

Accessibility
UX Example:

• Users can adjust their feedback

settings

• Customise feedback to their needs

for greater perceptibility

• I read the screen to receive

confirmation of check in. A blind
person might rely on an audio or
haptic notification to receive that
feedback.

SafeWA app
Source: Perryer, 2022

© Curtin University | School of Design & the Built Environment Slide 36

Accessibility
Designing for Operability

Can a person access, navigate the product regardless of their personal

abilities?

• Functionality using just a keyboard (no mouse) for physical or motor

limitations
• Enough time to read or use content
• Can be navigated to find content and know where one is on the screen
• Doesn’t cause seizures i.e. GIF or flickering media

(‘Accessibility (A11y) & Universal Design’, n.d.)

© Curtin University | School of Design & the Built Environment Slide 37

Accessibility

UX Example:

• Users can type using the keyboard

to search for streaming content

• Users also have the option to use

the voice input feature

• Audio input feature improves

operability for users impacted by
reduced vision, or reduced hand
mobility Netflix: IOS supports voice input as well as keyboard
Source: Perryer, 2022

© Curtin University | School of Design & the Built Environment Slide 38

Accessibility
Designing for Simplicity

Can the product be understood as easily as possible through simple

language and contextual information?

• Text content is readable and understandable (language, reading level,

unusual words)
• Use plain language
• Operates in a predictable way
• Input assistance –users can avoid or correct mistakes

(‘Accessibility (A11y) & Universal Design’, n.d.)

© Curtin University | School of Design & the Built Environment Slide 39

Accessibility

Designing for Forgiveness

See: Forgiveness principle

© Curtin University | School of Design & the Built Environment Slide 40

Accessibility

• Learn the users needs

• Understand the users limitations

• Anticipate the impact on the users

ability to operate, interact with and
experience your design

• Design through this lens

5 Primary Senses
Source: Quincy, 2020

© Curtin University | School of Design & the Built Environment Slide 41

 FORGIVENESS

© Curtin University | School of Design & the Built Environment Slide 42

Forgiveness

Designs should help people avoid errors

and minimise the negative consequences of
errors when they do occur.
(Lidwell et. al, 2010)

• Good affordances
• Reversibility of actions
• Safety nets
• Confirmation
• Warnings
• Help

Adobe CC Photoshop History window

Source: Perryer, 2020

© Curtin University | School of Design & the Built Environment Slide 43

Forgiveness

Strategy #1 – Good Affordances

Physical characteristics that influence it’s

correct use (Lidwell, 2010)

• Navigation icons that tell the user what they

do, and where they’ll be taken.

• The plus icon has good affordance

• However the collage icon has poor

affordance

Canva Mobile App Screenshot

Source: Perryer, 2020

© Curtin University | School of Design & the Built Environment Slide 44

Forgiveness

Strategy #2 – Reversibility of actions

Actions can be undone if an error is made, or

intentions change (Lidwell, 2010)

• History window

• Undo functions

• Can you think of another example?

Apple Notes Mobile App Screenshot

Source: Perryer, 2022

© Curtin University | School of Design & the Built Environment Slide 45

Forgiveness

Strategy #3 – Safety Nets

Device or process that minimises the

negative consequences of a catastrophic
error or failure (Lidwell, 2010)

• Auto recovery

• Auto save

Figma desktop Screenshot

Source: Perryer, 2023

© Curtin University | School of Design & the Built Environment Slide 46

Forgiveness
Strategy #4 – Confirmation

Verification of intent before critical actions are

executed (Lidwell, 2010)

• Popup dialogue boxes to confirm users action is

intended and implications are understood

• Confirmation via two step process:

Arm > Fire

Boiling water tap requires user to press a sensor

on the back of the tap, before turning tap on for
Apple Notes Mobile App Screenshot
water to run (safety feature) Source: Perryer, 2022

© Curtin University | School of Design & the Built Environment Slide 47

Forgiveness
Strategy #5 – Warnings

Signs, prompts, or alarms used to warn of

imminent danger (Lidwell, 2010)

• Apple’s iPhone interface provides users with

warnings when the battery is overheating
and needs to cool down.

• This is to avoid system failure.

iPhone Temperature Warning

Source: Puls, 2020

© Curtin University | School of Design & the Built Environment Slide 48

Forgiveness
Strategy #6 - Help

The photo editing app Snapseed has

multiple links in the kebab menu
designed to help users. There is a link
to tutorials, and a standard help &
feedback link.

Both links house information that will

assist in “basic operations,
troubleshooting and error recovery”.
(Lidwell et. Al, 2010)

Snapseed Mobile App Screenshot

Source: Perryer, 2022

© Curtin University | School of Design & the Built Environment Slide 49

What is the impact of these principles?

• We’ve defined each principle

• Given examples
• Discussed what each looks like
• Discussed what each means
• But what is the tangible impact on the user?
• How does each principle, when used effectively, improve the UX?
• How does each principle, when omitted, diminish the UX?

© Curtin University | School of Design & the Built

Slide 50
 END OF LECTURE

© Curtin University | School of Design & the Built

Slide 51
REFERENCES
Ive, Jonathan. “Jonathan Ive, Apple Industrial Design Group. IPod. 2001 | MoMA.” The Museum of Modern Art, 2001.
https://www.moma.org/collection/works/89465.

Kleinman, Zoe. “A Brief History of Apple’s ITunes.” BBC News, June 4, 2019, sec. Technology.
https://www.bbc.com/news/technology-48511006.

Lidwell, William, Kritina Holden, Jill Butler, and Kimberly Elam. Universal Principles of Design: 125 Ways to Enhance
Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Beverly,
Mass.: Rockport Publishers, 2010.

Norman, Don. The Design of Everyday Things: Revised and Expanded Edition. Boulder: Basic Books, 2013.

Norman, Don, and Jakob Nielson. “The Definition of User Experience (UX).” Nielsen Norman Group. Accessed August 3,
2020. https://www.nngroup.com/articles/definition-user-experience/.

Robinson, Kasey. “5 Things You Didn’t Know about the History of UX Design.” Medium, October 11, 2016.
https://blog.prototypr.io/5-things-you-didnt-know-about-the-history-of-ux-design-20592208a336.

The Interaction Design Foundation. “What Is User Experience (UX) Design?” Accessed August 3, 2020.
https://www.interaction-design.org/literature/topics/ux-design.

© Curtin University | School of Design & the Built

Slide 52
IMAGES
Apple. Apple Music to IPod Transfer. Digital Image. Accessed August 3, 2020.
https://www.syncios.com/ipod/how-to-transfer-apple-music-to-ipod.html.

Cherry Street Level Crossing. February 18, 2020. Digital Photo.

https://infrastructuremagazine.com.au/2020/02/18/113-8-million-level-crossing-removal-contract-awarded/.

Fitbit. Fitbit Alta HR. Digital Photo, 720x720. Accessed August 3, 2020.
https://www.fitbit.com/content/assets/altahr-101/images/hero.png.

Fitbit. Fitbit Versa. Accessed August 3, 2020. https://device101.fitbit.com/images/devices/versa/hero-

df8a1c6a03cc0ca45e90591040c5c68c.png.

Lyft. Lyft Interface. April 10, 2017. Digital Photo. http://alloveralbany.com/archive/2017/04/10/ride-hailing-

allowed-new-york-state.

Peón, Tiffany. A Guide to Snapchat. February 7, 2018. Digital Image.

https://www.nytimes.com/2018/02/07/smarter-living/snapchat-guide.html.

Ramirez, Jesús. Photoshop Keyboard Shortcuts Cheat Sheet. January 28, 2013. Digital Image.
https://photoshoptrainingchannel.com/photoshop-keyboard-shortcuts/.

Simple Pocket Knife with Wooden Handle. Digital Photo. Accessed August 3, 2020.
https://thekinglive.com/how-to-clean-a-pocket-knife-in-4-ways.html.

© Curtin University | School of Design & the Built

Slide 53
IMAGES
Suarez, Eliobed. Photo by Eliobed Suarez on Unsplash. March 20, 2020. Digital Photo,
5194x3456. https://unsplash.com/photos/PN-YnI5stdQ/info.

Uber. Arriving-Now.Gif. Digital Image, 243×500. Accessed August 3, 2020.

https://blogapi.uber.com/wp-content/uploads/sites/272/2017/02/Arriving-Now.gif.

Victorinox. Victorinox Huntsman Swiss Army Knife. Digital Photo, 500×650. Accessed August
3, 2020.
https://www.traveluniverse.com.au/resize/Shared/Images/35650.jpg?bw=1000&w=1000&bh=1
000&h=1000.

© Curtin University | School of Design & the Built

Slide 54