The document discusses the integration of visual design and usability, emphasizing the importance of consistency, hierarchy, and personality in UI design. It highlights how users perceive interfaces and the role of visual language in communication, supported by case studies like SuperTracker that illustrate these principles in practice. Key meta-principles outline the need for strategic decision-making regarding aesthetics to enhance user experience and acceptance of applications.

1. Visual Usability
Bringing Graphic and UI Design Together
Tania Schlatter

2. Who am I?

3. UX & IA | Catapult.org

4. UX & IA | IDIN @ MIT

5. workobscured–underNDA

6. UX & IA + UI & visual design | reAssemble.net

7. What is visual usability?

9. Graphic design background

10. How do we make more
strategicand less
arbitrary decisions about
visual design?

11. Human-centered design

12. Early dynamic web
applications

13. How do we make things
people understand
and want to use?

14. Lots of reviews!

15. Same UI problems across
different site/app types

16. No consistent visual standards

17. No clear next step

18. No inspiration, not inspiring

19. Research on vision and
perception for design

20. People:
• seek patterns quickly and automatically
• notice differences
• are attracted to novelty
Key points about people
and visual perception

21. “[P]erceptions of interface aesthetic are closely
related to apparent usability and thus increase
the likelihood that aesthetics may considerably
affect system acceptability.”
- Noam Tractinsky
Attractive things work better

22. We have visceral reactions and make judgements
based on what we see
Is this
for
me?

23. Consistency, Hierarchy,
and Personality
Ah-ha moment

24. Consistency: establishing or adopting appropriate patterns
Hierarchy: calling attention to the most important things
Personality: choosing appropriate expressive characteristics

25. Details matter. One of these is“just right.”

26. Complex, functional apps

27. Focusing on interface as a key
part of the UX makes a difference

28. What’s the big deal?

29. A UI that uses patterns to communicate has a visual language. Patterns
and conventions help people understand what you are trying to say.
Meta-principles: consistency
Goal: define a consistent framework that can flex – a visual language
Epicurious iPhone/iPad UI 2012/2013
Consistency

30. Pattern recognition
Establish patterns within an app and use them consistently to create visual language.
Meta-principles: consistency

31. Differences in function – style
Differences in types of text – font
Differences in content types – layout
Indicating difference is part of effective communication
Meta-principles: consistency

32. Internal consistency
Consistent use of type and button style across screens
Meta-principles: consistency

33. External consistency
Decisions about consistency are linked to overall app strategy and UX.
MS Word
Google
Consistency helps ease changes through familiarity.
Meta-principles: consistency

34. External consistency
Inconsistency helps differentiate.
MS Word
750 Words
Meta-principles: consistency

35. If your users share similar characteristics and are
familiar with an existing app, why not make
everything consistent?
Why not just copy
another app?
Why not just use the
iOS or Android
standards?
Meta-principles: consistency

36. Defaults are a good starting point.
Appropriate visual cues are needed to create a
visual hierarchy.
A distinct personality inspires affinity.
Meta-principles

37. Squint. Can you tell the difference?
Meta-principles

38. Meaningful hierarchies have visual indicators of importance, so people
know what’s what, and who’s who.
Goal: define levels of importance based on the most common
or desirable path, and indicate them clearly
Most mobile users
want to search for
a recipe
Hierarchy
Meta-principles: hierarchy

39. Unclear hierarchy
Meta-principles: hierarchy

40. Improving hierarchy
Meta-principles: hierarchy

41. Gestalt principles
Psychological principles outlining perception of
spatial relationships – help to establish visual hierarchy.
• Proximity implies grouping, and similarity
• Similar characteristics imply grouping
• Figure and ground imply space – foreground
and background.
• Our eyes are drawn to differences
http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
Meta-principles: hierarchy

42. Gestalt principles
Help us understand how to place and treat elements visually.
Contrast is the key ingredient
same color, shape
and style = related
different
color =
difference
different color,
size, and style =
different
Foreground/background
= photo is not important,
but buttons are
Meta-principles: hierarchy

43. Color: muted vs. saturated
Treatment: plain vs. fancy
Stylistic details affect visual hierarchy
Meta-principles: hierarchy

44. The more types of elements you have, the
harder it is to establish a clear hierarchy.
Complexity adds to the challenge
Meta-principles: hierarchy

45. workobscured.UnderNDA.

46. Does style really
matter?
People just want to
catch their bus.
Personality
Visual characteristics affect interpretation.
Goal: characteristics that communicate appropriate difference
Meta-principles: personality

47. I thought we were
talking about complex
apps!
People download me,
even though they have
a free weather app.
Meta-principles: personality

48. If consistency and hierarchy are the grammar
of your visual language, personality is the tone and
choice of words you speak.
Hey everybody, listen up!
Friends, Romans, countrymen:
lend me your ears.
Meta-principles: personality

49. How much personality do we need?
Goal is not drama or novelty for the
sake of it.
No one wants to use the app
equivalent of Stark’s gold-plated
juicer for Alessi.
http://www.flickr.com/photos/dickyfeng/6254476990/
Meta-principles: personality

50. Functionality vs. appeal
Meta-principles: personality

51. How functional does it need to be?
http://www.wired.com/entertainment/theweb/magazine/17-09/ff_craigslist_makeover
Selecting expressive qualities
http://new.pentagram.com/2009/09/craigs-list/
Meta-principles: personality

52. How to apply in practice?

53. Thoughtful decisions about expression and differentiation
grounded in:
1. users and context
• brain: how people see and understand
• individual: age, demographics, experiences, expectations
• situation: device, setting, goals
2. what is being communicated by whom
• content: what is being represented
• sender: who the information & interactions are from
Criteria for decisions about personalitySuperTracker
changing the visual language without changing use
Case study: SuperTracker

54. Communicating consistency, hierarchy, and
personality through visual design
Visual interface design requirements
• What are the business’application goals?
• What do we know/what can we learn about the users?
• What are technical implications?
+
• What personality do we want to convey?
Case study: SuperTracker

55. Visual interface design requirements
• Goals: help broad audience make healthy food choices, lose
weight, and get moving
• Users: create lightweight personas based on real-world scenarios
• Technical implications: quick competitive analysis suggested
plenty of room for nice-looking apps; mobile-first strategy
• Personality: what will be appropriate for users? Think about
personas
=
Outcome: a design rationale
Case study: SuperTracker

56. Thoughtful decisions about expression and differentiation
grounded in:
1. users and context
• brain: how people see and understand
• individual: age, demographics, experiences, expectations
• situation: device, setting, goals
2. what is being communicated by whom
• content: what is being represented
• sender: who the information & interactions are from
Criteria for decisions about personalityFocus on food tracking
Case study: SuperTracker

57. Exploring consistency and hierarchy with layout
Case study: SuperTracker

58. Exploring consistency and hierarchy with layout
Case study: SuperTracker

59. Exploring layout with wireframes
Case study: SuperTracker

60. Logo explorations
SUPER
TRACKER
SUPERTRACKER
3.
Original logo
supertracker
supertracker
trackersuper
1. SUPERTRACKER
SUPERTRACKER
SUPERtracker
SUPERtracker
SUPERTRACKER
SUPERTRACKER
2.
Case study: SuperTracker

61. Exploring hierarchy/personality with type
Case study: SuperTracker

62. Exploring consistency, hierarchy, and personality
with color
Three requirements: approachability, adherence to standards, accessibility
Case study: SuperTracker

63. Exploring personality with imagery
Final icons
Case study: SuperTracker

64. Chart & image explorations
Final charts
Case study: SuperTracker

65. Divide full-view into two areas
Focus attention on key text and controls
Case study: SuperTracker

67. Thank you!
Tania Schlatter
tania@nimblepartners.com
@taniaschlatter
@visualusability