Driving your UX vehicle: accelerate with design, brake with content
By Christopher Cocchiarella and Celeste Elizabeth
“All the world’s a stage,” as Shakespeare penned long ago, and each of us have unique parts to play. How true for the myriad of roles we assume in the world of user experience (UX). Consider, for instance, two crucial players in our profession: UX designers and content strategists. Although distinct disciplines, these roles collaborate to build user-friendly designs that communicate useful, usable content. The success of their collaboration rides on how well design and content work together.
Of course, describing how design and content work together successfully can be difficult to put into words. Fortunately, there’s an easy way to convey the design-content relationship, based on a simple analogy:
UX is like a vehicle that helps users drive their thought processes. Design is the accelerator, speeding up their thoughts. Content is the brakes, slowing down their thoughts.
In this article, we’ll break down this analogy in two steps:
- First, we’ll draw upon two principles from psychology: fast thought and slow thought.
- Then, we’ll explore how fast and slow thought apply to two sides of UX: design and content.
But before we delve into psychology and UX, let’s briefly mention what led us to this analogy. Our story begins with Vanguard’s UX mobile team, where designers and content strategists like us collaborate to enhance the Vanguard app.
Vanguard’s mobile app
Designed to make investing available to more people, the app regularly receives improved features that help clients save for retirement and other financial goals. The app was made for investors, but it wasn’t entirely intuitive for anyone new to investing. Investing often feels like a daunting process to the non-expert, and, whether it involves looking over economic data or reading financial jargon, people can get lost easily.
What’s more, there’s a cost to not understanding this information. Making a mistake could set you back financially and jeopardize your future. For these reasons, incorporating educational opportunities into app enhancements became a priority for our mobile team — as UX manager Teil Wise explained in a Nielsen Norman Group interview.
For example, one enhancement involved adding a market overview (a visualization of indexes like the S&P 500, Dow Jones, and Nasdaq).
With educational opportunities in mind, we wanted to do two things. To start, we wanted to make it easy for users to understand, at first glance, how an index is performing. Beyond that first glance, however, we sought to provide additional context about what an index means to enable further learning.
To accomplish these objectives, design and content would have distinct but complementary parts to play. To help convey these two sides of UX, let’s bring in two kinds of thought: fast versus slow. What are these thought processes, and how do they apply to UX design and content?
What is fast thought?
Ever find yourself making snap decisions without second-guessing? Maybe you judged a book by its cover. Or perhaps you formed an opinion about a company simply by looking at its website. In such cases, you’re thinking fast!
Fast thought is automatic and immediate. Also known as brain “System 1” (to use psychologist Dan Kahneman’s term), fast thought helps us reach conclusions efficiently. Granted, fast thought can sometimes lead us to judge too quickly or commit errors, particularly in situations that require forethought. Nevertheless, thinking fast is indispensable in situations that call for instinctive or rapid responses.
Romantic poets recognized this power as intuition, and our emotions and instincts make use of this subconscious ability. For example, we don’t need to be told how to smile or how to breath. We just know how to do it without having to think about it.
Unlocking the power of fast thought in UX design
Fast thought is especially relevant to design. To unlock its power, UX designers have a trick up their sleeve: creating designs that point out (or signify) affordances.
The term “affordance” (coined by psychologist J. J. Gibson) means an opportunity to interact with something in the world. Think of it this way: In the natural world, a tree trunk “affords” leaning against, a branch “affords” grabbing onto, and a tree stump “affords” sitting down upon. These affordances are interactions that our minds grasp instantaneously, using very little (if any) conscious thought.
It’s not just nature that has affordances. Our technologies have built-in affordances too: what cognitive scientist Donald Norman refers to as “technological affordances.” For instance, a key on keyboard affords pushing. In software, a button or a link on an application affords pressing or selecting.
When we easily perceive a technological affordance, we find the design to be user friendly, because we intuitively know what to think or do.
When the design doesn’t seem intuitive, you may have found yourself in a situation like this: You’re trying to figure out how to use a new app, but the interface is so confusing that you feel you need a computer science degree to get any further. Frustrating, right? That’s where technological affordances come to the rescue. They reduce mental effort needed to understand information or complete a task so that users know what to think or do automatically. That’s fast thought in action!
Applying fast thought to design
How does fast thought apply to design? Let’s return to our analogy of UX as a vehicle that helps users drive their thought processes.
Technological affordances are how designers give UX an accelerator. When users can easily perceive these affordances, they’ll find the design to look and feel user friendly. This user-friendly design, in turn, allows people to think intuitively — thus speeding up their thoughts.
So how might we apply this insight to designing app features, such as adding a market overview to Vanguard’s mobile app? With the market overview, our goal was to make the visualization intuitive. To show how an index is performing at a glance, we needed to design easily perceivable affordances, conveying only the most relevant information.
This meant designing simple visuals that would allow users to quickly understand what they’re looking at, without having to think too hard or feel overwhelmed by details. In this case, less is more. We don’t want to force users to look at any unnecessary data (what statistician Edward Tufte calls “chartjunk”). For instance:
- To visualize the market indexes, distinct lines were illustrated without visual clutter from chart axes, display frames, or ornamental icons.
- To identify each illustration, simple labels were added, precluding long, tedious text and allowing users to immediately recognize an index.
- To show what the index was doing — such as whether it moved up or down and by how much — relevant data points were highlighted using appropriate colors, numbers, and symbols.
In short, the market overview was designed to make complex content easily perceivable, reducing mental effort needed to interpret an index. It’s an approach known as the “don’t make me think” school of design (to use UX consultant Steve Krug’s phrase).
Not that there’s anything wrong with thinking! On the contrary, there are times when we want designs to help people slow down and think. However, we want to help users think about the content, not the design. That’s where slow thought comes into play.
What is slow thought?
Ever second-guess a first impression? Maybe there was a time you picked up a book that you thought shouldn’t be judged by its cover, and perhaps your second-guessing paid off, as you found yourself absorbed in the narrative. You may have even learned new things or gained valuable insight after a careful reading. In this case, you’re thinking slow!
Slow thought, also known as brain “System 2,” is reflective and intentional. It’s what allows us to look at something carefully and analyze new information. Without slow thought, we wouldn’t be able to come up with rational solutions to complex problems. It helps us overcome biases, correct errors, and make informed decisions, particularly in situations that require forethought.
Enlightenment philosophers called it reason — the driving force behind scientific and technological advancements. It was no coincidence that the symbol of Enlightenment reason, or slow thought, was Prometheus, whose name means “forethought.” As the titan who brought fire to humankind, he represented the power of knowledge and innovation.
Unlocking the power of slow thought in content strategy
Slow thought is an essential element of content strategy, particularly when it comes to writing. That’s because high-quality writing is a sign of high-quality thinking. But what is “quality” in writing anyway? On one hand, it’s difficult to define (a theme famously belabored in Robert Pirsig’s Zen and the Art of Motorcycle Maintenance). On the other hand, most would agree that quality writing is clear writing — which, in turn, is an indication of clear thinking.
To communicate clear thinking, content strategists employ what editors have championed for ages: the principles of style. These principles are not arbitrary rules but practical techniques to make language come across as clearly as possible to readers. Besides grammar and punctuation, they also include concise wording and readable formatting.
As Joseph Williams reminds us in Style: Lessons in Clarity and Grace, the point of these principles is to convey well-formed thoughts in a clear, concise, easy-to-read manner. For this reason, principles of style might as well be called principles of thought. To quote psychologist Steven Pinker from The Sense of Style: The Thinking Person’s Guide to Writing in the 21st Century:
What is style, after all, but the effective use of words to engage the human mind?
Applying slow thought to content
How does slow thought apply to content strategy? Let’s return to our analogy of UX as a vehicle once more.
Principles of style are how content strategists give UX a set of brakes. When users can easily read content, they’ll find it useful and usable. In turn, this useful, usable content allows people to think through information more carefully, thereby slowing down their thoughts.
How might this insight lend itself to app features, like a market overview? Beyond seeing an intuitive visualization of market indexes, some users may want additional information. For example, people new to investing may not know what an index is or how to interpret it, so they’d appreciate an opportunity to learn more. One way to provide that learning opportunity is through an instructional overlay.
An instructional overlay is a form of proactive help — for instance, information icons that provide additional education, such as helpful hints or explanations that appear in modal windows. While leveraging fast thought through design, this feature also leverages slow thought through content.
- Fast thought through design: Information icons were designed to be easily perceivable, allowing users to quickly notice these selectable features.
- Slow thought through content: Modal windows were written and formatted to provide clear, concise, and readable content, letting users focus on information they want to learn more about.
By leveraging fast and slow thought in these ways, design and content work together to create a learning-by-doing experience. The result is an app that helps users learn more about investing while doing investing.
Thinking fast and slow with design and content
This relationship between design and content can be encapsulated in our analogy of UX as a vehicle that helps users drive their thoughts. Design gives users an accelerator to speed up their thinking. Content gives them brakes to slow it down.
- Technological affordances turn design into an accelerator, allowing people to speed up their thoughts. When users can easily perceive these affordances, they’ll find the design to look and feel user friendly. They’ll know what to do intuitively, without having to think about it.
- Principles of style turn content into a set of brakes, allowing people to slow down their thoughts. When users find language to be clear, concise, and easy to read, they’ll find it useful and usable. They’ll also be better equipped to think through the information carefully.
References
The Ecological Approach to Visual Perception, by J. J. Gibson
Thinking, Fast and Slow, by Dan Kahneman
Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability, by Steve Krug
The Design of Everyday Things: Revised and Expanded Edition, by Don Norman
The Sense of Style: A Thinking Person’s Guide to Writing in the 21st Century, by Steven Pinker
The Visual Display of Quantitative Information, by Edward Tufte
Style: Lessons in Clarity and Grace, by Joseph Williams
Note: All investing is subject to risk, including the possible loss of money you invest.
