Interactive Storytelling 101: User Experience & Information Architecture

When you write a blog post, do you think about the fact that the best practices you're using to craft your story are the same ones you learned back in middle-school English class? The fundamentals of long-form expository content have remained the same for decades, and they're not likely to change anytime soon.

Interactive storytelling, however, involves a whole new set of best practices. In addition to coming up with a great content strategy and crafting compelling copy for your story, you also have to carefully design how you're going to deliver your story to your audience. Interactivity opens up a lot of creative possibilities for digital storytellers, but it also creates a lot of additional complexities around user experience and information architecture.

To help you get started with interactive design, I've compiled some best practices around user experience, information architecture, and visual pedagogy. This interactive graphic provides a high-level overview; you can dive into the details below.

Applying UX Principles to Interactive Storytelling

When you hear about user experience (UX), it's generally in the context of website or app design. But the same principles hold true for designing an interactive story. Here are a few key UX ideas that you can apply to your interactive content creation process.

Content-Focused Design

Design your user experience around the story you're telling and the device being used to interact with that story.

Flexible Navigation

For shorter, more straightforward stories, a linear flow of ideas works well. However, for larger content pieces, it's usually better to let viewers jump around based on their interests. It's important to develop a consistent, flexible navigation system that helps your end users get where they want to go quickly.

Clear Action Cues

If you decide to tell your story using layers of information (which we'll explore more in the next section), you'll need to include clear action cues telling the viewer how to interact with your design. These cues can be:

• Animation effects that draw attention to clickable elements
• Arrows pointing to objects that can be clicked or rolled over
• Written instructions telling the user where to click or hover
• Icons that represent actions you want the user to take

Real-Time Feedback

If your story includes quiz questions, branching logic chains, or calls-to-action, it's important to provide your audience with real-time feedback as they interact with your content. For example, if you design a quiz section within your story, you'll want the answers that users select to trigger immediate feedback about the choice that they've made.

Designing Information Architecture for Interactive Stories

Telling a story out loud, the words flow and the structure just sort of happens. With interactive stories, however, you need to provide a clear information architecture to support your ideas. If you don't, you risk losing your audience to confusion, frustration, or boredom. Many of the concepts from traditional website information architecture apply to interactivity as well. There are 3 key areas to keep in mind when designing your content:

1. Long-Form vs. Multi-Page Design

Will the story you want to tell work better as one long-form scrolling page? Or does it make more sense to break up your story into multiple pages and sections? How you answer these questions really depend on the nature of the information you want to convey and the complexity of the ideas you're trying to get across. For example, if you have a fairly streamlined narrative supported by a few simple examples, a long-form design probably makes the most sense. If you have a complex topic that involves multiple subtopics, supporting ideas, data, and examples, it's better to break this information up over multiple pages and give people the flexibility to engage with the bits they're interested in.

2. Linear vs. Fluid Architecture

If you opt for a multipage framework, the next consideration is narrative architecture. Will you design your story in such a way that the user must explore it in a linear pathway? Or will you build each section as a standalone concept that works logically and narratively on its own?

3. Layered Approach to Storytelling

In a traditional article or eBook, you present your story as a single layer of information. You may use sections or pages to break things up, but all of the content is exposed to the end-users from the time they land on your webpage or document. With an interactive story, however, the possibilities are endless when it comes to presenting your content. You can create different layers within your story to provide a more flexible experience to users with varying levels of attention span, interest, and expertise. Layering information also provides additional opportunities to engage your viewer with a moment of suspense as they click down to the next level of content.

Using Visual Pedagogy in Interactive Storytelling

Plays, movies, and operas are all examples of visual storytelling in the real world. The visuals in each of these art forms are carefully considered in tandem with the words being spoken or sung. Unfortunately, writers tend to be less than stellar at pairing visuals and words. Our focus tends to be on the written side of things; we leave the visuals to designers as an afterthought rather than relying on images to help us fully communicate our story. This topic has provided fodder for tons of research by people way smarter than I am, including Edward Tufte, often referred to as "the Galileo of graphics." Tufte's research on visual pedagogy is widely used in education and publishing circles, but many of his ideas apply just as strongly to Web content. Here are three visual information best practices I've found to be useful in the interactivity process.

1. Proximity of Text and Visuals

The closer your text is to your supporting visuals, the better your viewer will retain your information.

2. Large vs. Small Text Blocks

Smaller nuggets of text that relate to specific portions of a visual are better than having a long-form paragraph that covers points relevant to multiple portions of a graphic.

3. Simplicity of Information

Instead of cramming a bunch of information into a single visual, it's better to create a visual that shows different stages, steps, or datasets in a series. With interactivity, you have even more flexibility in how you show these individual pieces of information than you do in print or static Web content.

The Bottom Line

Having a great idea and writing compelling copy are both vital to interactive storytelling. Providing a clear structure for your information and considering your end-users' experience is just as critical, especially if you're conveying complex or nuanced ideas. These UX and information architecture best practices will help you tell your story in a way that has a high impact on your audience. Interested in more advice to make your content interactive? Look out for the fourth and final installment of this series Thursday on the Content Standard. And check out part one, Interactive Storytelling—Where it Fits in Your 2016 Content Strategy, and part two, How to Adjust Your Writing Approach for Interactive Design.