Live note-taking from Viz-Fest, November 2016. Any errors are my own.
Tom Schlak, E-Tabs, Data Viz for the Visually Impaired
- Most important information visually displayed to achieve objectives and can be monitored at a glance, Charts, graphs, icons, mostly visual
- How can data visualization be made accessible to someone who is blind
- Viewing a musical score versus listening to a score, “seeing” a chart can’t be replicated
- What are the alternatives, Maybe use speech assistive technologies
- 5% of the world has some visual impairment, 11.5% for people over 50 years of age
- Good designs benefit everyone even fully sighted users
- Text and fonts – font size on screen nothing less than 12 to 16 points, Helvetica, Arial
- Font styles more complicated, must consider legibility and readability, legibility is individual characters, readability is overall appearance including spacing and formatting, good fonts have better spacing, less fancy script, less detailed, filled lettering, less heavy, less thin, less serif, Use display fonts carefully because they aren’t accessible
- Contrast – sometimes corporate colours are a problem but readability must come first, use an online tool like adobe color CC, let’s you choose colors that match your target color or complement, matters for typography too, forget white on yellow, yellow on red, grey on green
- Clean user experience – avoid cluttered dashboard, eliminate non-data pixels like background images and watermarks, large logos, etc, think about data-to-ink ratio, avoid dark gridlines or over-labeling, don’t fill up backgrounds just because you can, gradients of grey can be difficult to differentiate, use colors like red and green appropriately, only highlight what must be highlighted, flatten the design by removing shadows and 3D elements that make a flat image look shiny
- Eg Microsoft logo went from shiny colored circle to four simple boxes
- What about color deficiency, blindness – 8% of men and .5% of women have deficiencies, the worst forms can distinguish 20 hues but people without can see about 100 hues
- Avoid red green charts as this can hide the data
- Traffic light indicators are common, red green yellow, and should be used with caution, consider using shapes as well, arrows, checkmarks, faces, and maybe use them only for one state, just the positives or just the negatives
- Use cross hatching or fill patterns so you don’t rely just on color
- Use Colblinder online to test colors, light colors can lose their differentiation, text labels will help, try also ColorBrewer online
- Much of this applies to good design anyway
- Is it still beautiful is someone can’t see it? Communicate to everyone
Marta Blankenberger, redaviZ, Data Driven Infographics
- Infographic is visual representation of data to share information quickly and clearly
- Need to think about position, size, shape, color
- Icons help us understand and interpret information
- Combine a doughnut chart with an icon, or combine a bubble chart with a map behind it
- Masking – cover or uncover part of a chart but placing a shape in front of it, try that with charts, grey out a section or tone down the color of part of it
- Combine icons, put stars over circles to mask different areas
- Try using an arrow as the bars in a bar chart, just paste the image into the bar
- Try putting a grey bar behind the bars to represent the maximum of the bar
- Try using copied icons as the bar (e.g., 5 stars, 8 stars, 3 stars), you can use masking to turn 5 out of 10 into 5.3 out of 10
- Use conditional formatting of data labels, change the color/shape/size of labels if they are less than a specified value, or put checkmarks as the data point
The last few not quite so live blog posts: Empathy, Digital Context, and Visualization #ISC2015 #MRX
The Use (and Misuse) of Empathy in Market Research: Tom Bernthal, Founder and CEO, Kelton Global
- journalists try to make people comfortable enough to tell their stories
- insights industry has really involved in the last 12 years to bring in the skills of journalism and story telling
- stories are more powerful than data
- smart brands build empathetic bridges between businesses and customers
- successful companies today don’t just sell a great product, they sell a great experience
- what your company does doesn’t matter if people never find out about it
- customers need to crave your product
- Warby Parker, Tom Shoes, Dollar Shave Club, Travel Hack – all do this well
- Head is understanding, Heart is feeling and you need to do it with the ears eyes and heart of another
- Gut is your instinct
- Mikes Hard Lemonade was build from gut, and the guys name wasn’t Mike, Mike was the most popular man’s name at that time
- 1 – make room for emotion, provide psychological air, connect people like me, foster conversations that reveal deeper emotions and experiences. community style research helps with this, allows people to talk amongst themselves as they would normally do with their friends. don’t be afraid of silence, when the room goes silent there is pressure to fill that space. often the respondents will dig a bit deeper to give you more if you give them the space
- 2- dare to be wrong and challenge what you know, empathy has a narrow field of vision. research is to formulate hypotheses. you need to look off center. it’s not as simple as understanding one single person. it’s everybody around that one person.
- 3 – connect at the scale, explore the ordinary. we borrow from the tragedies of others to make our empty days feel better.
- 4 – know when to zoom in and zoom out, integrate approaches. empathy doesn’t increase as the size and scope of the problem grows. we have more empathy for a single person than for hundreds. empathy lacks foresight. it latches on today not tomorrow.
- 5 – don’t let the facts kill the story, let the story carry the facts. the story is a machine for empathy. powerful tool for imagining yourself in other people’s situations.
- 6 – have a little empathy. tell a story your audience can hear. consider stakeholder mindset when crafting your story. the risks of poor storytelling are high. tune out if too long. dismiss if too broad.
After Omni-Channel: Preparing for Digital Context: Stacey Symonds, Sr. Director, Consumer Insights, Orbitz, Martie Woods, Lead Strategist, Thought Leadership, Stone Mantel
- consumers are expecting to reduce the gap between thinking and doing – consumers will almost always give up information about their behaviour if they thin the information will reduce steps required and help them accomplish a goal quicker
- consumers surround themselves first, then make all sorts of micro purchases
- now, we buy a brand, and then we buy all the accessories that we didn’t realize we needed
- people create their own organization structures, like how your browser opens to a saved set of tabs and you automatically go to amazon to buy books
- the home screen of your phone is what you used most often, it’s hard to get on someone’s home screen
- consumers are seeking to maximize their attention, the more empowered people are to accomplish more in a short time, the more people meander. rarely do they do one thing at a time. so what are people doing while they interact with your brand? it may hinder the activity but consumers don’t mind.
- while working, 79% of people email, 45% do social media, 46% listen to music, 61% are texting, 36% are banking, 30% shop, 45% are life managing
- the journey is less about a linear path and more about a constant state of moving
- digital supports modes – consumers develop patterns for their activities, a general pattern for focusing and getting things done
- reading mode or working mode or exploring mode or learning mode – you need to know what mode people are in so you interact with them in the right mode
- when you shop for clothes, you might be in planning mode or sharing mode or speedy mode
- consumer behaviour demands more than omni offers, thinking on channels must evolve. we need to focus on digital context. its about how mobile media, data, sensors, and location all come together.
- consumers never use the words omni and channel.
- pillars of digital context include the environment, tools, and modes
Best Practices for Data Visualization and Presentation Design: Erik Glebinski, Manager, Consumer Insights, Pepsico, Kory Grushka, Partner, Work Design Group
- [font size on the title slide are GREAT!]
- [wow. room is completely packed, not a spare seat and the entire back wall is full of standers, and the aisle is full of sitters!]
- ‘look at how much data i pulled’ – too much data on one slide
- ‘the novelist’ – people who use a paragraph of text on the page
- ‘the repeater’ – does the same point on multiple slides in slightly different formats
- ‘the sleeper’ – people who use the same chart on every single slide
- ‘the cartoonist’ – uses clipart in anyway everywhere
- ‘the cliffhanger’ – someone who uses unnecessary chart builds
- typography, colour, simplicity, cohesion
- serif or sans serif – serif has the little decorations on the end of the letter, like times new roman, useful for large passages of text, for reports, because those lines create connections between letters
- sans serif have grown in popularity because internet is short form content which is better suited for focusing on a single word or a few words
- warm colours stick out more than cool colours, highlight in orange or red
- be minimalist with colour, use it sparingly, it should be used for a strategic purpose, stick to 2 or 3 colours. lots of colour kills hierarchy and makes it look cluttered. bias to fewer colours.
- don’t colour every bar in a bar chart differently
- apple is a case study in flat design
- less is better – Dieter Rams
- if you have any bias, move to simple minimalist edited down side
- keep font, formatting, and colour consistent from slide to slide, use one colour on an entire slide where it makes sense
- infographics are design heavy and data light, focus on narrative and story
- data visualizations are data heavy and design light, often done by dumping data into programs that plot, designer makes sure it looks good
- 3 ways to evaluate – clear, insightful, beautiful – does it make sense given the subject, is it legible, is there a value add or is it just a spreadsheet, does it look sophisticated
- bar graphs – space between the bar should be half the space of the bar; where category names are really long flip the chart to horizontal so you can read from left to right
- line charts – the less lines the better, 6 or more lines is cumbersome so split them up into multiple charts; label the lines themselves on the chart
- pie charts – consider donut chart if you need several pie charts; start your largest slice at 12 o’clock, 6 slices or less is best so aggregate the smallest ones if you can
- presentation design
- pure cinema concept of Alfred Hitchcock – push the unique concepts of the film, use storyboarding – do your own storyboarding even if its stick figures and squares and lines that look really stupid
- use one idea per slide, limit all unnecessary information, you don’t need every datapoint but just the ones that make the point, visually show them less and communicate more
- use layering – use multiple slides, highlight one point on one slide and a different point on the next slide eg, grey out several lines
- white space is your friend, eyes are drawn the point that matters
- slides shouldn’t talk – avoid too much text, 4 or 5 bullets with 4 or 5 lines; don’t use narrative, this isn’t a book, don’t use sentences that required reading
Even though this infographic is out of date, having first been published in January 2014, the points it lays out are still relevant today. Jade Furubayashi from Simply Measured describes the Twitter practices of the top brands including how many times they tweet every day and how engagement is affected by the number of followers. But don’t misinterpret that correlation by buying yourself 100,000 followers. Paid followers won’t add to your engagement and they won’t love and adore your brand by sharing, tweeting, and retweeting. Only genuine brand love creates engagement.
- Interesting infographic: How your brain sees a logo (lovestats.wordpress.com)
- Missing Data: Whose problem is it anyways? (web.peanutlabs.com)
- 13 tips for giving the worst presentation ever (lovestats.wordpress.com)
- How women should ask for a raise if they don’t want to follow Microsoft’s CEO advice of Trust Karma (lovestats.wordpress.com)
Rob Marsh, the author of Logomaker, put together this infographic based on research results he found in a number of journals. I found the progression from vague shapes to shape descriptions to brand names and finally to value propositions quite interesting. Does your brand’s logo trigger this response in 400 milliseconds?
- In Honor of Infographics. #MRX (lovestats.wordpress.com)
- What’s Gonna Kill You? An Infographic That Actually Works #MRX (lovestats.wordpress.com)
- Happy Easter! The Peeps are Back! (virginiavirtucon.wordpress.com)
- Epicute: Peeps Roundup (stuff.icanhascheezburger.com)
- 10 Fun Facts About Easter (ksfm.radio.com)
- These Are My Kind of Peeps – Easter Candy Dioramas (offbeatearth.com)
Look how cool this chart is! The blue, red, and green are neutral and non-offensive. There is no blinding florescence nor strange strobing visual effects. Colours aside, without the scale, obviously a chart no-no, you’re left to your own to determine the size of each slice. Take a minute and decide on the values of the slices yourself. You will probably conclude that the green slice is the smallest, followed by the blue slice, and the red slice is the largest. Want to bet on it?
Here is the exact same pie chart only it’s designed as a 2D chart rather than a 3D chart. Care to change your answer? The green slice, of course, is still the smallest slice. But now, we can see that the red slice and the blue slice are actually identical. Check the 3D pie chart again – you could convince yourself that the red and blue slices are the same but you’re just fooling yourself. If you had used that 3D chart, you would have succeeded in misleading your audience.
Care for another example? Here’s a 3D bar chart that is far less likely to cause confusion. Simply draw a line across the top of the bar to determine the value of each bar. There are even some helpful guidelines to make our work easier for us. The first bar represents 1.7, the second bar represents 3.7, and the third bar represents 5.7. Or does it…?
Again, here is the exact same chart, but drawn as a 2D chart instead as a 3D chart. I swear to you it is the exact same data. But now it appears as though the bars reflect the values 2, 4, and 6. Honest and truly. This is the same data. You’ll just have to try it for yourself to believe it.
3D charts are pretty. They are decorations for boring powerpoint slides or flashy marketing materials. They are not scientific illustrations nor information sharing tools. If you seek to share factual information, stick with 2D. It’s the only option.
cohdra from morguefile
Read these too
Infographics have become a staple of the internet. Every self-respecting journalist, artist, and blogger is desperate to discover and display a unique and stunning infographic on their own website. And, in honour of the great and powerful infographc, I too have jumped on the bandwagon. I have created this stunning infographic of infographics. Please enjoy and share with all of your friends and infographic specialists.