Graphical Web 2016

A couple of weeks ago I attended the Graphical Web 2016, a festival of graphics, data and general geekery hosted by the Infomatics Lab at the Met Office in Exeter. It felt like a homecoming in many ways, the first being that our team had hosted this very same conference a couple of years ago in Winchester, and the second being the fact that it was hosted in Devon, where I grew up! I turned my West Country accent up a notch just to fit in.

There were some thoroughly entertaining talks – but what did we learn, and what will I take back to the office? Here were a few of my highlights that I thought I’d share…

Tiny vis
First up was a talk on “tiny vis” by Matthew Strom who describes himself as a pixel farmer. He spoke about the role of graphics in newsrooms & reporting, and the idea that graphics didn’t have to be big standout “special occasions” but they can be small graphics, often replacing words or numbers. He drew parallels with emoticons, which have quickly been adopted to convey emotion.

The presentation included a few hints and tips for doing the same with data which we’re going to explore when we get a moment.

The first was the use of the font FF Chartwell – which is a font which lets build some very basic html (span elements) set a class, type numbers, add some colour styles and you have a chart.

The second looked at the use of unicode characters to create mini-charts. The beauty of this approach being that unicode works in many different environments, without the need for any font loading. I imagine it might work nicely on social media platforms for illustrating the direction of a change quickly. That said, the options are more limited than the chartwell option.

Have a look at the slides from this presentation:

My #graphicalweb16 slides are now online! Check 'em out here: https://t.co/EvpjTc3qze @TheGraphicalWeb

— Matthew Ström (@ilikescience) November 3, 2016

UX is teamwork
Mariana Mota from Oxford Computer Consultants spoke about “UX is teamwork”. Much of the advice was along the lines of that popularised by the likes of Government Digital Service, but Mariana gave many top tips and practical advice along the way.

Some of this was very simple advice on better communication – tips on how to present work to others, and making it clearer to others what is expected. For example, Mariana spoke about the feedback sessions they run on their designs. They expect that designers make it clear the stage the design is at, and what feedback is expected on. They are encouraged to ask clear questions, and explain the rationale for their decisions. On the flip-side people who are giving feedback are expected to ask questions as to the approach taken, and avoid giving personal opinion instead referring to any user research and the objectives.

This was just one example, but I hope we can apply this to our own work. As part of the Design Community of Practice I hope we can build on some of this advice and turn it into something we can encourage across the office – begin to set expectations for how people can expect to work with designers and our wider team.

My slides from my talk “UX is team work” @agilecitybrs #AgileCityBRS is available here: https://t.co/9qcWQTv0d4

— Mariana Morris (@MarianaMota) November 7, 2016

Twitter moments
There was a short talk from Anna Slingo on the use of Twitter moments. If you’ve not come across them before the concept is essentially the collation of tweets to tell a story around a particular theme.

The moments tab is something I’ve personally ignored on the Twitter app and web interfaces, but the MET Office had seemed to have achieved wide reach through its use, seeing an increase in followers and engagement with their information.

We’ve experimented with the use of slideshare, and listicles in our own work where the project content lends itself to these formats, but Twitter moments looks like another option we could explore… particularly for those moments where we bring existing content together to tell a particular story, or perhaps as an alternative to Storify.

Again the talk included some great tips, such as the use of dark tweets to build the “moment”. Never heard of dark tweets? Me neither. Apparently you can create tweets via the ad platform that never need to paid for, nor appear on your twitter account – but they can be used to form a moment.

More details on dark tweets

Japan: The next big quake

Steven Bernard from the FT spoke about a project he had completed earlier in the year looking at the possible impact of an earthquake hitting the manufacturing region south of Tokyo. A scenario that is not unlikely, according to seismologists.

The talk covered the full spectrum of the project beginning with the overused question “Can we have an interactive map please?” A situation I could sympathise with, given our own teams exposure to this question.

The approaches used were impressive. The use of 3D graphics isn’t something we’d often advocate in our own work, but in this scenario (to model the tsunami height along the coastline) it added a sense of scale that would have been difficult to achieve in other ways.

I was most interested to hear about the use of the Adobe Illustrator plug-in he used “ai2html” originally developed by the New York Times. Annotation really matters to us and our ability to use the combination of graphics and words to tell our stories. The plug-in is something that we’ve been recently experimenting with in our own team and it was useful to see how another team had approached using for different devices.

#graphicalweb16 slides and transcript of my talk about Japan earthquake https://t.co/aQzsbczMdWhttps://t.co/lHt5vUmr26

— Steven Bernard (@sdbernard) November 4, 2016

I wasn’t able to stay at the conference for the whole duration, in part because I needed to be back in the office, and in part because I had tickets for the Southampton v Inter Milan match on the Thursday evening. But from what I saw on Twitter it looked like I missed some great presentations 😦

From the #graphicalweb16 to saints vs inter milan pic.twitter.com/m9cFZr9Sxw

— Rob Fry (@fryford) November 3, 2016

Marriages – when two become one

We’ve published 2 new pieces on Visual.ONS today that push our beta site into new storytelling and data visualisation territory. These 2 pieces are 2 sides of the same coin – 2 approaches to the same data set.

But why 2 pieces? Herein lies the tale…

Visual was set up last year to help cast new light on existing data, to act as a an editorial and data lab to learn lessons about how we can get you engaged in statistics, and make better decisions based on them.

Today we’re experimenting back in the lab with 2 very different approaches to turning a fascinating set of data into (what we hope is) engaging content.

We’ve been looking at trends in England and Wales marriage data over time; essentially, when people choose to get married and how this has changed over the last 60 years.

We noticed a pattern in the data, and felt there was an opportunity to let people explore that data and understand some interesting societal shifts.

Whenever we start a project, we are looking to tell the story in the format that best suits the messages in the data and the intended audience. We want to create an engaging experience, likely to encourage exploration. We like to develop and use formats that can be reused for different sets of data as it’s not possible for us to continuously create bespoke experiences.

Our data visualisation specialist and designer Paul presented an approach that used wedding rings as his design inspiration, he used radar charts and heat maps to give users an elegant overview of all the data, while highlighting certain patterns within the data. We wanted to offer people not just an overview of the data at a distance, but also a personal experience, letting them explore the data for themselves and see themselves, their parents or friends in the data. How do they compare?

Save the data – Scrolling through data

There’s been a surge in the use of vertical scrolling as a simple but effective user interaction model in the last few years. Driven by mobile usage, and by time-poor users, so-called “scrollytelling” can be a great way to move people through an experience with the minimum amount of friction.

The approach was to let users simply scroll through the data, and the various stages of the data-driven storytelling. We felt this was a format that had great re-use potential.

The challenge we faced was how to incorporate a narrative that could tell the story from more of a social history perspective and help pull the users through the interactive.

We appreciate that people are different: some prefer a visual representation of a story and would relish scrolling through the data while others respond best to written text and might prefer the opportunity to have an alternative take on the data, with visual prompts and more emotional storytelling.

What do you see when you think about marriages through the decades? You might think of black and white photographs with curled edges in shoeboxes, the faded primary colour emulsions of Polaroid shots, and family members with gaudy clothes and questionable haircuts.

How could we capture that emotional history in a data visualisation? And should we even try?

The Office for National Statistics isn’t a natural home for storytelling, but we felt there were lessons for us to learn in how we could make our data more accessible, more relevant to people.

But when we discussed adding more editorial narrative, and even archive photos, to the existing interactive there was a tension between the simplicity and focus of the data visualisation and the potential distraction of adding such detail, background and texture to the story. There was also the not insignificant challenge of responsive design – how do would you fit this all on the same screen?

We didn’t want to undermine the purity of the interactive, but knew there was an additional opportunity too good to miss. In some ways it felt like a tension between showing and telling: if we were showing, did we need to do more telling? If we were telling people, were we also able to show?

There was also a long and involved discussion about the levels of visual literacy in our audience. Our audience is typically very data competent, and used to consuming the types of charts you wouldn’t ordinarily see in some sectors of the media.

But we also have a mission to reach an audience member we call the inquiring citizen. Would they be familiar with our radar charts?

We’d been looking at a tool called Shorthand that helps media organisations create mobile-friendly “scrollytelling” content that combines text, photos, video and interactives. So we decided to create a second piece of content, more focused on narrative and social history, using emotionally-driven story-telling and simpler charts.

Let’s get married. OK – when? Shorthand experimentation

As we often do at ONS Digital, we turned to user testing to help us hone our approaches.

Some of our users felt the very data-pure approach we had tried in the interactive was not to their taste. It was something they were unfamiliar with. So we’ve incorporated more annotation on the charts, which highlights the key messages, and added navigation aids to move people through the experience.

There was a definite appreciation of the boldness of the design and the simplicity of the user interaction that we felt was worth testing out in the real world.

For our Shorthand experience, the use of images to create an emotional connection and accentuate the social changes over time was clearly appealing, but people wanted more control over the charts which weren’t interactive, and wanted the narrative to be shorter, punchier and more digestible.

We never set up the user testing as pure A/B testing because we weren’t looking to validate or invalidate one approach over the other. What we found was a distinction between audiences who preferred a more narrative and emotional story versus those who appreciated a visualisation that accentuated the story in the data itself.

So that’s why we have 2 stories to present to you. One is an elegant, sophisticated piece of data visualisation that uses simple scrolling interactions to walk you through the data, allow personal exploration and help you find the story. The other is a rich, visual experience that combines archive photographs, simpler line graphs and more of a traditional narrative to engage you in social history through statistics.

We hope there is a huge amount to enjoy, explore, and learn from both pieces. And we want your feedback on them. This isn’t an A/B test, or Pepsi Challenge. We don’t want to know which you prefer, but rather what works and doesn’t work for you in each of the pieces.

What were the key messages you took away?
How engaged were you in the experiences?
How did scrolling work as a mechanism for exploring the data?
What kind of storytelling do you want from data?

Email us at digitalcontent@ons.gov.uk with any considered views, or take our really quick survey: interactive data visualisation survey , storytelling survey.

Darren Waters & Rob Fry

In a relationship – it’s complicated

A strategy for choosing the right chart.

So far we’ve covered a lot of charting tips about using your axes properly [axes on bars, axes on lines & and, scaling appropriately]… but let’s take a step back – are you using the right chart? If you looked at the latest versions of Excel, Tableau, SAS, R or any other charting package you’d be excused for feeling a little overwhelmed at the variety of charting options on offer. In reality you’ll probably only want to use a small selection of these, but how do you choose?

First of all it helps to introduce a bit of language. If I asked you to name all the statistical relationships you might have in your data you may well look at me blankly, or give me a Facebook style answer – “it’s complicated”. But have a think about the charts you use or create on a regular basis – if you had to put it into words, what are they designed to convey?

 

 

 

[Go on, have a think before I give you the answers. For example, why would you use a scatterplot?]

 

 

 

OK – well here’s a list of all the common statistical relationships we can think of…
Magnitude – How big is a value, and how does it compare to another?
Change over time – How do values change over time? What are the trends?
Part-to-whole – How is an overall or total value broken down?
Distribution – How is a set of values spread?
Difference – How do values differ from, say, an average or from each other?
Correlation – How are values related?
Rank – Is there a way to order the data?
Spatial – Are there geographical patterns in your data?

So step 1 is to identify the relationships that are in your data, and decide, usually through analysis, which relationships you need to portray to the reader. You now have a language to justify the chart choices you make.

Sometimes it’s really simple to think about what you’ll need to illustrate your data and your message – it might be a simple line chart to illustrate how a series has changed over time or a bar chart to show how a range of values compare. However, there are other times when we need to think about the variety of relationships that might be present, and consider a different approach.

Let’s look at an example. We were working on a project before the EU referendum to give a picture of our trade with the world and Europe. One section of this analysis was looking at our trade relationship with countries, in particular our top 10 trading partners. This was the first chart we started with. Here you can see that magnitude is the primary relationship we are showing – how do the values compare to each other? You might also have noticed that we’ve ranked the data according to the value of exports to help the reader make that comparison more easily. Can you notice anything you would improve?

Top 10 trading partners in goods and services, current prices, 2014

Even though we ranked by the value of exports to help comparison, it’s not so easy to compare the value of imports. And if I asked you to tell me which trade partnerships we benefited from the most or the least that would be even harder. The balance of trade would be 1 example of a difference relationship.

So one option we tried was to emphasise this difference, using a lollipop chart

Top 10 trading partners in goods and services, current prices, 2014

What do you think? The aim was to prioritise the difference relationship, that is, the difference between exports and imports. We ranked from positive to negative. We still wanted to maintain the ability to compare magnitude, which you can, but it’s not easy. It feels obscured, and making this comparison was important in the context of the article. Also, comparing the balance was somewhat difficult because of the colour switch. If it was only the balance we wanted to compare we could have used a simple bar chart.

So this didn’t work, but we shouldn’t be afraid to experiment. Often we look at a number of different options before coming to an agreement.

If you read the article you’ll see from the final option that we opted for the slope chart.

Top 10 trading partners in goods and services, current prices, 2014

So here you can see there are a few statistical relationships present. On either side we can compare the magnitude of our exports and imports. You can also see that we’ve ranked either side, making it easy to see who we import from and export to the most. The final relationship is the balance of trade for each country – the angle and steepness of the line illustrating how different exports and imports are.

While this isn’t a chart option everyone will be familiar with, it should only take a few moments to interpret. It’s worth introducing our users to new chart forms if, like in this case, it illustrates the relationships in our data better.

So to recap … choosing the right chart type is a 2-step process.

Step 1 – ask yourself what statistical relationships are in your data and, more importantly, what statistical relationships do you want to portray?

Step 2 – make a chart choice which emphasises this relationship. Experiment with different options if necessary.

One note of caution though, sometimes you might have lots of statistical relationships to convey – it might often be better to split out into several charts to share the messages more clearly.

Have a look at what relationships you have in the reports you’ve written or read recently and ask yourself, does it match the message you want to tell? Could you make it better? Are you expecting your reader to see something that is hidden or obscured in your chart? If you’re really enthusiastic, have a go at a Makeover Monday.

Use your y-axis

…to its full potential

Last year we launched a data visualisation best practice section on Style.ONS.gov.uk. In an effort to keep it short, sweet and accessible we didn’t go into the reasoning behind the guidance – leaving that fuller understanding for the “introduction to data visualisation” course we run across the GSS. However, not everyone can make it to these courses, and so we’re going to share some of this thinking in a series of blogposts over the coming year. We hope you’ll find this useful in your own work.

We’ve got a number of topics lined up, but if you’ve got anything you’d like us to cover then leave a comment below or contact me @fryford, @HartlandZoe or any of the team and we’ll see if we can weave it in.

First up the Y-axis (and scaling more generally). I’ve lost count of the number of times we’ve had conversations about whether you can start a y-axis at a non-zero? [YES YOU CAN…but be careful – we’ll go into this in a future post]. A quick Google reveals a few dozen posts on the subject as it’s one of those eternal data vis questions, along with “are pie charts OK?”

BUT – we should be thinking beyond this non-zero question – let’s really make sure we’re using the y-axis scaling to deliver our message, and think about where we start and end our y-axis.

Take this chart for example – can you see anything wrong with it?

Proportion of female MPs in the UK House of Commons, 1945-2015

I don’t think there’s anything obviously wrong here – around 1974 it looks a bit odd as the data I took had two data points for this year. Other than that it looks like a pretty normal to me, and it works pretty well if our objective was to illustrate the large rise in the number of female MPs, but does it illustrate the whole picture?

Well it all depends on how you look at it – what is the narrative that sits around this chart? Is there a policy target? From my quick research I can’t find an obvious one specifically for the UK, but across society there is an move towards equality, and so perhaps a more realistic scale might be to run the axis from 0 to 50% – 50% representing equality?

Proportion of female MPs in the UK House of Commons, 1945-2015

The use of white space sets the scene and annotation is crucial in explaining this to the reader. After a bit more googling it seems that there is a commonly agreed international aim led by the United Nations, so let’s add this to the chart as well.

Proportion of female MPs in the UK House of Commons, 1945-2015

Already this chart is a huge improvement on what we started with. The added annotation, the policy context and the change of scale should be assisting in delivering the messages of any accompanying text in this theoretical analysis. In fact, it should also help reduce the volume of text needed to convey the message, the chart may well do most of the work. It delivers something that is very self contained – in a world where everyone is increasingly bombarded with information and messages people need content that is quick and easy to consume. This type of image would work particularly well on social media.

Not without challenge

Of course, using the y-axis to it’s full extent isn’t without its challenges, particularly in an independent statistical office where we strive to remain neutral. Making the decision as to what to present can be difficult – everyone consuming this will have their own point of view on what is objective. Tim Harford eloquently describes in this challenge in a recent article titled “Delusions of objectivity”.  Graphically, I’ve see no finer example than this interactive illustration from the New York Times on diverging perspectives of the democrat and republican parties.

One Report, Diverging Perspectives – New York Times

This challenge shouldn’t deter us though – we need to focus on the careful use of language, reference to widely recognised events, policy changes and targets that are relevant to the analysis.

Why use a line chart at all?

You might ask why are we using a line chart at all? It would be a perfectly valid question to ask – it’s easy to forget that the proportion of male MPs is the reverse of this picture. We could add another line for this, but now we’re interested in both proportions we’ve switched our focus to a part-to-whole relationship – so lets opt for a visual that firmly conveys this concept.

It gets slightly awkward now as the time interval isn’t equal throughout and so we don’t want to exaggerate or underplay any trends, but the interval is most erratic during the early 20th century and that was when the proportion of female MPs was broadly stable, so I won’t worry about this too much in this example

The proportion of female MPs has risen, but remains below the UN target
Proportion of female MPs in the UK House of Commons, 1945-2015

So you can see we’ve used a stacked bar chart here – scaling the axis from 0 to 100. We’ve used a stronger colour to highlight the category of main interest here, and set back the other category. It shows the full picture and the other side of the story that male MPs have formed the majority of the House of Commons for some time.

You might have noticed my final tweak here – to add a more engaging and meaningful caption to the chart. Of course we should retain the more statistical title, explaining the measures and coverage but the caption helps prime the reader for what they are going to see, reducing the cognitive burden. It should make the chart that bit easier to interpret at a glance. It’s also a good exercise in summation – how would you have explained this chart in 140 characters or less for Twitter? What alt text would you have used as an accessibility fallback?

Join us soon for our next thrilling instalment…when is OK not to start the y-axis at zero?

 

The big end of year Digital Content wrap up [Part 2]

Welcome back! In part 1 we took a look at Visual.ONS (this year’s biggest highlight for our team) and how it related to some of UKSA aims to make statistics more helpful. We then looked at some of my favourite pieces of content from the course of the year. Let’s carry on.

 

Explainers

Part of improving communication can be to reduce the amount of jargon and technical terms used. We strive to do this in anything we create, but sometimes a concept can be inherently difficult to understand and so we’ve experimented with explainer pieces. It’s a format other publishers have experimented with, such as these from the BBC. We can’t always rely on other organisations for this though and it’s important that we have unbiased content to point people towards when they’re having difficulty (on platforms like Twitter).

One example of a concept we saw people having trouble with was the UK’s debt and deficit and so with the help of the Public Sector finance team we put together a short explainer piece looking at debt and deficit.

Do you understand the difference between debt and deficit?

This is still a content type we continue to grapple with in terms of reaching a wider audience. We’ve experimented with a number of different format types – articles/infographics/videos. We released this around the time of the Autumn Statement in an effort to help anyone who was struggling to understand the terminology – it attracted a lot of positive engagement on twitter, a selection of comments below:

Debt, deficit and lots of other terms flying around today – this guide from ONS sheds light on the jargon https://t.co/MnJIjsRC36

— Hugh Pym (@BBCHughPym) November 25, 2015

https://t.co/RdKls4z4jp Thank you @ONS for a clear and neutral explanation of public sector debt and the deficit

— Hannah Bailey (@digitalhannah23) November 20, 2015

Hurrah for the @ONS —great explainer of (the difference between) public sector debt and deficit https://t.co/pnBQ491qkI

— Koenfucius (@koenfucius) November 22, 2015

 

Charticles [don’t like this title but…]

One of our most viewed posts this year was a fun look a how popular culture has influenced baby names. Every year the baby names release tops the ONS’s most viewed chart. It’s a release that divides opinion within ONS. Some people despair at its popularity compared with more critical outputs, while others revel in it.

Downtown Abbey’s influence on baby names?

However, there’s no denying that it’s a release that could be useful to thousands of expectant parents every year and everyone has that natural curiosity as to how their name compares, so some analysis and promotion of the data seems appropriate.

It’s a subject that allows more creative freedom compared with a piece on the state of the economy (for example). This post from earlier in the year talks about some of the thinking behind the piece and how it was received, but needless to say that it was incredibly popular and syndicated far and wide. You know it’s done well when it makes your Facebook news feed independently!

 

What next for Visual.ONS?

In the short-term it’ll be more of the same. The site remains in Beta though and as always we’re really keen to hear your feedback – you can email us via web.comments@ons.gov.uk – leave a comment below, or via twitter @ONSdigital or @fryford

 

It’s not been all Visual.ONS

While a lot of our time has been focused on delivering content for Visual.ONS there are many other activities our team have been leading over the past year.

We’ve been busy continuing to run GSS training on the Introduction to Data Visualisation and earlier this year we launched a data visualisation section on Style.ONS. This is seen as something that complements the training – the training goes into much more of the reasoning behind data visualisation principles. The reaction has been really positive.

An awesome/useful/comprehensive/free quick-start guide to data visualization | Style.ONS https://t.co/hP9bJyyajI pic.twitter.com/aVKxP4FDXm

— Evan Sinar, PhD (@EvanSinar) October 26, 2015

Looks interesting MT @DiegoKuonen: MT @HartlandZoe: Data vis guidance (tables, charts & color) http://t.co/g8YSYcofXF pic.twitter.com/ERGFzcU8Ll

— Alberto Cairo (@albertocairo) July 9, 2015

Essential reading for anyone publishing anything in Whitehall- Chart design | Style.ONS http://t.co/2vz5pnk1VY

— Audree Fletcher (@avfletcher) July 20, 2015

 

We also had the pleasure of taking part in an AMA on the Data is Beautiful sub-Reddit. It was a fun couple of hours – take a look.

Our social media team have been more active on this blog so I won’t talk so much about their work but they’ve been busy with social media reviews, budget and autumn statement among other work.

 

Goodbye/Hello

There have been a number of departures for pastures new. Notably Alan Smith, (former head of the digital content team) took up a prominent role as Data Visualisation Editor at the Financial Times in September. Alan had been at ONS for a number of years, launching the Data Visualisation Centre over seven years ago. It’s fair to say that his work has been something that ONS has collectively been proud of. He leaves a legacy that we will continue to build upon.

Over the course of the year we’ve also welcomed several new additions to the team with varied backgrounds. This has further grown digital content team into a truly multidisciplinary team of researchers, data visualisation developers, graphic designers, editors and social media specialists.

Early in 2016 we look forward to welcoming Darren Waters, joining us from the Press Association as our visual journalism lead.

Happy new year!

The big end of year Digital Content wrap up [Part 1]

It’s been a bit quiet from much of the Digital Content side of Digital Publishing division over the past few months, but to rectify this (and in true end-of-year style) here we take a look at the year’s highs and lows from our team – it’ll be a bit like those TV shows where they invite a load of b-list celebrities to pass comment on the nation’s favourite kids tv shows or favourite toys – apart from the fact that we couldn’t afford any celebrities, not even c-list, so you’ll have to put up with me instead!

 

The launch of  Visual.ONS

This year’s single biggest highlight for the team has been the launch of Visual.ONS.  The site’s motto has been official data, new light. But what does that mean? This launch post goes into more detail but if I had to sum it up in one slightly cheesy, blue-skies thinking type word, it would be insight.

In October 2014 the UK Statistics Authority launched the 2015-20 Strategy for UK Statistics – titled Better Statistics, Better Decisions  [bear with me, it gets more interesting than this]. The strongest element of this strategy centres on making statistics helpful for people – to inform decision making, support democratic debate, improve communication, and to challenge the misuse of statistics.

Visual.ONS is at the heart of ONS’s efforts to meet this challenge, but very much focused on the inquiring citizen user – essentially the engaged public – those interested in the types of topics ONS produces data on – the economy, population, labour market, health etc.

Better Statistics, Better Decisions

 

So how have we met this challenge? Let’s take a look at some of my favourite posts from the course of the year.

 

Perception challenging formats

Some of our most successful content items have been those that challenge people’s [often poor] understanding of statistics. This type of thinking builds on earlier perception which challenges work such as the How well do you know your area quiz.

One of my favourites from this year [and I might be biased] was a small interactive graphic and short analysis looking at what the Government spends the welfare budget on. Any ideas? Have a guess.

How do you think the welfare budget is spent?

The format of this piece was to ask people to guess how they thought the budget was split and then once the guess is made reveal how wrong they were [or in some cases provide a sense of smugness]!

The ‘blank canvas’ approach (compared, for example, to a multiple choice format) drives people to really consider their answer and reinforces their feelings of shock or satisfaction upon reveal.

This experience should also provide people with something more memorable than just a table or written text, which in turn should help put any future coverage of the welfare budget into better context. In fact we’ve seen evidence of this in action on twitter…people challenging how others use statistics.

Conveying complex info interactively. ONS shows how it's done http://t.co/X75kcXQyoe simple but impressive @UfiTrust

— Ufi Charitable Trust (@UfiTrust) July 7, 2015

@MoneyWeek Conveniently ignores that 42% welfare budget is on pensions & total pension spend up 25% since 2009/10. https://t.co/aEe92WFx2u

— Jeff Salway (@vaughansalway) October 29, 2015

…and if we removed pensions expenditure (£131bn of £251bn in 2013/14 (http://t.co/j3Ijqnwzxm)) that 7% magically becomes more like 3.5%…

— Tim Kimber (@Tim_Kimber) October 5, 2015

Food for thought here"@drlangtry_girl: how welfare spending is broken down, from the ONS (look out for pensions!): http://t.co/9kjRuVETVZ”

— Cathy Corcoran (@CORCORANCathy) July 20, 2015

 

Opening up large datasets

Catchy format title huh? There’s been a big global push to open up data for all. But the challenge doesn’t end there; interpreting the data and making use of it can be difficult and often interactive data visualisation techniques can make this easier for people, especially those not used to dealing with spreadsheets or APIs. These formats can help inform decisions they need to make in life.

Some of you might remember that back in April the Government gave people approaching retirement greater freedom as to how they could spend their pension. Life expectancy data could be one important factor in someone deciding how to use their pension – How long do I need to make this money last? So, in conjunction with Pensionwise, we developed a life expectancy calculator to help support this decision-making.

What’s your life expectancy?

Importantly we didn’t stick to just one big number as many life expectancy calculators do – we wanted to show the uncertainty within the data. How would your finances cope if you lived to 100?

It’s also ‘fun’ for anyone else who might be wondering how long they might live for. I’m always surprised that I have a one in four chance of making it to 97! Again it has links with those perception challenging formats. During user testing it was clear that many people compare themselves to their parent’s or grandparent’s generations, but that doesn’t take into account improvements to health care etc.

This has been one of the site’s top performers over the course of the year gaining around 120,000 page views (excluding syndication elsewhere) since its launch back in March. Part of the reason for its success has been that many websites have referred people to our content to use in their decision making. This includes newspapers, retirement providers and financial planners.

 

Focused articles

Part of the site’s aims has been to uncover insight locked away either in minds of our statisticians and economists or in the depths of a 120 page statistical bulletin. Taking a more focused look at issues the public care about and/or is topically relevant.

One example of this was a piece where we worked with one of ONS’s top economists Philip Wales looking at how the distribution of income has changed since the introduction of the minimum wage. This analysis was drawn from a larger monthly economic review which is aimed at a more expert audience, and put into a format which was more accessible for our intended user group.

Another example came from a much larger report that looked at many aspects of the living wage, a topic that is often in the news. Here we decided to focus on the geographical spread of jobs being paid less than the living wage . We looked at the data at this level because it can be easier for people to connect on a more personal level asking themselves questions such as how might the living wage affect my area or how does my area compare?

How many jobs are paid less than the minimum wage in your area?

Both of these articles are good examples of a direction we’d like to go in – working closely with ONS statisticians and economists  to uncover topical and relevant insight.

Join me for part 2 after the break [when we’ll recap where we got to for a couple of minutes, and then carry on in much the same fashion].

User testing our interactives

Post by James Bayliss, Digital Content

Design is not just what it looks like and feels like. Design is how it works.

Steve Jobs

We know that the most important part of any interactive is the user engagement. Whether it’s an interactive map, calculator or quiz, it’s essential to us that a user knows how to interact with it and that it’s easy for them to do so. User experience (UX) testing is therefore very important to developing our work. In late 2014 the digital content team were approached by the Treasury to design an interactive to support the new Pension Wise website that could tell a person their life expectancy and therefore how long their pension might need to last. I took this as a great opportunity to experience an external customer’s approach to interactive design and testing

Stranded in the Strand
Fast forward to mid-March 2015, and I find myself walking around the Strand, central London in a mildly perplexed, confused state failing badly at locating System Concepts, the hosting company for that day’s user experience testing session.

I eventually discovered that the venue was not actually were Google said it was, but instead inside the entrance to the Savoy Hotel!

Carrying out the user testing
The day’s target demographic (and the main target of the interactive) were people aged 55 and over, nearing retirement and therefore with a keen interest in their pension options. Six user interviews were undertaken in total, each lasting one hour, and aiming to get feedback on both mock pensions advice feedback letters each interviewee had ‘received’ and the Life Expectancy calculator interactive we had been developing. The six selected people – three men and three women – scheduled for interview that day had all undertaken preliminary face-to-face interview guidance sessions a few weeks prior where they were shown mock-ups and static designs of the new Pension Wise website.

Each interviewee was initially given freedom to explore the interactive without influence or instruction. After a while they would be asked fairly general questions to prompt discussion and response (for example, “How does this make you feel?”, “What do you think the graph is showing?” and “What is life expectancy?”). Reactions varied widely, from the pointed “This is absurd. I would switch off. Awful”, to an inquisitive “How do they calculate this?” (or “how the hell do they think this up?!” from one particular participant) and “What is SPA?” (state pension age), “I don’t understand it at all” and the declarative “I don’t want to live to one hundred”).

Interestingly all participants guessed their life expectancy or underestimated it by between five and seven years, even though a number of them would not necessarily consider ascertaining their own life expectancy and did not dwell on this particular issue. This may well be due to people tending to compare themselves to their parents and grandparents lives, and maybe not taking into account improvements over time in general health and people’s lifestyle. This is an example of our interactive challenging people’s perceptions compared with the real world (“people’s perceptions don’t always add up”). This was interesting and very noteworthy, and reinforced our end intention of this interactive to make users really consider how long potentially needed to make their pension and other retirement resources last. There was certainly a sudden noticeable ‘sit-up-and-think’ point with many of the day’s testers.

Playing with the UX testing suite
The testing suite consisted of two small adjacent windowless rooms; one each for the assessment team and the interviewer/interviewee set-up. I discovered during the day that the assessors – who had come from a range of different organisations (e.g. GDS, HM Treasury and Behavioural Insights) – would come and go depending on their own work commitments, rarely staying for all interviews.

Much like our new User Testing Lab in Newport and other such environments used in the recent past for testing ONS web material, such as ONS’s Alpha site (The research behind the alpha), the resources in the assessor’s room consisted of a single large split-screen TV mounted to the wall with speakers attached to hear conversations held in the adjacent interview room. The set-up in this second room was even more IKEA’esque in its simplicity, and consisted of a PC on a table, three cameras whose views were shown on the TV next door and the obligatory small bookshelf with plant on. The three cameras aiming to provide an all-encompassing view of the interview, being positioned one in front, one behind and a table mounted camera providing a clear view of documentation discussed and critiqued during each interview.

Learning from the UX day
Generally, the interactive was well received; participants understood the importance of knowing the information it presented to them, and how they could take it forward to benefit them, with some providing recommendations were offered by some as to how the life expectancy calculator could be improved still further. Based on their feedback the interactive was improved by de-cluttering the user interface of some unnecessary labelling, repositioning and enlarging much of the remaining information aimed at the user and improving the user input functionality and colorimetery. Below you can see how this particular interactive changed between the UX testing day in early March and its release on Visual.ONS at the end of that month.

Since then it has been very popular, having been viewed over 200,000 times. In fact, we have plenty of evidence that we reached far beyond our target audience, as it has even been syndicated by Arabic, Chinese, Greek and Polish websites (although I’m not sure they realised it’s based on UK data!).

The Art of Charts

Post from chart guru Zoe Hartland (@HartlandZoe)

On 1^st July the Digital Content team officially launched written guidance on Style.ONS for creating effective tables and charts and using colour in accordance with established best practice.

Cliche, we know

We had been considering creating written guidance to accompany our popular Introduction to Data Vis course for some time, and the Style.ONS project, led by Sarah and Juliet, gave us the drive and home for this.

The initial focus has been on the basics of charts, tables and colour. These are topics that have been part of our course for years and historically lots of literature has been written by topic experts to support best practice. We have also fielded many queries over the years from teams across ONS. My colleague John Nixon has been crucial in this central support role. All of this experience combined has given us a strong appreciation of good practice, as well as some of the common pitfalls people face.

Coming up with a structure

The first challenge was to come up with a structure for the guidance. Our initial thoughts on what the standards and guidance should contain are below…

Lots of PostIt notes (other brands are available)

…as you can see there wasn’t a shortage of ideas.

Context

Our introductory course focuses a lot on the decision making process when creating charts – Should I use a bar chart or a line chart? Would colour highlighting help? Should I use annotation? So much of this decision making process is based on the context of where the chart lives. Is it a standalone chart for social media, or is it a chart trying to convey a key message in a report? One of the big challenges has been translating this into concise written guidance and principles. My aim was for users to try and use these written principles as much as possible in their design, but if the need arose to do something different be able to justify their thought process sensibly, adhering to as many best practices as possible.

Much of the written guidance is based on the course content, which was originally compiled by Steve Rogers and Alan Smith – massive credit due! The course content is founded on well established data visualisation theory and best practice – dating back to the early charts of William Playfair and his careful use of annotation to give context and the perceptual insight of Edward Tufte. The course also discusses Gestalts laws of grouping, in particular the proximity law (introducing white space) to group data that are similar and separate where dissimilar. I used these tried and tested methods as a base for the standards on Style.ONS.

How will these standards help?

We hope that staff across ONS and the GSS will find these principles and standards useful in their day-to-day work. Perhaps they will revisit the charts that have remained the same from publication to publication and question whether they can be improved. The standards have also been built into the new chart making tool created for the upcoming Beta website and so this should help to ensure consistency in future charting styling.

This is just the starting point for this data visualisation guidance. It covers the basics but we intend to add further, more advanced, guidance over time. For example, how to handle responsive chart design – what should a chart look like on a mobile or tablet? We’ve already tackled some of these issues as part of our work on Visual.ONS but keep an eye out for further blogposts and guidance on this theme!

 

Cats, “it depends” & invisible visualisation

I can be a little bit sceptical about conferences; perhaps I’m scarred from years of attending statistically focussed events where half the talks can be discussing very niche problems that I struggle to relate to. I think I’ve found the conference for me.

Alan wrote late last week about his quick reflections on the Graphical Web conference that many of us from the ONS Digital team attended. He’d be too modest to say but a huge part of the conferences’ success has been down to his personal efforts in the run-up and behind the scenes. Many of us from the ONS Digital Content team came away enthused, full of inspiration, re-energised…but at the same time a little bit knackered.

On a personal level it was great to meet so many enthusiastic and like-minded people. It was also inspiring to meet many of my data visualisation idols, hear their thoughts, and draw on their insight. I’m using this post to briefly reflect on just a few of the talks that really resonated with our work in the ONS Digital team.

BBC Visual Journalism team – Amanda Farnsworth

Amanda Farnsworth gave a keynote on the experiences of leading the BBC’s visual journalism team. One of the BBCs values is that the “audience is at the heart of everything they do” and it was good to see that this was recognised through a project ‘the secret life of cats’ involving Cats and the Internet – everyone loves this combination! What was even more fabulous to hear was the importance the BBC puts on working with experts. Their approach is a two-way street:

• They keep their ears close to the ground and take interest in academic projects that that might engage the BBC’s audience. They then approach these projects and if possible they will collaborate with the experts so that the BBC build on the projects knowledge and convey their stories in an engaging way.
• The BBC also has its own ideas and if relevant they will contact experts to involve them in their projects. They then collaborate to make sure that the methodology and conclusions are correct, as well as drawing on any ideas they may have. The Great British Class calculator was an example of this.

There are strong parallels with the work that we undertake within ONS. I gave a talk at the conference (and last month I wrote a blogpost on Rich Interactive Storytelling) that looked exactly at this combination of drawing together the expert knowledge of our statisticians/economists/researchers to produce rich, but simple to use interfaces to understand and explore our data.

The BBC’s Secret life of the cat

The other message I came away with from this talk with was that it’s OK to experiment in public. All too often in ONS we get trapped in a culture of everything has to be perfect before it can be released. We know that as a government organisation we need to be careful about how our content comes across to our users but within that it’s possible to experiment with new content forms and ideas. There are two caveats though – 1) the content should still be professional, drawing on the knowledge and skills you already have in your organisation, and 2) Is that you should set aside time to learn from the experimentation. The BBC marks their experimental content very obviously and invites comments from their users.

Key to a successful design process – Scott Murray

Scott is an Assistant Professor of Design at the Univeristy of San Francisco. I first became aware of Scott through his fantastic book, “An introduction to d3js” – it’s been one of our team’s bibles over the past years as we’ve been building skills. It’s available at all good bookshops…and Amazon. One of my colleagues, the very talented Zoe Hartland, even felt compelled enough to give Scott a hug for the help it’s given her – but this wasn’t why he was at this conference.

Scott’s keynote presentation was a philosophical look at the keys to a successful design process. It’s been written here before about how the various digital content teams are being brought together from across ONS, our data visualisation centre, design and editorial teams. This is a really exciting time; bringing the different skill sets together from across these teams should lead to better content – the tricky bit will be understanding how to bring these skills together in a design process. So I watched with interest. What was the key to a successful design process? Scott’s response was “IT DEPENDS”?!! In all seriousness though it does depend – the lesson was that your design process needs to be flexible depending on what skills, resource, goals, time, tools, budget etc that you have available.

Expertise needed for data design

The talk did cover other visualisation experts attempts at defining and illustrating a design process – a lot of these covered common elements that we already do within our work, but this collection of thoughts will be useful when we more formally discuss how we go about working together. It’s not a finished topic for Scott, he’s keen to gather the experience of more data visualisation people through this survey.

Invisible Visualisation – Doug Schepers

Part of the conferences’ brilliance was that it combined the standard setters and implementers, as well as those who practice and use the technology as part of their work. Doug works for W3C, the organisation that curates the standards for the web. His talk was about making graphics and visualisations accessible.

It’s well established that using visualisation can really help get messages across in a way that text and tables can’t. But what if you’re visually impaired? What would be your experience on the web? This is how Doug began his talk – he used a screen reader rather than his own voice that hit home that whilst it was easy for the screen reader to read the text and tables it wasn’t able to process a chart embedded as a simple image.

We care a lot about accessibility in our work. It’s important that we make our work accessible wherever possible, particularly as a government organisation, servants of the public. A lot of the topics he covered we were well versed in, they form part of a course we deliver on the basics of data visualisation – elements like colour, the right chart choices etc, but Doug’s presentation went beyond this and offered some very practical solutions to improve the accessibility experience in native web content, such as adding screen-readable labels to bars on a bar chart. My favourite was a line-chart example, where as you ‘played’ the chart from left to right the a constant sound would change it’s pitch to match the height of line. We’re considering composing some charts – “Sweet Child of Mine” in chart form anyone?

Invisible Visualisation – A chart that plays a sound as you move left to right

In summary, it was a brilliant conference and I haven’t even mentioned the workshops. The videos for the talks are gradually being processed and edited by the fantastic Winchester Journalism School team. The majority of the conference talks will be available on the conference website, and I’ll add the talks I’ve mentioned here as they become available.

 

Amanda’s interview:

…and talk

 

Scott’s talk:

Rich Interactive Data Storytelling

Statistician. The sexy profession – according to Google’s Chief Economist. Working in our brown 1970’s pebble dashed offices it doesn’t always feel particularly sexy, but the one thing we statisticians, researchers and economists have got going for us is that we’re really good with numbers. Across this ONS community there is real in-depth knowledge of ONS outputs. There are individuals who have worked on the same set of statistics for decades; they know how they are collected, it’s strengths, it’s weaknesses and have an understanding of why trends have occurred.

However, as an organisation I’m not convinced that we’re always good at communicating this knowledge and the richness of the data to our audience. The beauty of our data is often in its complexity. Previous posts have highlighted the wide range of users the ONS has – from the casual inquiring citizen to the expert user. We also have a wide range of content types. This rough sketch was my 5-minute effort at mapping user types against the range of content ONS currently offers. [Click/touch for interactive version complete with examples of content]

I work in our Data Visualisation team and the bulk of the content we create involves some element of interactivity. You’ll see that I’ve added interactive content along the bottom of the diagram covering all user types. The content can take many forms, but using interactivity allows us to be more flexible with the form of our analysis and/or data. Interactivity can enable rich and imaginative forms of storytelling and data exploration. It doesn’t limit you to flat, linear structures, derived from a print generation and even the biggest datasets can be unlocked from their spreadsheets and transformed into interfaces that are easy and engaging to use. A single interface can allow us to target the broad spectrum of users ONS has.

The best way to illustrate this is to have a brief look at an interactive that we released last week looking at commuting patterns. The whole piece follows an interactive Martini Glass structure. First we feed readers up through the stem of the Martini glass, our predefined analysis, before handing control over to the user to explore. The introductory analysis looks at some of the areas of the country where people are commuting to and from, it highlights the London effect drawing commuters in from across the country. Even during this introduction we’re allowing people to play with data, explore national patterns and to put it into context against their own area. This makes for a more engaging and personal experience compared to a normal written summary. We also use animation to reinforce some of the messages we’re introducing, for example the areas that send the most commuters to London are shaded first and then each area shaded in sequence when we explore the proportion of commuters who commute into London.

When the reader is finished with this analysis (they’re able to exit at any time) they’re presented with a data exploration interface, where they can hover over the map to explore the full richness and complexity of the underlying matrix of commutes from one area to another – over 160,000 values. Subtly we apply intelligence to these flows; the animated lines highlighted in red represent a significant flow of commuters between one area and another significant for the area selection. Each part of the display is doing an important job. The map gives users the geographic context of where people are moving to and from, and the linked bar chart on the right allows users to clearly see the distribution of flows for an area. Importantly, we’ve managed to maintain the full complexity and beauty of the data, but presented in an easy to use interface – it’s the quickest way to get to any value for an area.

Hopefully it’s easy to see how this type of analysis and data exploration could appeal to a wide range of users. For example, the personalised aspect of the interface and easy introduction would appeal to our casual inquiring citizen users. The information forager would appreciate the speed at which they can get to their data (compared to trawling through a spreadsheet), and at the other end of the spectrum the expert analyst will appreciate having a visualisation of the whole dataset together with some statistical interpretation of the individual flows.

This is a content structure we’ve worked with for a while within our team. It’s also a structure you see used a lot in the data journalism community – some of my favourite examples come from the New York Times and the Financial Times. These are powerful rich structures that I’m personally keen to see more of within ONS – watch this space!