Imagine you’re going down the road and on your right you see a green exit sign. What does the sign’s font look like? It’s probably a bold sans-serif that you can read at a glance and know: okay, this is a trustworthy source of information.
Now imagine that you’re home and you’re reading a book. What does that book’s font look like? It’s probably a serif typeface, which encourages you to slow down and reflect on what you’re reading.
These stylistic choices tap into a psychological concept known as fluency. The easier an idea is to think about and understand, the more fluency it is said to have.
Defining disfluency
Conversely, there’s disfluency. Disfluency is a measure of cognitive load on an observer when presented with a new concept, like pronouncing an unfamiliar name, or reading something that is orthographically inconsistent (LiKe Th1$). The greater something’s disfluency, the harder it is to process.
“People feel easier about stuff that’s easier to process.” says Dr Adam Alter in a 2012 interview with Edge.org. He is a Professor of Marketing at the NYU Stern School for Business, and his research specializes in metacognition and technology addictions. “What I mean by that is when something is difficult, that should act as a meta-cognitive alarm or a signal that you don’t understand it as well as you perhaps should.
“We’ve shown that disfluency leads you to think more deeply,” Alter continues. “That it forms a cognitive roadblock, and then you think more deeply, and you work through the information more comprehensively. But the other thing it does is it allows you to depart more from reality, from the reality you’re at now.”
Now, you may be thinking to yourself, what does this have to do with user experience design? Since, as user experience designers, we aim to make user flows and designs as intuitive as possible, I want to set out the case that strategically adding experiential friction may be to the benefit not only of users, but of society as well.
Simply put, the unsettling surge of disinformation on the internet mirrors technology’s increasingly smooth and streamlined interfaces. We now make our comments on the web in fluent, sans-serif fonts, like Apple’s San Francisco and Google’s Roboto. There are few pauses in the user flow between finding an endearing but divisive lie, and sharing that lie with a rapt audience.
I would like to propose, based on interviews with and talks from experts in the field, that these two trends—increased ease of use and increasing animosity—are linked.
Knowing this, however, gives us designers an extra tool for undoing some of the harms of social media, while retaining the good sides. Adding strategic points of friction to user interfaces can help give users enough time to stop and reflect about what they are doing.
Don Norman and the three levels of processing
A funny thing happens when incoming information is disfluent, and it has everything to do with how our brains process that information. Don Norman, author of The Design of Everyday Things, set out—both in that book and in a 2003 TED Talk—that we have three levels of processing information: visceral, behavioral, and reflective.
First, there are the visceral processes, which are unconscious, reactive, and affective. “We [generally speaking, as humans] dislike bitter tastes, we dislike loud sounds, we dislike hot temperatures, cold temperatures.” says Norman in the talk.
“We dislike scolding voices. We dislike frowning faces. We like symmetrical faces, et cetera... In design, you can express [this visceral level] in lots of ways, like the choice of type fonts and the red for hot, exciting. Or the 1963 Jaguar: it’s actually a crummy car, falls apart all the time, but the owners love it. And it's beautiful—it’s in the Museum of Modern Art.”
Second, there are behavioral processes, which both the visceral and reflective processes influence. “Behavioral is subconscious, you’re unaware of it,” continues Norman. “Almost everything we do is subconscious. I’m walking around the stage—I’m not attending to the control of my legs. I’m doing a lot; most of my talk is subconscious; it has been rehearsed and thought about a lot... Automatic behavior, skilled behavior, is subconscious, controlled by the behavioral side. And behavioral design is all about feeling in control, which includes usability, understanding—but also the feel and heft. That’s why the Global knives are so neat. They’re so nicely balanced, so sharp, that you really feel you're in control of the cutting.”
And third, there are reflective processes, which concern executive functioning, and they direct our thoughts towards a particular object or aim. “[The reflective processes are like] a little part of the brain that has no control over what you do, no control over them.” says Norman. “[It] doesn’t see the senses, doesn’t control the muscles. It looks over what’s going on. It’s that little voice in your head that's watching and saying, ‘That’s good. That’s bad.’ or, ‘Why are you doing that? I don’t understand.’”
In other words, more disfluent information ascends into our conscious awareness, whereas more fluent information is handled by visceral and behavioral processing.
Some of the known and applicable benefits of disfluency are profound. Back in 2011, a study was conducted at Princeton, with 28 college students. It asked them to recall facts from two biological profiles on the fictitious pangerish and norgletti species. One profile was set in gray 12-point Comic Sans or Bodoni font, and the other was set in black 16-point Arial font. The rate of retention for the profile set in the hard-to-read Comic Sans/Bodoni was 87% compared to 73% for 16-point Arial.
“One thing that tends to happen,” Alter says, of fluency and facts, “is when something feels fluent you assume you understand it really well, and that can be a trap.” Alter points out that there’s another famous study, called the Cognitive Reflective Test, where users are asked a series of mathematical questions that are phrased in such a way as to lure you into giving an incorrect answer. For example: When you add the cost of a bat and a ball together the sum of those two is worth $1.10, and the bat costs a dollar more than the ball, how much does the ball cost?
“What happens is, for some reason, the first and intuitive response is that, I guess the bat must be $1, the ball must be 10 cents.” Alter says of common answers to the question. “That adds to $1.10. That seems about right. But, of course, the difference between $1 and 10 cents is 90 cents, not $1. The correct answer is that the bat is worth $1.05, the ball is worth 5 cents. They add to $1.10, and the difference between them is $1. And people generally struggle with these questions. They’re lured in. They give their intuitive response, and they’re incorrect.
“But if you present the questions in a font that’s a little bit more difficult to read, we found that you can increase their accuracy pretty dramatically. They make fewer of those intuitive responses.”
This characteristic of disfluency—that increased effort to understand something increases retention and comprehension of an idea—is, it seems to me, the key factor in making sense of both our news media and social media. From this, we can begin to construct a picture.
Priming, and the Facebook of yore
There is a great example of the way social media companies drive disconnection, and it’s found in the work of Jay Van Bavel. Van Bavel is an Associate Professor of Psychology at NYU, who researches what kind of information humans respond to on social media. When we sit in a corner at a coffee shop near Washington Square Park, I do my best to focus on his insights over the hum of caffeine in my body and Celine Dion belting out My Heart Will Go On from an overhead speaker.
“Social media is extremely implicated with the spread of memes, fake news, and propaganda, [as it concerns the erosion of] democracy.” Van Bavel says. In 2018, Vox’s Strikethrough profiled Van Bavel’s research, which found that, quote, “when it came to divisive issues like gun control… tweets with moral-emotional words like blame, hate, and shame, were more likely to be retweeted than tweets with neutral language.” While humans often take distinct positions to stake out in-groups from out-groups, historically, social checks—like hurt feelings—reined in the most extreme of these tendencies.
But those social cues won’t do for social media companies that rely on people staying on the site for as long as possible to make a profit. Therefore, those social checks can now be overruled with a block or mute button, and algorithms are in place to ensure that you see more content that reinforces your view. Bad actors can then step in and make a profit through proliferating extremist views, and do so without fear of either recriminations or counter-arguments.
Van Bavel waxes nostalgic over Facebook’s early days. “Facebook was different [eight years ago,] the type of stuff I posted was different. The type of stuff I saw was different. It was just little whimsical comments about my day. I don’t even know if in the early days that you could post a photo, because my old posts never [had] photos attached. It was never news stories—which is now what I share a lot of on Facebook—none of it was divisive or partisan… now, if you look at my feed, it’s like New York Times articles about the terrorist attack in Pittsburgh… [Facebook in 2008] was structured in a way that led you to just weigh in on your thoughts on the day that wasn’t adversarial or combative.”
Priming of statuses was a big differentiator between past and present Facebook. Facebook’s original comment format was John Doe is..., which forced users to respond within that sentence. It would be grammatically awkward to turn it into a rant. Similarly with Twitter, as Van Bavel recalls, “Back in 2009, 2010, to retweet something was a hideous looking thing! It said ‘RT @ so-and-so’ and then you had to add your comment in; it made it hard to make things go viral, but it also made it effortful. So you couldn’t just, on a whim, hit the RT button to something that pushed an emotional button; you had to do two steps, which buys you an extra four seconds to go, Is this something I really want to share?”
Perhaps that little extra effort in sharing information on the Facebook and Twitter of yore—the disfluency those systems induced when sharing information—evoked reflective processing in users. This could have overruled their immediate emotional urges to, say, retweet something or fire off an angry comment.
That latency, in turn, could have made it much harder to spread fake news. In this scenario, it was only with the rise of increasingly fluent experiences that the spread of fake news on social networks became possible.
So, the question becomes, how might we invoke disfluency?
A little pause in the daily grind
The New York City Subway system introduced a new map for New York City’s subway system in 1972, which was praised for its minimalist aesthetic as designed by graphic design legend Massimo Vignelli. But New Yorkers loathed it because it failed to accurately reflect geography in a time where crime was on the rise, and minimizing time away from home could be a matter of life-and-death.
Many graphic designers consider Vignelli’s map aesthetically superior to the map in use today. They also point to existing research from MIT that claims to support the diagrammatic aesthetic. “A computer model developed at MIT scans an image and produces a readout of how that image is captured by peripheral vision,” according to a video explainer over at Cheddar. “The readouts, called mongrels, show how much of an image is comprehensible [to peripheral vision] when the eye focuses on a specific point… the mongrels of [Vignelli’s] map support this.”
The ensuing readouts are indeed clear. And yet, taking into consideration the points laid out so far about disfluency, might it be the case that the ability to glance something over quickly is inversely related to both recall and deep comprehension about its contents? And if so, does that carry an important message for how we design user interfaces? Might it be the case that ease of use is driving people to effectively surf the web on auto-pilot, making it harder to evoke critical thinking as it concerns disinformation and, possibly, foreign subterfuge?
Steph Sabo is the Senior Art Director at BigWideSky and she writes about disfluent fonts in design and marketing. “The jarring disruption [of disfluent fonts] prohibits the reader from getting comfortable with the conventions of a typeface.” writes Sabo. “There are several ways this can be achieved; setting paragraphs in alternating typefaces or using an uncommon font with irregularities or flourishes can act as a legibility speed bump… [my research found that] it isn’t necessarily about the ugliness of a typeface, but rather its unexpected form that increases the recall.”
However, in the case of web interfaces, there is a real danger that increasing disfluency will result in people abandoning a given website altogether. An eye tracking study by Jakob Nielsen found that “Most users read about 20% of the words on the average webpage.” To which Sabo adds, “If this post were more strenuous to read, many people wouldn’t make it past the first sentence. Disfluent fonts can act as an inhibitor when the reader’s attention or motivation is weak to begin with.”
The implications of this are that we need to, from a business standpoint, tread carefully in reimagining our user interfaces. We need to find a balance between too much disfluency and too much immediacy. We also need to explore if such a balance can even be found, because the existing research strongly suggests that increasing disfluency increases our capacity to reflect.
Furthermore, given that media illiteracy and succumbing to fake news gives operations like troll farms outsized electoral influence, it’s plausible that font choice could have ramifications for national security. With authoritarian leaders the world over besieging the legitimacy of the free press, the stakes couldn’t be higher.
Professor Van Bavel agrees. “As [tech companies] changed their features to be more addictive, it’s had an unintended consequence of making it easier to engage in political propaganda and warfare.” We are about to leave the coffee shop, and head off into the disfluent tangle of Manhattan streets called Greenwich Village. “The quality of information that the average citizen has is a linchpin of democracy,” he continues, “because you need educated citizens in order to figure out who to vote for…
“But if a third of people are reading nonsense, that can tip elections and change history. And who is fake news going to appeal to? It’s not going to appeal to systematic, educated thinkers; it’s going to appeal to people that are not well versed in navigating the media, or have ulterior motives; and [both] special interests and leaders with ill intention are going to leverage that to engage in demagoguery and promote authoritarianism, which is antithetical to what [both social media companies and democracies claim to] stand for… And once things get closed off… once you have authoritarian governments in control, they want to control the whole message completely.”
* * *
How did we end up in a world where we are all artificially connected by news and social media, yet unable to pull ourselves away?
The news I’m reading on my screen (I’m occasionally loath to call it news, because its intention seems to be terrorize rather than inform) is set in sans-serif fonts. The sheer amount of it makes me feel adrift in a flood of bad faith actors: foiled plots, death tolls, political agendas, tribalism, thoughts and prayers offered with a proud sneer.
Social media companies—to our knowledge—weren’t out to undermine democratic institutions in the world, or to revive the specters of racism writ-large, and yet that’s exactly what happened. How is it that a user interface can turn ordinary people into enraged partisans?
Perhaps—in addition to legal and regulative remedies—part of the solution to fake news can be found in making fonts just that little bit harder to read, so that someone, somewhere, reading an incendiary comment online will pause, strain their eyes for just a moment, and for the first time in a while, reflect.
John Fallot is a UX Designer based in Brooklyn, NY, who specializes in humane user experience design. Examples of his work can be found at johnfallot.com
Illustrations by Andrew Wilshere
.jpg)
.jpg)
