Approaches to Online Storytelling

by Flora Grant, April 2014

As websites become an increasingly significant and distinct part of a museum’s offerings, they offer unique opportunities to deliver enriched and enhanced online content. Museum websites have conventionally been tied to discrete end points such as artworks, exhibitions, and events, serving primarily to prepare visitors for a museum visit. This approach often precludes the rich and deep storytelling about the museum and its collection, exhibitions, and programs that is uniquely possible in an online context. For example, online collection presentations have historically offered an interface that resembles a slightly enhanced version of internal collection management software. This templated approach to presenting the collection limits opportunities for more complex connections and conversations.

As SFMOMA enters a research and discovery phase for its new website, my research at SFMOMA Lab is focused on identifying new and innovative ways for the museum to tell stories about its institutional history, artworks, collection, and ideas cultivated at events and programs. SFMOMA has specific needs relating to the kinds of stories we want to tell and the media we want to incorporate. We want to enable layered storytelling by integrating text with images of individual works, as well as to offer automated and curated groupings of works in image galleries. In addition, we want to incorporate video and audio content, quotes, and links out to relevant events and exhibition pages, and also to facilitate social media integration. My work as part of SFMOMA Lab is to research how this is being done, and to speculate about how it could look, feel, and work to enable richer and deeper content on the new SFMOMA website.

To get started, Keir Winesmith, SFMOMA’s head of web and digital platforms, worked with me to come up with a series of practical questions for which I tried to find examples and possible answers:

1. How might we go about integrating text, images, and other content in a layered way?
2. What are interesting ways of creating dynamic calls to action? How can we make the “read more” or “related stories” content more inviting?
3. How can we integrate social media with the aesthetics of the site?
4. What are ways of displaying quotes that won’t break the reading experience?

I began my research by looking beyond museum and art websites, focusing instead on sites whose core purpose is storytelling, such as news and long-form writing sites. The following summary of my findings offers some effective approaches that address these questions.

1. Layered storytelling

We want to be able to tell stories that integrate text, images, image galleries, video, audio, and other content in a layered, seamless way that highlights an artwork, artist, or event while focusing the reader on the story.

Wired, an online technology magazine, reveals each successive image and artist connection as the reader reaches the relevant section(s) of the text. Each artist’s name is highlighted in the text, and the corresponding image appears in the margins. The images are annotated with some tombstone information such as artist name and age, the artwork’s medium, and a short description. As the reader continues scrolling, the image and highlighting disappear. This functionality focuses attention on the artwork at the relevant point in the text, and enables an uncluttered, pared-down visual experience.

Slate, a news magazine website, highlights the place in the text that refers to the adjacent image. This approach underscores the connection between specific points in the text and the surrounding images. While this type of text highlighting is too precise for use with broader, longer discussions about artworks, it is potentially useful for referencing one particular visual element of an artwork detail, or for linking an image of an event speaker, artist, or staff member to the place where they are mentioned in-text.

Atavist is a template for stories and articles that integrate text, audio, and video. It uses pop-up image and text boxes on either side of the main text to incorporate information that does not fit into the narrative, including maps, biographies, and images. It is unintuitive in that these boxes are accessed through a hyperlink, which would normally navigate to another page. In addition, the pop-up sometimes overlaps the text and has to be manually closed, otherwise it remains after scrolling away. However, pop-ups are potentially an effective way of providing extra information while remaining focused on the story.

ProPublica, an investigative journalism website, includes highlights in-text for audio content and layered visual content. When the reader clicks on the highlighted text, preceded by either a play triangle or a “pop-up” icon, either the audio content plays or a box pops up with expanded content relevant to the highlighted sentence. This makes it obvious where the text links to the multimedia content.

We will need to weigh the relative merits of inline content versus placing content alongside text. We should also consider how pop-ups can be aligned with the text without disrupting the reading experience.

Image overlays

These layered stories will often include image overlays that allow the reader to view an image in a larger size. The industry standards for image overlays include graying out the background and enlarging the image, and hero images that take up a full screen and break up the text. While these standards work well, one alternative approach can be found at Verge, where images automatically expand and push down text when rolled over. If unanticipated, this functionality disrupts the reading experience, but it is a possible alternative way to overlay images if it were activated by an “expand” button rather than triggered automatically.

Several of these sites present their stories in the “snowfall” format, named after the New York Times article “Snowfall,” which popularized multi-chapter multimedia storytelling activated through ongoing scrolling. The SFMOMA Lab team discussed the fact that this type of storytelling will feel dated by 2016, when the museum reopens, and, more importantly, that the heavy visual style means the reader is distracted from the text of the story. However, there are definitely elements of these examples that are useful points of reference, including:

• The use of pop-ups to add layers of visual information without disrupting the reading experience
• The highlighting of relevant text as it relates to surrounding images
• An appear/disappear functionality for images referenced in-text

2. What are alternatives to “read more” or “related content”?

We always want to give the reader the option to go deeper into the stories we are telling, as well as ways to quickly and easily find related content.

Narratively, a platform for original long-form stories submitted by community contributors, uses creative and compelling invitations to read other stories that are similar to the ones visitors are currently reading. This has potentially interesting outcomes when combined with complex tagging, which would allow for meaningful connections to be made between pages.

Narratively also includes a drop-down bar at the top and bottom of each page that links out to articles under the same theme. We like this feature because it allows a reader to exit the current page and jump directly to another related story without going to the homepage first.

Aeon’s related content gallery always includes “most popular essays,” which means the reader doesn’t have to navigate back to the homepage before accessing new content. This can be thought of as a “get out of jail free” card.

Artsy is an online database of art (much of which is for sale) that draws connections between artworks based on characteristics such as color, period, subject matter, and medium. At the base of editorial posts, Artsy lists the artists mentioned in that post, in order to facilitate further exploration. Each article is then also accessible intuitively from the related artist page(s).

Perhaps our “read more” approaches might include:

• Compelling calls to action that make clear the connection between what the reader has just read and what they might go on to read — e.g., “Read another story from behind the scenes at the museum”
• A “Mentioned in this post” gallery at the base of the text that clicks through to collection artwork pages, artist pages, event pages, or exhibition pages
• A “get out of jail free” option on all “related” section pages: e.g., “See our latest acquisitions”
• A drop-down menu from the top of pages, which allows navigation to related stories, artworks, and artists

3. How can social media be aesthetically integrated?

Slate offers Facebook and Twitter integration when a reader highlights and hovers over a portion of a text. However, this allows readers to highlight more than 140 characters, making the selection beyond tweetable length. Though the pared-down, simple aesthetic is admirable, it lacks functionality for email and copying text.

The New York Times offers pre-selected Tweetable sentences that are highlighted in-text to facilitate the creation of tweets within the 140-character limit. This hampers researchers and emphasizes the institutional voice, with the result that many people choose to tweet non-highlighted sentences.

Medium, a long-form publishing platform, offers a contextual “note” feature that allows readers (via Twitter sign-in) to post comments on specific parts of the text, which the author can choose to publish. This is an aesthetically elegant way to bring in focused social media contributions, but it can be distracting and potentially ineffective for facilitating complex discussion about articles overall. Medium also includes a similar “highlight and tweet” functionality that abridges any selection of more than 140 characters.

ProPublica includes an icon for an anchored link to specific multimedia elements of the page (such as a quote, video, or image gallery), facilitating deep and specific linking.

Overall, our social media integration might incorporate:

• A highlight and hover feature, with options for Facebook, Twitter, copy, and email
• Abilty to note how many characters are being selected and abridge anything more than 140 characters in length for Twitter
• Support for creating citations and anchored links

4. How can we integrate quotes without disrupting the reading experience?

Though quotes are widely used online, there are few examples of effective quotes that support, rather than disrupt, the reading experience, and offer context that supports scrolling.

Wired integrates right-justified quotes that don’t interrupt reading and include the name of the speaker.

Similarly, ProPublica includes the speaker’s name and the original context of their quote.

Though there are few examples of quotes done well, the key lessons from these examples are not to go full width and interrupt the reading experience, and to ensure the quote is given context.

Conclusion

After I bounced these findings and suggestions off the SFMOMA Lab team, we came up with some further questions and problems:

• These examples have mostly text and fewer images. What happens when our story has more images and fewer words? How does that look?
• How are these longer-form pieces positioned alongside collection artwork pages, which will have tombstone summary information? There’s a need for these pages to feel coherent without duplicating information — what’s the connection between these stories and artwork pages?
• How do we support artwork pages that may present full stories specific to the artwork, or may have less content?
• How can galleries of images be well integrated into these longer stories?
• How do we simultaneously facilitate the search, browse, and story-led approaches to accessing the collection?
• How hard would it be to do all of these things at once?
• And, of course, when can we get started?

Dive deeper into online storytelling:

• Find out what kinds of content management systems and dynamic templates might support rich longer-form content at Nieman Journalism Lab.
• See how nontraditional publishers are using online storytelling in Smashing Magazine.
• Explore UC Berkeley Graduate School of Journalism’s resources on multimedia storytelling.
• Delve into the innovative work of the New York Times's interactive storytelling teams.