CICC Innovation Rounds - Information Design - Stefan Popowycz - July 4 2013
•
5 j'aime•1,905 vues
CICC Innovation Rounds presentation on information design the best practices around visualizing healthcare metrics.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à CICC Innovation Rounds - Information Design - Stefan Popowycz - July 4 2013
Similaire à CICC Innovation Rounds - Information Design - Stefan Popowycz - July 4 2013 (20)
Dernier
Dernier (20)
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!
- 4. h"p://pinterest.com/stefanpopowycz/informa5on-‐design/ Visualiza5ons I created: Visualiza5on I did not create: TEASER VISUALIZATIONS July 4 2013! Stefan Popowycz!
- 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!
- 44. LINKS• http://www.cihi.ca/cihi-ext- portal/internet/en/document/ health+system +performance/indicators/ performance/ chrp_ireport_findings_b! • http://www.cihi.ca/cihi-ext- portal/internet/en/document/ health+system +performance/indicators/ performance/ chrp_ireport_financial ! 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!
- 48. WEBSITES • good.is ! • visual.ly! • visualnews.com ! • columnfivemedia.com! • thedailyviz.com! • datavisualization.ch ! • pinterest.com ! • printmag.com! July 4 2013! Stefan Popowycz!
- 49. QUESTIONS July 4 2013! Stefan Popowycz!
- 50. THANKS! Stefan Popowycz! ! !pinterest.com/stefanpopowycz/information-design/! ! ! !ca.linkedin.com/in/stefanpopowycz/! ! !! ! !@stefanpopowycz! ! ! !www.cihi.ca! Image from! generalassemb.ly! July 4 2013! Stefan Popowycz!