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
Melissa Densmore, UCT 2
7 April 2017
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 3
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
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 4
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
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 5
7 April 2017
+
80/20 Pareto Law
20% of functionality will account for 80% of usage
What is the 20%?
widgets | apps | menus | dialogs
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 6
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
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 7
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.
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 8
7 April 2017
+
Aesthetic Usability Effect
Things that look better perform better in usability tests!
Melissa Densmore, UCT CSC2002S
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
Melissa Densmore, UCT 9
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)
Melissa Densmore, UCT CSC2002S
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.
Melissa Densmore, UCT 10
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
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 11
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
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 12
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
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 13
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 ø
Melissa Densmore, UCT CSC2002S
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]
Melissa Densmore, UCT 14
7 April 2017
+
Fitts’s Law + Pareto Principle?
Melissa Densmore, UCT CSC2002S
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]
Melissa Densmore, UCT 15
7 April 2017
+
Hick’s Law
The time taken to reach a decision goes up
as the number of choices increases
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 16
7 April 2017
+
Signal to Noise Ratio (Tufte)
control vs. functionality
◼ Eliminate the unnecessary
<blink>
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 17
7 April 2017
+
Signal to Noise Ratio (Tufte)
control vs. functionality
◼ Too much density leads to degradation of viewer interest
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 18
7 April 2017
+
Examples: NextBus
How easy is it to spot critical information?
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 19
7 April 2017
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 20
7 April 2017
07B Small Screens
Melissa Densmore, UCT CSC2002S
https://www.cultofmac.com/386772/how-to-purge-your-obsolete-apple-watch-
alarms/
Melissa Densmore, UCT 21
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…
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 22
7 April 2017
+
App Overview
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 23
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.
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 24
7 April 2017
+
Text Overview
Gmail does this really well
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 25
7 April 2017
Filtering - ordering
Exclude data that is not
relevant
Ordering clarifies exclusions
Dynamic Ordering
Melissa Densmore, UCT CSC2002S
Remember the 80/20 rule
Melissa Densmore, UCT 26
7 April 2017
+
Recommender Systems
These dynamic categories emerge from crowdsourcing
• Explicit: star ratings, reviews
• Implicit: downloads, views
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 27
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
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 28
7 April 2017
+
Explicit Filtering Use sliders
and
checkboxes
to specify
ranges and
attributes
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 29
7 April 2017
+
Meeting Planning
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 30
7 April 2017
+
If you must enter text
Use auto-completion techniques, such as keyword in
context, support voice.
also, don’t be evil…
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 31
7 April 2017
+
SMS and Messaging Services
Usefulness | Usability | User Experience
Melissa Densmore, UCT CSC2002S
Why was SMS a killer app?
Cost
Low intrusion
Expressiveness and meaning
Turn0taking
Privacy – private communication in publc spaces
Simple and Direct
Melissa Densmore, UCT 32
7 April 2017
+
Mobile Modalities: Maps
Google Skymap
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 33
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/
Melissa Densmore, UCT CSC2002S
Image
https://thegrand0ptimist.wordpress.com/2013/03/13/heads-down-phones-up/
Melissa Densmore, UCT 34
7 April 2017
+
Sygic GPS App
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 35
7 April 2017
+
Virtual Reality - FlashBack
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 36
7 April 2017
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 37
7 April 2017
+
Facebook
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 38
7 April 2017
+
Instagram
Melissa Densmore, UCT CSC2002S
What are some of the affordances of this interface?
Melissa Densmore, UCT 39
7 April 2017
+
Vula
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 40
7 April 2017
+
Cape Town Buses and Trains
Melissa Densmore, UCT CSC2002S
Melissa Densmore, UCT 41
