All posts tagged visualisation

4 Posts
PG Neuro 2

Teaching customers to accentuate the positive

It may be possible to stave off depression before it even appears using brain-training software so simplistic in its design that even the psychologist testing it once bet it wouldn’t work.

Ian Gotlib‘s group at Stanford University, California, studies girls aged 10 to 14 years whose mothers suffer from depression. Such girls are thought to be at higher-than-normal risk of developing the condition themselves, in part because they may inherit their mothers’ tendency to “amplify” unpleasant information. Although none of the girls has yet experienced a depressive episode, Gotlib has found that their brains already overreact to negative emotional stimuli – a pattern they share with their mothers and other depressed people.

Gotlib is studying whether these young subjects can use interactive software and brain-imaging hardware to “rewire” their brains by unlearning this negative bias. In a pilot experiment, eight girls used a neural feedback display to learn how to control activity in a network of interrelated brain regions that have been linked to depression – these include the dorsal anterior cingulate cortex, anterior insula and dorsolateral prefrontal cortex.

The level of activity in this network was measured using an functional MRI scan and displayed to the girls in the form of a thermometer on a computer screen. The girls were shown sad or negative pictures that might ordinarily raise their “temperature”, and tried to lower that “temperature” by adopting more sanguine mental states. They were then advised to try to recreate that mindset in their daily lives.

A control group unknowingly watched someone else’s scan output instead of their own, so they didn’t actually learn how to control their brain activity.

Accentuate the positive

Another set of girls in the pilot experiment received their training through a simple computer game instead. In this game, a pair of faces appeared on a screen every few seconds: they would be either neutral and sad, or neutral and happy. Then a dot replaced one of the faces, and the “game” was to click on the dot. For the eight girls in the control group, the face replaced by the dot was selected at random, but for eight girls in the experimental group, the dot always replaced the more positive face in the pair. Over a week of playing this game daily, these girls were in effect being trained to avoid looking at the sad faces.

Gotlib himself originally found this concept, called attentional-bias training, so simplistic that he bet Colin MacLeod, a psychologist at the University of Western Australia in Perth who pioneered the technique, that it would not alter psychological symptoms. Gotlib lost his bet.

In his pilot study, both kinds of training significantly reduced stress-related responses – for example, increases in heart rate, blood pressure and cortisol levels – to negative stimuli. These stress responses are a key marker of depression, and they diminished one week after training. The girls in the experimental groups also developed fewer defensive responses to negative faces, such as startled blinking. Control groups showed no such improvement.

Jill Hooley, head of Harvard University’s clinical psychology programme, was impressed by the findings despite the small sample size: “This is highly innovative work,” she said. “Ian is breaking new ground here.”

Gotlib is adding more subjects to the training programme and plans to compare their long-term mental health with a parallel cohort of 200 girls, half of whom have depressed mothers, who aren’t participating in the study.

What I find staggering about this study is not just the social implications which are truly ground-breaking in the study and treatment of mental health, but the wider implications. It proves with some very simple mechanisms that you can train the brain to behave outside of it’s normal bias. Stop for moment and consider how this might be applied to say, Investing. Some people behave inappropriately with their investments. They cash them in too early, they poke when they should leave them, they invest when they should save or save when they should invest etc. It’s all largely cognitive bias. The brain knows what the brain knows. So this kind of research in my view gives us a rich playground to begin thinking about simple mechanisms we can add into traditional services that might help some people start to behave differently.

Welcome to the frontier of design people.

The CX of Visualising Data

Introduction – Visualizing the abstract

I’ve been working on a project over the last couple of months that’s opened my mind to a whole new place in UX that I’ve fallen deeply in love with. It’s always been there and I’ve always admired it, but I’ve never had to interact with it first hand and given it much studying until now. The area of Data Visualisation or InfoViz as I’ve been calling it with my clients.

I’ve got some new heroes in the form of Hans Rosling and David McCandless. Men who not only do the visual part, but have become voices that help articulate the importance of visualising data in ways that the normal user can consume. I love that quality in people.

By visualizing information, we turn it into a landscape that you can explore with your eyes, a sort of information map. And when you’re lost in information, an information map is kind of useful. We should allow the dataset to change our mindset and if we can do that, then maybe it can also change behavior. It’s a fascinating area.

David McCandless in one of his Ted Talks said the following; “We’re suffering from information overload and data glut. We need to help visualize information, so that we can see the patterns and connections that matter and then design that information so it makes more sense, or it tells a story, or allows us to focus only on the information.” Never truer words spoken about ANYTHING we do in UX, not just InfoViz.

Data is the new oil?

Lots of wonderful comparisons to natural resources when I having my adventures round data land. If the data is the kind of ubiquitous resource that we can mine and can shape to provide new innovations and new insights, and it’s all around us, and it can be mined very easily if we set our UX up to gather and harvest at the right times.

Graphis diagrams: The graphic visualization of abstract data

I recently found out about this book by Walter Herdeg, which is truly a great great thing if you can actually find a copy of it. The original was published in 1974 but still has some genius to it and the v.2 book is also full of thoughtful quality. A seminal vision for the convergence of aesthetics and information value, which codified the conventions of contemporary data visualization and information design. One of the 100 most influential design books of the past 100 years, it features work by icons like legendary designer and animator Saul Bass, Brain Pickings favorite Milton Glaser, TED founder Richard Saul Wurman and many more.

For instance, check out this beauty:


During my exploration for this project I’m working on I’ve stumbled upon a whole wealth of amazing InfoViz and I wanted to share my favorites with you so you can marvel at the Data, but also at the incredible Interaction Design and Visual Design that go into making InfoViz so magical.

Four Ways to Slice Obama’s 2013 Budget Proposal

With Obama’s recent budget for next year proposed, Shan Carter et. al of The New York Times let you explore the plan in their new interactive graphic. It provides four distinct views of what the breakdowns look like, all the while keeping a distinct link between each click with smooth transitions and consistent objects. The transitions make this graphic. It’s often useful to see data from different angles, and the smooth transitions (rather than abrupt jumps) let you see how things are and how they have changed, effectively. This is fine work. Click here to check it out in all its interactive glory.

The London Riots from The Guardian

The Guardian newspaper in the UK are the bonafide gurus in visualizing news information. Here are two amazing examples from the same news topic – The London Riots – and both prove just how incredibly talented the Guardian designers and InfoViz experts are + just how fascinating some of the data from the London Riots is.

The shooting of Mark Duggan on 4 August sparked a series of riots, first in Tottenham then across England. This timeline was created to follow the spread in interactive realtime, culminating in what could be the most incredible catalog of an even ever put into digital form. Their version of it for the Arab Springs was similarly fascinating and groundbreaking!

It’s both Visual and Visceral. Articulating time as a road is very clever and breaking events across the timeline by location is equally captivating. Massive kudos indeed – Click here to go have a fiddle and marvel at this one.

However… it wasn’t the jewel in the interactive InfoViz crown for the Guardian. Oh no… they kept that back for this:

The analysis of 2.6 million tweets shows Twitter is adept at correcting misinformation – particularly if the claim is that a tiger is on the loose in Primrose Hill and that’s exactly what they did with this amazing info t0ol:

Throughout the UK riots, many scanned the internet in search of reliable information. In the absence of confirmed news, the web was often the only way of tracking events. Amidst the hubbub, countless topics came and went. As worries mounted, speculation grew. Rare individuals requested sources, countered hearsay, sought the truth. The rise and fall of rumours on Twitter is a striking display of social forces in action. Click here to have a play, it’s really quite a breathtaking thing they’ve created.

Rethinking the food nutrition label

The food nutrition label is on almost every food item, but it can be confusing in the sense that it doesn’t tell you much about whether something is good or bad for you. The UC Berkeley School of Journalism hosted a challenge for designers and food experts to rethink the label.

We are confused about what and how to eat and so we’re eating too much of the wrong things. In fact, we’re eating too much of everything. Two-thirds of American adults are overweight or obese. The obesity rate among preschoolers has doubled since 1970. Type 2 diabetes has become an epidemic. We want to make it easier to choose healthy food.

Visual designer Renee Walker won with her rework shown above. The rectangles on top of each label represent main ingredients, and bars on the bottom provide a quick thumbs or thumbs down for a breakdown of fat content, carbohydrates, etc. Icons of spoons and scoops are used to supplement serving size since no one knows what 182 grams looks or feels like. Click here to find out more.

Electricity Generated from Renewable Sources

I really enjoyed the simplicity and fluidness of this one. It’s basically a breakdown of energy consumption by country, by year. Simples. Check it out. This is the kind of thing that would normally be shown to the consumer as a table of data, or a bar chart. It’s a much more engaging experience when you can reach out and touch the data. Brilliant.

If you liked that one you might also like this one from the U.S, which is Your Electricity Bill redefined.

Political Climate Chart

Another great example of how to break 3 dimensions down into one clean interaction. Time, Issues & Political Party. The norm’ would be to add things onto a bar-chart or similar. This way we get something much more fun and something much easier to digest. Click here and have a go yourself. Some fascinating data.

Here’s another two from the U.S that give us interactive views of similar data scenarios. What a “Hundred Million Calls to 311 Reveal About New York” and the “US Health Care Spending: Who Pays?” breakdown.

Sources & great references

I’ve browsed A LOT of great resources recently and digested a lot of great InfoViz… here are some of the sources I’d recommend if you’re starting to fall in love with Data like I have like the carbonite offer codes:

Cartophile Cartographia
Chartsbin Chartporn
Cool Infographics Comicbook Cartography
Daily Infographic Daily Statistic
Data Visualization Everyday Venn
iGraphics Explained iLove Charts
This Is Indexed Information Design
InfoGraphic Directory Infographic Site
Info Graphic World Info Graphics News
Infograph Love Infosthetics
Information Is Beautiful Junk Charts
Flowing Data Fuck Yeah Visual Data
Mind Map Art Neoman Infographics
News Graphics Old Map
One More Graphic PD Viz
Social Media Graphics Mega Maps
Infographic Showcase Visualsing Data
Vizualize Viz World
Well Formed Data

The future of shopping

Love this video from Resource Interactive… it’s like a visualisation of the way my brains been working recently.

Competitor Benchmarking

We’re not supposed to give secrets away are we? Oh well… let’s break the rules & throw caution to the wind… I’m going to give you a leg-up on competitor benchmarking because it’s one of the most important tasks we perform in UX.

The term “benchmarking” is relatively new but the concept is as old as competition itself. Whether in industry, sport or in other aspects of our daily lives, we continually need to reference our own performance against others.

All of us benchmark most of the time without realizing it. At one time the concept was known as ‘interfirm comparisons’ because in an industrial sense, that is what it is.

As a task it’s important to make it very clear that this is ‘subjective analysis’ not ‘objective research’. You can of course go through stats if you have them and look at two or three websites against each other, but the chances of your having that kind of data are almost non-existent, so assume this is you as a UX person or intern looking at lots of different sites, following some rules & guidelines & grading them based on observation. Subjective observation. Doesn’t make it wrong, it does however make it someones opinion for a lot of things.

The criteria

So here’s a start for ten… if I was going to look at four sites and compare them against each other I’d take the the following areas & give each site a score out of 3. 1 being dreadful and 3 being top of the class. Scoring is of course entirely a decision you can make for yourself. I just like to keep it simple.

1 Findability

  1. Site was easy to find using Google
    • Search for brand found main site quickly
    • Search for “SOMETHING TO DO WITH THE INDUSTRY” directed me to this brand
  2. Search results were helpful

2 First Impressions

  1. Website was well branded
  2. Clarity of next steps was obvious (you found what you were looking for)
  3. The site is very product led
  4. The site is very campaign led
  5. The site has offers and incentives up front
  6. The site has clear data-capture opportunities up front

3 CTA effectiveness

  1. Visibility
  2. Clarity
  3. Simplicity
  4. Page position
  5. Competition from other messages

4 Ease of use

  1. Navigation
    • Simplicity
    • Contextual signposting
  2. Major headings on pages are clear & descriptive
  3. Styles & colors are consistent
  4. Emphasis (bold, etc.) is used sparingly
  5. Main copy is concise & explanatory
  6. URLs are meaningful & user‐friendly
  7. HTML page titles are explanatory

5 Content

  1. Emotional connection
  2. Commerce
  3. Tools

6 Accessibility

  1. Site load‐time is reasonable
  2. Adequate text‐to‐background contrast
  3. Font size/spacing is easy to read
  4. Flash & add‐ons are used sparingly

7 Personalisation

  1. Website can be personalised
  2. User can choose what content they are shown
  3. The experience can be customised to interest

As I mentioned… this isn’t an exhaustive list of criteria, it’s just the list I use and from time to time I change it on an ad-hoc basis dependent on the client I’m doing the benchmarking for. You’ve got to keep it flexible & play to the audience.

It’s actually what you do with the data that can be useful.

Analyzing and using the benchmark

Using something like Excel to do the benchmark I’d recommend giving each point on the list a score and then a final ‘average’ for each section (you’ll see what I mean on the sample spreadsheet I’ve attached). It’s the average score that you can then use to generate the chart(s) you’ll want to share with the client. I recommend using a ‘Radar’ chart for the visualisation. Simply because it overlays everything on top of each other in a way that lets you see exactly what the lay of the land is. They look fun too.

What I look for in a visualisation like this is not just where your client is performing well against it’s competitors, there’s a chance because of marketing etc that it always has and always will compete heavily in some areas more than others (like SEO / findability) what this shows us very quickly is where opportunities to disrupt the marketplace are. Take the example on the right, there’s clearly nobody in the area of personalisation. Move into that space before someone else & you can grab the point of don-displacement first.


A benchmark is a quick, simple way of hitting a client with some insight that will conceivably justify decisions you want to make as an agency. It also gives you an opportunity to go back to a client after you’ve done some work and say “You’re score in the area of XXXX was XX, it is now XX therefore we’ve improved usability”.

I’ve included a sample spreadsheet so you can have a fiddle. Punch in numbers where the 1’s are on the first sheet and you’ll see the rest generated automatically. Please note I don’t do technical support… so if you break it that’s not my problem… it’s literally to give you a foot-up and show you the idea.

Download sample benchmark

Found this useful? Please make a small donation:

Choose post category