Project Skim improves long-form scannability on small screens at #SNDMakes

Team blue: Project Skim

In their own words:

Our team tackled the design challenge: “How might we create a mobile experience that is easily scannable for long form?” While there are many possible ways that designers could improve the brows-ability of a long-form story on small screens, we prototyped two possible use cases:

  • Summary card approach: A design for chunking a long-form story that allows readers to swipe between sub-points within the longer narrative.
  • Anchor tag approach: A design that allows a readers to quickly skim through the major elements in a story package.

Summary card design

The team used a recent story from the Bangor Daily News. The article had a mixture of short video segments, animated GIFs and photos. And, it was broken into clearly defined chapters. To improve the ‘skim-ability’ of this piece the team designed a ‘summary card’ experience to top each story section. From the homepage the summaries are accessed by swiping left/right allowing a quick browse through the storyline and a quick introduction to the main characters and places. From any summary card a reader can scroll down to read that section – or quickly return to the top of the story to read from the beginning. This summary cards serve both as info nuggets and ‘bookmarks’ for returning readers.

Anchor tag design

The team illustrated this idea with “Kony 2012,” a 7,000 word story published in March on Buzzfeed. It includes text and photos, but does not break into discrete sections or chapters. To enable skimming on mobile the team added a ‘skim’ button in the top navigation, identified key quotes and designed pull quotes to be embedded in the text. They then added a ‘skim’ button in the top navigation which simply jumps the reader between the quotes, providing a quick overview of the story, while keeping the reader within the main body.

Check out the other ideas: Backstory | Moving Stories | Sluice

New fundraising campaign: Do you love SND and care about its future? Show your support, and leave us a tip.

About Miranda Mulligan

is a digital specialist, news design veteran, SND board member, and a long-time rouser of rabbles.

Leave a Reply