visual design for non-designers - sdd conference...visual design for non-designers tobias komischke,...
TRANSCRIPT
Visual Design for Non-Designers
Tobias Komischke, Ph.D.
Director of User Experience
Corporate IT, Honeywell
TOBIAS KOMISCHKE
• Director, IT HUE
• Studied the stuff (Master’s & Ph.D.)
• 15+ years experience in research,
development, consulting
• Worked 10 years for Siemens, 7
years for Infragistics
• Adjunct Professor at Rutgers State
University of New Jersey
• Published 40+ technical papers,
gave 50+ public talks
The Honeywell User Experience creates
value by enabling our people to understand
the needs of our users, customers,
installers, maintainers, channel partners
and employees to design intuitive,
desirable and differentiated end-to-end
experiences.
We collaborate with customers and
business partners to serve their needs,
every day.
Visual Designer
Who should do visual design?
Developer, Business Analyst,
Intern, … Tom in Sales
“The envisioned, expected, or actual experience of
a user interacting with a technical product.”
A user will always have an experience, no matter if you design for it or not.
User Experience
Perceived UI aesthetics are closely
related to apparent (a priori)
usability: If something looks
appealing, it is assumed that the
usability will be good as well.
User Experience
Tractinsky, N. (1997). Aesthetics and Apparent
Usability: Empirically Assessing Cultural and
Methodological Issues. In: Proceedings of CHI, 22-
27 March, 1997. 115-122.
Raita, E., Oulasvirta, A. (2011). Too good to be bad:
favorable product expectations boost subjective
usability ratings. Interacting with Computers, 23(4),
363-371.
The role of visual designMake software products that are:
• Attractive
• Professional
• Contemporary
• Desirable
• Distinct
• Inline with brand
• Functional, usable and useful
at⋅trac⋅tive [uh-trak-tiv], adjective :
• providing pleasure or delight, esp. in appearance or manner
• arousing interest or engaging one's thought or consideration
www.dictionary.reference.com
What is Attractiveness?
If it can be processed easily by the brain
• Symmetry
• Proportions
• Cleanliness
Winkielman, P. , Halberstadt, J., Fazendeiro, T., Catty, S. (2006). Prototypes Are Attractive Because They Are Easy on the Mind.
Psychological Science. Pp. 799-806.
When is something attractive?
Visual Design Principles
• Simplicity – show as much as necessary and a little as possible
• Symmetry – provide balance and stability
• Visual Hierarchy – present UI elements in a way that informs users about their importance and thus
guides them through a UI
• Association – show what belongs together to support the understanding about what UI elements are
connected
Simplicity
Tuch, A.N., Presslaber, E.E., Stoecklin, M., Opwis, K., Bargas-Avila, J. A. (2012). International Journal of Human-Computer Studies archive, 70(11), 794-811.
• If it’s low in visual complexity (i.e. simple) and high in prototypicality (i.e. familiar)
• Websites that are low in prototypicality are rated lower in attractiveness no matter
how complex or simple they are.
• Websites of high visual complexity are rated lower in attractiveness no matter how
familiar they are.
When is something attractive?
13
Pie Charts
14
Pie Charts
Human Factors
• Visual clutter restricts the ability to focus
• Clutter limits the brain’s ability to process information
McMains, S., Kastner, S. (2011). Interactions of top-down and bottom-up
mechanisms in human visual cortex. The Journal of Neuroscience, 31(2), pp. 587-
597.
Strive for Simplicity
• Flat design: “No frills, no chrome, content is king!” (Microsoft)
• Data Visualization: “Maximize data to ink ratio!” (Edward Tufte)
• App Design: “Count a point for every different font, font size, and color on a page. If a
page goes above five points, redesign the page!” (Marissa Mayer)
“Everything should be made as simple as possible – but not simpler.” (Albert Einstein)
How simple?
Symmetry
Left side mirrored Right side mirrored
Original
Symmetry
Left side mirrored Right side mirrored
Original
Symmetry
Best positions: along the horizontal and vertical
symmetry axes and the angle bisectorsPeople rated goodness of
fit
People rated goodness of fit
of a second dot
Best positions: mirrored on the horizontal and vertical
axes
Palmer, S. (2007). Framing Aesthetics: Effects of spatial composition [Abstract]. Journal of Vision, 7(9):768, 768a.
Symmetry
• People have a need for structure (bilateral symmetry)
• The more it is shown, the less aesthetic it is rated
good bad
Bauerly, M.P., Liu, Y. (2006). Computational modeling and experimental investigation of effects of compositional elements on interfaces and
design aesthetics. International Journal of Human-Computer Studies, 64, 2006. pp. 670-682.
Symmetry
Symmetry
• Grids divide the screen into even areas
• Consistency improves readability of the UI, allows quicker learning and improves aesthetics
• Standardization reduces design time
A priori – macro level A posteriori – micro level
Symmetry
Symmetry• Grids divide the screen into even areas.
• Consistency improves readability of the UI, allows quicker learning and improves aesthetics
• Standardization reduces design time
Hierarchy
Hierarchy
DON’T READ THIS!read this instead.
Hierarchy
Association
Association: Gestalt Laws
Similarity
Good Continuation
Closure
Proximity
Wertheimer, M. (1923). Untersuchungen zur Lehre von der Gestalt II. In Psychologische Forschung, 4, pp. 301-350. Translation published in Ellis, W.
(1938). A source book of Gestalt psychology. London: Routledge & Kegan Paul, pp. 71-88.
Association: Gestalt LawsSimilarity
Proximity
Closure
Typeface
• For functional UIs, choose a type for good legibility
• Otherwise, use typeface that is appropriate for what the UI stands for (design is never
context-free)
• Plenty of options, but should only use one or max 2 fonts and then vary weights
• Usability ground rules apply, incl. size, text-background contrast
Typeface
Colors
Use of color: business applicationsVariations of few hues
Use of color: consumer applicationsAll bets are off!
Color Scheme = Selection of harmonious and coordinated colors
Color schemes based on a 12 part color wheel
Use any three colors which are
side by side (analogous colors)Use colors that are directly opposite
to each other (complementary colors)
Color schemes based on naturePixelate nature
Color schemes should be based on few hues that are varied in saturation and brightness
Colors
• Warm colors are preferred on cool colors
• Cool colors are preferred on warm colors
Palmer, S. (2007). Framing Aesthetics: Effects of spatial composition [Abstract]. Journal of Vision, 7(9):768, 768a.
5.00 3.76 3.94
3.893.765.56
4.894.895.33
5.39 4.61 4.72
3.393.765.11
4.563.943.89
Colors
Red hot, stop, aggression, error,
warning, fire, daring
Pink female, cute, cotton-candy
Orange warm, autumnal, Halloween
Yellow happy, sunny, cheerful, slow down,
caution
Brown warm, fall, dirty
Green envy, jealousy, a novice, spring-like
(fertile), pastoral
Blue peaceful, water, male
Purple royal
White virginal, clean, innocent,
cold
Black evil, ghostly, death, fear,
mourning
Gray overcast, gloom, old age
Colors stimulate associations:
Note:
Color associations depend on culture.
Red in Egypt: Death
Red in China: Happiness
Red in India: Life / Creativity
Colors
Schloss, K.B., Palmer, S. (2007). Aesthetic Preference for Color Combinations.
http://socrates.berkeley.edu/~plab/pdf/SchlossPalmer.pdf
Adult Human
Colors
Blue
• Primary color pure impression
• Only primary color that looks clean also for darker gradients providing the
highest number of clean color gradients (e.g. can be used to differentiate user interface
layers)
• Does not have a dominant color stereotype (e.g. red = danger), but is perceived as
neutral and reputable (e.g. U.N., financial sector)
Colors
Color Contrast
Color Perception
Color Perception
• Wyszecki, G, Stiles, W.S. (1982). Color science. 2nd edition. New York: Wiley.
• Sharpe, L.T., Stockman, A., Jägle, H. and Nathans, J. (1999). Opsin genes, cone photopigments, color vision, and color blindness.
In K.R. Gegenfurtner, L.T. Sharpe (Eds.), Color Vision: From Genes to Perception. Pages 3–51. Cambridge: University Press.
Color Perception
Normal Color Vision
Color Perception
Red-green perception deficiency
The Golden Ratio
Proportion of 1 : 1.62 between two quantities has been considered aesthetically pleasing
ever since the ancient Greeks.
The Golden Ratio
The Golden RatioCreating a Golden Rectangle
X X X
XX
X
X
X
1.62
1
1
1
X
The Golden Ratio
The Golden Ratio
Icons
Thank [email protected]