+

Everyday
Design

CS2002S: Mobile
Development and Design

CSC2002S, 2020 Melissa Densmore, UCT

1
+
What’s going on?

The Farside
By Gary Larson

Melissa Densmore, UCT CSC2002S, 2020

2
+
It’s not you. Bad doors are
everywhere.

Discoverability
Feedback
Melissa Densmore, UCT CSC2002S, 2020

3
 Affordances of concrete drainage pipes

+
06B Affordances

Melissa Densmore, UCT CSC2002S, 2020

Image Credit: https://uxdesign.cc/affordance-in-user-interface-design-3b4b0b361143

4
 +

What can you do

with a fidget cube?

Melissa Densmore, UCT CSC2002S, 2020

https://canadafidgets.com/fidgets/

5
+
Affordances
Design of Everyday Things – by Don Norman
Affordances are the potential actions and interactions that the
environment offers

Perceived affordances of an object are those properties of the

object which give users clues as to how the device is used

Melissa Densmore, UCT CSC2002S, 2020

6
+
Perceived Affordances
for mobile devices?

Melissa Densmore, UCT CSC2002S, 2020

7
+
Design is Everyday
Some examples from UCT

Push or Pull?

Melissa Densmore, UCT CSC2002S, 2020

8
+
Hidden Affordances
Some Examples from UCT

Melissa Densmore, UCT CSC2002S, 2020

9
+
Visual Affordance
Works by using familiar idioms and metaphors

Melissa Densmore, UCT CSC2002S, 2020

10
+
Function over Form
You can take an idiom too far

Can you
dial with
a mouse?

Are these What does

buttons or this button
labels? do?

Melissa Densmore, UCT CSC2002S, 2020

11
+
Visual Affordance Problems
Handles are for lifting not scrolling!

AudioRack 32, a multimedia application

Melissa Densmore, UCT CSC2002S, 2020

12
 +
06C Mapping

Melissa Densmore, UCT CSC2002S, 2020

Image Credit: https://petapixel.com/2016/08/31/instagram-adds-pinch-zoom-give-

closer-look-photos-videos/

13
 +
Mapping (also Donald Norman)
ensure a natural correlation between objects and the
interface controlling them

Melissa Densmore, UCT CSC2002S, 2020

Which way is on or off?

Happens also with: car radio, oven

14
 +
Mapping (also Donald Norman)
ensure a natural correlation between objects and the
interface controlling them

mapping associates
a potential action with a
particular reaction

Melissa Densmore, UCT CSC2002S, 2020

Which way is on or off?

Happens also with: car radio, oven

15
+

Instructions are a
sign of bad design
How do you map the button to the
crosswalk?

Melissa Densmore, UCT CSC2002S, 2020

16
+

Objects vs Interface

Melissa Densmore, UCT CSC2002S, 2020

17
 + Mapping: Stoves
“Direct Relationship between artefact
and interface controlling it”

Melissa Densmore, UCT CSC2002S, 2020

Mappings capture not possible interactions (i.e. the interface) but the relationship
between the interface and the artefact – the things that it does, or possible
responses to your itneractions.

18
+
Mapping: Stoves
“Direct Relationship between artefact
and interface controlling it”

Melissa Densmore, UCT CSC2002S, 2020

19
 +
My Stove

Melissa Densmore, UCT CSC2002S, 2020

What are some affordances you can visually identify? Are these learned, cultural?’
- Knobs can be turned left and right? – visual, maybe learned
- Can lift the grill for cleaning
- Can place pots on top

How do you map afforded actions to expected reactions? Are these learned,
cultural?
- Turning the knob increases and decreases temperature

Some learned mappings

- Knob turned to square = off
- Knob turned to dot for lighting
- Bigger dots = hotter, smaller dots = cooler
- Eyeball icon = oven

Sadly… all the markings on my dials are now scrubbed off, I don’t even have the hints
to tell me which hob maps to which knob.

20
+
Another Stove

Melissa Densmore, UCT CSC2002S, 2020

21
+
Control Simplicity
https://blog.codinghorror.com/a-lesson-in-control-simplicity/

Melissa Densmore, UCT CSC2002S, 2020

22
 +
The Three Seashells

Melissa Densmore, UCT CSC2002S, 2020

Feature rich? Or usable?

Consider all the ways you can flush a toilet. You don’t want people to have to read
instructions to flush the toilet. And yet with the advent of dual flush, this becomes
more complicated.

Here the affordances are pretty clear – there’s buttons and levers to push. But is it
obvious that you could pull up on the green handle? Is it obvious whether which side
of the circular button to push to get the right response?

Knowing what will happen when you take a specific action, take advantage of an
apparent affordance, is effectively connecting that affordance to a consequence, or a
mapping. Here – instructions tell you that up on the green handle, maps to less
water, and down maps to more. So you can take the slightly unfamiliar affordance
and save water. However the need for instructions belays bad design. This is clearly
not a natural mapping.

What are the obvious

Images:

23
https://twitter.com/katherinedrury1/status/824350182108254220
https://nypost.com/2016/02/28/flushing-the-toilet-with-your-foot-just-makes-you-
gullible-not-less-germy/
https://www.nuckolsplumbing.com/blog/2019/december/how-to-flush-your-toilet-
when-the-water-is-shut-/

Three Seashells is a reference to Demoltion Man (the movie)

23
+
Remote Controls

Melissa Densmore, UCT CSC2002S, 2020

24
+
ATM

vs.

Melissa Densmore, UCT CSC2002S, 2020

25
+
Mapping

+
-

30%
100%
Melissa Densmore, UCT CSC2002S, 2020

26
+
Mapping

+
-
- +
30% 100%

30%
100%
Melissa Densmore, UCT CSC2002S, 2020

27
+
Mute – Mapping and Modalities

Melissa Densmore, UCT CSC2002S, 2020

28
+
Mobile Mapping and Affordances

Melissa Densmore, UCT CSC2002S, 2020

29
+
Physical Mapping

Melissa Densmore, UCT CSC2002S, 2020

30
+
Skeuomorph
When a derivative object retains ornamental design
cues that were necessary or essential to the original

Melissa Densmore, UCT CSC2002S, 2020

31
+
The iPhone Design Debate

Melissa Densmore, UCT CSC2002S, 2020

32
 +
06D Constraints and Characteristics

Melissa Densmore, UCT CSC2002S, 2020

In this lesson we’ll discuss some of the characteristics of affordances that can help us
to build a better model of how affordances affect human-computer interaction.

Image: https://www.aliexpress.com/i/32663681691.html Wooden Puzzles

33
+
Constraints
Constrain a design so that it can only be used the
correct way

Melissa Densmore, UCT CSC2002S, 2020

34
+

Hidden Constraints

Melissa Densmore, UCT CSC2002S, 2020

35
 +
Entering a Time
Constraints help users enter
correct information.

Melissa Densmore, UCT CSC2002S, 2020

36
 +
Entering a Time 2
Well-designed constraints improve user interaction

Melissa Densmore, UCT CSC2002S, 2020

But let’s look at time and constraints another way. This cube constrains possible
times to just 5 numbers. Instead of complicted scroll wheels or typing in specific
times, the setting of a timer is reduced to turning a cube on its side. There’s
limitations – this timer only affords these 5 possible times, but recall the 80/20 rule –
these 5 times probably serve 80% of the time. So the cost of those limitations is at
the advantage of a very clear design.

There’s other aspects of this that are quite nice – the placement of the cube also
gives a clear idea of the state – but perhaps not a clear idea of how much time is left.

The Cube Timer

Datexx DXXDF33 Smart pre-set cube timer

Shoplet.com
https://www.youtube.com/watch?v=nKQ6Flo7Oes

Build your own with Adafruit; https://www.youtube.com/watch?v=sBJnkPywAMw

37
+
Transfer Effects

◼ People transfer expectations from known objects to similar new ones.

◼ Previous experience conflicts with new situation 
◼ Previous experience applies to new situation ☺

◼ But what happens with people without that prior experience?

38
 +
Learned Affordances
… and learned mappings

Melissa and Doug

Shape Sorting Cube

Melissa Densmore, UCT CSC2002S, 2020

Indeed, most affordances are actually learned at some point.

Take this sorting cube. It’s quite obvious to us that we have to match the shape to the
hole. Yet when a child first encounters it, they aren’t just struggling with motor
coordination. They are learning that the shape of an object must match the shape of
the whole.

Buttons naturally attract attention as something tactile – and our first encounter with
something that can be touched teaches us that it can also be pushed. Whether we
expect something to rotate or move often depends on a previous interaction. The
idea of a doorknob being able to turn isn’t just a visual affordance – it’s something we
have learned through experience.

39
 +
Cultural Dependencies

◼ Affordances and Mappings suggest how to use the object

◼ Can be dependent on
◼ Experience Is this
◼ Knowledge switch
◼ Culture on or
off?

In the
US?
In the
UK?
In South
Africa?

What’s in this picture?

It’s a fire hydrant, but how do you know that? How do you know that you aren’t
supposed to park there?
Conventions for light switches and designs change depending on where you are.
You know that this is off because you can’t see the red – you’ve learned that the read
means off

40
 +
Are Affordances Obvious?

◼ Origins: Affordances were necessarily visible

◼ Push/pull door plates/handles
◼ Glass can be seen through

◼ Discoverable: But interaction reveals other

(sequential?) affordances
◼ Knobs afford turning
◼ Buttons afford pushing

◼ Hidden: Others are hidden

◼ Automatic appliances
◼ Puzzle boxes
◼ Easter eggs

◼ Learnable: feedback → discovery

◼ Glass breaks easily
◼ Puzzle pieces

The more natural an affordance is, the more learnable it will be.

41