designing humanistic UX for syrian civilian casualty data

The following is a quick write-up of a 2 hour design jam centered on the event theme: “thoughtful gamification.”


A couple of days ago, reddit user /u/kristianjensen5 posted a thread on the popular subreddit /r/dataisbeautiful titled “92,000 dots — one for every civilian killed in Syria [OC].” The thread presents a link to this imgur album, which contains a very long image displaying civilian deaths in Syria from 2011–2016. In the image, civilian deaths are broken up into three categories: [men, women, and children]. Each casualty received a dot in their respective category block.

The effect is that, as we scroll, we’re supposedly hit with just how long it takes to reach the bottom of the page. 92,000 dots is a lot of dots (and by extension, a lot of deaths), but there was some argument about the effectiveness of the presentation. Compounding this was the way /r/dataisbeautiful bills itself: “DataIsBeautiful is for visualizations that effectively convey information. Aesthetics are an important part of information visualization, but pretty pictures are not the aim of this subreddit.”

Results in the comments were mixed, with the top comment expressing some concern:

/u/fipfapflipflap: “Not exactly ‘beautiful’ data, per se, but poignant. Large numbers are particularly hard to grasp without using some form of representation, which tends to blur over the fact that each and every one of those lives was a human being.”

This specific conversation continued:

/u/fipfapflipflap: “I was more referring to the fact that thousands of dots are impossible to quantify visually, especially when they stretch beyond one screen.”
/u/blindsight: “Yeah. The speed with which you can skip by almost all the dots trivializes it, to a large extent. One very quickly loses scale as the scroll bar is mashed.”

Suggestions for ways to better represent the data began trickling in:

/u/blindsight: “I don’t know what the equivalent would be for a death count, though. Someone would need to set up a scale, like number of people traveling along a major highway maybe, and show people scroll past. That’s far higher effort, but probably much more impactful.”
/u/fipfapflipflap: “Maybe, but that runs into the problem of representation. You almost need to quantify in groups just to make sense of the volume, but how do we do that without losing sight of the individuals?”

Not sure, let’s see:

/u/blindsight: “This was my thinking, for showing stick people marching past.
Pick some relatable rate.

Show people going by at that rate, in real time.
Add some commentary to float above the heads of people as it plays (like the messages in the link above). This shows every single person, individually, and watching the whole thing (maybe a half hour long?) in real time will give the scale a more meaningful impact. Working out the math, 92000 in 30 minutes is 3066 people per minute, or 51 people per second.
As an example, Highway 401 in Toronto is the busiest highway in North America, and its busiest section sees 500,000 cars/day. If we assume half the cars traverse in rush hour, and have one occupant on average, that gives 250000 people in 6 hours, which is about 11.5 people per second. So you could have five highway 401s all flowing at the same time to get it under half an hour, or just do highway 401 speed and run it for over 2 hours. If I had the time, I’d start by showing people walking, and scale up to highway 401(s).”

Getting closer:

/u/f00barista: “Wouldn’t that be misleading though? It would give the impression of a rate at which people are killed, whereas this figure is simply the total number of people killed. They were killed over the course of 5 years, not 30 minutes.”
/u/abisco_busca: “The only way I can think to do it is go have a museum or gallery with the correct number of human sized cardboard cutouts all set up in a room or hallway so you could walk by them. This kind of representation doesn’t transfer well to printed or digital mediums.”

And here’s where the subthread ends, with a comment by /u/abisco_busca in which he offers a great idea for representing the data in a physical space, and (what I’m approaching as) a challenge of sorts for designing the experience in a digital medium (I agree with him about print). The goal of this paper, then, is to run a design exercise in which we create a digital experience that humanizes each casualty as an individual, while still making the user feel the full weight of the total number of civilian deaths.

the data

So, our data set is pretty basic. /u/kristianjensen5 sourced the data set from the Violations Documentation Center. Regardless of what casualty number reports you want to argue or agree with, these are the numbers we’ll be using for this specific design, as they were sourced by the original creator.

Our set looks like this:

Women: 9,801

Children: 15,414

Men: 66,785

the user

Our target user here is anybody who has a vague idea about what’s going on in Syria based on media impressions and the like, but who lacks some nuance of knowledge in the level of human loss occurring within the country. Think, your average commuter, teacher, student, taxi driver, whatever. Anyone in a place buffered by enough safety to permit their casual ignorance about certain global news. We’re looking to offer perspective.

Because Mobile Is The Future Of Everything, we’ll be limiting the scope of our design to mobile devices. Due to the subject matter, I also think a mobile experience seems initially more approachable and unsuspecting than something more heavy-handed. If people suspect they’re going to have their beliefs challenged, they are less likely to engage. We know this from study surrounding the backfire effect, a psychological misconception that “When your beliefs are challenged with facts, you alter your opinions and incorporate the new information into your thinking;” when in reality: “When your deepest convictions are challenged by contradictory evidence, your beliefs get stronger.”

This misconception was validated by a 2006 study, performed by Brendan Nyhan and Jason Reifler at The University of Michigan and Georgia State University, in which they created fake newspaper articles about polarizing political issues. The articles were written in a way which would confirm a widespread misconception about certain ideas in American politics. As soon as a person read a fake article, researchers then handed over a true article which corrected the first. For instance, one article suggested the United States found weapons of mass destruction in Iraq. The next said the U.S. never found them, which was the truth. Those opposed to the war or who had strong liberal leanings tended to disagree with the original article and accept the second. Those who supported the war and leaned more toward the conservative camp tended to agree with the first article and strongly disagree with the second. These reactions shouldn’t surprise you. What should give you pause though is how conservatives felt about the correction. After reading that there were no WMDs, they reported being even more certain than before there actually were WMDs and their original beliefs were correct.

They repeated the experiment with other wedge issues like stem cell research and tax reform, and once again, they found corrections tended to increase the strength of the participants’ misconceptions if those corrections contradicted their ideologies. People on opposing sides of the political spectrum read the same articles and then the same corrections, and when new evidence was interpreted as threatening to their beliefs, they doubled down. The corrections backfired.

And while we’re not dealing with something as abruptly standoffish as the war in Iraq, we are dealing with human lives — and there’s a sense of guilt that can occur when we’re forced to acknowledge that there are people in places far away from here suffering to a much greater degree than we are.

So, a nuanced version of our goal becomes: How do we create a digital experience that humanizes each casualty as an individual, while still making the user feel the full weight of the total number of civilian deaths and protecting that user from initially feeling attacked by the data?

The solution seems pretty simple: don’t tell the user what they’re experiencing until after they’ve experienced it.

the skeleton

Based on /u/abisco_busca’s idea, we basically want to create a digital walkthrough scenario in which the user has to stop at a representation of each individual casualty, progressing until they have “met” every one of the 92,000 casualties. We give the total number emotional weight by making the experience a bit taxing, so we want the user to feel a bit of mental exhaustion by the end.

Essentially, we need a figure to represent the user, we need a line of figures that represent the civilians, and we need a walking mechanism that allows the user figure to navigate their way along the line of civilian figures.

The model I’d like to go with is game-like, but I hesitate to use the word game here, as this implies the experience is in some way joyful or fun. In order to constrict the experience, I’d propose only allowing very simple movement controls that limit the player to a singular action: progressing along the line of civilians.

Visually, I think the game should stay minimal. There’s power in simplicity and, as stated earlier, we want our users to be initially intrigued and puzzled. This sets them up to be agnostic about the situation, disarms their held beliefs, and allows us to potentially reach them in a more honest way when we present the purpose of the experience. The original data visualization by /u/kristianjensen5 used dots to represent each figure (blue for women, green for children, red for men), and we’ll continue that use into our design by leveraging the mobile-popularized, top-down gameplay style.

The narrative of the experience will be a traditional three-part arc: beginning, middle, and end. At the beginning, the user will select whether they are a man or woman. Their figure will be assigned the appropriate colored dot and will be placed next to the line of civilian figures on the screen.

The middle section of the narrative begins as navigation buttons appear along the bottom portion of the screen: a left arrow button, an up (technically “forward” in the top-down presentation) arrow button, and a quit/exit button. The left arrow button will stay greyed out until act 3, meaning the player can only progress forward, or exit the experience. The middle section of the narrative consists of the user pressing the forward button to progress along the line of civilian casualties, moving up one space with each forward button press. When the player reaches the top of the screen, a scroll occurs that advances the line and places the character back at the bottom of the screen to progress past the next section. This middle section of the narrative continues until the player has pressed the forward button 92,000 times, at which point they reach the end of the line.

The end section of the narrative prompts the player to “get in line,” at which point the left arrow button becomes available. When the player presses this, their figure should get in line with the other civilians. After the player “gets in line,” npc dots should follow along at varying speeds in the right lane and get behind the player in line. This should continue until the dots in the civilian line again extend off the top of screen. As this occurs, we should stay centered on the user’s figure. Once the line extends off the top of the screen, the screen should fade to black and slowly scroll through Syrian civilian death statistics — alerting the user for the first time what they’ve experienced.

Ideally, we create an effect in which users think they’re playing a strange game in which the goal is unclear, that ultimately bridges the gap between Self and Other, by making that user ultimately join the Other in line after a long journey. This experience makes the statistics presented at the end feel more personal. They’ve been earned, rather than given.

If, for any reason, a user presses the quit/exit button, the screen should revert to a modified presentation of the statistics screen. Something like: “At the time of development, 92,000 Syrian civilians have died on their own war-torn land. You just met X number of them.” Let X equal the total number of civilians the user has passed in line. At a pace of 1 up button press per second of gameplay, the experience will take 25.5 hours to complete. This feels like a good amount of time because it’s almost nonsensically long for such a repetitive experience. Completion seems like a feat of effort and might be treated as such.

Mock-ups of some of the general ideas expressed here follow:

the mock-ups

Our first look is going to be at the intro sequence described above. Our goal was to be a bit unassuming with the presentation.

intro sequence

We then introduced a middle sequence that demonstrates how the user might progress along the “civilian line.”

mid-progress sequence

From this mid-progress point, the user can either quit or complete. The quit sequence looks like this:

mid-to-quit sequence

We also described a sequence in which the user is able to join in the line if they reach the end of the experience. An animation then occurs in which “NPC” dots progress up the screen much like the user did, joining in line behind the user, until the line progresses off the screen. This small interaction should resonate with the user, as it in effect adds them to the list of casualties and demonstrates that the number is still growing. This sequence was detailed as such:

mid-to-finish sequence. the pathway lines in the right-most mock-up should not be assumed to appear in the final product, they’re simply there to demonstrate “NPC” movement.

Finally, we have the finish sequence, which occurs after the mid-to-finish sequence:

finish sequence.

on scoring & donations

The experience as presented seems like a powerful standalone way to help users digitally experience the death toll by relating casualty numbers to a time investment by the user. That said, the average user doesn’t have 25.5 hours of time to sit around pressing a single button over and over.

Score, and particularly high score, as a game mechanism is often used to encourage competition between users that latently encourages more gameplay. I play the game once and get a score of 1000 then my friend plays and gets 1200 and so I pick up the game and play it a second time.

Equating a ‘score’ to a person who has passed away in an exceptionally tragic way seems to lie in an ethical grey zone. I could argue that instituting a scoring mechanism explained above might encourage people to address the issue more than once, but there’s a very finely balanced line between that occurring and an alternative — that people begin to care more about the score than they do what the score represents.

The only way I can think to reconcile these two issues is to create a mechanism that would allow for score to directly translate to a dollar donation by some larger sponsoring organization of the experience. I think something like $.01 per civilian passed by the user, tallied across all users continuously, and donated in a way that actively helps Syrian refugee civilians might make introducing the function of a score feel more like a net positive.

That said, I’ve not included this mechanism in my mock-ups as the initial goal of this design was less to gamify a tragedy, but rather, to allow users to experience it in a lite but impactful way.