Antiviral social media: visual design

How can UI designers make debunks better?

First Draft
Nov 6, 2015 · 15 min read

When debunking hoax imagery, use a high-visibility style that labels misinformation unambiguously. New verification projects should consider core lessons from older and better-established fact-checking styles while adapting for social media ecosystems.


MILESTONE IN NEW VERIFICATION VISUALS — Alexis Madrigal’s Hurricane Sandy coverage in the Atlantic features social media posts with superimposed image text “stamps” indicating verification research status. As a design update to “traditional” fact-checking visuals (shown below), this is among the most popular cases of systematic verification stamp technique. It seems so simple. What makes it effective?

“You gotta fight fire with fire here.” — Alexis Madrigal

Three years ago this week, in October 2012, Alexis Madrigal with Megan Garber, Chris Heller and Tom Phillips created an article debunking Hurricane Sandy images. That post was an important experiment in “real-time debunking.” In his 2015 report, “Lies, Damn Lies and Viral Content,” Craig Silverman quotes Madrigal described his motivation as simply, “to sort that shit out.” The result was a simple and effective visual system and design workflow for talking about viral misinformation.

COLLECTION OF POLITICAL VISUALS — A satisfying visual vocabulary seems to include symbols of official or impartial judgments (a polygraph, a meter, stamp, or readout) but barbed with humor. Visual meters that represent systematic fact-checking scales are used by 80 per cent of political fact-checking projects. Some systems are more consistent and usable than others. Learning about these user interfaces is needed from usability testing, academic reviews, and design efforts. (From left to right: PolitiFact, Factcheck.org, Africacheck, Rabble.ca)
CLASSIC VERIFICATION IMAGERY — The Pinnochio from Washington Post’s Fact Checker, which can be considered a core reference for these kinds of visual systems. A few issues come to mind: Is the meaning of an upside-down Pinnochio clear? Is it useful to distinguish between four types of false? Does the Verdict Pending symbol feel out of place in the system? For someone who can’t really remember the Pinnochio story, is a “Geppetto Checkmark” a good thing? Is red the best color for a “true” check?
RABBLE.CA’s POLITICAL SCALE — The broken screen is a good joke. But why does it look like a pager from the 1990s? Why is the “mostly false” rating green?
TWO GENRES OF VERIFICATION VISUALS — LEFT: political fact-checking efforts like PolitiFact have long used a durable system for checking on-the-record claims of politicians (at least since 2003). RIGHT: Newer verification efforts that deal with eyewitness images often use a “stamp” and “stop light” imagery to visually express judgements. These are closely related interface patterns.

Print and TV guidelines offer clues

Because there are not yet many clear visual guidelines from debunkers, we suggest that new verification projects generally should look to fact-checking efforts for guidelines on how to debunk material successfully in the public interest.

ADVICE FOR PRINT JOURNALISTS — This verification projects onto graphics from The Debunking Handbook.
VERIFICATION ADVICE FOR TV JOURNALISTS — A bit dated, but a PDF of advice from FlackCheck.org has great points about how to avoid ambiguity.
NOT THIS SHARK AGAIN — The Weather Channel social media debunk segments that unfortunately don’t use the visual displacement technique or any visual disclaimer at all. It seems likely that many folks (perhaps with the audio turned down, or glancing up in an airport) might have gotten the wrong impression about this shark photo, a perennial hoax.

Bloggers and multinational broadcasters alike should get their act together lest they pollute the media ecosystem further.

Lucas Graves’s research has inspired a lot of useful contemplation and opened many questions about the best practices. As Bill Adair wrote in August: “Are we writing our fact-checks too long? Too short? Are we using enough data visualizations to help readers? Should we take the time to create more infographics instead of simple charts and tables? What do we need to do to give our fact-checks authority? Are links sufficient? Or should we also include quotes from experts?”

Aesthetics of automation

In some cases, more algorithmic approaches like TrooClick, LazyTruth and TruthGoggles can be developed to semi-automatically intervene in the flow of misinformation. This seems exciting to verification UI designers because it creates new interactive and visual possibilities. TruthTeller is an example of automated fact-checking with a flourish.

WAIT FOR IT … — Animated gif of the Washington Post TruthTeller. The “computer is thinking” animation, which is probably just added to make the computer look smart. Fair enough. But it’s confusing that it shows Obama talking but then fact-checks Harry Reid.

Using print-worthy illustration: El Sabueso

If you want something special, one way to go is to use custom illustration and more expressive categories. The Mexican fact-checking column El Sabueso does this beautifully with an eight-part color scheme and this lovable bloodhound:

FANTASTIC CUSTOM ILLUSTRATIONS — by El Sabueso that bring the reader into the full process of the fact-checking workflow. This is a leading example of how fact-checking routines can be renewed. This system uses more statuses than most fact-checking routines but manages to make each verification status feel unique.
EXAMPLE ROUNDUP of VISUAL SYSTEM — Using a consistent verification scale allows journalists to do recaps that review the total breakdown of judgments. Small deductions for the donut chart.
A DOWNRIGHT GLAMOUROUS animated gif of a bloodhound’s ears flapping is a way to engage the public sphere in media criticism. It gets attention, carries the newsroom brand, and tells readers that this project won’t be some dreary fussiness. (There is a rendering error in the loop, but it feels charming, almost intentional).

Using a time-lapse gif to debunk Twitter bots: PicPedant

Taking another example of creative new forms of visual verification, @PicPedant uses an inventive format of time-lapse overlays to show tweets that have been reused by several spam accounts.

TIME-LAPSE DEBUNK — A time-lapse is a great way to give a visceral sense that something is wrong.
SPEAKING OF BEING PEDANTIC — Again by fading between the hoax and original photo, the manipulation becomes clear. But clearer over-labeling or side-by-side placement would be useful, like some kind of stamp.

Coming back to that simple stamp

In the Hurricane Sandy story, the design execution was effective because it puts that classic stamp on top of the faked images. To improve handling of sensitive media, consider the simplest stamp like this. It can be created in many kinds of image software. Simple as it is, this works well, especially when combined with the side-by-side technique.

A Madrigal-style verification stamp at its simplest. (Shown here in San Francisco Display Medium on torch red.)
A side-by-side comparison of fake and real imagery as composed by Matt Novak on Factually, using a Madrigal-style stamp of disapproval. The addition of side-by-side comparisons in a way that entertains and clearly debunks. It’s a great example of making value from the worst parts of the internet; it helps us think more critically about the visual culture around us. Navy Futura on Gold.
EXAMPLE of how the Atlantic.com continues to do weather debunks with the stamp strategy.
France24 uses a debunk stamp effectively. Vice, the Huffington Post and the BBC also used debunking recently in support of refugees — unfortunately they often recirculate hoax imagery without any modification or visual “hedging.”

The Pope table cloth trick video

Consider the recent fake video of the Pope doing a table cloth trick which was originally on the Ellen Show. When a talk show does jokes like this, it seems harmless enough. But what happens when realistic fake videos like these can be produced in less than a day? How will journalists manage this new type of social media which manipulates reality so directly? What responses are journalists using as hoax hypermedia becomes hyper-realistic?

EXAMPLE OF JOKE HOAX — A Matt Novak’s coverage of this hoax on Gizmodo’s Factually project explained the story with a side-by-side comparison of the unedited video with the edited video. A side-by-side view is a great way to present this type of fake. It contains the manipulation and immediately provokes media-critical dialogue about it.

The best stamp designs are ultra high-contrast, appropriate for readers who are multitasking.

These are as simple as highway signs. They should reframe a fake and make it’s questionable status immediately obvious. They help us keep a healthy sense of incredulity.

EXAMPLE DEBUNK MOCKUP — This example, invented for discussion purpose only, shows a static image with multiple layers of caution embedded in the image: the darkened gradients added to the top and bottom, the fake status stamp. Ashortened link is integrated into the composite image text for full attribution even when the image is reposted on other networks without the context of the original verification work. Red annotations help make it viscerally clear that something is wrong with this image.
EXAMPLE ANIMATED — An animated example of obscuring parts of the image in an effort to prevent misunderstanding during social media verification process. Further hedging might be needed for more sensitive cases — for example, the fake timestamp at the top would be good to cover.
EXAMPLE FILMSTRIP — Perhaps in addition to the darkening technique and label overlay, we could use a filmstrip style to show exactly where the edit starts. Similarly, Flackcheck recommends a matrix and Novak uses the side-by-side.

Other examples of visual debunking

The following are other examples of recent debunks on social media.

CLASSIC STAMP — Screenshot and stamp are a good example of displacement.
FALSKT! — Good example of displacement. The original is still readable but the judgment is clear.
EXCELLENT MYTH-CHECKING — The American Diabetes Association shows skillful participatory debunking — using the 2:1 ratio, clearly stating an unattributed claim, clearly stating the fact, and asking for “eyewitness” reader input.

Antipatterns: what not to do

Here are some lessons taken from some selected examples of debunk visuals that pose usability problems and could potentially misinform readers on social media:

  1. Don’t use stock imagery. It makes the debunk feel insubstantial, more like the start of an argument than the conclusion. Factcheck.org used a fake doctor in 2013 (below), and it doesn’t present their strong reputation in the best light. In this context readers seem sensitive to aesthetic clues which appeal to emotion instead of logic.
NOT GOOD — Africa Check and Factcheck.0rg using arguably too much humor and stock imagery.
NOT GOOD — LEFT: The debunk label “MOSTLY FALSE” is too small and seems contradicted by “Politifact Texas” logo which point to the true side of the Truth-O-Meter. RIGHT: the Photoshopped image was re-shared without composite text in the image — that means the image appears without a debunk headline in media collection views that don’t show Tweet text.
MIXED RESULTS — The annotation of print news is a great pattern. But these particular annotations aren’t very legible or immediately understandable. The image also has that aspect ratio ratio problem — it should be a 2:1 ratio, ideally.
YOU WON’T BELIEVE WHAT HAPPENED NEXT — Snopes has perhaps taken their game a bit too far. This kind of clickbaity “curiosity gap” headline writing technique is inappropriate for debunks, especially when they concern myths about sociocultural stereotypes. The unattributed image doesn’t add much information.

EXAMPLE MOCKUPS

We’re just getting started here, and all of the above-mentioned organisations are leading the way in terms of debunking hoax stories or misrepresented facts. Debunking activity is not limited to professional journalists and debunk visuals don’t have to come at the end of the process. What might debunk visuals look like that try to actually recruit reader input?

DESIGN MOCKUPS — Some design concepts from the team at @meedan for the Checkdesk project. LEFT: uses the Unicode “warning sign” ⚠ . RIGHT: takes the warning concept further to cover the photo with the warning sign. We’re interested in gathering feedback about how to do better visuals for new types of verification projects.
DESIGN MOCKUPS — More example designs from Checkdesk design sessions. These were intended as cards that would live on a blog. Based on the logic above, they were scrapped because they don’t go far enough to “hedge” the content of the videos — instead of using the direct overlay technique, these have a bold question that lives in a second column. They probably should use the composite image text technique.
DESIGN MOCKUPS — Still more examples, rougher explorations of ”visual hedging.” Created as a design exercise by the @meedan team for a Checkdesk design sprint.

Summary ideas and questions

If you are engaging in fact-checking, how should you actually present your results?

  • Use a clear stamp of verification status that covers the media in question. Use overlay annotations to indicate which aspects are faked. If you debunk something and don’t clearly show what you are debunking, you’re risking being terminally vague, like the Weather Channel example. Superimpose text directly on top of the image to create a safer composite asset that can be shared.
  • Use clear text in your labels. Don’t muddy the facts with a clickbaity text annotations or headlines. As Silverman says: “many news organizations pair an article about a rumor or unverified claim with a headline that declares it to be true. This is a fundamentally dishonest practice.” Link-bait style headlines, which might be an appropriate art for some kinds of entertainment journalism, are inappropriate in this type of effort.
  • Design defensively. Learn more about the contexts in which your visuals will be displayed: For example, some views on Twitter only fit images that are 2:1 aspect ratio. Use images that are twice as wide as tall to avoid cropping of important debunk overlay text.
  • Consider affordances for collaborative fact-checking. How can we involve more people in media criticism? The recent fact-checking of the G20 Summit demonstrates that there can be important successes through this type of collaboration. Like the American Diabetes post above, in some cases it’s best to reach out to your readers to get feedback from these outputs. Visually these interactions can be a potent part of a dialogue with an audience.


First Draft

Non-profit tackling misinformation globally. Check out our website: firstdraftnews.org.

23

23 claps
First Draft

Written by

Non-profit supporting truth & trust in news. @Comprova is our latest verification collaboration. firstdraftnews.org

First Draft

Non-profit tackling misinformation globally. Check out our website: firstdraftnews.org.