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.

1. Tips for talking about
Visual design for UX
Tania Schlatter

2. Graphic design background

3. Early dynamic web
applications

4. Visual UI design gets
done in a variety of ways –
by the engineers
ad-hoc

5. by committee
heads in
the clouds
holy war

6. by designers
psychic
short-order
cook
“rock star”

7. I think better
communication
can help.

8. Tips from
“Crucial Conversations”
• Dialog is the essential
ingredient
• To have dialog, go from
personal meanings to pool
of shared meaning

9. Share ideas and opinions to
develop a “pool of shared meaning”

10. Lack of shared meaning
leads to arguing and debating
http://fromtheeditr.blogspot.com/2012/08/water-polo-new-favorite-brutal-sport.html

11. Psychic short-order
cook design
Ad-hoc design
“Rock star” design
Heads in the clouds
design
Holy war design

12. Psychic short-order
cook design
Ad-hoc design
“Rock star” design
Heads in the clouds
design
Holy war design

13. Psychic short-order
cook design
Ad-hoc design
“Rock star” design
Heads in the clouds
design
Holy war design

14. Psychic short-order
cook design
Ad-hoc design
“Rock star” design
Heads in the clouds
design
Holy war design

15. Tips from “How to Talk so
Kids will Listen & Listen
so Kids will Talk”
• Say what you see
• Use few, straightforward words
• Listen without judgement

16. State what you see to
focus attention and response
Reporting
Not judging
http://parade.condenast.com/224921/parade/kate-cronkite-reflects-on-watching-her-dad-walter-cronkiteannounce-jfks-assassination/
http://www.artofhustle.com/2011/05/can-we-tawk-joan-rivers-and-the-art-of-hustle/

17. Psychic short-order
cook design
Ad-hoc design
“Rock star” design
Holy war design
Heads in the clouds
design

18. Psychic short-order
cook design
Ad-hoc design
“Rock star” design
Holy war design
Heads in the clouds
design

19. 1. Identify what
to talk about
• Layout/position
• Typography
• Color
• Imagery
• Controls,
SIGNIFIERS &
motion

20. Art as TOOL for creating visual language
& delivering the message
• Layout/position
• Typography
• Color
• Imagery
• Controls,
SIGNIFIERS &
motion
from Understanding Comics by Scott McCloud

21. Layout/position
placement of elements in
relation to one another

22. Typography
design
design
design
design
DESIGN
DESIGN
typeface & fonts

23. Color
choice of color
and use

24. Imagery
choice of imagery
and use

25. Controls,
SIGNIFIERS &
movement
choice of control,
presentation of affordances
(signifiers) & behavior

26. 2. Characterize

27. Characterize in
1 word?

28. Characterize in
1 word?

29. Measurement of
perceived aesthetics
• User perception
consists of two main
dimensions

30. Classical
well organized
clear
clean
symmetrical
http://www.flickr.com/photos/edwardlangley/8318320976/

31. Expressive
originality
using special effects
http://www.flickr.com/photos/wwarby/4790992757/

32. Strategic decisions about
visual characteristics

33. Strategic decisions about
visual characteristics
Audience?
Goals?

34. Strategic decisions about
visual characteristics
Audience?
Appeal to all, express brand
Goals?
Appeal to few, express self

35. 3. Assess
Vs.

36. Things appear / don’t appear
as we expect
(in)consistency

37. Important things do / don’t
look important
hierarchy / no hierarchy

38. Effective differentiation /
not enough / too much
personality

39. Dialog to share understanding
& make informed decisions
• Layout/position
• Typography
• Color
• Imagery
• Controls,
SIGNIFIERS &
motion
audience
business goals
elements as
“tools”
characteristics
principles

40. Clear communication internally
will help lead to clear visual communication via UI
identify
characterize
& say what you see
with clear terms
assess
know the principles of
good UI, and what is
right for your users, app,
and goals

41. Clear communication internally
will help lead to clear visual communication via UI
“It looks more
important than the
‘buy now’ button.”
“This orange button
is different from the
others.”
identify
characterize
& say what you see
with clear terms
“It is more expressive
because it is more
important.”
assess
know the principles of
good UI, and what is
right for your users, app,
and goals
“Maybe it is
too
expressive.”

42. Thank you!
I’d love to hear from you
@taniaschlatter
http://www.linkedin.com/in/taniaschlatter
tania@nimblepartners.com