Strands is an interactive data visualization that reimagines how literature can exist in a modern form.
Over 10,000 great poems have been written since 1633. Yet, today, poetry has lost its significance as an art form.
Strands is a large-scale interactive art piece that uses data visualization to create a new way to experience poetry.
RIT’s New Media Design program briefed me to use data visualization to create insight. From that brief I established three major goals: to use data as art, to show complex data in an easy to understand way, and to give users seamless control over that data.
Strands surfaces the beauty of the human experience
Strands collects, sorts, categorizes, and visualizes millions of poems that have been created since the invention of the printing press in 1633.
It takes inspiration from the online flash application We Feel Fine by Jonathan Harris which shows the strength of surfacing and sorting human-driven data.
Similar to We Feel Fine, Strands seeks to create an honest depiction of the human experience. It expresses beauty by surfacing the honesty and unpredictability of poetry. A poem is full of lines that are relatable, emotional, and unique. This allows beauty to seep through every level of the data visualization, from the broad to the detailed.
Framing data as if under a microscope
The user is a lens, the data is whats underneath. At the beginning of the experience, the data is represented as a dot. As user's step forward more information reveals. User's are always zooming in or out of information and information always remains in the same physical location. Information has an existence in the UI's space. This gives users a sense of scale and a grounding when interacting with the UI.
The inspiration for the metaphor of the microscope comes from 1977 film Powers of Ten by Charles and Ray Eames.
Sort poems by time, break poems down by emotion.
The user's journey begins at a grid of dots. Each dot in the grid is represented by a poem. The dot's color represents the most common emotion in the poem. And the location of the poem in the grid represents its publication date. Top left is the oldest poem, bottom right is newest poem.
Sorting poetry by time
Strands uses time to exhibit how the collective mindset of poets have grown and changed throughout history. Users can scroll through the grid to view how emotion in poetry has changed over time. Below is an example of two contrasting. time periods. Romanticism ( left ) is full of love. The Harlem Renaissance ( right ) is full of sorrow.
Strands also allows users to montage through time. They can wave there hand to start playing through all the poems respective film clips.
Creating a relatable entry point for poetry
Strands translates poems into short film clips. These clips are entry points for the poem. Once expanded the film still starts to play on a three-second loop.
Clips are chosen based on the emotion and the keywords found in a poem. this provides a quick, digestible visual to represent the poem, and allows the user's to get a better idea of the content of a poem before reading it. The film clips create contrast in the user experience. The quick looping film clip transition into a slow beautiful poem as users scroll.
Categorizing poems by emotion
What makes up a poem? Writer and RIT professor John Roche describes poetry as the transfer of energy:
A poets energy must go from the mind to the page, to the reader without any loss of energy. That's what my professors believed in college. Back when the Black Mountain School of Poetry has founded a teacher there invented this way of teaching poems. At my school, we were beat necks too and we believed that poems had entropy. Poetry is really just communication. So how do you create energy? How do you communicate? It often, not always, but often comes from emotion.
Strands seeks to break down the entropy of a poem. The essence and core of its communication. It does this by analyzing emotion. The design look to human psychology as a base for the emotional breakdown.
Psychology Today breaks down how psychologists' understanding of emotion has changed over history:
In the 20th century, Paul Ekman identified six basic emotions (anger, disgust, fear, happiness, sadness, and surprise) and Robert Plutchik eight, which he grouped into four pairs of polar opposites (joy-sadness, anger-fear, trust-distrust, surprise-anticipation).
Strands bases its emotional breakdown off of Ekman’s base of human emotion. It swaps out the emotions of disgust with love so that the visuals will have an equal balance of positive and negative emotions.
Love, fear, joy, sorrow, surprise, and fear are the emotions that make up the core of a poem. That core informs the entirety of the visual design of Strands.
This emotion is the base of the visual design of strands. Everything from color to imagery, to animation, is informed by the emotion in a poem. Poems with more love animate like the thud of a heartbeat, happy poems jolt out, sad poems moved linearly and slow:
Combining embodiment, material design, and progressive disclosure to create seamless control and engagement of data.
Embodiment is a form of design thinking that recognizes human’s existence in the third dimension. Strands uses embodiment to give users control. The UX design is centered around leveraging embodiment as a way to make poetry an easy to explore. Normal movements such as walking, stretching, and touching all affect the information on the screen.
Embodiment also makes the installation more engaging. The large-scale interactions give user's a sense of physicality. People feel good when they break away from the smaller interactions that we are so used to in our daily life. Joy, presence, and mindfulness, are necessary for an installation.
Strands uses embodiment to make information emerge naturally. As users walk up and around the installation dots expand into images and image expand into gifs. This concept is called projective disclosure.
Progressive disclosure is an interaction design technique that helps maintain the focus of user's attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand.
Material design standards
Strand’s dot grid combines embodiment with Google’s Material Design philosophy. with inspiration from Aperture, Responsive Environment 2004/05.
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
Designing the space
In the pitch stage of Strands, I used 3d software to Contextualize the data visualization. I thought of interior lighting, screen scale, and layout to optimize immersion for users during the experience.
The lighting is dark and the floor reflective so light from the screen easily bounces off of the ground and fills the room. This also allows the light in the space to guide the user to the screen. The entrance of the space is in the corner of the room so that the installation space feels hidden, closed, and cozy.
Old renders, UI designs, and ideas that were cut during the design process
Citations, Links, and Resources