Case study: UX content

Road work ahead?: A road sign case study for clearer UX writing

Road signs inspired a viral Vine — let’s explore how they can inspire us to write sharper microcopy, too.

Alana Fialkoff
PatternFly

--

Two road signs stacked on one another indicate a speed limit of 15 miles per hour around a corner. The only copy that accompanies the arrow icon is “Slow” and “15 MPH.”
Photo by Joshua Hoehne on Unsplash
PatternFly’s branded divider, our logo centered between two lighter lines.

Roads: They’re the most universal and unavoidable real-world user interface that we encounter every day.

Whether you’re walking, running, cycling, driving, or something inventively in between, traveling down pre-paved paths mimics a learn-as-you-go user flow.

Without much tinkering, we can reframe streets into a simple UX framework:

Your trek to your destination serves as your end-to-end process. Other drivers, obstacles, car trouble, or tricky terrain might be pain points you encounter during that process. Often, you’ll find signs that call out these pain points along the road, offering caution — and sometimes, when available, a helpful solution.

If we view roads as user interfaces and potential issues as user pain points along the way, road signs become a hybrid between alerts, contextual help, and in-app support. They keep drivers informed, aware, and empowered to make smarter decisions throughout their ride.

Road signs are microcopy that directs your street-traveling story.

As I sit here reflecting on those directions — and direction — one of my favorite old Vines comes to mind:

“‘Road work ahead?’ Uh, yeah… I sure hope it does!”

The original 7-second Vine features a Road work ahead sign deliberately misinterpreted by its reader.

Wordplay and 2010’s nostalgia aside, this on-the-road jest has a surprisingly poignant, and perhaps accidental, point: Sometimes clear content gets tricky. Road signs are often restricted to a standard size. Like UX writing in any UI, their messaging needs to fit in tight spatial constraints.

Now, I won’t suggest this “Road work ahead?” Vine is insightful or even loosely profound. But it might serve us beyond just giving us a reason to smirk as we pass similar signs on the highway. In fact, workshopping the street sign microcopy that inspired this clip —Road work ahead—reveals four key steps we can fold into our own UX work to write clearer copy.

Let’s study how we can elevate our microcopy editing process using Road work ahead as our case.

4 steps on the road to clearer UX writing

1) Parse your chosen syntax for multiple meanings. Sidestep any words that might spark confusion.

The first step on the road to clearer UX writing encourages us to ditch nebulous words to minimize confusion before it occurs.

Let’s consider Road work ahead as our working example. In that sentence alone, we’ve uncovered two of work’s multitude of faces:

1. Work (noun): Activity completed to reach a desired result.

2. Working (adjective): Operating or functional, as in the status of “Road work ahead” as a functional example of microcopy in this article.

A simple search on Merriam-Webster’s website broadens work’s scope, surfacing three entries: A verb, noun, and adjective. Together, these entries total a staggering 29 different definitions. It’s safe to say this word isn’t exactly the clearest noun choice to communicate that drivers will encounter road construction, even if it technically gets the job done.

2) Create lists and charts to determine the most effective (and intuitive) words.

Now that we’ve left work behind, the real work—and fun—begins. During any microcopy edit, you’ll need to hunt for the best word to replace the one you’ve removed. Sometimes, rewriting a string with placeholder text helps. I like to use my placeholder to communicate the part of speech I need to swap in:

Road [NOUN] ahead

Next, we can draw a simple flow chart or diagram. Where do users (in this case, drivers) start? Where do they need to go? And how can we connect those dots with language so that they’re better informed and equipped to go that distance?

Whether you create this flow chart mentally or draw an actual picture is up to you. The main purpose is to chart users’ start point, trajectory, and end goal with potential issues centered between them. For our Road work ahead example, users are driving to their desired destination when they encounter a roadblock — road work— along the way.

(It’s at this point in the brainstorming phase that I realized road work is actually listed in the dictionary as one word, roadwork, split into two to fit accommodate sign width. Although using this one-word form on a road sign might solve for most misreadings, some research indicated that this alternative is primarily used in British English: It may not be a viable solution for countries that speak U.S. English instead. I added roadwork to my list of noun alternatives anyway, but it wouldn’t make the final microcopy cut.)

While adding potential alternatives to my microcopy flow chart, I considered how this road sign’s readers might speak about their issue in context. Roadwork disrupts commutes and trips, a relationship I used to brainstorm conversational alternatives: “Sorry we’re late, ____ slowed us down along the way.”

This conversational approach guided me to five potential replacements: Roadwork, construction, road repairs, maintenance, and contraflow.

A rough diagram of how users might encounter roadwork in context, including a list of alternative nouns: Roadwork, construction, road repairs, maintenance, and contraflow.
A diagram shows how roadwork disrupts a driver’s user journey and lists potential microcopy replacements.

3) Consult synonyms, but be wary: They may be false friends.

As we attempt to change words in our messaging, synonyms are a decent place to start — if we proceed with caution. Words listed as synonyms in dictionaries or thesauruses are often tangentially related, meaning they may not be an exact equivalent. Take, for example, an item I listed in my list of alternatives: Maintenance.

This option might apply to some road use cases, but not all. And it’s not exactly cost effective to print a new road sign for different kinds of street labor. Similar to how we write microcopy for user interfaces, let’s think of our road sign example as a microcopy pattern, a recurring string or phrase that we can reuse throughout an interface to guide similar situations. Landing on microcopy that applies to most use cases economizes our content resources and enables us to write a more consistent user experience.

If we consider road signs to be toast alerts, dismissible alerts surfaced without blocking a user flow, we can explore what kind of experience using Maintenance would bring.

Two Maintenance toast alerts: They don’t offer much context without an added description.
Two Maintenance toast alerts: They don’t offer much context without an added description.

Maintenance may make a clean and concise alert title, but it’s awfully vague. What’s being maintained? And what does this maintenance entail? We’re able to add a line of description in a digital interface, but road signs don’t always afford that luxury.

Compared to Maintenance, our original Road work ahead sign seems to function better. It leaves room for misinterpretation, but it doesn’t rely on users’ familiarity with technical vocabulary. It still leaves them guessing about the impact they’ll experience, but less so than this generalization.

At first, this copy snag might suggest we should revert to Road work ahead. Not yet. Returning to original microcopy does happen in real world applications, but not until we exhaust other options.

4) Experiment with more alternatives. Shuffle words. Add, subtract, combine, and tinker with phrases to find the best fit.

Move down the list or chart you made in Step 2. Substitute different word choices in and don’t shy away from changing your microcopy’s structure.

Our original example, Road work ahead, consists of two nouns and an adverb. But is this the most effective build? The only way to find out is to play linguistic Legos.

In my experimentation phase, I landed on Construction ahead, a two-word rewrite that only expands our original string by two characters. Construction ahead communicates the same idea as Road work ahead, but with just one noun and one adverb. Construction doesn’t become another part of speech unless its spelling is altered, removing the risk that drivers might mistake it as a verb.

Examples of Construction ahead signs reworked into toast alerts.
Examples of Construction ahead signs reworked into toast alerts.

Now comes our final test: the Vine check.

Let’s re-introduce our edited version to ur original use case: A user drives down the highway and passes a road sign (a physical toast alert) that indicates there’s construction ahead. Consider the Vine from earlier: Can this driver still make the same joke?

“‘Construction ahead?’ Uh, yeah… I sure hope it does!”

Nope. This famous Vine line falls flat on its face: Meaning we’ve done our job.

Our microcopy’s clearer: Now it’s time to update our existing UX design (in this case, sign design) to match.

Though we’ve altered string lengths, adding new copy to road signs will likely involve creating new canvases. Our newer roadside microcopy can help inform those signs’ design: Instead of a diamond, the design team could opt for a rectangle that allows for longer lines. With that rectangular shape, we’d have ample room to surface our edited microcopy in just one line, making it more scannable for passing drivers who can’t afford much more than a quick glance.

A mock of what our new road sign would look like, a rectangle containing one line: Construction ahead.
A mock of what our new road sign would look like, a rectangle containing one line: Construction ahead.

Our final sign drives several key improvements across microcopy and design:

  • A clearer communication of what road conditions drivers will encounter ahead.
  • A minimized risk for confusion.
  • A condensed string of sign content that’s more scannable and digestible for drivers in motion.
  • A new sign design standard that accommodates larger character counts so that future road sign content won’t need to struggle to balance space and specificity.

This Vine-inspired case study is just one example of how we can leverage real-world copy scenarios to sharpen our UX content.

From Vines to signs, envisioning our microcopy as resources planted along a users’ path drives clearer communication and sharper syntax. From there, we can elevate user experiences and streamline user stories — one line at a time.

PatternFly’s branded divider, our logo centered between two lighter lines.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

--

--

Alana Fialkoff
PatternFly

From pixels to pages, stories make me tick. Spearheading UX content design and user-driven experiences at Match.