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 you!tobias.komischke@honeywell.com