To ensure your skill set is built on a firm foundation, this third article in the Universal Principles of User Experience Design series provides an overview of narrative design.

Narrative design

A guide to the universal principles of user experience wouldn’t be complete without stressing the importance of narrative design. As designers, we are storytellers at heart, and we need to understand how stories work in order to tell them effectively. Above all, as UX designers, we create experiences, and experiences unfold over time.

As UX designers — whether we’re creating experiences for desktop or mobile, web-based or native — everything we create unfolds over a sequence of screens. We rarely design screens in isolation.

As such, an understanding of time, and how it can be used as an integral part of design is critical. It’s important to consider both pacing ━ how quickly or slowly your narrative unfolds ━  and rhythm ━ the cadence of a series of screens, or elements on a screen. Both are critical in order to create captivating stories and drawing users into the content.

One of the best places to learn about narrative is from the world of film. Consider Bond, whether it’s Connery ━ the one true Bond ━  or Craig, a Bond film can teach us a great deal. Take the latest two films in the Bond franchise, Skyfall, and Spectre, both directed by Sam Mendes. Both open with lavishly-designed and fast-paced set pieces. These serve an important purpose; they quicken the pace, heighten the senses, and set expectation.

The set pieces excite you and capture your attention. Beyond the opening scene, however, Mendes slows the pace down. As a director, Mendes understands that a film – indeed any narrative – cannot sustain an accelerated pace throughout. It’s important to contrast the fast and the slow. This understanding maps neatly onto the world of screens; ours are just slightly smaller screens.

As designers, we need to consider pacing: Deliver too much content too fast, and we’ll overwhelm our users; equally, deliver too little content too slowly, and we’ll put them to sleep. It’s important to focus on getting the balance right. You might be building a single-page site or app, or a multi-page site or app; regardless, you need to consider how your users move through your content and how it is paced.

Graphic of singe page (left) and multiple pages (right)
Your design might be a single-page narrative (left) or a multi-page narrative (right) – the choice will be determined by the content. It’s important to consider the pacing of elements on screens and the relationship between screens themselves.

Pacing is important, but equally, we need to consider the order in which we structure the content of our stories. We’re living in a world in which information is expanding exponentially, which can be incredibly hard to keep up with. We have a responsibility to our users to deliver what they’re looking for as quickly as possible.

Typically, stories follow a classic structure with a beginning, a middle, and an end. That structure – tried and tested across millennia – still works, but when we’re time-poor it’s worth turning this structure on its head and getting to the point a little more quickly.

One technique we can use for this, drawn from the world of journalism, is the inverted pyramid. The inverted pyramid is a structure used by writers to illustrate how content should be prioritized and structured in text. Put simply: the inverted pyramid starts with the conclusion first, followed by information that supports that conclusion, followed by additional background details.

The core idea is that readers should be able to grasp the key messages being communicated, even if they don’t make it to the end of a piece of content. Each level down in the pyramid provides additional context, but the key point is delivered up front.

Graphic of inverted pyramid showing critical information, background and context, nice to have
By applying the lessons of the inverted pyramid, drawn from the world of journalism, we ensure that our users are delivered information in the order they need it.

It’s hard to believe, but Jakob Nielsen wrote about the inverted pyramid as applied to the wonderful world of the web over two decades ago in 1996. Nielsen’s article, charmingly titled Inverted Pyramids in Cyberspace, is still well worth reading. It stresses the need to:

  • Start with the information your users absolutely need and ensure it is right up front.
  • Provide additional information that’s helpful, but not critical.
  • Close with the “nice to have” information ━ for those readers who stuck with you until the bitter end.

Like it or not, we’re living in a time-pressured world. As designers, we need to acknowledge that fact by ensuring the user experiences we design reflect the need to get things done quickly and efficiently. Great narrative designs are a combination of the visual and the verbal; they marry the two to create well-paced stories that not only draw the reader in, but captivate him or her on their journey through the content.

Without question, one of the best books to explore the principles of narrative design is Scott McCloud’s Understanding Comics. It’s a critical and perspective-changing book that should be required reading for any user experience designer. Don’t be misled by its title, it’s about much, much more than comics; it’s about communication and is an informative, entertaining, and a beautifully designed narrative.

Narrative design: case studies

With an understanding of visual grammar, language, and typography, we have all the components we need to create compelling experiences. All we need now is a story to weave these elements around.

Stories are everywhere: we learn through stories, we’re entertained by stories, and —  if we want to create great user experiences that draw an audience in —  we should build our designs around stories.

There is a wealth of websites that are narrative-driven. If we break apart a couple, we’ll see how pacing can be used to deliver truly memorable user experiences.

Left: graphic of guitar head Right: graphic of hot dog with words
Flat Guitars (left) is an example of a narrative website that unfolds over time, dialing the stories of its guitars to eleven; Big Apple Hot Dogs (right) enlists a colorful cast of characters to share its story.

Flat Guitars is a beautifully designed example of a single-page website that’s quite literally dialed to eleven in its loading graphic and in terms of its narrative. An illustration project by David Navarro, it takes the reader on a journey through the history of classic electric and acoustic guitars.

By using blocks of differing colors for each guitar, the site’s pacing is consistent, and its rhythm is steady. The site offers:

  • Alternative routes into the content, via both a scrolling view and a grid view.
  • A color palette which affords each featured guitar its own distinctive look and feel.
  • Restrained typography, which focuses the story on the illustrations, the real star of the show.

Another example of a site using narrative design is Big Apple Hot Dogs, with a narrative design that is bold, colorful and playful. With a cast of hot dog characters, the site foregrounds the importance of personality and humor in design.

With characters including The Huge Pole, an all-natural Polish sausage; The Big Dog; and The Frank Jr.; Big Apple Hot Dogs takes something that could easily be dull and creates something playful that delivers a memorable UX. The secret sauce is simple:

  • The site doesn’t take itself too seriously.
  • Its hot dog characters, which are beautifully illustrated, capture the imagination.
  • By using contrasting colors between sections, it maintains a steady rhythm.

With so much content at our fingertips, it’s easy to see why sites that foreground narrative design hold our attention. They capture our imagination through well-paced stories, and, like the stories of old, are shared via word of mouth.

Tips and techniques

  • As you start to wireframe out a new project, it’s important to consider the structure and the pacing of your narrative. Put some thought into how your content is structured and grouped logically.Paper prototyping is the quickest way to get a feel for a user’s flow through your narrative. A low-cost medium, paper is perfect for getting the skeleton established before moving towards digital tools and developing lower and higher fidelity visual designs that can be tied together using a tool like Adobe XD.
  • Remember the inverted pyramid. Ask yourself: What’s the most important message that each page needs to communicate? With that established, build your content so that it’s delivered efficiently. Remember, users are often time-poor and would like the critical content delivered quickly.
  • Everything is a story. When a hot dog site can create a colorful cast of characters to serve as an ensemble, ask yourself: What’s the story you’re telling in the project at hand?

Conclusion

It’s never too late to revisit the fundamental principles that underpin our industry. Timeless principles aren’t called ‘timeless’ for nothing; they stand the test of time.

In a world where everything is constantly changing, developing a deep understanding of visual grammar, language, and typography, and narrative design will last a lifetime.

In Rembrandt’s and others’ studios in the seventeenth-century, to learn, one followed the master-apprentice model, a model underpinned by relentless copying of “the master.” We might not be living in the seventeenth-century, but that doesn’t mean the principles of this method still don’t work.

To improve as a designer, I’d offer one piece of advice: copy relentlessly. Here’s an example by one of my students, Martine McGrath, to give you an idea. You don’t need to share your copies – and if you do, give credit where it’s due —  but copy, copy, copy. As you do, you’ll improve as a designer.

Think of it as a simple program written in BASIC:

10. FIND SOMETHING YOU LOVE 20. MAKE IT 30. GOTO 10

Repeat this process, and your understanding of universal principles will improve, and, what’s more, you’ll develop not just as a designer, but as a thinker, too.

Suggested Reading

There are many great publications, offline and online, that will help you on your adventure. I’ve included a few below to start you on your journey.

Christian Leborg’s 2006 Visual Grammar is, without question, one of the best books to equip yourself with a fundamental understanding of visual grammar, and should be in every self-respecting designer’s library. Of course, there are older books also, not least of which is Armin Hofmann’s 1965 Graphic Design Manual, another book that’s also well worth owning.

MailChimp’s Voice and Tone micro-site has, rightly, garnered considerable praise for its role in spotlighting the powerful role that language plays in design. It places well-chosen words, front, and center. Erik Spiekermann’s Stop Stealing Sheep is one of the world’s best-selling books on designing with type. Its no-nonsense style will both entertain and inform.

Lastly, when considering narrative design, UX Storytelling For A Better User Experience by Francisco Inchauste, is still every bit as relevant today as it was when it was originally published in 2010.