Gathering Stories into Immersive Interfaces
Added by: DePaul Student
If your organization has created a set of personal narratives and you want people to watch, read, or listen to more than just one or two of these narratives at a time, then the interface you aggregate your stories into is important. In this post, we describe and give examples of what we call “immersive interfaces,” interfaces that through some combination of design and interactive features encourage visitors to linger and immerse themselves in a set stories.
We focus here on three interface design techniques that encourage users to engage with and immerse themselves in a set of stories: 1) story matrices, 2) user filtering, and 3) interactive documentary techniques. These techniques are roughly in order of ease of implementation: some of the story matrices we discuss can be implemented with WordPress templates or other free or inexpensive tools, whereas user filtering requires custom coding, and interactive documentary techniques can be quite complicated.
By “story matrix,” we mean a collection of stories that is presented in a packed grid, matrix, or masonry design.
Matrices, perhaps introduced through the social Platform Pinterest, have become quite popular for all sorts of web content: e-commerce sites often arrange their wares in a grid, to facilitate user browsing and clicking, and newspapers and magazines also favor this layout.
In contrast to content arranged in a list, matrices encourage users to ‘skim and dive.’ The matrix layout also immediately reveals when a collection has a lot of content in it, which may give visitors an impetus to jump in and start exploring.
Here are some matrix-designed story interfaces to inspire you:
- Heartland Alliance Stories: This one goes first because it’s so easy to implement! The Heartland Alliance has used a Tumblr to gather their photoessays and video stories into a matrix interface. Tumblr is easy to deploy, and comes with built-in sharing and favoriting features.
- Southside Stories: This project, which helps young people from Chicago’s South Side to create digital stories, implements a simple matrix on its story page. The project site is built using a WordPress theme, Extinct. A search of the WordPress theme directory for “masonry” will turn up other matrix-ready theme options, and you can also find WordPress plugins, like Masonry Layout, to turn a posts list on most any theme into a masonry grid.
- Big Stories, Small Towns: This collection of stories might be more properly called an ‘interactive documentary.” Its exploration-ready matrix is custom coded (i.e., not built on a platform like WordPress).
While a story matrix relies for its interactivity on a user’s willingness to scroll and click, story collections that have user filters allow visitors to engage by conducting targeted searches driven by their own curiosities. User filters are typically a bit more difficult to implement than a matrix interface, however organizations with a WordPress site might use the excellent FacetWP plugin (used here at Stories That Work) to simplify the process.
Here are some story collections that allow users to engage through filtered searches:
- Communities in Schools: The national nonprofit Communities in Schools has a large collection of written profiles, some with accompanying videos, filed under Our Results > Success Stories. Visitors to the page can narrow the list of stories by state, organizational role of person profiled, and/or by theme.
- Make the Connection: This project of the US Veterans Administration presents over 600 videos, which tell the stories of individual veterans and their families and friends, particularly around themes of the difficulty of recovering from combat-related trauma. Visitors to the site are prompted to “Choose from the options below to find the stories most relevant to you,” where the options include gender, era (defined with reference to notable combat events), branch of the military, and several other options.
Interactive Documentary Techniques
Nonprofits that want inspiration for more ambitious projects—projects that present collections of stories in uniquely engaging ways—can learn from the practice of those who create interactive documentaries, or iDocs. While many of these projects require a large crew and complicated set of technologies to implement, they can often suggest more modest implementations.
To get a sense of the possibilities presented by iDocs, we’d recommend a visit to Docubase, a collection of some of the most interesting iDocs, maintained by the MIT Open Documentary Lab. But here are a few examples that show a range of techniques that nonprofits might find compelling:
- Question Bridge: Question Bridge is a collection of narrative snippets from Black men of diverse backgrounds. The novelty of its interface is in the autoplay videos that users navigate with their keyboard’s arrow keys, which, when clicked, lead to a series of replies, along with the ability for users to submit their own answers to particular questions. There are a number of other ways to navigate the collection of narrative fragments: once a user commits to the first click, it’s hard not to be immersed.
- Reinvention Stories: Reinvention Stories is an interactive documentary and user-submitted storytelling project that captures the stories of seven residents of Dayton, OH. The project is an interesting example of how a set of short personal stories can be aggregated into an interface that feels almost like a documentary film
- High Rise: One of the many excellent projects funded by the National Film Board of Canada, High Rise tells the stories of people living in high-rise buildings across the world. In “Out My Window,” the stories of high-rise dwellers, told through audio and photo slideshows and “360 music videos,” are integrated into an interactive interface (Adobe Flash-powered) that is optimized for exploring.
These interface examples show a range of techniques—some easy-to-implement, some quite complicated—that nonprofits can use when they want users to linger in a collection of stories, exploring the diversity of voices and ideally, coming to understand important larger themes.
Post written by students in NMS 509: Digital Storytelling, Summer 2015
Filed Under: Tips and How-To's,