user experience and visual literacy – ivla conference 2014
Post on 14-Jul-2015
305 Views
Preview:
TRANSCRIPT
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
What is visual literacy?
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
You’re right!
Defining user experience
UX
From http://www.usabilityprofessionals.org/ From http://www.uie.com/
From http://kimpearson.net/
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 Literacy
Info Design
Info ArchitectureInfo Visualization
Once upon a time…
A few Principles of Information Architecture
Usable and Findable: Clear choices
Accessible: Support devices and people
Desirable and Useful: User-focused content
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
both screens are 2560 × 1600
11,868 distinct Android devices in 2013 (up from 3,997 in 2012)
Self-Expression1%
Discovery4%
Preparation7%
Managing Life11%
Shopping12%
Socializing19%
“Me time”46%
Everything has an interface
Everything is an experience
Everything is a transaction
Some very modern situations (and their implications)
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…
Modular Content for Multiple Contexts
(Responsive)
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.
User Interface Metaphors
(“Flat” design)
Old Approach:
“Skeuomorphic”
Make it resemblethe real thing
New Approach:
“Flat”
Clean as possible, whilestill signifying use
From https://dribbble.com/shots/740352-Scrollbars-evolution
Layers and Motionin User Interfaces
swinging cards background blurnavigation with mini preview
Animation is not shown here.
Human Factorsand 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.coPlug-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
• Consistency – following standards and conventions
• Feedback – Clarity that the action is taking place
• Non-destructive operations – ability to go back, ability to undo
Where do we go from here?
L I T E R A T E
FLUENT
Ability to apply knowledge across situations
Functional / Disciplinary Skill
Keith Instone
keith2014@instone.org
@keithinstone
Thank You!
#UXVL
Continue the conversation…
Mike Osswald
mike.osswald@hansoninc.com
@mobial
top related