This talk is about the opportunity for integrating the disciplines/principles of User Experience Design and Information Architecture with Visual Literacy. Keith Instone and Mike Osswald presented at the 2014 International Visual Literacy Conference held Nov. 5-8, 2014 at The Toledo Museum of Art. The key theme of the talk is that Visual Literacy and User Experience principles have a lot in common, and the need for different disciplines to understand what each other is doing is important. For the intended audience of museum and academic teachers, the goal is to explain UX and Information Architecture, and what some of the modern trends and issues facing experience designers today. NOTE: A video of this presentation is hosted at WGTE's KnowledgeStream web site, at http://www.knowledgestream.org/kstream/index.asp?item_id=19848

1. Visual literacy in a business context
The opportunity for integration with user
experience design
#UXVL
Keith Instone
keith2014@instone.org
@keithinstone
Mike Osswald
mike.osswald@hansoninc.com
@mobial

2. What is visual literacy?

3. Quiz: Official definition of Visual Literacy
(A) Understanding how people perceive objects, interpret what
they see, and what they learn from them
(B) Ability to construct meaning from visual images
(C) Recognizing and understanding ideas conveyed through
visible actions or images (as pictures)
(D) Ability to communicate via doodling, drawing, and sketching
(E) An umbrella field with components of Visual Perception,
Visual Language, Visual Learning, Visual Thinking,
Visual Communication

4. You’re right!

5. Defining user experience
UX

6. From http://www.helloerik.com/

7. From http://studioaum.in/

8. From http://www.usabilityprofessionals.org/ From http://www.uie.com/
From http://kimpearson.net/

9. From http://www.mitchell.com/

10. Visual Literacy Visual Design Visual Thinking

11. Visual Literacy
Design Thinking
Systems Thinking
Visual Design Visual Thinking
UX ThinkingUX Design

12. Visual Literacy
Design Thinking
Systems Thinking
Visual Design Visual Thinking
UX ThinkingUX Design
Info Literacy
Media Literacy
Info Design
Info Architecture
Info Visualization

13. Once upon a time…

14. From https://www.flickr.com/photos/ravensky/

15. A few Principles of Information Architecture
Usable and Findable: Clear choices
Accessible: Support devices and people
Desirable and Useful: User-focused content

16. The ‘net
Web 2.0
Web 3.0
Internet of Things

19. Today

20. What are these?

21. Mobile web surpassed desktop use
2007 2009 2011 2013 2015
In 2013

24. Here are the 80 most common screen resolutions as reported
by browser metrics – they range from 122×133 to 2560×1600
11,868 distinct Android devices in 2013 (up from 3,997 in 2012)

25. Self-Expression
1%
Discovery
4%
Preparation
7%
Managing Life
11%
Shopping
12%
Socializing
19%
“Me time”
46%

26. Everything has
an interface
Everything is
an experience
Everything is
a transaction

27. Some very modern situations
(and their implications)

28. Modular Content for
Multiple Contexts
(Responsive)
User Interface
Metaphors
(“Flat” design)
Layers and Motion
in User Interfaces
Gesture Literacy
Storytelling
Human Factors
and Devices
Data Visualization
Democratized
Infographics &
Information Literacy
Visual literacy
and…

29. Modular Content
for Multiple Contexts
(Responsive)

33. New Approach:
Mobile first.
Start with something simple.
Treat everything else as an
enhancement.
Old Approach:
Desktop first.
Start with something
complex.
Shrink it till it breaks,
then fix it.

34. User Interface
Metaphors
(“Flat” design)

35. Old Approach:
“Skeuomorphic”
Make it resemble
the real thing

36. New Approach:
“Flat”
Clean as possible, while
still signifying use

37. From https://dribbble.com/shots/740352-Scrollbars-evolution

40. Layers and Motion
in User Interfaces

42. swinging cards background blurnavigation with mini preview
Animation is not shown here.

43. Human Factors
and Devices

44. From http://scotthurff.com/

45. From http://4ourth.com

46. Storytelling

48. Gesture Literacy

50. Gesture
complexity …
opportunity, or
confusion?

51. Infographics &
Information Literacy

52. From http://designerlibrarian.wordpress.com/ From breezebee.wordpress.com

53. Data Visualization
Democratized

54. Edward
Tufte

55. From http://phys.org/
Who wants to use this?

56. From http://visage.co
Plug-and-play data visualizations

57. From http://www.tableausoftware.com/
Plug-and-play data visualizations

58. History repeating

59. What hasn’t changed
• Usable, Desirable, Accessible…
• Visibility – Perceived affordances or signifiers of what to do
• Consistency – following standards and conventions
• Feedback – Clarity that the action is taking place
• Non-destructive operations – ability to go back, ability to undo

60. Where do we go from here?

61. L I T E R A T E
F
L
U
E
N
T
Ability to apply knowledge across situations
Functional /
Disciplinary
Skill

62. Keith Instone
keith2014@instone.org
@keithinstone
Thank You!
#UXVL
Continue the
conversation…
Mike Osswald
mike.osswald@hansoninc.com
@mobial