1. u es
The
t Version 1.5
Q t a
o g
for
l ent
na em
io g
m n
E E @stephenanderson
#uxilive
Information Visualization
Ste phen P. Anderson

2. Product
Stephen P. Strategy
aND
n
Deonsisuglting
C
Anderson

3. Product
Stephen P. Strategy
aND
n
Deonsisuglting
C
Anderson

4. Product
Stephen P. Strategy
aND
n
Deonsisuglting
C
Anderson

5. information

6. How do we make sense of
complex information
information?

7. (Rebooting your Windows PC)

10. How do we make sense of
complex information
information?

11. Identifying information people
have difficulty making sense of…

12. The Villains:
lists
spreadsheets
grid views
dashboards

13. The Villains:
lists
spreadsheets
grid views
dashboards

14. The Villains:
THERE’S SOMETHING MISSING FROM THESE DESIGN PATTERNS…
RELATIONSHIPS!
spreadsheets
lists
INCLUDING PROCESSES, PROPORTIONS & CHANGES OVER TIME
grid views
dashboards

15. The Villains:
lists
spreadsheets
grid views
dashboards

16. The Villains:
Guilty of...?
spreadsheets
lists F ailure to aid
dashboards in m aking sense
grid views of compley
information!

17. Villain N
o:
1 P retends to be more useful & engaging,
by being visual.
But, aside from a pictured. or product
shot, nothing much is adde
It’s simply list data, disquised as more.
grid layout

18. W hi ch ca m er a
sh ou ld I bu y ,
a nd w hy ?

19. W hi ch ca m er a
sh ou ld I bu y ,
a nd w hy ?

22. !!!
Dang!
Whew!
Good
Fun Toy

24. W ha t a re t he
d if fe re nc es ?
H el p m e m a ke se ns e
of m y op t io ns !

26. WHAT’S NOT IMPORTANT!

27. WHAT IS IMPORTANT!
the reviews on amazon.com
pricing (as an indicator of quality)
in-depth review from
placeslike dpreview.com
actual photos taken
with camera
search results, just t0
see what comes up

28. cameras older than ‘x’ years!
http://amazon.com

30. INSPIRATION!

31. http://
dpreview.com

33. http://
labs.digg.com

36. Results
arranged on a
timeline
OLDER NEWEST

37. POPULARITY n sales ranking)
(f rom Flickr and Amazo

38. Customermazon)
A
Reviews
(from

39. Customermazon)
A
Reviews
(from

41. (H over state)
PRICING
PHOTOS
SPECS
REVIEWS

42. (Photos taken
PRICING
with this camera
PHOTOS
SPECS
from Flickr)
REVIEWS
View more on Flickr

43. etc.
PRICING
PHOTOS
SPECS
REVIEWS

45. “DATA” CAN BE:
• Numbers
• Metadata
• Any information contained in a spreadsheet
• Anything you can get via an API!
(photos, images, text info)
• Anything you can calculate from base data
(difference between to numbers)
• Anything you can derive from data
(sentiment analysis)

46. “DATA” CAN BE:
• Numbers
• Metadata
• Any information contained in a spreadsheet
• Anything you can get via an API!
(photos, images, text info)
• Anything you can calculate from base data
(difference between to numbers)
• Anything you can derive from data
(sentiment analysis)

47. Villain N 2
o:
This pat ern doesn’t even try to be
useful or engaging.
S een in lists of all kinds & search
engine results pages
lists

51. The Blue Sky of Benefits
Finally, something good!
Drowning in a Sea of Deductibles
amount of money that the insured must pay before any
benefits from the health insurance policy can be used.

52. The Blue Sky of Benefits
Finally, something good! Co-insurance
This is usually a percentage amount that is the
Co-payments insured's responsibility. A common co-insurance
split is 80/20. This means that the insurance
The co-payment is a fixed amount that company will pay 80% of the procedure and the
the insured is required to pay at the time insured is required to pay the other 20%.
of service. It is usually required for
basic doctor visits and when purchasing 100%
prescription medications.
90/10
$10/ $45 / $55 80/20
$10/ $35 / $45 Emergencies and
Specialists
Office Visits Prescriptions Gabe-endo, Elijah’s oral surgery, Erin’s wrist,
chiropractor, x-rays
Pharmaceutical
Deductible
$250/pp ?
Individual
Deductible
Drowning in a Sea of Deductibles
amount of money that the insured must pay before any
benefits from the health insurance policy can be used.
Family
Deductible

57. Villain N
o:
3 Is the workhorse used by many people.”
Extr emely flexible- can be what anyone
needs it to be.
C onsequently, it ends up being atliitoln,e more
than a treasure trove of iwsformof data.
n
hidden beyond rows and ro
“t he spreadsheet” Places burden of usefullness entirely
ESliv li, aSPnRgEAoDSsHEET,dORif eDAreTAt GRnaIDmSes upon user.
AeKAs:amTAe BL e by n
th

58. Packaged
Order Order Shipped Shipped Tracking Estimated
Order # Items Ordered Cut On for
Placed Received Out On By Number Arrival
Delivery
1 box olive mat
329103 board 1/15 1/15 - - 1/21 UPS 1/23
3 of something
1 super special
329100 1/12 1/13 1/15 1/15 1/19 UPS SCG78299 1/23
frame
5 sheets (8ʼx4ʼ)
329099 1/12 1/13 N/A 1/16 1/17 FedEx FJ8989221 1/20
AG Glass

59. Packaged
Order Order Shipped Shipped Tracking Estimated
Order # Items Ordered Cut On for
Placed Received Out On By Number Arrival
Delivery
1 box olive mat
329103 board 1/15 1/15 - - 1/21 UPS 1/23
3 of something
1 super special
329100 1/12 1/13 1/15 1/15 1/19 UPS SCG78299 1/23
frame
5 sheets (8ʼx4ʼ)
329099 1/12 1/13 N/A 1/16 1/17 FedEx FJ8989221 1/20
AG Glass

60. Packaged
Order Order Shipped Shipped Tracking Estimated
Order # Items Ordered Cut On for
Placed Received Out On By Number Arrival
Delivery
1 box olive mat
329103 board 1/15 1/15 - - 1/21 UPS 1/23
3 of something
1 super special
329100 1/12 1/13 1/15 1/15 1/19 UPS SCG78299 1/23
frame
5 sheets (8ʼx4ʼ)
329099 1/12 1/13 N/A 1/16 1/17 FedEx FJ8989221 1/20
AG Glass

61. Packaged
Order Order Shipped Shipped Tracking Estimated
Order # Items Ordered Cut On for
Placed Received Out On By Number Arrival
Delivery
1 box olive mat
329103 board 1/15 1/15 - - 1/21 UPS 1/23
3 of something
1 super special
329100 1/12 1/13 1/15 1/15 1/19 UPS SCG78299 1/23
frame
5 sheets (8ʼx4ʼ)
329099 1/12 1/13 N/A 1/16 1/17 FedEx FJ8989221 1/20
AG Glass

64. Movie Title
Ceremony Date
Oscar Year
Screener Leaked by Oscar Night?
US Release Date
Screener/Retail DVD Leaked by Oscar Night?
Screener Release
US Release to DVD-BluRay Leak
Cam Leak
Telesync Leak
Telecine, R5 or PPV Leak
Screener Leak
Retail DVD-BluRay Leak
US Release to First Leak
US Release to Screener Leak
Screener Release to Screener Leak

65. Movie Title
Oscar Year
Durationked)
Release Type (before lea Leak type
US Release to Screener Leak Screener Leak
US Release Date
US Release to DVD-BluRay Leak Telesync Leak
Screener Release
US Release to First Leak Telecine, R5 or PPV Leak
Retail DVD-BluRay Release
Screener Release to Screener Leak
Cam Leak
Retail DVD-BluRay Leak
Screener Leaked by Oscar Night?
Screener/Retail DVD Leaked by Osc
Ceremony Date

66. Movie Title
Oscar Year
Durationked)
(before lea
Release Type Leak type
Screener Leak
Telesync Leak
US Release Date US Release to First Leak
Telecine, R5 or PPV Leak
Cam Leak
US Release to Screener Leak
Screener Release Screener Release to Screener Leak
Retail DVD-BluRay Leak
Retail DVD-BluRay Release US Release to DVD-BluRay Leak
Screener Leaked by Oscar Night?
Screener/Retail DVD Leaked by Oscar Night?
Ceremony Date

67. Screener Leak
Telesync Leak
Telecine, R5 or PPV Leak
US Release Date US Release to Screener Leak
Cam Leak

68. US Release Date US Release to Screener Leak Screener Leak
Telecine, R5 or PPV Leak
Cam Leak
Telesync

69. US Release Date US Release to Screener Leak X Telecine, R5 or PPV Leak
Screener Leak
Cam Leak
Telesync

70. Date Duration Date
US Release Date US Release to Screener Leak X Telecine, R5 or PPV Leak
Screener Leak
Cam Leak
Telesync

71. Date Duration Date
US Release Date US Release to Screener Leak X Telecine, R5 or PPV Leak
Screener Leak
Cam Leak
Telesync

72. Date Duration Date
US Release Date US Release to Screener Leak X Telecine, R5 or PP
Screener Leak
Cam Leak
Telesync

73. Date Date
US Release Date X

74. Date
US Release Date X

75. Date
X

76. align by date OR by [ initial ] release
Align by: Date Initial Release Oscas Night
11/26 12/9 1/26
11/26 12/9 1/26
x
x x
x
x
Dark Knight
x
Dark Knight
11/26 12/9 1/26
11/26 12/9 1/26
x
x x
x
x
Bolt
x
Bolt
12/9 11/26 1/21
12/9 11/26 1/21
x
xx
x
Benjamin
x
Button
Benjamin
x
Button

78. align by date OR by [ initial ] release
Align by: Date Initial Release Oscas Night
11/26 12/9 1/26
11/26 12/9 1/26
x
x x
x
x
Dark Knight
x
Dark Knight
11/26 12/9 1/26
11/26 12/9 1/26
x
x x
x
x
Bolt
x
Bolt
12/9 11/26 1/21
12/9 11/26 1/21
x
xx
x
Benjamin
x
Button
Benjamin
x
Button

79. Villain N 4
o:
Two words: Information Overload.
A lot of useful data, some information,
very lit le that is actionable.
the dashboard

81. March 2010
Overall, your performance improved. However, while you did better
(+21% increase!) following up on new opportunities, you didn’t
have as many Wins this month (-14%) as in previous months
NOTE: ACES ARE HIGH!
213 73 64 53 38 12
Leads Contacted Contacts Qualified Interviews Proposals Written Sales Closed! Closed & Paid
Wow. This was 112% While 73 isn’t a bad Text commenting on Text commenting on Text commenting on Text commenting on
of your target. Good number, at 32% it’s this performance this performance this performance this performance
job!! below last months
average of 45%.
VIEW PIPELINE DETAILS FOR MARCH 2010
How does this compare?
My Peers: Previous Months
Leads Contacted Contacts Qualified Interviews Proposals Written Sales Closed! Closed & Paid

82. My Peers: Previous Months
Leads Contacted Contacts Qualified Interviews Proposals Written Sales Closed! Closed & Paid
1. Harold F. 1. Yvonne R.
1. John S. 1. John S. 1. George B. 1. George B.
2. John S. 2. Harold F.
2. George B. 2. Yvonne R. 2. José A. 2. John S.
3. George B. 3. John S.
3. José A. 3. George B. 3. John S. 3. José A.
4. José A. 4. George B.
4. Yvonne R. 4. José A. 4. Yvonne R. 4. Yvonne R.
5. Yvonne R. 5. José A.
5. Harold F. 5. Harold F. 5. Harold F. 5. Harold F.
By the Numbers:
$21,304 "
17 ! INBOUND
LEADS
82
OUTBOUND
LEADS
137
REVENUE THIS MONTH WINS THIS MONTH
MAIN SOURCE OF WINS:
$19,497 19 Advertising (8)
Cold Calling (4)
AVG MONTHLY REVENUE AVG WINS PER MONT Something else (3)
$116,927 120 TOP 3 OBJECTIONS:
REVENUE YTD WINS THIS YEAR Happy with current vendor
Price to high
Contract to restrictive
WHY OPPORTUNITIES WENT DEAD:
Happy with current vendor
GROUP AVERAGE
Price to high
Contract to restrictive
YOUR AVERAGE

84. Present
Past

90. 5
?
o:
Villain N
“He-w ho-has-!et-
to- be-named ”
The one that is com plained about...
where there is con fusion & compleyit!
Can often found

91. Visualizing research papers referenced in a selection of books

92. Visualizing research papers referenced in a selection of books

93. Visualizing research papers referenced in a selection of books
(sort by date released)

94. Visualizing research papers referenced in a selection of books
(sort by date released)

95. Visualizing research papers referenced in a selection of books
(sort by date released)

96. Visualizing research papers referenced in a selection of books
(sort by date released)

97. AN EXERCISE!
LIST SOME THINGS YOU
Q| (OR YOUR
FIND
CUSTOMERS
CONFUSING
/CLIENTS)

98. AN EXERCISE!
LIST SOME THINGS YOU
Q| (OR YOUR
FIND
CUSTOMERS
CONFUSING
/CLIENTS)
• My AT&T phone bill
• The world of artisan cheese
s
• IP addresses, domain names,
hosting, email, URLs/U
RIs, etc.
• Playing the “rewards points”
game
w/ Hotels, Airlines Cr
edit Cards
• Understanding international sh
ipping
opt
ions across carriers
• YOUR TURN!

99. Identifying information people
have difficulty making sense of…

100. A CHALLENGE:
Have you found a
Look beyond these place where complex
patterns: information might be
best represented in a
visual way?
Spreadsheets Dashboards
If so, make it so!
If not, keep looking…
Grid Views Search Results

101. Why this is about so much
more than pretty pictures…

104. YOUR BRAIN

105. WORKING YOUR BRAIN
MEMORY

106. WORKING YOUR BRAIN
MEMORY
JUDGEMENT

107. WORKING YOUR BRAIN
MEMORY
UNDERSTANDING
JUDGEMENT
RELATIONSHIPS

108. Short-term memory is where
the real work of sense-making
takes place
WORKING YOUR BRAIN
MEMORY
UNDERSTANDING
JUDGEMENT
RELATIONSHIPS
Short-term memory has a
limited amount space.

109. Short-term memory is where
the real work of sense-making
takes place
WORKING YOUR BRAIN
MEMORY
UNDERSTANDING
JUDGEMENT
RELATIONSHIPS
We can help
this guy out!
Short-term memory has a
limited amount space.

110. “PRE-ATTENTIVE PROCESSING”

111. “PRE-ATTENTIVE PROCESSING”

112. Form:
Orientation Line Length Line Width

113. Form:
Size Enclosure Shape

114. Form:
Curvature Proximity Proximity

115. Color:
Hue Intensity

116. Spatial Position:
2-D Position

117. Motion:

118. HEARING Short-term memory is where
the real work of sense-making
TASTE
takes place
SMELL
TOUCH
SENSORY ORGANS SHORT-TERM LONG-TERM MEMORY
MEMORY
UNDERSTANDING
JUDGEMENT
RELATIONSHIPS
BALANCE
PAIN
TIME
Short-term memory has a
TEMPERATURE
AND
MORE!
limited amount space.

119. HEARING Short-term memory is where
the real work of sense-making
TASTE
takes place
SMELL
TOUCH
SENSORY ORGANS SHORT-TERM LONG-TERM MEMORY
MEMORY
UNDERSTANDING UNDERSTANDING
PRE-ATTENTIVE PROCESSING JUDGEMENT
RELATIONSHIPS RELATIONSHIPS
BALANCE
PAIN
TIME
Short-term memory has a
TEMPERATURE
AND
MORE!
limited amount space.

120. HEARING Short-term memory is where
the real work of sense-making
TASTE
takes place
SMELL
TOUCH
METAPHORS /SCHEMA
SENSORY ORGANS SHORT-TERM LONG-TERM MEMORY
MEMORY
UNDERSTANDING UNDERSTANDING
PRE-ATTENTIVE PROCESSING JUDGEMENT
RELATIONSHIPS RELATIONSHIPS
BALANCE
PAIN SEMIOTICS
TIME
Short-term memory has a
TEMPERATURE
AND
MORE!
limited amount space.

121. HEARING Short-term memory is where
the real work of sense-making
TASTE
takes place
SMELL
TOUCH
METAPHORS /SCHEMA
SENSORY ORGANS SHORT-TERM LONG-TERM MEMORY
MEMORY
UNDERSTANDING UNDERSTANDING
PRE-ATTENTIVE PROCESSING JUDGEMENT
RELATIONSHIPS RELATIONSHIPS
BALANCE
PAIN SEMIOTICS
TIME
Short-term memory has a
TEMPERATURE
AND
MORE!
limited amount space.

122. The Blue Sky of Benefits
Finally, something good! Co-insurance
This is usually a percentage amount that is the
Co-payments insured's responsibility. A common co-insurance
split is 80/20. This means that the insurance
The co-payment is a fixed amount that company will pay 80% of the procedure and the
the insured is required to pay at the time insured is required to pay the other 20%.
of service. It is usually required for
basic doctor visits and when purchasing 100%
prescription medications.
90/10
$10/ $45 / $55 80/20
$10/ $35 / $45 Emergencies and
Specialists
Office Visits Prescriptions Gabe-endo, Elijah’s oral surgery, Erin’s wrist,
chiropractor, x-rays
Pharmaceutical
Deductible
$250/pp ?
Individual
Deductible
Drowning in a Sea of Deductibles
amount of money that the insured must pay before any
benefits from the health insurance policy can be used.
Family
Deductible

123. HEARING Short-term memory is where
the real work of sense-making
TASTE
takes place
SMELL
TOUCH
METAPHORS /SCHEMA
SENSORY ORGANS SHORT-TERM LONG-TERM MEMORY
MEMORY
UNDERSTANDING UNDERSTANDING
PRE-ATTENTIVE PROCESSING JUDGEMENT
RELATIONSHIPS RELATIONSHIPS
BALANCE
PAIN SEMIOTICS
TIME
Short-term memory has a
TEMPERATURE
AND
MORE!
limited amount space.

124. Why this is about so much
more than pretty pictures…

125. Thinking and doing.

128. Thinking and doing.
Thinking through doing.

129. “By rearranging the board, the player acquired information that was otherwise
difficult to perceive. Although she could have acquired this information by
mentally simulating the move, it was simpler and faster to physically carry out
the move and then reverse it. More importantly, the problem space is now partly
in the head and partly in the world, with interaction linking and blending these
two spaces together.
Interacting with the environment—in this example, rearranging it to address an
immediate epistemic need—can generate insight into a problem by treating the
environment as a resource for reducing cognitive complexity. Instead of relying
exclusively on an internal representation, the player creates, and operates on, an
external representation of the problem space. Thus, interaction creates both
physical and informational changes in the environment. The player can then
leverage these informational changes to simplify cognitively complex tasks.”
— KARL FAST, “Interaction and the epistemic potential of digital libraries”
Read this!
http://www.springerlink.com/content/4755373gw24g00l8/?MUD=MP

132. Conversing: Manipulating: Navigating:
conveying intended touching, grasping, moving from one
actions through or handling visually location or piece of
language (i.e., the perceptible aspects information to
mouth and talking). (i.e., the hands and another (i.e., the
handling). feet and walking).
adapted from Karl Fast
“Interaction and the epistemic
potential of digital libraries”

133. Why this is thrilling…

134. LIMITED WAYS
ABUNDANCE OF
(BIOLOGICALLY) CRUD* TOOLS
INFORMATION
1 2 3
TO RESPOND

135. LIMITED WAYS
ABUNDANCE OF
(BIOLOGICALLY) CRUD* TOOLS
INFORMATION
2 3
TO RESPOND

136. LIMITED WAYS
ABUNDANCE OF
(BIOLOGICALLY) CRUD* TOOLS
INFORMATION
3
TO RESPOND

137. LIMITED WAYS
ABUNDANCE OF
(BIOLOGICALLY) CRUD* TOOLS
INFORMATION
TO RESPOND

138. Present
C.R.U.D. TOOLS *

139. Present
C.R.U.D. TOOLS *
CREATE
READ
UNDO
DELETE

140. Present
C.R.U.D. TOOLS *
CREATE
READ
UNDO
DELETE
(ALSO BROWSE, SEARCH, & FILTER)

141. Present
Future
C.R.U.D. TOOLS *
CREATE TOOLS FOR UNDERSTANDING
READ
UNDO
DELETE
(ALSO BROWSE, SEARCH, & FILTER)

142. Present
Future
C.R.U.D. TOOLS *
CREATE TOOLS FOR UNDERSTANDING
READ COMPARE
UNDO COMPREHEND
DELETE EXPLORE
(ALSO BROWSE, SEARCH, & FILTER)
ANALYZE
EVALUATE
SYNTHESIZE

143. Why visual interactions?

144. Why visual interactions?
…to help people make informed decisions
(understand what is already known, but hasn’t been shown)

145. Why visual interactions?
…to help people make informed decisions
(understand what is already known, but hasn’t been shown)
…to explore possibilities
…to affect behavior change
…to create a shared platform for conversation
…to explore what is unknown

146. Why visual interactions?
…to help people make informed decisions
(understand what is already known, but hasn’t been shown)
…to explore possibilities
…to explore possibilities
…to affect behavior change
…to create a shared platform for conversation
…to explore what is unknown

147. Watch this!
http://vimeo.com/36579366

148. Why visual interactions?
…to help people make informed decisions
(understand what is already known, but hasn’t been shown)
…to explore possibilities
…to explore possibilities
…to affect behavior change
…to create a shared platform for conversation
…to explore what is unknown

149. Why visual interactions?
…to help people make informed decisions
(understand what is already known, but hasn’t been shown)
…to explore possibilities
…to affect behavior change
…to affect behavior change
…to create a shared platform for conversation
…to explore what is unknown

150. http://mattmckeon.com/facebook-privacy/

151. http://mattmckeon.com/facebook-privacy/

152. http://mattmckeon.com/facebook-privacy/

153. http://mattmckeon.com/facebook-privacy/

154. http://mattmckeon.com/facebook-privacy/

155. http://mattmckeon.com/facebook-privacy/

156. Why visual interactions?
…to help people make informed decisions
(understand what is already known, but hasn’t been shown)
…to explore possibilities
…to affect behavior change
…to affect behavior change
…to create a shared platform for conversation
…to explore what is unknown

157. Why visual interactions?
…to help people make informed decisions
(understand what is already known, but hasn’t been shown)
…to explore possibilities
…to affect behavior change
…to create a a shared platformfor conversation
…to create shared platform for conversation
…to explore what is unknown

158. http://www.businessmodelgeneration.com/

159. http://www.businessmodelgeneration.com/

160. Why visual interactions?
…to help people make informed decisions
(understand what is already known, but hasn’t been shown)
…to explore possibilities
…to affect behavior change
…to create a a shared platformfor conversation
…to create shared platform for conversation
…to explore what is unknown

161. Why visual interactions?
…to help people make informed decisions
(understand what is already known, but hasn’t been shown)
…to explore possibilities
…to affect behavior change
…to create a shared platform for conversation
…to explore what is unknown
…to explore what is unknown

162. A single DNA sequencer can
now generate in a day what
it took 10 years to collect for
the Human Genome Project.

163. http://datavisualization.ch/tools/pathline-connecting-designers-with-scientists/

164. http://datavisualization.ch/tools/pathline-connecting-designers-with-scientists/

165. “ The 19th Century culture was defined by the novel.
The 20th Century culture was defined by the cinema.
The culture of the 21st Century will be defined by the interface.”
— LEV MANOVICH, media theory professor of Visual Arts, University of California, San Diego
http://www.ted.com/talks/aaron_koblin.html

166. Thank you!
slideshare.net/stephenpa
getmentalnotes.com
Stephen P Anderson
.
@stephenanderson
www.poetpainter.com