UX1 Week 2

UX Design 1
The evolution of UI/UX Design & Feedback
© Curtin University
School of Design & the Built Environment
https://unsplash.com/photos/ICW6QYOcdlg
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
Evolution of the interface
Example: Police Quest
NUI Evolution
Source: The New Interface Project, 2020
© Curtin University | School of Design & the Built

Slide 3
Environment
• In a relatively short period of time the phone UI made a big leap.
• Advanced touch screen (multi-touch) spawned a revolution in UI and UX
design.
Mobile to Smartphone iPhone 13 Pro

Source: Elhardt, Huub Source: GSMArena, 2021

Slide 4
Environment
• Interactions are not just between
users and the screen anymore
• AR and VR
• Audio
• Haptic Screenshot of Oculus Rift Interface
Source: Oculus, 2017
Amazon Alexa VS. Google Home

Source: PCMag Australia, 2018

Slide 5
Environment
Evolution of the user
• As the interface has evolved so has the user.
• Users now have different user goals, and a different range of wants
and needs.
Bill English 1968 Critically acclaimed editor in open office

Source: Vintage News Daily, 2019 Source: Mackrill, Jud

Slide 6
Environment
1960s user Vs 2020s user
What are the differences between these users and their goals?
1960s
• Barrier for entry
• Limited access
• Used for computing
• Use in the workplace
Women of Bell Labs 1960s
Source: The Guardian, 2016
2020s
• Easy to use
• Wide spread access
• Used for everything
Women holding phone • Used everywhere
Source: Shutterstock, 2022

Slide 7
Environment
Evolution of the interaction
• Hardware capabilities changed.
• Interfaces changed.
• Users changed.
• Our entire Interaction Experience had to change.
• A new approach to interaction design was needed …

Slide 8
Environment
User-centered design (UCD)
• UCD is a design process.
• The focus is placed on users’ needs and requirements.
• The aim is to produce highly usable and accessible experiences.
• The end goal is to achieve a high level of user satisfaction.
• Built upon a foundational knowledge of users, tasks, and environments.
• Sometimes referred to as User-Driven Development (UDD)

Slide 9
Environment
SIGNAL-TO-NOISE
RATIO
© Curtin University | School of Design & the Built Environment Slide 10

Signal-to-noise Ratio
The ratio of relevant to

irrelevant information in a
display. The highest possible
signal-to-noise ratio is
desirable in design (Lidwell et.
al, 2010).
Galaxy GWA2 Watch Watch at 6:33

Source: Adam, 2018 Source: Péchy, 2019

“Is this signal or noise?”
Noise:
Information that is irrelevant to the user

achieving their goal or task.
Signal:
SIGNAL NOISE
Information that is relevant and useful to
the user achieving their goal or task.
Image source: adapted from Pin Clipart

But remember:
• Every user is different
• Signal and noise will differ between users.
• What is signal (useful) to one person may be

noise (not useful) to another.

Remove elements that are perceived as ‘noise’ to everyone:
• Things that distract the user.

• Content or interface elements that don’t contribute to the completion of
the core user goals.
“I’M A BIG
DISTRACTION!”
MS suite, Clippy animated assistant

Source: Giphy, 2022

UX Example:
FOCUS IS ON GEOGRAPHICAL AND

COMPASS COORDINATE DATA
DISPLAYED
MINIMAL STYLE MORE DETAIL
LIMITED LOTS OF MOVING

INFORMATION INFORMATION
DISPLAYED
Apple Compass App Screenshot Commander Compass Go App Screenshot

Source: Perryer, 2020 Source: Perryer, 2020

5 HAT RACKS

Five Hat Racks
An organizational framework developed
in response to Richard Saul Wurman’s
concept of information anxiety in his
1990 book of the same title.
Five ways to organise information:
1. Location
2. Alphabet
3. Time
4. Category
5. Hierarchy
Information Anxiety book cover

Source: Wurman, 1990

Five Hat Racks
Location
Grouping by physical or geographical

location
Organising by location can be useful

especially where spatial information is
significant.
When wayfinding is important
Transperth System Map

Source: Australian Rail Maps, 2017

Five Hat Racks
Location
The Super Mario World game map

organises the different levels by
location, allowing the user to navigate
through the game.
• Effective way of sorting and

displaying information to user
• Good visual metaphor

Super Mario World game map
• Assists with world building Source: SNES, 1991

Five Hat Racks
Location
Stroly inc. created a GPS linked

digital illustrated map for the
SXSW 2022 festival.
• Users can easily navigate the

festival and orient themselves
• Spatial information is key
Stroly SXSW digital map

Source: Stroly, 2022

Five Hat Racks
Alphabetical
Grouping by starting letter
Organising content alphabetically is another

effective way to present or sort information,
especially if people know the specific terms
and topics they are looking for.
Contact List
Source: Qiao, 2023

Five Hat Racks
Alphabetical
Asos website lists the brands they stock in

alphabetical order.
• Good when information is referential

(e.g. dictionary)
• Use when no other organising approach

is appropriate
Asos brands lilst

Source: Asos, 2023

Five Hat Racks
Time
Grouping by Chronological
Sequence
Organising by time can be useful

for finding information in a
chronological pattern.
A Visual History of Computers

Source: Akita, 2020
HISTORICAL INFORMATION
PLOTTED OUT ON A TIMELINE
FROM PAST TO PRESENT

Five Hat Racks
Time
Mojos bar lists upcoming shows

on their website, and organise this
information by date of
performance.
TONIGHT’S SHOW IS LISTED

FIRST
Apple Weather app
Source: Apple, 2023

Five Hat Racks
Category
Grouping by similarity or relatedness
You can use categories to organise

information in a multitude of different Thrift Shop Rainbow Organisation
Source: Rainbow Everything, 2020
ways for example by colour, shape,
gender, model, price, or anything
else.
CLOTHING ORGANISED BY
COLOUR
BUNNINGS STORES ORGANISED BY

CATEGORY AND LOCATION Bunnings Store Map
Source: Smith, 2017

Five Hat Racks
Category
The McDonalds self-serve screens

organise food items into different
categories including “Burgers &
Sandwiches” as pictured here.
McDonalds Self Serve Menu

THE DIGITAL KIOSK ORGANISES Source: Pakman, 2015
FOOD ITEMS INTO CATEGORIES

Five Hat Racks
Category
Netflix organises TV shows by genre

allowing users to make their selection
from categories such as:
• Sitcoms
• TV sci-fi & Fantasy
• Award Winning TV Shows
• And more…
Netflix screen shot
Source: Perryer, 2022

Five Hat Racks
Hierarchy
Grouping by prominence or
importance
Organising information by hierarchy

can be useful for showing how one
thing is connected or related to
another, particularly with respect to
order of prominence or importance. Medium
Source: Medium, 2023
ARTICLES LISTED BY TREND

(POPULARITY)

Five Hat Racks
Hierarchy
Sometimes referred to as organising

by continuum:
• Highest to lowest
• Best to worst
• Most important to least important
• Etc.
Whistleout
Source: Whistleout, 2023
PHONE PLANS LISTED FROM

“BEST” TO ”WORST”

Five Hat Racks
Hierarchy
Many search filters will permit users

to specify continuum type
Sort by dropdown filter on Asos

clothing website allows users to sort
by:
• Recommended Asos sorting filter

• New stock Source: Asos, 2023
• Price

MAPPING

Mapping
A relationship between controls and

their movements or effects. Good
mapping between controls and their
effects results in greater ease of use
(Lidwell et. al, 2010).

Mapping
Take a moment to watch this video looking

at how well (or poorly) mapping has been
implemented in this homes lighting and
switch system.

Mapping
How do the light switches and lights in our classroom work? Do the
switches (control) turn on the lights (effect) in a logical way?

Mapping

Mapping
UX Example:
Scroll bars allow users to view

all the content on a page.
As the user moves the scroll

bar up and down (control), the
screen content moves up and
down in tandem (effect)
Curtin University website screen shot

Mapping
UX Example:
The IOS control centre exhibits conceptual or

metaphorical mapping with the brightness control.
• The swipe is the control

• The brightness changing is the effect
iPhone control centrescreen shot


Mapping
ON
To improve mapping:
OFF
• Use conventions
• Consider cultural and geographical contexts
• Leverage meaningful visual metaphors
OFF
ON
Icon switch gif

Source: Pinterest, 2023 UK Vs. US light switches

Mapping
Mapping is now beyond the screen. In addition
to visual and physical led interactions, we also
have:
• Haptic
• Auditory
The control – voice saying “stop”

The effect – the alarm notification stops
Google Alarm Clock – Turning alarm off audibly


HIGHLIGHTING

Highlighting
A technique for bringing attention to

an area of text or image (Lidwell et.
al, 2010).
• General
• Bold, italics, and underlining
• Typeface
• Color Magic Mouse Scroll Down Icon
• Inversing Source: Vincent, 2020
• Blinking
Blinking Cursor
Source: Davis, 2016

Highlighting
UX Example
Provide visual cues to

indicate that elements are
clickable / interactive.
In this example both colour

and movement are used to
tell the user which
elements are interactive.
Animation Button #3 Hover Effect

Source: Lin, 2016

Highlighting
UX Example
The iPhone text message app uses

both visual and audio highlighting.
When typing the individual characters

are highlighted (bold/magnified) AND
accompanied by an audio sound
effect.
iPhone Keyboard Typing Sound (Click)

Source: Free to Use Sound, 2019

Highlighting
Non digital examples…
Fig 1. Drawing focus with light Fig 2. Indicating significance with colour Fig 3. Emphasising with contrast

Highlighting
More Digital Examples…
Web & app screenshots


What is the impact of these principles?
Just like last week, reflect on and

How are they
answer the following: feeling?
What are they thinking?
• How does each principle, when Can they achieve

their goals?
used effectively, improve the UX?
• How does each principle, when
omitted, diminish the UX?

Slide 46
END OF LECTURE

Slide 47
REFERENCES
Desjardins, Jeff. “Visualizing Moore’s Law in Action (1971-2019).” Visual Capitalist, December 9, 2019.
https://www.visualcapitalist.com/visualizing-moores-law-in-action-1971-2019/.
Everyday, Vintage. “In 1968, Computers Got Personal: How Douglas Engelbart’s ‘Mother of All Demos’ Changed
Personal Technology Forever.” Vintage News Daily (blog), March 23, 2019. https://vintagenewsdaily.com/in-1968-
computers-got-personal-how-douglas-engelbarts-mother-of-all-demos-changed-personal-technology-forever/.
Laubheimer, Page. 2015. ‘Preventing User Errors: Avoiding Unconscious Slips’. Nielsen Norman Group. 23 August
2015. https://www.nngroup.com/articles/slips/
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.
Lin, Li Chin. “Animation Button#3-Hover Effect.” CodePen, July 26, 2016. https://codepen.io/lichin-lin/details/kXJWvE.

Slide 48
REFERENCES
NAB. “NAB Personal Banking - Insurance, Loans, Accounts, Credit Cards - NAB.” NAB. Accessed August 3, 2020.
https://www.nab.com.au/.
Nikolov, Anton. “Design Principle: Error & Forgiveness.” UX Planet, May 28, 2017. https://uxplanet.org/design-
principle-error-forgiveness-1495f7471113.
Norman, Don. The Design of Everyday Things: Revised and Expanded Edition. Boulder: Basic Books, 2013.
The New Interface Project. “The New Interface Project.” Accessed August 3, 2020.
https://sites.google.com/site/thenewinterfaceproject/.

Slide 49
IMAGES
Davis, Nathan D. Blinking Cursor. June 23, 2016. https://medium.com/@nathanddavis/the-taunt-of-the-blinking-cursor-
7ca9a251c492.
Ehlhardt, Huub. On the Origin of the Smartphone – Product Evolution. December 3, 2018. Digital Image.
https://www.productevolution.org/2018/03/on-the-origin-of-the-smartphone/.
Introducing Oculus Dash, 2017. https://www.youtube.com/watch?time_continue=8&v=SvP_RI_S-bw&feature=emb_logo.
IPhone Keyboard Typing Sound (Click), 2019. https://www.youtube.com/watch?v=FP_TCP73h2I.
Mackrill, Jud. Photo by Jud Mackrill on Unsplash. October 23, 2019. Digital Photo, 5760x3840.
https://unsplash.com/photos/qnt9iigV444.
Munroe, Randall. University Website. Digital Image. Accessed August 3, 2020.

https://imgs.xkcd.com/comics/university_website.png.
Oculus. Oculus Rift. Screenshot, 625×387. Accessed August 3, 2020. https://i.imgur.com/EUFQTPI.jpg.
Puls. IPhone Temperature Warning. Screenshot, 576x1024. Accessed August 3, 2020. https://blog.puls.com/hs-
fs/hubfs/Imported_Blog_Media/ios10-iphone7-temperature-cool-down-
576x1024.png?width=674&height=1198&name=ios10-iphone7-temperature-cool-down-576x1024.png.

Slide 50
IMAGES
Russian, Rick. IPhone Charge Now Warning. October 2, 2017. Screenshot, 950×1200. http://russianrick.com/wp-
content/uploads/2017/10/iphone-red-battery-icon-56d83d8f3df78cfb37dbf091-950x1200.jpg.
Segan, Sascha. Amazon Echo vs. Google Home: Which Voice-Controlled Speaker Is Right for You? January 30,
2018. https://au.pcmag.com/smart-home/44015/amazon-echo-vs-google-home-which-voice-controlled-speaker-is-
right-for-you.
Vincent, Hima. Magic Mouse Scroll Down Icon. Accessed August 3, 2020. https://codemyui.com/magic-mouse-scroll-
icon/.

Slide 51

UX1 Week 2

Uploaded by

Copyright:

Available Formats

You might also like

UX1 Week 2

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UX1 Week 2

Uploaded by

Copyright:

Available Formats

UX Design 1

The evolution of UI/UX Design & Feedback

Do not remove this notice.

Example: Police Quest

© Curtin University | School of Design & the Built

Mobile to Smartphone iPhone 13 Pro

© Curtin University | School of Design & the Built

Amazon Alexa VS. Google Home

© Curtin University | School of Design & the Built

Bill English 1968 Critically acclaimed editor in open office

© Curtin University | School of Design & the Built

© Curtin University | School of Design & the Built

© Curtin University | School of Design & the Built

© Curtin University | School of Design & the Built

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

The ratio of relevant to

Galaxy GWA2 Watch Watch at 6:33

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

Information that is irrelevant to the user

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

• Every user is different

• Signal and noise will differ between users.

• What is signal (useful) to one person may be

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

Remove elements that are perceived as ‘noise’ to everyone:

• Things that distract the user.

MS suite, Clippy animated assistant

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

FOCUS IS ON GEOGRAPHICAL AND

MINIMAL STYLE MORE DETAIL

LIMITED LOTS OF MOVING

Apple Compass App Screenshot Commander Compass Go App Screenshot

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

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

Five ways to organise information:

Information Anxiety book cover

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

Grouping by physical or geographical

Organising by location can be useful

When wayfinding is important

Transperth System Map

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

The Super Mario World game map

• Effective way of sorting and

• Good visual metaphor

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

Stroly inc. created a GPS linked

• Users can easily navigate the

• Spatial information is key

Stroly SXSW digital map

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

Grouping by starting letter

Organising content alphabetically is another

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

Asos website lists the brands they stock in

• Good when information is referential

• Use when no other organising approach

Asos brands lilst