user experience and visual literacy – ivla conference 2014
TRANSCRIPT
![Page 1: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/1.jpg)
Visual literacy in a business context
The opportunity for integration with user experience design
#UXVL
Keith Instone
@keithinstone
Mike Osswald
[email protected] @mobial
![Page 2: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/2.jpg)
What is visual literacy?
![Page 3: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/3.jpg)
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
![Page 4: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/4.jpg)
You’re right!
![Page 5: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/5.jpg)
Defining user experience
UX
![Page 8: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/8.jpg)
From http://www.usabilityprofessionals.org/ From http://www.uie.com/
From http://kimpearson.net/
![Page 10: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/10.jpg)
Visual Literacy Visual Design Visual Thinking
![Page 11: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/11.jpg)
Visual Literacy
Design Thinking
Systems Thinking
Visual Design Visual Thinking
UX ThinkingUX Design
![Page 12: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/12.jpg)
Visual Literacy
Design Thinking
Systems Thinking
Visual Design Visual Thinking
UX ThinkingUX Design
Info Literacy
Media Literacy
Info Design
Info ArchitectureInfo Visualization
![Page 13: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/13.jpg)
Once upon a time…
![Page 15: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/15.jpg)
A few Principles of Information Architecture
Usable and Findable: Clear choices
Accessible: Support devices and people
Desirable and Useful: User-focused content
![Page 16: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/16.jpg)
The ‘net
Web 2.0
Web 3.0
Internet of Things
![Page 17: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/17.jpg)
![Page 18: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/18.jpg)
![Page 19: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/19.jpg)
Today
![Page 20: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/20.jpg)
What are these?
![Page 21: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/21.jpg)
Mobile web surpassed desktop use
2007 2009 2011 2013 2015
In 2013
![Page 22: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/22.jpg)
![Page 23: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/23.jpg)
![Page 24: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/24.jpg)
Here are the 80 most common screen resolutions as reported
by browser metrics – they range from 122×133 to 2560×1600
both screens are 2560 × 1600
11,868 distinct Android devices in 2013 (up from 3,997 in 2012)
![Page 25: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/25.jpg)
Self-Expression1%
Discovery4%
Preparation7%
Managing Life11%
Shopping12%
Socializing19%
“Me time”46%
![Page 26: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/26.jpg)
Everything has an interface
Everything is an experience
Everything is a transaction
![Page 27: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/27.jpg)
Some very modern situations (and their implications)
![Page 28: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/28.jpg)
Modular Content forMultiple Contexts(Responsive)
User Interface Metaphors(“Flat” design)
Layers and Motionin User Interfaces
Gesture Literacy
Storytelling
Human Factors and Devices
Data Visualization Democratized
Infographics & Information Literacy
Visual literacyand…
![Page 29: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/29.jpg)
Modular Content for Multiple Contexts
(Responsive)
![Page 30: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/30.jpg)
![Page 31: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/31.jpg)
![Page 32: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/32.jpg)
![Page 33: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/33.jpg)
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.
![Page 34: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/34.jpg)
User Interface Metaphors
(“Flat” design)
![Page 35: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/35.jpg)
Old Approach:
“Skeuomorphic”
Make it resemblethe real thing
![Page 36: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/36.jpg)
New Approach:
“Flat”
Clean as possible, whilestill signifying use
![Page 37: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/37.jpg)
From https://dribbble.com/shots/740352-Scrollbars-evolution
![Page 38: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/38.jpg)
![Page 39: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/39.jpg)
![Page 40: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/40.jpg)
Layers and Motionin User Interfaces
![Page 41: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/41.jpg)
![Page 42: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/42.jpg)
swinging cards background blurnavigation with mini preview
Animation is not shown here.
![Page 43: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/43.jpg)
Human Factorsand Devices
![Page 44: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/44.jpg)
From http://scotthurff.com/
![Page 45: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/45.jpg)
From http://4ourth.com
![Page 46: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/46.jpg)
Storytelling
![Page 47: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/47.jpg)
![Page 48: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/48.jpg)
Gesture Literacy
![Page 49: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/49.jpg)
![Page 50: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/50.jpg)
Gesture complexity … opportunity, or
confusion?
![Page 51: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/51.jpg)
Infographics &Information Literacy
![Page 52: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/52.jpg)
From http://designerlibrarian.wordpress.com/ From breezebee.wordpress.com
![Page 53: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/53.jpg)
Data Visualization Democratized
![Page 54: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/54.jpg)
Edward Tufte
![Page 55: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/55.jpg)
From http://phys.org/Who wants to use this?
![Page 56: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/56.jpg)
From http://visage.coPlug-and-play data visualizations
![Page 57: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/57.jpg)
From http://www.tableausoftware.com/
Plug-and-play data visualizations
![Page 58: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/58.jpg)
History repeating
![Page 59: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/59.jpg)
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
![Page 60: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/60.jpg)
Where do we go from here?
![Page 61: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/61.jpg)
L I T E R A T E
FLUENT
Ability to apply knowledge across situations
Functional / Disciplinary Skill
![Page 62: User Experience and Visual Literacy – IVLA Conference 2014](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a43e101a28aba3378b462f/html5/thumbnails/62.jpg)
Keith Instone
@keithinstone
Thank You!
#UXVL
Continue the conversation…
Mike Osswald
@mobial