+

The
Spectrum
of Design

CSC2002S: Mobile
Development and Design
Melissa Densmore
University of Cape Town

CSC2002S Melissa Densmore, UCT

1
 2

Mary Jackson at
Work
NASA Langley.
(Credit: NASA)

+
Human-Computer Interaction
What’s a computer?
What is human-computer interaction?
Why is HCI important?

Melissa Densmore, UCT CSC2002S

So this class is about human-computer interaction – what does that mean to you?
We could break it down – what’s a computer? (lots of things)
Not too long ago, computers were women. They did math by hand, literally
computing, for example, astronomical calculations for spaceflight. These same
women became the people that programmed the machines, gave them the
instructions to produce the numbers needed.
Effectively the first human-computer interaction was punch cards

2
 + 3

What is HCI?

Computer Science

Cognitive Science
Psychology
HCI
Ergonomics
Human Factors

Business Processes

And more…

Melissa Densmore, UCT CSC2002S

But really most people didn’t worry too much about it.
in early years interaction with computers was limited to specialists who could feed
cards and replace vacuum tubes. First programming languages, then teletype
screens, and eventually windowed interfaces transformed how people interacted
with computers.

Consider airplanes. Initially, cockpits for fighter planes were designed for the
“average” pilot, sized precisely for a specific height, torso, and arm length. But there
were frequent crashes. Upon studying the problem, they realized that no pilot was
actually “average” – and thus was introduced the idea of adjustable seats. This was
the first look at human factors, in a field known now as ergonomics.

Humans play a significant role in whether and how computing systems worked
worked. It draws on many disciplines including cognitive psychology, anthropology,
ergonomics, socio-technical design, and computer science. Overtime we’ve seen a
shift from research primarily in workplaces to research on “discretionary use” – that
is the conditions that lead people to use interfaces even when they aren’t required
to. As computing becomes more embedded into our social lives, it is necessary for us
to draw upon a wider range of disciplinary expertise.

3
 + 4

What is HCI?
User Experience (UX)

Human-Centered Design

Computer-Supported
Cooperative Work
HCI
Visualization

HCI for
Development

… and more

Melissa Densmore, UCT CSC2002S

And HCI also has many sub-branches. UX is widely recognized in industry , looking
beyond just what shows up on the screen in front of the user, but, as Norman and
Nielsen put it, “all aspects of the end-user’s interaction with the company,its
services, and its products”. CSCW recognizes that computing is often more than one
user and one interface, but actually supporting interaction and collaboration between
people.

Norman and Nielsen The Definition of User Experience (UX).

https://www.nngroup.com/articles/definition-user-experience/

4
 5

AnMelissa
Evolving Map of Design Practice and Research. Liz Sanders. Interactions. 2008.
Densmore, UCT CSC2002S

While design does not capture the whole of HCI, it’s the focus of this course. This
graph depicts some of the various approaches we take to design, organized by
mindset towards design and the extent to which the practice is led by human
designers or empirical outcomes.

I think this mindset axis is really important to understanding design. Here the axis
moves from an “expert mindset” in which the users are informants – they can react
to your interfaces and tell you what’s wrong or what they want, but the job of the
designing is up to the “experts”. To a participatory mindset in which users are invited
to co-create and co-design their interactions. Importantly – the user plays a part in
both sides of the axis. Whether they are participating in the design or not, the user is
still at the center of our activities. Somewhere in the far left is a world in which the
designer does everything by intuition and somehow gets it right, or just doesn’t care
what the human in the picture is experiencing at all.

My work falls in the research side of participatory design, in that bottom-right

quadrant. Design thinking is somewhere in the top right quadrant, perhaps towards
the center.

Tools such as interviews, observations, a/b testing are used to varying degree in all of
these approaches, and most design involves some version of the design cycle.

5
 + 6

User Error vs Designer Error

8:07am on January 13, 2018, in Hawaii

30 minutes later….

Melissa Densmore, UCT CSC2002S

So why is HCI important?

Let’s give a now-classic example of bad HCI. One lovely Saturday morning, every
resident in Hawaii received a text message announcing an incoming missile, declaring
“THIS IS NOT A DRILL”. This was a mistake – one that took 30 minutes to correct.

Now how could this possibly happen? Was it someone making a mistake? Well, yes,
but was it their fault? Take a look at the interface – it’s just a series of hyperlinks. Click
on one, and the alert is sent out. Click the wrong one, and the wrong alert is sent out.

They fixed it though – look there’s a link at a top to let people know that a false alarm
has been sent now.

But really – all the reasons for this error are documented in design literature. Make
infrequent things harder, allow undo, prevent errors! But alas, we as developers, and
our clients too, often prioritize functionality over user experience, not understanding
the critical role design plays in adoption, efficiency, and correct use of technology.
When a mistake happens, blame the designer not the user (i.e. don’t say RTFM).

https://www.klick.com/health/news/blog/user-experience/disaster-due-to-
disastrous-design/

6
 Impact of HCI go.umd.edu/ciw 7

Melissa Densmore, UCT CSC2002S

Since the start of HCI research we’ve seen fundamental changes in how people look
at computing. There’s clear impact on everything from online shopping to social
networking to games. Indeed much of how we look at design for mobiles emerges
from work in HCI.

This visualization from Ben Schneiderman shows how university-based HCI research
has informed and contributed to the development of multi-billion dollar industries in
computing.

In the next video we’ll talk about Schneiderman’s Golden Rules of Design.

7
+ 8

Learning Objectives

n Understand origins and contributions of HCI

n Understand what HCI is

n Re-orient from a “user error” mentality to one in which

designers take responsibility for errors that occur with their
software

Melissa Densmore, UCT CSC2002S

8
 +

The
Golden
Rules

CSC2002S: Mobile
Development and Design
Melissa Densmore
University of Cape Town

CSC2002S Melissa Densmore, UCT

Image Credits:
https://99designs.com/blog/tips/the-golden-ratio/
Illustration using the golden ratio, by Vladanland

https://www.qwbli.com/the-power-of-play/2018/3/16/play-the-design-cycle

9
 + 10

Ben Shneiderman:
Golden Rules of Design
1. Strive for consistency.
2. Cater to universal usability.
3. Offer informative feedback.
4. Design dialogs to yield closure.
5. Prevent errors.
6. Permit easy reversal of actions.
7. Support internal locus of control.
8. Reduce short-term memory load.

How the CHI Community Got its Groove - and Changed the World!
https://www.youtube.com/watch?v=eI1yCZXvS5s&spfreload=10
Melissa Densmore, UCT CSC2002S

As a bit of a crash course on design, this lesson will introduce Shneiderman’s Golden
Rules of Design.

While I (and Shneiderman, too) am hesitant to reduce user interface design to a set
of principles – this is still a helpful place to start when looking at possible designs and
thinking about what needs to be there or not.

No one interface is going to perfectly suit every user, but these rules capture most of
the “gotchas” that can frustrate users.

As I go through these, think of an interface you use often – perhaps WhatsApp or

Vula, or even a microwave. To what extent do these rules capture your frustrations or
satisfaction with using that interface?

Note:
The definitions on the following slides are taken directly from Shneiderman
https://www.cs.umd.edu/~ben/goldenrules.html

To cite a golden rule, state it’s name (e.g. Shneiderman’s Golden Rule #2 Seek
Universal Usability) and cite the following paper.
Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., and Elmqvist, N., Designing the

10
User Interface: Strategies for Effective Human-Computer Interaction: Sixth Edition,
Pearson (May 2016) http://www.cs.umd.edu/hcil/DTUI6

10
 + 11

1. Strive for Consistency.

Consistent sequences of actions should be

required in similar situations; identical
terminology should be used in prompts,
menus, and help screens; and consistent
color, layout, capitalization, fonts, and so on,
should be employed throughout. Exceptions,
such as required confirmation of the delete
command or no echoing of passwords,
should be comprehensible and limited in
number

Melissa Densmore, UCT CSC2002S

This covers everything from being consistent in which template I’m using for lectures
to Facebook not changing their interface every two years.
It allows people to transfer their knowledge of one system to another. It’s why it can
be difficult to move from mac to pc or iphone to android. It’s why we have
expectations about where to find menus and logout buttons.

11
 + 12

2. Seek universal usability.

Recognize the needs of diverse users and

design for plasticity, facilitating transformation
of content. Novice to expert differences, age
ranges, disabilities, international variations, and
technological diversity each enrich the
spectrum of requirements that guides design.
Adding features for novices, such as
explanations, and features for experts, such as
shortcuts and faster pacing, enriches the
interface design and improves perceived
quality.

Melissa Densmore, UCT CSC2002S

For me, this means also designing for bandwidth caps and mobile-first users.
Consider supporting more than one language in your interface or the ways in which
icons may assume knowledge that doesn’t exist.

But less obvious – including alt-text so that people using audio-screen readers can
interpret images.

12
+ 13

3. Offer Informative Feedback

For every user action, there should be an

interface feedback. For frequent and minor
actions, the response can be modest,
whereas for infrequent and major actions, the
response should be more substantial. Visual
presentation of the objects of interest
provides a convenient environment for
showing changes explicitly.

Melissa Densmore, UCT CSC2002S

13
+ 14

4. Design dialogs to yield closure

Sequences of actions should be organized into

groups with a beginning, middle, and end.
Informative feedback at the completion of a
group of actions gives users the satisfaction of
accomplishment, a sense of relief, a signal to
drop contingency plans from their minds, and an
indicator to prepare for the next group of
actions. For example, e-commerce websites
move users from selecting products to the
checkout, ending with a clear confirmation page
that completes the transaction.

Melissa Densmore, UCT CSC2002S

14
 + 15

5. Prevent Errors

As much as possible, design the interface so that

users cannot make serious errors; for example, gray
out menu items that are not appropriate and do not
allow alphabetic characters in numeric entry fields.
If users make an error, the interface should offer
simple, constructive, and specific instructions for
recovery. For example, users should not have to
retype an entire name-address form if they enter an
invalid zip code but rather should be guided to
repair only the faulty part. Erroneous actions should
leave the interface state unchanged, or the interface
should give instructions about restoring the state.

Melissa Densmore, UCT CSC2002S

This is an example of a design principle that was violated in the Hawaii incident. Not
only was it too easy to make a serious error, but recovery was difficult, leading to
widespread panic.

I am sometimes astonished at how creative people can be in making errors

15
 + 16

6. Permit easy reversal of actions.

As much as possible, actions should be

reversible. This feature relieves anxiety, since
users know that errors can be undone, and
encourages exploration of unfamiliar
options. The units of reversibility may be a
single action, a data-entry task, or a
complete group of actions, such as entry of a
name-address block.

Melissa Densmore, UCT CSC2002S

Allow undo!

Have you ever sent an email by accident and wanted to take it back? But the
distributed nature of email results in clunky solutions like “disregard that email”
options.

So what if you need someone to actually commit to an action? Like submitting an

application? This is an example in which universal application of “rules” doesn’t work
– but you can instead apply the previous rule 5, “prevent errors” and give them a
chance to confirm before they commit, preventing errors. And don’t forget to
provide informative feedback once the actual action has been done.

Even then consider ways to allow undo, like editing a post on Facebook, or allowing
resubmissions up until a deadline.

16
 + 17

7. Keep users in control.

Experienced users strongly desire the sense

that they are in charge of the interface and
that the interface responds to their actions.
They don’t want surprises or changes in
familiar behavior, and they are annoyed by
tedious data-entry sequences, difficulty in
obtaining necessary information, and
inability to produce their desired result.

Melissa Densmore, UCT CSC2002S

These golden rules are very related – you can see how inconsistency might lead to
people feeling a loss of control.

17
 + 18

8. Reduce short-term memory

load.
Humans’ limited capacity for information
processing in short-term memory (the rule of
thumb is that people can remember “seven plus
or minus two chunks” of information) requires
that designers avoid interfaces in which users
must remember information from one display
and then use that information on another display.
It means that cellphones should not require
reentry of phone numbers, website locations
should remain visible, and lengthy forms should
be compacted to fit a single display.

Melissa Densmore, UCT CSC2002S

Part of WhatsApp’s ease of use is that they’ve done away entirely with passwords.
There’s that finicky overhead of registering linking to your phone number when you
first install… but they reduce short-term memory load by offering to read your texts
for you. And android has made it easier by making it easy to copy one-time-
passwords from your most recent texts via the keyboard.

18
 + 19

Learning Objectives

n Understand the Golden Rules of Design

n Be able to apply them when analyzing and designing

interfaces

Melissa Densmore, UCT CSC2002S

You may see echoes of these rules in mobile guidelines and in the interfaces you
encounter.

Applying these rules in design is not necessarily easy – it’s much easier to criticize and
cherry-pick at problems in hindsight. And indeed – it’s expected that you will
interpret and refine the rules based on context, and apply them in concert. The next
lesson talks a little about that activity of applying design principles in practice.

Resources
A medium article where someone applies the golden rules to Instagram:
https://medium.com/@triptirajput9/analyzing-instagram-using-shneidermans-eight-
golden-rules-of-interface-design-7ff765a845db

19
 +

Standards
vs
Guidelines

CSC2002S: Mobile
Development and Design
Melissa Densmore
University of Cape Town

CSC2002S Melissa Densmore, UCT

Image Credits:
https://99designs.com/blog/tips/the-golden-ratio/
Illustration using the golden ratio, by Vladanland

https://www.qwbli.com/the-power-of-play/2018/3/16/play-the-design-cycle

20
 + 21

Using Design Principles

n Goal: provide designers with information and insights about

the (potential) impact of their designs

n Trade-offs: the more general the rule, the more chance it

conflicts with another rule

n We can make a vague distinction

between:
n Guidelines: vague, need to
know theoretical underpinning
n Standards: can be very
specific (e.g. 3 button mouse)

Melissa Densmore, UCT CSC2002S

Consider the golden rules, are they standards or guidelines?

21
+ 22

Standards

n Usually set by international

committee (e.g. 802.11)
n Hardware standards more
specific than software
n Hardware less likely to
change

n Ideal: Large community

following a standard leads
to better technology
n Unfortunately: not very
useful for promoting
usability

Melissa Densmore, UCT CSC2002S

22
+ 23

Guidelines

n Style guides published by Apple,

Google, etc.

n Tend to be generalizations – the more

general, the earlier they should be in
the design process

n Can range from:

n Users must initiate all dialogs (Apple)
to
n Use white space between long groups of
menu controls (Open Look)

Melissa Densmore, UCT CSC2002S

23
+ 24

Android Standards Example

n Use the platform’s built-in widgets and layouts whenever

possible; these views provide accessibility support by
default.

n Use the Options Menu as an alternative to touchscreen tasks

n Make sure the Back button correctly moves the user back one
logical step in the task’s back stack or the activity’s back
stack of fragments (when performing fragment transactions)
as appropriate

Melissa Densmore, UCT CSC2002S

24
+ 25

Android Guidelines Example

n Place most frequently used operations first

n Don’t put commands only in a Context menu
n First command in a Context menu should be the select
command
n Selecting an item in the content should perform the most
intuitive operation
n A Context menu should identify the selected item
n Put only the most important commands fixed on the screen
n Use short names in the Options icon menu
n A dialog should not have an Options menu
n If an activity has no Options menu, do not display a message
n Dim or hide menu items that are not available in the current
context

Melissa Densmore, UCT CSC2002S

25
 + 26

Facebook

Melissa Densmore, UCT CSC2002S

Standards and guidelines for each mobile platform are important for making
applications consistent within that platform, but they also have the effect of making
the platform you are using recognizable at a distance.

Can you match each of these facebook screenshots to the operating system?

I’m 90% sure that this is Android, Windows, iOS. J

26
+ 27

Standards vs Guidelines

Standards Guidelines
n Higher authority n Lower authority

n Little overlap n Conflicts/overlap/trade-off

n Limited application n Less focused

n Minimal interpretation n Interpretation required

à HCI background

Melissa Densmore, UCT CSC2002S

27