Tag Archives: infographics

06 Jul

Pink for girls and blue for boys

Every time I need to create a gender-related chart, i.e. the number of men or women doing XYZ and I need to use colour to define between them, I always ask the same question?

Should I automatically use pink for girls and blue for boys?

There are a dozen reasons why not – and I’d prefer not to get into a gender debate here (there are more suitable locations for that sort of debate).

However, when creating charts it’s important to keep things simple and ask as little as possible of the reader. In this case – should be expect the reader to re-align their assumptions about colours, and have to work out that, for example, green is male and orange female?

Chart A – gender-stereotype arguments aside, it’s clear in this chart what the colours represent. 

Pink Blue chart A

Chart B – we’re now expecting the reader to not only “de-programme” their assumptions about colour, but also use the key to work out which is which. 

Pink Blue chart B

A few thoughts:

  • i guess we should all start “de-programming” ourselves and getting out of the habit of automatically using pink for girls and blue for boys. By continuing to use those colours, we are perpetuating the problem
  • How do we speed up the processing of the chart, and remove this extra step of looking at the key.
  • Do we come across the same problems with the male and female “toilet” symbols – yes, we understand what they mean, but again, do they cause issues?
  • Also, this chart is MUCH harder to read as we are having to analyse the “shape” of the markers (which are very similar), instead of the colour.

pink blue chart - icons

Comments are sadly closed due to spamming issues, but I’d love to know your thoughts via the social media buttons you can find on the right!

Thanks

 

23 May

Accessible Infographics: information for everyone?


 Caroline Beavon is a freelance information and infographics designer – get in touch for more details

linkedin

 


PLEASE NOTE: This is a work-in-progress blog post. It would be great to get any feedback or thoughts via the social networks (links right) as I write the remaining sections. I am also posting some questions throughout the article, if you know the answer, do let me know! 

By definition, infographics contain information. Organisations are using them to explain systems, demonstrate data and make arguments. They have become so popular that many organisations are relying on them, and forgoing written text.

[toc]

Why Infographics?

Infographics are generally a great way to get information out there. The visual form can help people understand complex information and retain the facts. With attention spans ravaged by social media, you’re also more likely to get an audience to engage with an image than a block of text.

Whilst diagrams have long been the default method for explaining data or complex systems, the rise of the internet and social media has meant that infographic images can be shared and viewed at a fast rate. As organisations struggle to be heard over the noise, they are adopting new ways to make their information stand out.

 

Why Accessibility?

Infographic image showing that 1 in 30 people in the UK are living with sight loss

According to the RNIB, almost two million people in the UK are living with sight loss. That’s approximately one person in 30. 

That’s a lot of people not getting your information if you ONLY use infographics to communicate.

Any organisation, but especially those delivering public services, really do need to think carefully about these issues.

Further more, if your organisation has an older audience, the statistics are even more sobering, with a fifth of 75+ yr olds and half of 90+ yr olds living with sight loss. That’s a huge percentage of your audience who simply aren’t getting the information.

1 in 5 75yr olds and over are living with sight loss. Half of all 90+ are.

 

Visually Impaired Online?

It’s worth remembering a couple of things:

  • not all visually impaired people are completely sightless
  • visually impaired people (even those with no sight) ARE accessing the internet

So we ned to not only think about HOW we design the infographics so more people can access them, but also come up with alternative ways to present the information so it’s not all hidden in an image.

Also, remember, the internet is now not only the domain of the young. More and more elderly people are getting online to shop, maintain friendships, pay bills etc. Therefore any infographics you do use need to carefully considered.

 

Accessible Infographics – a few ideas

I’ll admit, this is a new area for me, but I wanted to look into it as it has been raised several times over the past few weeks, most recently by a Twitter user in response to a blog post I had written:

 

This was the first time I had directly come in contact with someone raising the issue of accessibility of infographics, hence this blog post and it really made me think.

This podcast is well worth a listen: UX Podcast on accessible infographics 

 

Design


This section will cover both a way to design an infographic that is open to reader software, but also further down, how to think about the design you do use, to assist people with poor vision or colour blindness.  

Text Version

An interesting example here from the Washington Post (discovered in a blog post by Derek Featherstone) – a text infographic. Click the screengrab below and see that the text is actually text, not flattened into an image.

Screen grab of a Washington Post article which uses readable text

 

How was this created? is it HTML?

Do we lose some share-ability here? Yes the link is shareable but is the power of the infographic in the visual impact?

 


 

Not all people with a visual impairment are completely blind. Therefore, with some considerate designing, images could still be helpful.

People will poor eyesight may still be able to see your images, with the help of zooming tools, for example. However, infographics are often designed to be viewed as a whole image. Navigation is based on layout and style, so you can easily see where the next set of information is. If you’re zoomed right in, this navigation becomes harder if you can’t see the next header on your screen.

Colours

colour blindness –

Tableau blogpost

contrasting colours

content coming soon

Layout

hierarchy

navigation

content coming soon

Fonts

content coming soon

 

Alternative Information


Description

Nowadays there are plenty of tools that can help people with visual impairments use the internet. Screen readers will turn text into audio so everyone can get access to the information. However, most infographics are images which cannot be read by screen readers.

However, the rise of visual graphics has meant that some organisations are using these static “flat” images (where the text is not readable) as the ONLY means of conveying their message.

I’ve seen campaigners as for image descriptions on social media (Blog post) – so if a photo is shared, accompanying text gives a very brief insight into the image to allow visually-impaired people the chance to share in the emotions. I think that’s a great idea and has certainly made me reconsider how I share images online.

When it comes to sharing infographics, it would be impossible to convey all the information in 140 characters (in the case of Twitter) or without resorting to the swathes of text the infographic has replaced.

I’d suggest we post at last SOME text with an infographic, but they so often get separated from their original location, this may be redundant.

I know that my infographics have normally stemmed from a succinct list of statistics and information from the client. Could THIS be cleaned up and posted online for people who use screen readers? I would certainly be happy to offer this as part of my wider infographics design service.

Spreadsheets

Data visualisations bring about their own set of accessibility problems.

I recently worked on a very complex diagram for an arts project, which featured lots of lines and small (and often curved:) text. It was designed to be purposely complex, but would be very difficult for some people to access.

However, the data visualisation itself was based on a simple 10 column / 50 row spreadsheet.

It seemed logical to be to have this spreadsheet posted as a link near the infographic, so anyone would be able to access it – see example below from the Agency for Healthcare. Research and Equality).

screenshot

However, what kind of tables can be read by “reading” software, what formatting is needed etc?

I contacted the RNIB for their thoughts. Their usually useful website is being refurbished so they kindly sent me a document of the pages currently offline, and information used to advise their staff. The document can be RNIB advice on Excel spreadsheets, and includes these pointers:

Top ten accessibility pointers

  • Break down complex data sets into logical tables ideally with their own worksheets. New tables should be created on separate worksheets to aid navigation and understanding.
  • Reserve the first worksheet for a contents or index page.
  • Use Clear Print guidelines for text and data.
  • Insert all text and data within a logical path that a keyboard only user would take. As a general rule keyboard users will navigate down from cell A1 until the table is reached.
  • Empty cells within a table should be marked as such with a minus sign, a zero or N/A for not applicable as appropriate.
  • Adjust cell height and width to ensure all text that you want to appear is visible in your spreadsheet.
  • Add text descriptions and Alt text to charts and graphics.
  • Avoid using visual devices such as colour, shading, patterns and borders to divide up data regions.
  • Avoid merging data or header cells. Merged cells cause navigation problems and will not be read correctly if they contain row or column headers.
  • Always save your spreadsheet with the focus on cell A1 unless you want to draw attention to a specific cell.

Interactivity

During the UX Podcast UX Podcast on accessible infographics,  Derek Featherstone suggested (if time allow) making infographics interactive. However I am still not clear if tools like Tableau are accessible.

 

 

Metadata

Blogging tools do make it easier to add metadata to your images – for example alternative text, that a screen-reader can relay to the user.

This article by Web Aim suggests alt tags should:

  • be accurate and equivalent
  • be succinct
  • NOT be redundant
  • NOT use the phrase “image of … ” or “graphic of … ” to describe the image

Click through to the link for more details.

For infographics these are not so useful. Infographics can contain a lot of information and it would be difficult to put this information into the meta data without losing context.

Furthermore, many infographics are shared via social media – where there appears to be no metadata option.

QUESTION: How do screen readers cope with social networks like Facebook/Twitter? Are images titles “read”?

Other Information

content coming soon

Equality Act 2010

 

 

 

 

15 Apr

Appearing soon at …

I’ve had a flurry of invitations to speak in public recently and, as one of my New Years Resolutions was to say ‘yes’ more, I’ve agreed to all of them.

Over the next 2 months I’ll be appearing at the following events – ticket details below, and if you’re already going, do say hi!

 

logo

 

 

 

April CAKE Morning

  • Date: April 29th 2014
  • Venue:  Digital Humanities Hub, University of Birmingham, Pritchatts Road, Edgbaston, B15 2TT
  • Talk subject: tbc
  • Tickets: free available here
  • Other speakers: tbc

Official Blurb

Given the wide and diverse range of academics, businesses, students and Heritage organisations working collaboratively on the DHD project, we will be hosting free monthly “cake” (Collaboration and Knowledge Exchange) mornings to showcase current developments, discuss funding opportunities and tackle current challenges. Plus – there will be cake!

Personal Aims

I went to CAKE for the first time in March, and found it a really interesting event, although I didn’t stick around to properly meet many new people! Thankfully I’ve been invited to speak at the April event, and will make a concerted effort to mingle, and hopefully attract some collaborations and new projects.

The focus of my presentation will be cultural examples of data visualisation and info-visualisation – with a focus on historical and cultural examples!

 

science-capital-logo

Science Capital – Digital World Meeting:Doing Business with Data

Official Blurb

Big data. Open data. The potential for creating innovative businesses seems limitless. Our communities are looking for useful solutions to complex issues such as mass transit flow, better health systems and effective portals that help us work in new ways.

The Digital World speakers will show how big and open data can be used by individuals and by companies looking to grow. The event is open to all: to those who create, visualise and analyse our data universe; to those seeking new business ideas or research; to those who rebel as well as revel in the opportunities big data brings.

Personal Aims

I’m thinking of focusing my talk on past, present and future of data visualisation – harking back to some of the ‘classics’, to what’s being done today and ideas for the future. I’d really like to present an interesting insight into the world of data design – with some historical context, real world examples and advice for companies looking to explore this avenue.

It would also be great to make some new contacts, and there is a chance to network at the event, so I won’t forget to pack my business cards!

 

Print

 

 

Creating Usable Content

  • Date: May 12th 2014
  • Venue: SWALEC Stadium, Cardiff
  • Workshop: Creating Infographics (50 minutes repeated 3 times during the day)
  • Tickets:  here
  • Other speakers: Dan Slee (@comms2point0) Steve Davies (@filmcafe_steve) and more tbc

Official Blurb

The way we communicate has changed. How can we improve the way we engage with colleagues, stakeholders and the public?
The Creating Useable Content Learning Event is a day of high-tempo workshops that will equip you with the skills to tell your story in a way that attracts attention and triggers conversations.
During the day you’ll discover the benefit of other people sharing your content and spreading your message for you.
With a practical, hands-on emphasis, each of the five workshops will give you the opportunity to begin creating useable content right there and then!

Personal Aims

This sounds like a great event – delegates will rotate round a series of 50 minute workshops using useful introductory skills like social media management, writing blogs and using photography to promote.

It will be great to develop a quick version of my infographics designing course and, of course, meet lots of new organisations who may benefit from my design services!

26 Apr

Telling Stories with Data

(an edited version of this article originally appeared in the HyperWM newpaper, Nov 2012)

 

Once upon a time …

Alice I by Katratzi, Flickr

When was the last time you sat down and read a fairy story?

It may be a few years, but I’m sure you could tell a few of those childhood stories from memory. Whether it’s the interesting characters, the exciting storylines, the emotion you felt or the moral lessons you learned; the stories stick.

When was the last time you sat down and read a spreadsheet?

I’m guessing, never?

Unlike a fairy story, a spreadsheet has no characters, no thrilling plot, no emotion and no lesson to be learned.

You probably skip straight to the end, check out the total and close the book – you certainly don’t print out all those pages, and take them home for a cosy night by the fire.

 

However, there IS a story in that spreadsheet – it’s the story of a situation, a rise or a fall, a pattern or a trend. It may be a thrilling rollercoaster of a ride, it may be a fascinating insight into the current landscape. Unfortunately, it’s hidden behind all those rows and columns of numbers.

This is where visualisation comes in – taking those statistics and turning them into something the human eye can fathom – colour and shape, placement and size. By presenting these numbers in a visual way you create something that anyone can understand, irrespective of their literacy, numeracy, language, background or prior knowledge of the subject.

Through bar charts, pie charts, line graphs and full-on infographics, the story is revealed, we can see the characters (the different elements) on their journey – we can see the changes, the excitement and the disappointments.

That story will provoke a reaction – anger, satisfaction, joy or disgust – all emotions that will prompt our next move. Do we stay on the same route, or does something need to change?

Without clear and simple representations of the information, there will be many people who simply don’t get it.

And in the current climate of transparency and accountability – data is only open, if everyone can access it.

Once we reach this point, we can all begin to make clear, informed decisions about our future and the future of others and, hopefully …  live happily ever after.

25 Jul

Communicate – latest issue out now

I am delighted to say that the latest issue of Communicate Magazine is out, featuring a handful of my latest infographics.

As their in-house Visualization Specialist, I create graphics from various research data for their monthly issues.

For this issue, the focus was the attitudes of the PR industry and the media to digital trends, including use of email and social media.

I created more images than the ones used in the article – the rest are going to be used in another publication, a report for researcher Broadland Maingate and for an online animated project.

See my previous work for Communicate

 

28 Feb

Data journalism: more than numbers and charts

 

 

I have been a Visiting Tutor at Birmingham City University on and off for more than a year, but today I experienced that mythical “sense of satisfaction” that teachers talk about.

I held a short data visualization workshop for some 2nd year Online Journalism students today  – who were incredibly hungry for the information. For the past few weeks they had been gathering spreadsheets and reports and were now desperate for interesting ways to show this. Some were also concerned that they didn’t have any data as such, just lots of information

 

  • data is not just numbers – it is information, lists, reports, structures, things you’ve found out  – anything that could be displayed visually
  • expand the data – add new information – i.e. bring value to a list of companies by adding company type, location, size etc.
  • shrink the data – a list of spending at every university could be rehashed into a smaller dataset of spending in the West Midlands – compare across region.
  • compare the data – download the same dataset for previous years, so you can compare over time.
  • confused.com? – untangle a complex situation with an organisational chart – help the reader understand who does what.
  • processes – have you found out how something gets done? Then, why not create a flow chart showing the process – ie the flow of money, responsibility, communication
  •  missing information? – start a partial organisational chart – flag up where data is unavailable due to corporate privacy protection – ask why
  • tell the backstory – create a timeline showing key events. Helps the reader understand the context of the story
  • compare lists side by side  – a list of UK universities by League table position, next to a list of UK universities by satisfaction rating  – draw lines between the same establishment in each list, and you show any general patterns, are satisfying universities generally the best performing?
  • Word Clouds – not to be used for academic/journalistic analysis but definitely interesting as a bit of illustration/front cover.

 

All content (c) Caroline Beavon 2020