Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Visual literacy in a business context
The opportunity for integration with user
experience design
#UXVL
Keith Instone 

ke...
What is visual literacy?
Quiz: Official definition of Visual Literacy
(A) Understanding how people perceive objects, interpret what
they see, and wha...
You’re right!
Defining user experience
UX
From http://www.helloerik.com/
From http://studioaum.in/
From http://www.usabilityprofessionals.org/ From http://www.uie.com/
From http://kimpearson.net/
From http://www.mitchell.com/
Visual Literacy Visual Design Visual Thinking
Visual Literacy
Design Thinking
Systems Thinking
Visual Design Visual Thinking
UX ThinkingUX Design
Visual Literacy
Design Thinking
Systems Thinking
Visual Design Visual Thinking
UX ThinkingUX Design
Info Literacy
Media Li...
Once upon a time…
From https://www.flickr.com/photos/ravensky/
A few Principles of Information Architecture
Usable and Findable: Clear choices
Accessible: Support devices and people
Des...
The ‘net
Web 2.0
Web 3.0
Internet of Things
Today
What are these?
Mobile web surpassed desktop use
2007 2009 2011 2013 2015
In 2013
Here are the 80 most common screen resolutions as reported
by browser metrics – they range from 122×133 to 2560×1600
11,86...
Self-Expression

1%
Discovery

4%
Preparation

7%
Managing Life

11%
Shopping

12%
Socializing

19%
“Me time”

46%
Everything has 

an interface
Everything is 

an experience
Everything is 

a transaction
Some very modern situations
(and their implications)
Modular Content for

Multiple Contexts

(Responsive)
User Interface 

Metaphors

(“Flat” design)
Layers and Motion

in Use...
Modular Content 

for Multiple Contexts

(Responsive)
New Approach:
Mobile first.
Start with something simple.
Treat everything else as an
enhancement.
Old Approach:
Desktop fi...
User Interface 

Metaphors

(“Flat” design)
Old Approach:

“Skeuomorphic”
Make it resemble

the real thing
New Approach:

“Flat”
Clean as possible, while

still signifying use
From https://dribbble.com/shots/740352-Scrollbars-evolution
Layers and Motion

in User Interfaces
swinging cards background blurnavigation with mini preview
Animation is not shown here.
Human Factors

and Devices
From http://scotthurff.com/
From http://4ourth.com
Storytelling
Gesture Literacy
Gesture
complexity …
opportunity, or
confusion?
Infographics &

Information Literacy
From http://designerlibrarian.wordpress.com/ From breezebee.wordpress.com
Data Visualization

Democratized
Edward
Tufte
From http://phys.org/
Who wants to use this?
From http://visage.co
Plug-and-play data visualizations
From http://www.tableausoftware.com/
Plug-and-play data visualizations
History repeating
What hasn’t changed
• Usable, Desirable, Accessible…
• Visibility – Perceived affordances or signifiers of what to do
• Co...
Where do we go from here?
L I T E R A T E
F

L

U

E

N

T
Ability to apply knowledge across situations
Functional /
Disciplinary
Skill
Keith Instone 

keith2014@instone.org 

@keithinstone
Thank You!
#UXVL
Continue the
conversation…
Mike Osswald 

mike.ossw...
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
User Experience and Visual Literacy – IVLA Conference 2014
Upcoming SlideShare
Loading in …5
×

User Experience and Visual Literacy – IVLA Conference 2014

1,326 views

Published on

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

Published in: Education
  • Be the first to comment

User Experience and Visual Literacy – IVLA Conference 2014

  1. 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. 2. What is visual literacy?
  3. 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. 4. You’re right!
  5. 5. Defining user experience UX
  6. 6. From http://www.helloerik.com/
  7. 7. From http://studioaum.in/
  8. 8. From http://www.usabilityprofessionals.org/ From http://www.uie.com/ From http://kimpearson.net/
  9. 9. From http://www.mitchell.com/
  10. 10. Visual Literacy Visual Design Visual Thinking
  11. 11. Visual Literacy Design Thinking Systems Thinking Visual Design Visual Thinking UX ThinkingUX Design
  12. 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. 13. Once upon a time…
  14. 14. From https://www.flickr.com/photos/ravensky/
  15. 15. A few Principles of Information Architecture Usable and Findable: Clear choices Accessible: Support devices and people Desirable and Useful: User-focused content
  16. 16. The ‘net Web 2.0 Web 3.0 Internet of Things
  17. 17. Today
  18. 18. What are these?
  19. 19. Mobile web surpassed desktop use 2007 2009 2011 2013 2015 In 2013
  20. 20. 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)
  21. 21. Self-Expression
 1% Discovery
 4% Preparation
 7% Managing Life
 11% Shopping
 12% Socializing
 19% “Me time”
 46%
  22. 22. Everything has 
 an interface Everything is 
 an experience Everything is 
 a transaction
  23. 23. Some very modern situations (and their implications)
  24. 24. 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…
  25. 25. Modular Content 
 for Multiple Contexts
 (Responsive)
  26. 26. 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.
  27. 27. User Interface 
 Metaphors
 (“Flat” design)
  28. 28. Old Approach:
 “Skeuomorphic” Make it resemble
 the real thing
  29. 29. New Approach:
 “Flat” Clean as possible, while
 still signifying use
  30. 30. From https://dribbble.com/shots/740352-Scrollbars-evolution
  31. 31. Layers and Motion
 in User Interfaces
  32. 32. swinging cards background blurnavigation with mini preview Animation is not shown here.
  33. 33. Human Factors
 and Devices
  34. 34. From http://scotthurff.com/
  35. 35. From http://4ourth.com
  36. 36. Storytelling
  37. 37. Gesture Literacy
  38. 38. Gesture complexity … opportunity, or confusion?
  39. 39. Infographics &
 Information Literacy
  40. 40. From http://designerlibrarian.wordpress.com/ From breezebee.wordpress.com
  41. 41. Data Visualization
 Democratized
  42. 42. Edward Tufte
  43. 43. From http://phys.org/ Who wants to use this?
  44. 44. From http://visage.co Plug-and-play data visualizations
  45. 45. From http://www.tableausoftware.com/ Plug-and-play data visualizations
  46. 46. History repeating
  47. 47. 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
  48. 48. Where do we go from here?
  49. 49. L I T E R A T E F
 L
 U
 E
 N
 T Ability to apply knowledge across situations Functional / Disciplinary Skill
  50. 50. Keith Instone 
 keith2014@instone.org 
 @keithinstone Thank You! #UXVL Continue the conversation… Mike Osswald 
 mike.osswald@hansoninc.com
 @mobial

×