Interaction Design

Chapter 9 (June 17, 2015, 9am-12pm):

Simplicity and Graphical User Interface Design

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 1

Graphical User Interface Design

• Principles
• Layout, Typography, Color & Contrast
• Controls and Widgets
• Simplicity

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 34

 photo credits © bill verplank

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 35

 User-experience
design

Information
architecture Industrial
design
Interaction
Communication design
design

User Interface
engineering
Human
factors

Usability
engineering

Human-computer
interaction

source: [4]
LMU München – Medieninformatik – Alexander Wiethoff + Heinrich Hussmann – Interaction Design – SS2012 36
 Like all forms of design, visual
design is about problem solving,
not about personal preference or
unsupported opinion.

Bob Baxley

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 37

 Interface design is only the
experienced representation of
the interaction, not the interaction
design itself.

source : [4]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 38
 User Interface

Transferring

Coordinating

Storing

http://orbitalrpm.com/wp-content/uploads/2008/12/cop-iceberg.png source : [4]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 39
 Tools

http://www.waynetaylordesign.com/storage/all%20tools%20large.jpg?__SQUARESPACE_CACHEVERSION=1273952138121 source : [4]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 40
 UI Elements

http://3.bp.blogspot.com/_bVtGlUaW-tA/TJIyNKvmK4I/AAAAAAAAO0A/CtgM11vozYE/s1600/22.jpg source : [4]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 41
Graphical User Interface Design

• Principles
• Layout, Typography, Color & Contrast
• Controls and Widgets
• Simplicity

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 42

 Layout

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016

 source : [4]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016
 Grids

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 45

 Grids

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 46

 Visual Clutter

http://howto.wired.com/mediawiki/images/Sprint-dashboard600.jpg

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 47

 Clutter creates visual noise and
makes an application hard to use

source : [4]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 48
 source : [4]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 49
 Proximity & Grouping

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 50

 By grouping similar elements together, the designer
helps the user deal with a complex information
display by reducing it to a manageable number of
units.

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 51
 Primary Action / Secondary Action

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 52
 All form actions are not equal, and therefore the visual
presentation of actions should match their importance to
make it easier to complete a form.
Visual distinction helps users make “good” choices.
source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 53
 Example: “Web Design, Filling the Blanks”

Yammer

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 54
 Constraint

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 55
 Constraints are closely related to real affordances: For
example, it is not possible to move the cursor outside
the screen: this is a physical constraint.

Locking the mouse button when clicking is not desired

would be a physical constraint. Restricting the cursor to
exist only in screen locations where its position is
meaningful is a physical constraint.

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 56
 Visual Constraint

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 57
 Scalability of Interfaces / Flexibility

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 58

 80/20 rule

http://www.swissknifeshop.com/media/catalog/product/cache/1/image/5e06319eda06f020e43594a9c230972d/v/m/vm_53831--91_sol_front_ax1000.jpg source : [1]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 59
 A principle for setting priorities: users will use 20% of
the features of your product 80% of the time. Focus the
majority of your design and development effort (80%)
on the most important 20% of the product.

source : [1]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 60
 Overcrowded Widget

http://www.codinghorror.com/blog/2006/11/this-is-what-happens-when-you-let-developers-create-ui.html source : [4]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 61
 source : [5]
[4]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 62
 Aesthetic-Usability Effect

http://www.swissknifeshop.com/media/catalog/product/cache/1/image/5e06319eda06f020e43594a9c230972d/v/m/vm_53831--91_sol_front_ax1000.jpg source : [1]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 63
 Aesthetic-Usability Effect
Aesthetic designs are perceived as easier to use than
less-aesthetic designs.
Aesthetic designs look easier to use and have a higher
probability of being used, whether or not they actually
are easier to use.
source : [1]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 64
 The flexibility-usability tradeoff is exemplified in the well
known maxim “jack of all trades, master of none”.

Flexible designs can perform more functions than

specialised designs, but they perform the functions less
efficiently.

source : [1]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 65
 source : [1]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016
http://4.bp.blogspot.com/_ghXMgLjKiLI/TNPb4-vMLAI/AAAAAAAAAJk/ytWQWHjZ6YE/s1600/PEOPLE+PSD+03.jpg

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 67

 Fonts

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 68

 -two general groups: serif & sans serif
-sans serif can be scanned quickly
-avoid very heavy or light typefaces for UIs
-avoid combining too similar typefaces
-stick with standards first

http://bytescout.com/files/images/examples/bytescoutpdf/standard_fonts.png source : [4]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 69
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 70
 source : [5]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 71
 Color

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 72

 HSV Color Space

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 73

 -three main properties: hue, saturation (or
intensity) and value (or brightness)
-hue refers to the color itself (the particular
color within the optical (visible) spectrum of
light), saturation refers to the brightness, value
refers to the amount of black in a color

-color can provide cues for use

-color can establish a relationship
-color can indicate importance
-consider human factors such as color
blindness and cultural differences

source : [4]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 74
 source : [5]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 75
 Questionable Website

http://thedirectoryofuglywebsites.com/wp-content/uploads/2011/01/Hosannadogs.jpg

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 76

 Contrast

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 77
 Effective design crates no more contrast
than necessary.

This allows the viewer to easily identify

the elements in question as a strongly
defined subset of the available
information.

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 78
Contrast

Effective design crates no more contrast

than necessary.
This allows the viewer to easily identify the elements
in question as a strongly defined subset of the available
information.

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 79
 Symmetry

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016
 Symmetry ensures balance and clear
organisation, if sometimes at the
expense of visual interest. While this
may be a drawback for a poster or retail
packaging, it is perfectly appropriate for
a user interface.

http://www.jailbreakbox.de/ipod-nano-mit-kamera-und-spielen source : [2]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 81
 UI Kits

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 82

 //oppian-prod-files.s3.amazonaws.com/blog/neil/actionsheet1_small.jpg

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 84

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 85
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 86
Graphical User Interface Design

• Principles
• Layout, Typography, Color & Contrast
• Controls and Widgets
• Simplicity

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 87

 Switch Button
http://www.conrad.de/ce/de/product/701855/
Vandalismusgeschuetzter-Taster-16-mm-mit-
http://fbelec.en.made-in-china.com/product/ Ringbeleuchtung-48-VDC-2-A-GQ16F-10EJB12V-
QeZnIxqKZikC/China-Switch.html Loetpins-48-VDC-2-A/
SHOP_AREA_17386&promotionareaSearchDetail=005
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016
Dial
http://www.conrad.de/ce/de/product/718295/
Universal-Geraeteknopf-mit-Skala-A-x-B-x-C-
mm-23-x-37-x-233-Aluminium-eloxiert-Aluminium-
eloxiert-Achs-Durchmesser/?ref=search
Slider
http://help.infragistics.com/Help/NetAdvantage/
ASPNET/2011.2/CLR4.0/html/images/
Web_New_WebSlider_Control.png
88
 Checkbox Radio Button Twist Scroll Bar

http://arcanecode.files.wordpress.com/ http://www.satimage.fr/software/images/gui/
2007/09/wpf035.jpg radio_button.png

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 89

 Drop-down Multiple Selection Text Box
Spin Box
menu List

http://arcanecode.files.wordpress.com/ http://www.satimage.fr/software/images/gui/
2007/09/wpf035.jpg radio_button.png

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 90

 Controls

http://www.flickr.com/photos/merlijnhoek/2055606176/ source : [4]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 91
 Controls

http://epautos.com/wp-content/uploads/2011/07/BMW-iDrive.jpg source : [4]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 92
 Mapping of Representation and Control

http://www.treffseiten.de/bmw/info/Pressebilder/2011/02/activee/03.jpg source : [4]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 93
Graphical User Interface Design

• Principles
• Layout, Typography, Color & Contrast
• Controls and Widgets
• Simplicity

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 94

 Simplicity

http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/11/braun03.jpg source : [2]

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 95
 Approachability
Simple designs can be rapidly apprehended and understood
well enough to support immediate use or invite further
exploration.
http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/11/braun19.jpg source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 96
 Recognisability
Simple designs can be recognised more easily than their
more elaborate counterparts. Because they present less
visual information to the viewer, they are more
easily assimilated, understood and remembered.
http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/11/braun31.jpg source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 97
 Immediacy
Simple designs have a greater impact than complex
designs, precisely because they can be immediately
recognised and understood with a minimum of
conscious effort.
http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/11/braun35.jpg source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 98
 Usability
Improving the approachability and memorability of a product
necessarily enhances usability as well. Simple designs that
eliminate unnecessary variation or detail make the variation
that remains more prominent and informative.
source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 99
 Reduction through successive refinement is the only
path to simplicity

source : [2]
LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 100
 References (Books):

[1] Lidwell, W., Holden, K. and Butler, J. Universal Principles of Design, Revised
and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase
Appeal, Make Better Design Decision, Second ed. Rockport, 2010.
[2] Mullet K. and D. Sano, Designing Visual Interfaces: Communication
Oriented Techniques, 1st ed. Prentice Hall, 1994.
[3] Moggridge, B. Designing Interactions, MIT Press, 2006.
[4] Saffer, D. Designing for Interaction, New Riders 2009.
[5] Ouilhet, H. The soul of the new machine: A story about Android design, UX
LMU Talks 2011-12.
[6] Buxton, W. Sketching the User Experience, Elsevier 2007
[7] Droste, M. Bauhaus, Taschen 2010.
[8] Fiedler, J. & Feierabend, P. Bauhaus, Könemann in der Tandem Verlags-
Gmbh 2005.

LMU München – Medieninformatik – Alexander Wiethoff – Interaction Design – SS2016 101