Prototype your ideas with a wireframe, show them to users, and refine using their feedback!

Create better messaging with user testing.

Jamie Gibson
Vizzuality Blog
Published in
6 min readFeb 6, 2017

--

Most of you reading this post will have worked tirelessly over a report, a presentation or a web tool at some point in your life. There’s nothing worse than that feeling when you realise people aren’t listening to your points, because they don’t understand what you’re talking about. To avoid this heartbreak, we run user testing throughout our projects to make sure we communicate information clearly and effectively. In this blog, I’m going to outline how user testing at a very early stage of a project can help you build better and more impactful products.

You are not your user.

In my role as vizzuality’s Social Scientist, I research how people use data to understand their world and take actions to make a more sustainable planet. User testing and interviews are a core part of what I do, as they provide opportunities to listen to and learn from the people we’re trying to help. I love this participatory way of working because, as the famous phrase goes, “you are not your user”. I jump at any chance I get to bring new ideas and new voices into our work: it’s the only way to make sure we build things that are understandable, usable and useful.

So I was overjoyed when our friends at the World Resources Institute (WRI) asked us to do some user testing on wireframes for a project called the Emissions Scenario Portal. Wireframes are a first approach to the layout of a website, to show how we’d package information on certain pages and the ways in which people can flow through a site to get to the information they want. You can access the wireframes for this project at emissionspathways.org/ .

This new portal aims to drastically simplify the way we talk about scenarios of future carbon emissions, making it more accessible for people making that decision to open another 100 coal-fired power stations or not. This new space should help people explore and understand the different paths a country could take on the road to a low carbon economy. How much more wind and hydro power will be needed to substitute coal? How important is Carbon Capture and Storage for reducing emissions?

Reaching the ambition of the Paris Agreement will require us to reduce carbon emissions. The Emissions Scenario Portal would help you see how different scenarios for the future — like reduced energy generation from coal — would impact a country’s carbon emissions.

With this goal in mind, early user testing was essential to make sure our ideas fit with the way these people read information, their existing understanding of how scenarios are calculated, and how they actually make decisions. During January we ran six tests with a variety of different users to investigate how we could help. We’ve also been running a survey: if you want to help our research, take a look here.

Tips for tests.

There are excellent materials on running great user tests online, so I won’t repeat their advice here. For anyone new to the field, I’d recommend Steve Krug’s excellent user test template: I still start every test with his succinct introduction. The main thing I’d add is to start with a strong idea of your user’s journey through the site: this is your null hypothesis that you want to prove or disprove. Every step they make, you’ll be watching them, to find out what works and what can be improved.

I also strongly advise having at least one other person watching with you. Since Juliana Iglesias joined us last October, we’ve been able to team up and conduct testing as a pair. Not only are we taking better notes as a result, but because we come from different backgrounds (geography for me, psychology and design for Juliana) we’re seeing different things in each test. The fact that Tim, Roman and Johannes from WRI were also able to join was a real bonus: again, they saw things we didn’t and helped us build out a better picture of our users.

What did we learn?

I won’t give too much away for confidentiality reasons, but there are a few things we learned that I’d like to share with you: I hope they are useful for you, if you’re trying to do something similar.

We found that people weren’t necessarily that interested in the text we wrote: they wanted to click and explore, and focussed more on the images.

Pictures speak 1,000 words.

As you can see, there was quite a lot of text on the homepage. Especially as this is a new website, we wanted to make sure the homepage gave a good account of the different things users could do on the site and provide some easy next steps to get people moving through the site. What we found was that, often, people focussed on the headings and the empty spaces where pictures would eventually appear on the fully designed site.

“Can you make it look like Netflix?”

Quite often when people express an idea, they’ll give an example of where they’ve seen it before. Imitation is the highest form of flattery, and modern web design is built on standards and best practices. This comment about Netflix was made about the cascading carousels on the main dashboard search page. While filters and search options are great, the user wondered if we could offer more curation and context, to help users navigate through the different types of dashboard we hope to have on the final site. Especially on a site that’s about discovery and helping people find relevant information fast, we thought this was a good suggestion to improve the experience.

Our users were interested in a more curated dashboard overview — something more like Netflix — with similar and related content grouped with headings that appealed to users and the questions they’re trying to answer.

“Give me a glossary, I don’t know what that word means.”

This insight, coming from many of the testers, was interesting for two reasons. On the one hand, it shows that the texts we have prepared are still a bit technical and difficult to understand. On the other, it shows a certain accepted pattern of behaviour: if our users don’t know something, they’ll look it up. They’re happy to, or expect to, do the hard work, rather than asking for simpler and accessible language.

What’s next?

After reflecting on all the feedback as a team, we’ve divided the comments into three main blocks. The first are immediate comments we’re going to respond to in a new iteration of the wireframes. The second are visual design comments, that would be addressed once we add more of the full experience. The third are comments to deal with during development — requirements and considerations we’ll need to bear in mind when we implement certain features.

Testing will come in again once we have a beta version ready to test. Then, once the site is built, we’ll deploy things like Google Analytics, CrazyEgg or Hotjar to monitor user behaviour and find out how people use our sites. Everything we learn — from menu preferences to language issues and visualisation preferences — then gets re-used in the next project. It’s an ongoing circle of learning, improvement and refinement.

Want to take part?

When I started in 2014 I was doing user tests maybe once a month. Now, we’re doing them on a weekly basis. We’re doing more testing, on more projects. It’s a great time to be a social scientist! If you want to take part and help shape our websites (to be the very best like no site ever was), why not sign up to be a tester today? If you’re interested in contributing to the Emissions Scenario Portal and have 10 minutes to spare, you can do a test right now.

--

--