tips for talking about visual design for ux - conveyux
DESCRIPTION
ConveyUX 2014 - Everyone wants to provide a great UX. Visual UI is part of that, but it is hard for teams to talk about. This presentation outlines familiar terms and simple approaches to talk about visual UI characteristics in a way that connects the visual to overall UX.TRANSCRIPT
Visual design for UXTips for talking about
Tania Schlatter
Graphic design background
Early dynamic web
applications
ad-hoc
Visual UI design gets
done in a variety of ways –
by the engineers
heads in the clouds holy war
by committee
psychic short-order cook
“rock star”
by designers
I think better communication can help.
• Dialog is the essential ingredient
• To have dialog, go from personal meanings to pool of shared meaning
Tips from
“Crucial Conversations”
Share ideas and opinions to
develop a “pool of shared meaning”
Lack of shared meaning
leads to arguing and debating
http://fromtheeditr.blogspot.com/2012/08/water-polo-new-favorite-brutal-sport.html
Ad-hoc design
Heads in the clouds design
“Rock star” design
Holy war design
Psychic short-order cook design
Ad-hoc design
Heads in the clouds design
“Rock star” design
Holy war design
Psychic short-order cook design
Heads in the clouds design
Psychic short-order cook design
Ad-hoc design
“Rock star” design
Holy war design
Heads in the clouds design
Psychic short-order cook design
Ad-hoc design
“Rock star” design
Holy war design
• Say what you see
• Use few, straightforward words
• Listen without judgement
Tips from “How to Talk so
Kids will Listen & Listen
so Kids will Talk”
Reporting Not judging
State what you see to
focus attention and response
http://www.artofhustle.com/2011/05/can-we-tawk-joan-rivers-and-the-art-of-hustle/http://parade.condenast.com/224921/parade/kate-cronkite-re!ects-on-watching-her-dad-walter-cronkite-announce-jfks-assassination/
Ad-hoc design
“Rock star” design
Holy war designHeads in the clouds
design
Psychic short-order cook design
Ad-hoc design
“Rock star” design
Holy war designHeads in the clouds
design
Psychic short-order cook design
• Layout/position
• Typography
• Color
• Imagery
• Controls, SIGNIFIERS & motion
1. Identify what
to talk about
• Layout/position
• Typography
• Color
• Imagery
• Controls, SIGNIFIERS & motion
from Understanding Comics by Scott McCloud
Art as TOOL for creating visual language
& delivering the message
Layout/position
placement of elements in
relation to one another
Typography
typeface & fonts
design
design
DESIGN
design
designDESIGN
Color
choice of color
and use
choice of imagery
and use
Imagery
Controls,
SIGNIFIERS &
movement
choice of control,
presentation of affordances
(signifiers) & behavior
2. Characterize
Characterize in
1 word?
Characterize in
1 word?
• User perceptionconsists of two main dimensions
Measurement of
perceived aesthetics
Classical
well organizedclearcleansymmetrical
http://www.!ickr.com/photos/edwardlangley/8318320976/
Expressive
http://www.!ickr.com/photos/wwarby/4790992757/
originalityusing special effects
Strategic decisions about
visual characteristics
Audience? Goals?
Strategic decisions about
visual characteristics
Audience? Goals?
Strategic decisions about
visual characteristics
Appeal to all, express brand Appeal to few, express self
3. Assess
Vs.
Things appear / don’t appear
as we expect
(in)consistency
Important things do / don’t
look important
hierarchy / no hierarchy
Effective differentiation /
not enough / too much
personality
• Layout/position
• Typography
• Color
• Imagery
• Controls, SIGNIFIERS & motion
elements as “tools”
characteristics principles
Dialog to share understanding
& make informed decisions
audience
business goals
Clear communication internally
will help lead to clear visual communication via UI
identify& say what you see
characterizewith clear terms
assessknow the principles of good UI, and what is
right for your users, app, and goals
Clear communication internally
will help lead to clear visual communication via UI
identify& say what you see
characterizewith clear terms
assessknow the principles of good UI, and what is
right for your users, app, and goals
“This orange button is different from the
others.”
“It is more expressive because it is more
important.”
“It looks more important than the ‘buy now’ button.”
“Maybe it is too
expressive.”
Thank you!
I’d love to hear from you@taniaschlatter
http://www.linkedin.com/in/taniaschlatter