Building Narrative into Your User Interface, Part 1

Using Parallel Structure

Parallel structure is a style that the literary world uses to create grammatical rhythm in subheadings, sentences, or bullet points that start in similar ways and have similar structures. Using this device helps propel readers through stories, leading to a more enjoyable reading experience. For example, here is a sentence that uses parallel structure: Jill runs down the street, hops in her car, and races down the road. This sentence has a rhythm because the placements of subjects and verbs in each clause mirror each other. Parallel structure gives momentum to a narrative, which is why similar principles work well in user interfaces.

Applying parallel structure can be simple, and you might often do it without being aware of it. In the step-by-step approach that I described in the previous section, the titles of steps shouldn’t be inconsistent, for example: Import, Configure the Dataset, Deploy. Instead, each of the step titles should consistently comprise a single verb—for example, Import, Configure, Deploy—or a brief phrase. Using a title that feels out of step with the rest disrupts rhythm, slowing users down as they try to parse disparate or inconsistent information.

However, opportunities to apply parallel structure aren’t always so obvious. For instance, if you’re using gerunds for subtitles on some pages, but not on others, are there ways to be consistent everywhere? Perhaps a global navigation bar uses nouns that represent the various parts of a Web site or application, but there might be a single item that consists of a verb or phrase. Can you make that item consistent with the others—or perhaps highlight it in some way, as I’ll describe in the next section, to more intentionally set it apart from the rest?

You can also apply parallel structure to the placement of similar elements on individual pages or views of a user interface—especially on sequential pages. Placing similar elements in the same location on every page gives the user a more consistently rhythmic experience. Conversely, placing similar elements in different locations on sequential pages disrupts the rhythm. For example, in the Fifth Third Bank mobile banking app in Figure 2, the position of the Next button shifts from screen to screen—and the button lacks affordance—making it a more difficult, unpredictable target to acquire, and thus, interrupting rhythm.

Of course, if an action is potentially destructive, it’s okay to make it more difficult for the user to acquire. For example, placing a Restore to Factory Defaults option multiple clicks away or in a password-protected workflow reduces the odds that users might accidentally click or tap it. However, in most cases, momentum and rhythm are good things because they help users to complete workflows and better anticipate what happens next.

Highlighting One-off Elements

As I mentioned earlier, when certain words, phrases, or UI elements are at odds with similar elements around them—especially elements that appear in a sequence—this disrupts users’ rhythm, creating a stilted experience at best; a destructive experience, at worst. However, a dissimilar, one-off element might be necessary in some cases, so it’s up to the UX designer to show that its difference is intentional.

In the literary world, there are scenarios in which a character’s action or some expositional detail draws undue attention to itself because it feels out of character or seems inaccurate. However, if authors intend readers to focus on that difference, they may highlight it in some way. Otherwise, a reader might think: Hey, wait a second! That’s not right! Anyone who drinks whiskey straight knows you don’t ask the bartender to serve it with an umbrella! But perhaps a character habitually chooses to drink straight whiskey that way because the umbrella reminds him of his deceased wife, who preferred fruity cocktails that bars often serve with umbrellas. In such a case, an author should hint at this detail of the character’s backstory to ensure that the character’s actions make sense to readers.

You can use this same technique to build narrative into your user interfaces. For example, in Figure 3, you can see that almost all the global navigation links use single nouns—except the verb phrase Request a Demo. Because all of the links have the same affordance and style, the Request a Demo link feels out of character with the rest because it represents an explicit action rather than being a noun that alludes to a section of content. Users might perceive this difference as an oversight, lazy design, or something that doesn’t merit their attention, but this would be problematic because the Request a Demo link represents a key CTA that drives conversions.

The solution? Make the Request a Demo link obviously different, clearly setting it apart from the rest of the links. Visually exaggerating the link’s difference by making it a button, as shown in Figure 4, conveys to users that they should perceive this option differently. Ways of highlighting such differences include using a colored background, giving an element a more prominent placement, or perhaps both. Whatever technique you choose, users better trust a user interface that intentionally highlights one-off elements.

Foreshadowing Things to Come

Foreshadowing is a technique that authors use in literature to increase the readers’ anticipation of events to come and might manifest as an ominous metaphor or something a character says that has a deeper meaning than readers might immediately perceive. Wielding the foreshadowing technique effectively helps further pique readers’ interest and investment in a story, which keeps them turning pages. In user interfaces, foreshadowing is a great way of propelling users through workflows.

As I mentioned earlier, reducing the affordance of certain elements, by making them appear dimmed or inactive, signals to users that these elements could become active at some point, depending on where users are in a workflow.

You can take this technique further by using empty states, which are effective because they foreshadow the shape and size of certain elements on a page and hint at the content that eventually populates the elements so users know what to anticipate. Furthermore, you can use empty states to onboard users to a new context by giving them some knowledge of a system or workflow. Empty states are better alternatives than tutorial overlays that compel users to view swarms of pointing arrows and text all at once or forcing users to navigate to external Help pages, which requires users to leave the context in which they’re working.

Finally, as Figure 5 shows, using empty states to foreshadow content provides additional opportunities to inject personality into an experience. Most people who read fiction do so because they want to have an emotional experience. Even though users don’t expect your application to offer content or transactions that deliver such intense experiences, you can still inject some personality, which gives emotional appeal to an experience and makes your Web site or application much more memorable and engaging.

Culling or Relocating Backstory

User-interface elements that have hints, or ToolTips, not only foreshadow deeper levels of information but also reduce the amount of extraneous information on a page, which would slow users down. In literature, a character’s backstory can be important at times. However, when an author gives backstory too much emphasis, it stifles the reader’s experience. Overemphasizing backstory is particularly bothersome if it doesn’t serve the greater story in any meaningful way.

Building narrative into a user interface does not mean using lots of text. Overloading user interfaces with blocks of inline text and sidebars of descriptive information often places seemingly insurmountable visual obstacles in the path of your users, reduces their momentum, increases their anxiety, and demotivates them from completing their work.

If you really need verbose instructional elements, perhaps you can move them off canvas or relocate them behind contextual hints within a user interface. For example, as Figure 6 shows, placing a small question-mark icon next to a field label that users might find confusing signals to users that they can find out more about the field—visually telling a story in an unobtrusive way. If users move their focus to the icon—either by hovering over it or clicking it—a ToolTip appears, providing access to more information and possibly disclosing even more information progressively via a hyperlink.

Often, teams assume the need for copious amounts of explanatory text because a user interface is less than optimal. As the legendary author Nathaniel Hawthorne once said, “Easy reading is damn hard writing.” Similarly, an easy-to-use user interface is damn hard designing. So consider where your user interfaces might be overly reliant on large blocks of text. Are you bogging users down with backstory because you haven’t put enough rigor into your UI design? If instructional text is necessary, what is the best visual affordance for progressively disclosing more information and avoiding its competing with users’ core workflows and tasks? Where could transient or interactive elements progressively disclose more information when users request it, then hide it again?

I’ve never had a usability participant beg me for more prominent text or instructions within a user interface. Often, participants click and navigate until they either find what they’re looking for or get stuck. Modern users who are accustomed to ordering items from Amazon with a single click or tap of a button or a shout out to Alexa are likely to find having to read verbose instructions exhausting and frustrating. We must design for people’s shorter attention spans.

Conclusion

Create narrative, which is beneficial to the people who use software user interfaces because human beings comprehend stories better than facts alone. UX designers can leverage many of the techniques that the literary world uses to create great reader experiences in creating great user experiences. Let’s quickly review some of these techniques.

Impose sequence to convey a clear order of action to users—even if doing so doesn’t reflect the underlying structure of a software system. This helps users to better orient themselves within a workflow and reduces their anxiety. Use parallel structure to create rhythm, make a workflow more seamless, and help propel users through its narrative. Highlight and clarify one-off elements that might otherwise confuse users by illuminating their importance or uniqueness. Foreshadow things to come by using empty states or visually diminishing the affordance of elements. Seeing the end of a workflow reduces users’ anxiety about what they need to accomplish and helps motivate them to complete it. Finally, similar to an author’s handling of backstory, you can cull extraneous information from your pages or relocate it, by making it available dynamically on demand and leveraging techniques such as progressive disclosure to let users request it.

In Part 2, I’ll provide some additional tips for building narrative into your user interfaces. If you have any tips to share, please offer them in the comments!