Explaining Complex Problems Through Interactive Science Illustration
The web creates a unique forum for storytelling that is well suited for explaining complex problems. Science illustration, when combined with interactivity, opens up unique possibilities for presenting clear, digestible bits of engaging information. As the interactive world becomes increasingly sophisticated, so do possibilities for presenting visual content in ways that offer alternative paths to traditional storytelling. We are seeing exciting developments in digital storytelling through online newspapers and magazines, as they experiment with interactive infographics and data visualization charts to communicate content.
What is digital storytelling? Simply put, digital storytelling (also referred to as online documentaries or interactive storytelling) entails designing a linear story within a non-linear environment. In traditional media such as books, magazines, or even movies, content is structured with a clear beginning, middle, and end, and the audience is passive, only their attention is required. However, in the online world, the audience controls the path of their experience. The nature of the online world fosters participation and requires user input.
As an illustrator, understanding the challenges and benefits of digital storytelling potentially increases opportunity for work in a wider array of outlets. If, for example, a story can be depicted in a time-based environment that users control, then potential clients could be persuaded to use illustrators rather than relying on photography.
Because content is easily compartmentalized into smaller bits of information, a storyline can be broken down into pieces and re-connected in more than just one way. A central story might offer tangents that can significantly enrich a story or even alter the relationship an audience has with the content they are navigating. The challenge becomes connecting these disparate parts in ways that make sense to the audience.
In 2012 the New York Times received attention and recognition for an interactive article they published, titled Snow Fall. The online editorial was seen as a novel piece of interactive design. As you scroll down the page, various images, videos, maps, slideshows offer digressions that help to enhance the story and bring the user deeper into the content.
Digital storytelling is not merely the design of a multi-page website, but the presentation of content within a single web experience. Essentially, one is presenting a series of consecutive images that tell a story or explain a concept, ideally with striking imagery and minimal text.
With some exception, content can be presented in one of three ways: sequentially as one scrolls down the page, in the form of a slideshow, or a possible combination of the two. In the case of a slideshow (think forward and backward arrows, or perhaps clickable numbers or letters), you don’t have to jam-pack information into one screen, you have an endless number of slides to present clear and articulate ideas.
With digital storytelling, one has the added benefit of working in a time-based medium. This means animation, sound, text, photography, maps, and illustration can all be incorporated into explaining complex concepts. In 2015, The Washington Post in collaboration with Independent Lens, PBS TV’s documentary series, launched a sophisticated online, interactive, documentary titled After the Storm (Fig.1) to mark the 4th anniversary of the destructive tornado that tore through Tuscaloosa, Alabama. The piece is a tribute to victims of natural disasters, as told from the personal experience of Andrew Beck Grace who lived through and survived the storm. The project is a wonderful example of the true potential of online storytelling; it follows a linear path but allows the user to navigate through the story at their own pace and in their own direction. Where photography and video fall short, the project effectively uses illustration and animation to convey the emotion of Grace’s terrifying experience. The medium of interactive storytelling lends itself very nicely to sequential images, especially illustrations because the possibilities for depicting content are infinite.
> pages from After the Storm. Written, directed and photographed by Andrew Beck Grace, Interactive Design Helios Design Labs, presented by ITVS/Independent Lens. Courtesy of Helios Design Labs. www.washingtonpost.com/posttv/afterthestorm/index.html#/dear-future-disa...
The Internet is increasingly sophisticated in its capability and design. Content needs to be carefully structured within the viewing screen to enable users to make sense of what they are looking at. Online attention span tends to be short. If you stifle the ability to click, you are likely to lose your audience. And yet, stories have to follow a linear structure to be clear—you don’t want someone jumping to the end without the understanding that they have not seen the middle.
Creatures of Morningside Park is a single page, interactive illustration featuring several animals often seen near the pond at Morningside Park in New York City; it shows how they are linked in a complex and fragile urban ecosystem (Fig. 2). Working with scientists from the New York City Department of Parks and Recreation’s Mid-Atlantic Regional Seed Bank, I designed the piece to cultivate a sense of citizen stewardship of New York City’s natural resources. The animals in the illustration are clickable, causing an overlay to appear with more detailed information. The content lent itself well to interactive storytelling.
> Creatures of Morningside Park © M. Genevieve Hitchings; all rights reserved/www.artorium.com / www.urban-parks.org
Digital storytelling can revolve around a central theme and not require a particular order for viewing subsequent details. The Dangers of Drug Driving is another good example of this type of interactive design. The site functions as a public service announcement and provides a guide to show exactly why (and how) drug driving is a risk. Content is focused and centered on images. Although there is a homepage, which serves as the ‘beginning,’ there is no clearly defined middle or end; through a series of strategically placed buttons, the audience is prompted to explore the site via their own path and pace.
Similarly, The Grey Tales (Fig. 3) is a site designed by three friends who were inspired by an encounter with elephants during a trip to Vietnam and wanted to share their story, in an effort to bring awareness to these large, graceful creatures. The site is minimal in its content, featuring a scrolling navigation of the five countries where elephants reside. Each of the five sections consists of an illustration and supporting text, highlighting a few unique characteristics of elephants. Although the content is presented in sequential order, users are free to browse the site in whatever order they choose. The last item on the navigation bar ‘ souvenirs’ offers users an opportunity to create and send a digital postcard. The feature is a clever and engaging way to help promote the site; within the same section if you scroll down the page there is additional information about how users can get involved and help support elephants.
> The Grey Tales, Courtesy of Julie Flogeac, Louis Ansa and Florian Morel. thegreytales.net/en
Designers have to present content in ways that offer users choice and control. The fluid nature of the Internet is based on a fragmented structure; bits of content are presented in chunks. Good web design depends on clear guidance but allows users to click as they please. A clear and organized hierarchy of information is essential. Screen space is limited and dependent on the size of a monitor. Basic elements, such as navigation menus, branding, headers, and captions have to fit within the viewing screen. And while they should not be the focal point of the page they must be visible at all times. If content does not fit within the screen, a user will have to be willing to scroll down the page to find it. Allowing a user to understand where they are within their online experience is key to designing a clear and well-presented ‘story.’
Metamorphosis (Fig. 4) is a site I built to experiment with presenting a sequential concept in the online world. Featuring a Monarch butterfly, this interactive project illustrates the life cycle of butterflies for young audiences who are in the process of learning to read. The website requires minimal instruction as it showcases the stages of metamorphosis. Content is presented in sequential order and yet users can click anywhere within the page to trigger one of six, short, animations showcasing the four stages of a butterfly’s life: egg, larva (the caterpillar stage), pupa (the chrysalis phase in a butterfly’s development), and adult. Depending on where and when the user clicks, the animations play simultaneously or individually, and in a no specified order.
> Metamorphosis © M. Genevieve Hitchings; all rights reserved/www.artorium.com / www.metamorphosis.urban-parks.org
In today’s world of digital gadgets, there is, of course, the added challenge of presenting content that can be viewed on multiple devices and screens. Referred to as ‘responsive design,’ the layout of a web page should ideally shrink down, or expand (also referred to as liquid or elastic layouts) to the size of the screen it is being viewed on. A good website will have a mobile version and a non-mobile version. In the case of digital storytelling balancing imagery with essential text and navigation can be difficult if viewing a page on the tiny screen of a mobile device.
Nicholas Blechman illustrated and animated a series of editorial ‘mini interactive documentaries’ under the title Food Chains (Planet Pasta, The Mystery of San Marzan, Extra Virgin Suicide, and Code Name Parmigiano (Fig. 5). Investigating and exposing the complexities of our globalized food economy, Blechman very effectively uses a simple and engaging interface to tell his stories. The piece, along with all its content resizes nicely regardless of what device it is being viewed on. The full-screen, slideshow consists of his illustrations hugged by a forward and backward button and supported below by a minimal, navigation bar indicating which slide the viewer is on and how many slides there are in the story. If a viewer jumps ahead they know where they are within the story. Simplicity in his design (not to mention his illustrations) makes for brilliant online storytelling.
> Code Name Parmigiano © 2014 Nicholas Blechm an/ www.nytimes.com/interactive/2014/06/06/opinion/food-chains-code-name-par...
The challenge of keeping up with ever-evolving technology can seem intimidating. However, we have entered an era of web development that favors Open Source. This means the code used to create a webpage is available for others to view and borrow, and search engines can easily comb the contents of a site to help promote and make it searchable. Ideally, the code is written in a format that adheres to web standards helping to ensure accessibility, stability, quality control, and ease-of-use for all users.
At the beginning of 2015, interactive art director, designer, and coder, Bryan James, created an experimental, site Species in Pieces (Fig. 6) to showcase 30 unique animals worldwide that are on the verge of extinction. The site functions as an informative interactive exhibit. Users can scroll through the different animals with their mouse or their arrow keys, or via a simple fixed navigation on the right-hand side of the screen. There is also a special icon (button) providing more detailed information on each species. Here James calls attention to the role humans have played in making life inhabitable for many of these creatures.
Using a line of CSS code that enables the construction of polygons (webkit-clip-path) James’, entire project highlights this feature. Each of the 30 creatures is constructed using 30 polygons that seamlessly morph into one another. All aspects of the project reinforce the serious threat facing each of these species through ‘pieces.’ The beautiful, fractured, animating pieces allude to both the complexities of our diverse, natural world, having evolved over thousands of years, as well as the tragic state of its current existence.
> Species in Pieces, Courtesy of Brian James / www.species-in-pieces.com
The animations in this website work in Safari and Chrome. Firefox offers a different, less animated version.
In 2011 web designers began incorporating parallax scrolling, this is now an effect we see frequently. Parallax scrolling enables background images to move slower than foreground images as one scrolls down a webpage, creating the illusion of depth and movement. When thoughtfully executed, the integration of movement and interactivity into a webpage can enhance and facilitate more meaningful online experiences.
The Dangers of Fracking shows a creative and engaging use of parallax scrolling. Designed and illustrated by Linda Dong, the entire contents of the site are presented within one page. There is no need to click, as the user scrolls down the page the story unfolds through illustration and minimal text. For details, strategically placed rollover buttons present additional facts that pop-up as an overlay within the page.
Perhaps more so today than at any other time, there are excellent opportunities for illustrators to tell compelling stories online. While technology continues to evolve, the basic concepts of storytelling remain constant. The concept of a narrative implies there is a path to follow with a clear starting and endpoint. But with the fluid nature of the web, there is an opportunity for presenting content in ways that deviate from that norm. If well presented, the ability to offer tangents can dramatically enrich a central story.
Illustration, in particular, lends itself nicely to explaining complex problems in an interactive environment, because there are no limitations in describing content visually. Illustrators can depict content on subjects that photographers, for instance, might not have access to.
Science illustration is uniquely poised to embrace the possibilities of presenting complex information interactively. It has always been our job to visually reconstruct scientific discoveries in ways that help to clarify details that might otherwise be too difficult to comprehend. Ours is a process of explanation; having the ability to explain complex processes through a series of steps opens up exciting new possibilities for visual solutions.
About the Author
M. Genevieve Hitchings is an Assistant Professor in the Communication Design department at New York City College of Technology. As principal designer of Artorium (www.artorium.com), a design studio in New York City, Genevieve has experience in brand development and interactive creative planning. She has been responsible for project management, art direction, design and illustration in a wide range of multi-media projects. Genevieve is also co-founder and chair of Design Incubation, a think tank for educators and practitioners of Communication Design to discuss their design research and practice.
Note
This article appears in the Journal of Natural Science Illustration 2016, number 1