How to Turn a Picture Into a Line Drawing in Photoshop
CICC Innovation Rounds - Information Design - Stefan Popowycz - July 4 2013
1. INFORMATION DESIGN!
CICC Innovation Rounds!
Center for Innovation in Complex Care!
Stefan Popowycz!
July 4 2013!
July 4 2013!
Stefan Popowycz!
2. OVERVIEW
• Who I am, what I do, what CIHI
does, and why our work is
important!
• Information Design!
• Explain the CHRP solutions, the
data, the challenges we faced,
theory in action!
• Challenges, lessons learned!
• Things to remember, authors to
read, questions!
July 4 2013!
Stefan Popowycz!
3. WHO AM I
July 4 2013!
Stefan Popowycz!
• Stefan Popowycz, BSc, BAH, MA!
• Data Scientist, Medical Sociologist,
Statistician, Designer!
• Lead Design and Information Architect
for the Canadian Hospital Reporting
Project 2012 Custom Public Reports!
• Senior Information Designer for the
Health System Performance (HSP)
Interactive Infographic Website!
• Information Access & Delivery, CIHI!
5. DESIGN SIMPLICITY
• One of the important
concepts governing the
overall design of all our
projects is simplicity!
• User-centered design
focuses on the users
through the planning,
design and development
of a product!
July 4 2013!
Stefan Popowycz!
6. GOOD DESIGN
• Dieter Rams!
• Is innovative; aesthetic,
unobtrusive; honest, long-
lasting; thorough down to the
last detail; environmentally
friendly; and makes a product
both understandable and
useful!
• Good design is, as little design
as possible!
July 4 2013!
Stefan Popowycz!
7. CIHI
July 4 2013!
Stefan Popowycz!
Canadian Institute for Health Information:!
• independent, not-for-profit corporation!
• improvement of the health of Canadians
and the health care system!
• disseminating quality health information!
• data and reports are provided to help
inform health policies!
• support the effective delivery of health
services and to raise awareness among
Canadians!
• contribute to better health outcomes.!
8. IMPORTANCE
July 4 2013!
Stefan Popowycz!
• Healthcare is extremely important
for all Canadians!
• Healthcare data is used to inform
decision makers on progress,
overall comparison, and most
importantly best practice !
• Traditionally, CIHI has had a clear
obligation to analyze these data,
and communicate the results to all
Canadians (vision & mandate)!
9. IMPORTANCE
• However, there is a clear shift
in the way people are
organizing, sharing, and
consuming data!
• Proper data visualizations
facilitates the comprehension
of complex analysis and
patterns!
• Data visualizations do not need
to be boring and uninviting!
July 4 2013!
Stefan Popowycz!
10. CHRP
• The Canadian Hospital
Reporting Project (CHRP) is a
national quality improvement
initiative providing hospital
decision makers, policy makers
and Canadians with access to
clinical and financial indicator
results for more than 600
facilities, from every province
and territory in Canada!
July 4 2013!
Stefan Popowycz!
11. CHRP
• The public data visualizations of
the CHRP project were designed
with the intent to visually and
interactively communicate key
messages to end users using a
web-based business intelligence
solution!
• In essence, we wanted to create
interactive infographics!
July 4 2013!
Stefan Popowycz!
12. KEY FINDINGS
• The first category of visualization
we created we called “Key
Findings” (nuggets of information)!
• It's summary level data, at 2-3
different levels of analysis for a
specific indicator of interest, and
represents an interactive
approach to data presentation!
• We created two (2) clinical and
two (2) financial key findings!
July 4 2013!
Stefan Popowycz!
13. KEY FINDINGS
• These follow information design
best practice with regards to
content, colour, typography,
interactivity, and design!
• Things to note: 4 key findings in
total; 4 vizs in each dashboard;
increasing hierarchy; all titles and
heading done in Adobe Illustrator
at 300 dpi; all embedding within
our web ECM!
July 4 2013!
Stefan Popowycz!
14. STAND ALONE
• The second category of data
visualizations created we called
“Stand Alone Interactive Solutions” !
• These consist of more complex
data visualizations that combine
several types of data within an
interactive real-estate !
• Contains guided analysis, allowing
the end user to focus in on
information of interest!
July 4 2013!
Stefan Popowycz!
15. STAND ALONE
• Layered views of the same
data provides better
contextual understanding of
the whole message being
communicated!
• Things to note: 2 complete
solutions; 2 tabs, first tabs
have around 5 vizs, second
tab around 9; all headings
and titles done in Adobe
Illustrator; all embedded
within our web ECM!
July 4 2013!
Stefan Popowycz!
16. INFORMATION DESIGN
• Information design represents
the clean and effective
presentation of information,
and involves a multi-
disciplinary approach to
communication (O’Grady)!
• Combines graphic design,
communications theory,
technical and non-technical
practices, cultural studies and
psychology!
!July 4 2013!
Stefan Popowycz!
17. DATA VISUALIZATIONS
• Data visualization is a
visual representation of
data that has a main
goal to communicate
quantitative information
clearly and effectively
through graphical
means!
!
July 4 2013!
Stefan Popowycz!
18. DATA VISUALIZATIONS
• Objects, components,
artifacts generated during
the Information Design
process!
• More analytical in nature,
and can be static,
animated, or interactive !
July 4 2013!
Stefan Popowycz!
19. INFOGRAPHICS
• Infographics are graphic
visual representations of
information, data or
knowledge, and present
complex information
quickly and clearly, such
as in signs, maps,
journalism, technical
writing, and education!
July 4 2013!
Stefan Popowycz!
20. INFOGRAPHICS
• Static and less analytic in
nature. Also an artefact of
the information design
process!
• Currently very popular
with media and are
published almost on a
weekly basis. !
July 4 2013!
Stefan Popowycz!
21. DESIGN COMPONENTS
Theory in action:!
• Assessment!
• Key Messages!
• Types of Data!
• Navigation!
• Typography!
• Colour!
• Design and Layout!
July 4 2013!
Stefan Popowycz!
22. CAVEAT
• Not all design principles
are reflected, just the
ones I found important for
this solution!
• Not the gold standard, not
the best way, just the way
we did things!
• Only focusing on
information design, for a
semi-educated audience!
July 4 2013!
Stefan Popowycz!
23. ASSESSMENT
July 4 2013!
Stefan Popowycz!
• The essential elements for
information design are
content, function and form!
• A delicate balance needs to
be maintained between all
three in order to achieve an
effective design!
• Form follows function
(Industrial Design)!
• Explorative vs. Narrative!
24. ASSESSMENT
July 4 2013!
Stefan Popowycz!
Best practices: CHRP!
• Gentle negotiation process!
• Preconceived notions of what
type of data visualizations are
appropriate hinder the overall
information design process!
• Ex: academic vs. graphic art
(boxplots vs. data variability)!
• Long requirement gathering
sessions conducted!
!
25. KEY MESSAGES
• This requires that you distill
the various components of
your critical analysis into
nuggets of information!
• The CHRP solution
employed simplicity, as
these messages need to
translated for the public at
large!
July 4 2013!
Stefan Popowycz!
26. KEY MESSAGES
Best practices: Readmission !
• Three key messages clearly
defined and levels arranged
hierarchically in all Key Findings !
• Graphs are clean and crisp!
• Colour palette is muted and
maintained throughout all the
key findings!
July 4 2013!
Stefan Popowycz!
27. TYPES OF DATA
• Important to assess the types of
data available for development!
• Compare data to the key
messages in order to assess if all
necessary fields are available or if
additional data collection is
necessary !
• Why? The data visualization
techniques for one data type may
not be appropriate for another type
of data!
July 4 2013!
Stefan Popowycz!
28. TYPES OF DATA
• Time series analysis (trends,
variability, rate of change)!
• Part to whole and ranking analysis
(bar, pie, Pareto)!
• Deviation analysis (categorical,
comparative, thresholds) !
• Distribution analysis (histogram,
box plots, categorical)!
• Correlation analysis (scatter plot)!
• Multivariate analysis (heat,
multiple line)!
July 4 2013!
Stefan Popowycz!
29. TYPES OF DATA
July 4 2013!
Stefan Popowycz!
Some best practices:!
• Select the appropriate chart type
and units of measurement!
• Include a reference line (if
possible) !
• Optimize the aspect ratio of the
graph (zero line)!
• Maintain consistency throughout
the graph: fonts, colours, design!
• Please avoid 3D/pie charts!
30. TYPES OF DATA
Best Practices:!
• Cost per Weighted Case !
• Mix of traditional and aesthetic
visualizations (negotiation
between traditional content and
current design standards) !
• Scatter plot (correlation), bar
graph over multiple fiscals (time
series and part to whole),
categorical analysis (deviation) !
July 4 2013!
Stefan Popowycz!
31. TYPES OF DATA
Best practices:!
• 30-Day Mortality example. !
• Reference line used to indicate
thresholds!
• Error bars indicate confidence
intervals !
• Pervasive meta data provides
contextual information!
• Narrative flow is simple
(description, left, right, left flow)!
July 4 2013!
Stefan Popowycz!
32. TYPOGRAPHY
• Font selection is extremely
important when thinking about
information design and
communication!
• Rule of thumb, keep it simple
and ensure the legibility of your
design!
• Aesthetics vs. communicability!
July 4 2013!
Stefan Popowycz!
33. TYPOGRAPHY
• Compromise between visual
impact and the richness of
data !
• Try not to use all caps, stylized
fonts, or angled fonts. Different
types of fonts can be mixed,
but be careful!
• Adjust the size, weight, colour
of the font for additional impact!
• Integrating Corporate
standards and design!
• Donna Wong!
34. TYPOGRAPHY
CHRP best Practices:!
• Large chunky fonts used to draw
end users attention to top!
• Sans serif font employed
throughout (web and print) !
• All titles are two points larger than
the text for impact !
• This pattern is maintained though
all data visualizations created for
the CHRP public !
July 4 2013!
Stefan Popowycz!
35. COLOUR
July 4 2013!
Stefan Popowycz!
• Selecting a colour scheme
is also very important when
designing data
visualizations !
• Allows the designer to set
the tone of the data
visualization !
• Colours used as categorical
highlight (performance
allocation)!
• Corporate colours!
36. COLOUR
• Try to keep the representation
consistent across your data
visualizations!
• Altering the hues and intensity
are a good way to draw
distinctions and make
comparisons !
• Do not use distracting colours !
• Print everything in black and
white !
July 4 2013!
Stefan Popowycz!
37. COLOUR
CHRP best practices:!
• Clean, crisp, and simple!
• Contrasting colours differentiate
between values that are above
national average and those that
are not !
• The colour scheme is carried
over into the interactive graph!
July 4 2013!
Stefan Popowycz!
38. COLOUR
CHRP best Practices:!
• In the performance allocation
example, the shape and colour
indicate these stability and
performance of the result !
• Both schemes carried over to the
scatterplot below !
• Similar pattern for key findings!
39. DESIGN AND LAYOUT
• Stephen Few: Designing the
data visualization environment
requires some key features!
• Comparing, sorting, filtering,
highlighting, aggregating, re-
expressions, re-visualization,
zooming and panning, re-
scaling, access to details on
demand, annotation and
bookmarking!
40. DESIGN AND LAYOUT
• Trellises and cross tabs
provide more contextual
view of the data you
would like to present!
• Designed with printing in
mind (8 1/2 x 11)!
• UX/UI!
• User centered design!
!
!
41. DESIGN AND LAYOUT
CHRP best practices:!
• Multiple concurrent views of the
data provides helps to provide
contextual understanding of your
key message!
• Facebook and Twitter functionality,
and JavaScript embedding!
July 4 2013!
Stefan Popowycz!
42. DESIGN AND LAYOUT
CHRP best practices:!
• What is the narrative flow you want
an end user to follow?!
• CHRP: left, right, left!
• HSP solution: decided to employ a
theme based to navigation!
July 4 2013!
Stefan Popowycz!
43. DESIGN AND LAYOUT
CHRP best practices:!
• Entire solution is
interactive!
• Analytical techniques and
practices, such as
directed vs. exploratory
navigation, hierarchical
navigation!
• Hover over meta data on
every data point !
July 4 2013!
Stefan Popowycz!
45. CHALLENGES
• Selling design vs. afterthought of design!
• Information design vs. business intelligence!
• Negotiation between academics vs. design!
• Communication vs. analytics!
• Corporate standards vs. new standards!
• End user vs. client!
Image from!
generalassemb.ly!
July 4 2013!
Stefan Popowycz!
46. LESSONS LEARNED
• Focus on who is the audience and what do you want
to communicate?!
• Simplicity in design vs. Complexity of metrics!
• Pick your battles, don’t get discouraged!
• Iterate quickly!
• Design, don’t decorate!
• At the very least, hopefully this ! !
presentation makes you think
differently about your data!
Image from!
generalassemb.ly!
July 4 2013!
Stefan Popowycz!
47. AUTHORS
July 4 2013!
Stefan Popowycz!
• David McCandless !
• Manuel Lima!
• Stephen Few!
• Jen and Ken O'Grady!
• Donna Wong!
• Edward Tufte!
• Nathan Yaw!
• Jason Lankow, Josh
Ritchie and Ross Crooks!
• Joel Katz!