MDD10 Design Principles

7 April 2017
Design
Principles
CS2002S: Mobile
Development and Design
CSC2002S Melissa Densmore, UCT
Melissa Densmore, UCT 1

7 April 2017
+
Golden Rules of Design
Strive for consistency
Enable frequent users to use shortcuts
Offer informative feedback
Design dialogues to yield closure
Strive to prevent errors; Help users recover quickly
Allow Undo
Make users feel they are in control of a responsive system
Schneiderman, B. "Eight golden rules of interface design."

Melissa Densmore, UCT Disponible en (1986). CSC2002S
recap

7 April 2017
Melissa Densmore, UCT CSC2002S

7 April 2017
+
Recognition Over Recall
Make objects, actions,

options and directions
visible
User should not have to

remember information from
one screen to another.
eg. Give input format,

example and default
e.g. Breadcrumbs to note

where we are

7 April 2017
+
Knowledge & Chunking
◼ To improve on memory we tend to chunk actions

◼ Group actions into a lump
◼ Seek for meaningful relationships
0796727796 vs 079 672 7796 vs 0 796 727 796
◼ To help, we need to differentiate “knowledge in head” and

“knowledge in world”
◼ Display-based action (e.g. response to touch)
◼ Recognition vs. Recall

7 April 2017
+
80/20 Pareto Law
20% of functionality will account for 80% of usage
What is the 20%?

widgets | apps | menus | dialogs

7 April 2017
+
Principle of Least Effort
Harold Thimbleby
◼ Zipf’s principle of least effort:
Make frequent things easy, and unlikely things harder
◼ Similar to the simplicity idea, this manifests in the following

ways:
◼ Morse code’s “E” is only one dot; apostrophe is 6 dots and dashes
◼ Menus are organized with common things at top
◼ “Dangerous” operations can be heavily nested or require many
clicks and presses

7 April 2017
+
Principle of Least Astonishment
Reflect inner workings or user intuition?
◼ Consistency is a key goal in user interface design
◼ Applies to both functionality and form
People are part of the system. The design

should match the user's experience,
expectations, and mental models.
Saltzer, J. H.; Kaashoek, Frans (2009). Principles of computer
system design: an introduction. Morgan Kaufmann. p. 85.

7 April 2017
+
Aesthetic Usability Effect
Things that look better perform better in usability tests!
The attractive product will be perceived as easier to use. Ease of use is often a criteria
in purchase decisions – easy to use products require less training and support. So by
improving the attractiveness it increases the perceived ease of use – improving the
chances of making a sale Users will be more likely to develop positive feelings
towards the attractive product. This can lead to: Positive reviews – leading to more
sales They’ll tell their friends – resulting in more sales leads They’ll tolerate faults
more – reducing support calls The attractive product will be perceived as of higher
quality And, perhaps most importantly; customers may overlook feature deficiencies
so they get to use the more attractive product

7 April 2017
+
Apparent Usability vs Inherent
Usability
1 2 3 ¥
Main Display
4 5 6 Cancel
7 8 9 Correct
1,000 10,000
Masaaki Kurosu and Kaori Kashimura. 1995. Apparent usability vs. inherent
usability: experimental analysis on the determinants of the apparent usability.
In Conference Companion on Human Factors in Computing Systems (CHI '95)
Apparent Usability vs Inherent Usability

Cash Dispenser – 17 keys
26 designers – layouts
252 Design and Usability Students
These results show that the apparent usability is less correlated with the inherent
usability compared to the apparent beauty… This suggests that the user may be
strongly affected by the aesthetic aspect of the interface even when they try to
evaluate the interface in its functional aspects and it is suggested that the interface
designers should strive not only to improve the inherent usability but also brush up
the apparent usability or the aesthetic aspect of the interface.

7 April 2017
+
Modes
◼ Modes allow different behaviors from the same interface

features (e.g. Caps Lock, Num Lock)
◼ Not necessarily bad – but sometimes really bad!

◼ If mode change is not obvious – device appears non-deterministic
(e.g. case-sensitive passwords)
◼ Polya’s principle of “Non-sufficient reason”:
If there’s no reason to believe things

are different, they aren’t different

7 April 2017
+
Feedback (Harold Thimbleby & Isaac Newton)
◼ Newton taught us that every action in nature is met with a

reaction - this is not always the case in interfaces
◼ Every user action needs the interface to react so that the user
knows the action is complete
◼ this can be tricky in multi-tasking systems
Especially important for displaying modal information

7 April 2017
+
Equal opportunity
◼ Equal opportunity states that there should be no difference

between input and output values (or known / unknown) - one
can be substituted for the other.
◼ Good examples include:

◼ Spreadsheets - cells are neither input or
output exclusively
◼ Camera controls

7 April 2017
+
Fitts’s Law (1954)
The time taken to acquire a target

is a function of the distance to and
size of the target
For target of size S, a distance D
from the pointer:
æD ö
time = a + b log 2 ç +1÷
èS ø
Menu design
Buttons and other GUI controls should be a reasonable size; it is relatively difficult to
click on small ones.
Edges and corners of the computer monitor (e.g., the location of the Start button,
Taskbar and a maximized window's Close button in Microsoft Windows; or the menus
and Dock of Mac OS X) are particularly easy to acquire with a mouse, touchpad or
trackball. Because the pointer remains at the screen edge regardless of how much
further the mouse is moved, they can be considered as having infinite width.[6][7] An
exception of note is that since hands are not artificially limited in the same way, this
attribute does not apply to touchscreens.
Similarly, top-of-screen menus (e.g., Mac OS) are sometimes easier to acquire than
top-of-window menus (e.g., Windows OS).
Pop-up menus can usually be opened faster than pull-down menus, since the user
avoids travel: the pop-up appears at the current cursor position.
Pie menu items typically are selected faster and have a lower error rate than linear
menu items, for two reasons: because pie menu items are all the same, small
distance from the centre of the menu; and because their wedge-shaped target areas
(which usually extend to the edge of the screen) are very large.[8]

7 April 2017
+
Fitts’s Law + Pareto Principle?
Menu design
Buttons and other GUI controls should be a reasonable size; it is relatively difficult to
click on small ones.
Edges and corners of the computer monitor (e.g., the location of the Start button,
Taskbar and a maximized window's Close button in Microsoft Windows; or the menus
and Dock of Mac OS X) are particularly easy to acquire with a mouse, touchpad or
trackball. Because the pointer remains at the screen edge regardless of how much
further the mouse is moved, they can be considered as having infinite width.[6][7] An
exception of note is that since hands are not artificially limited in the same way, this
attribute does not apply to touchscreens.
Similarly, top-of-screen menus (e.g., Mac OS) are sometimes easier to acquire than
top-of-window menus (e.g., Windows OS).
Pop-up menus can usually be opened faster than pull-down menus, since the user
avoids travel: the pop-up appears at the current cursor position.
Pie menu items typically are selected faster and have a lower error rate than linear
menu items, for two reasons: because pie menu items are all the same, small
distance from the centre of the menu; and because their wedge-shaped target areas
(which usually extend to the edge of the screen) are very large.[8]

7 April 2017
+
Hick’s Law
The time taken to reach a decision goes up
as the number of choices increases

7 April 2017
+
Signal to Noise Ratio (Tufte)
control vs. functionality
◼ Eliminate the unnecessary
<blink>

7 April 2017
+
Signal to Noise Ratio (Tufte)
control vs. functionality
◼ Too much density leads to degradation of viewer interest

7 April 2017
+
Examples: NextBus
How easy is it to spot critical information?

7 April 2017

7 April 2017
07B Small Screens
https://www.cultofmac.com/386772/how-to-purge-your-obsolete-apple-watch-
alarms/

7 April 2017
+
Mobile Design
Lots of Data – on a Small Screen
Ben Shneiderman’s
Visualization Mantra
overview
filter
details on demand
Applies to text, audio,

images…

7 April 2017
+
App Overview

7 April 2017
Top level views
The top level of the app typically

consists of the different views that
your app supports. The views
either show different
representations of the same data
or expose an altogether different
functional facet of your app.
Category views
Category views allow you to drill

deeper into your data.
Detail/edit view
The detail/edit view is where you

consume or create data.

7 April 2017
+
Text Overview
Gmail does this really well

7 April 2017
Filtering - ordering
Exclude data that is not
relevant
Ordering clarifies exclusions
Dynamic Ordering
Remember the 80/20 rule

7 April 2017
+
Recommender Systems
These dynamic categories emerge from crowdsourcing
• Explicit: star ratings, reviews
• Implicit: downloads, views

7 April 2017
+
Implicit Filtering: Location Based Services
Mobiles can know where they are geographically
Apps (given location data) can tailor results without
having to filter location

7 April 2017
+
Explicit Filtering Use sliders
and
checkboxes
to specify
ranges and
attributes

7 April 2017
+
Meeting Planning

7 April 2017
+
If you must enter text
Use auto-completion techniques, such as keyword in
context, support voice.
also, don’t be evil…

7 April 2017
+
SMS and Messaging Services
Usefulness | Usability | User Experience
Why was SMS a killer app?

Cost
Low intrusion
Expressiveness and meaning
Turn0taking
Privacy – private communication in publc spaces
Simple and Direct

7 April 2017
+
Mobile Modalities: Maps
Google Skymap

7 April 2017
+
Head up or Head down?
http://nation.time.com/2013/10/09/san-francisco-commuters-missed-a-murder-by-staring-at-their-phones/
Image
https://thegrand0ptimist.wordpress.com/2013/03/13/heads-down-phones-up/

7 April 2017
+
Sygic GPS App

7 April 2017
+
Virtual Reality - FlashBack

7 April 2017

7 April 2017
+
Facebook

7 April 2017
+
Instagram
What are some of the affordances of this interface?

7 April 2017
+
Vula

7 April 2017
+
Cape Town Buses and Trains

MDD10 Design Principles

Uploaded by

Document Information

Original Title

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

MDD10 Design Principles

Uploaded by

Copyright:

Available Formats

7 April 2017

CSC2002S Melissa Densmore, UCT

Melissa Densmore, UCT 1

Enable frequent users to use shortcuts

Offer informative feedback

Design dialogues to yield closure

Strive to prevent errors; Help users recover quickly

Make users feel they are in control of a responsive system

Schneiderman, B. "Eight golden rules of interface design."

Melissa Densmore, UCT 2

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 3

Make objects, actions,

User should not have to

eg. Give input format,

e.g. Breadcrumbs to note

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 4

◼ To improve on memory we tend to chunk actions

◼ To help, we need to differentiate “knowledge in head” and

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 5

What is the 20%?

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 6

◼ Zipf’s principle of least effort:

Make frequent things easy, and unlikely things harder

◼ Similar to the simplicity idea, this manifests in the following

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 7

◼ Consistency is a key goal in user interface design

◼ Applies to both functionality and form

People are part of the system. The design

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 8

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 9

Apparent Usability vs Inherent Usability

Melissa Densmore, UCT 10

◼ Modes allow different behaviors from the same interface

◼ Not necessarily bad – but sometimes really bad!

◼ Polya’s principle of “Non-sufficient reason”:

If there’s no reason to believe things

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 11

◼ Newton taught us that every action in nature is met with a

Especially important for displaying modal information

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 12

◼ Equal opportunity states that there should be no difference

◼ Good examples include:

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 13

The time taken to acquire a target

Melissa Densmore, UCT 14

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 15

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 16

◼ Eliminate the unnecessary

Melissa Densmore, UCT CSC2002S

Melissa Densmore, UCT 17

Melissa Densmore, UCT CSC2002S