<\/p>\n
Seek Inspiration Outside of the Project<\/h2>\n
Visual language taps into the foundation of human-centric design.<\/p>\n
Humans created visual language before the alphabet we use today. Cave paintings were man\u2019s earliest form of communication. Like a good tooltip, the drawings explained issues and how to solve problems. Those early drawings weren\u2019t intended as a primitive form of interior design. Cave drawings told topical news stories. They warned of potential danger. They shared tips for survival. Essentially, cave drawings are visualized data.<\/p>\n
![\"image06\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image061.jpg\")
<\/p>\n
\u201c<\/i>Cave Painting<\/i><\/a>\u201d.<\/i> Artotem<\/i><\/a>. <\/i>Creative Commons<\/i><\/a>.<\/i><\/p>\n As described in the free e-book Web UI Design for the Human Eye<\/a>, the eloquent simplicity of an image holds a lot of communicative power. But how do you harness this power into pixels?<\/p>\n Recently I needed to design an interactive system map that conveyed several key factors including:<\/p>\n Essentially, the network security app needed to help find a dangerous needle in a haystack while showing how that needle got to that specific location in the stack. <\/p>\n Photo credit: Wikipedia.<\/a> Creative Commons<\/a>.<\/strong><\/em><\/p>\n Looking at examples of clustered network data, the images were elegant, but highly impractical from an interactive perspective. Yes, it is possible to make networks look beautiful, but it\u2019s hard to make them functional once interactive. I saw little usability in designing the interactive map in a traditional way. I needed to find inspiration from another place. Something outside the existing examples of visualized network data.<\/p>\n In order for visualized data to be easy to read, there needs to be distinguishable attributes. This is where the structure of a visual language comes into play. <\/p>\n My inspiration often comes from nature. Within nature is perfect design. A forest is chaotic, but there is a method to the madness.<\/p>\n The story of a forest isn\u2019t understood by it\u2019s larger holistic view, but rather the intimate view when standing within it. The same principles applied to the system network I needed to design as a map.<\/p>\n Data on it\u2019s own means nothing. An overview of data presents high-level information that is helpful but rarely actionable. Context matters and must be presented with data. The ability to understand connections requires a closer view.<\/p>\n Once you start to zoom-in, the forest takes on a whole new meaning. When you look at a single tree up close, it\u2019s perceived in a whole new way. The closer you look, the more texture and detail you see. And at a microscopic level, the relationship between forest elements illustrates how the forest grows.\u00a0<\/p>\n I thought about how everything grows in partnership of each other in a forest. It\u2019s a network of layers and natural laws dictating how plants grow. Color plays into how living things survive and a plant’s proximity to the sun. Everything grows and dies in perfect harmony. When a plant dies, it becomes food for the next generation.<\/p>\n \u00a0<\/strong><\/em><\/p>\n Photo credit: The Resilience Initiative<\/a>.<\/em><\/p>\n I decided that a flat map-like experience was easier on users\u2019 cognitive load\u00a0than a 3D shape. Reducing cognitive load made it easier to tell the story. Interactive components should help focus the user on the key areas of the map. I studied different treemaps in search of\u00a0the right treatment for the data within a mapview. <\/p>\n Putting these elements together took time. What helped me was the creation of a story, which was:<\/p>\n “A user is flying in a plane above a dense forest looking for a place to drop into in order to locate a single red seed. This red seed was introduced to the forest by an outsider who wants the plant grown from the red seed to eliminate other plants. The damage is unacceptable. There is more than one red seed, and the user needs help locating the seeds and removing them before they grow into plants.”<\/p>\n This story helped me identify the types of interactive features necessary for the user to complete the tasks described below:<\/p>\n Obviously, all of this is a fictionalized version of the real tasks performed by users within the product. But by using a story as a metaphor, it was possible to design a themed experience that shared a common language. This was especially effective when communicating the product’s key features with the team and client. All of us were able to share the same mental model created by our common story metaphor.<\/p>\n Based on our metaphor, real user tasks are translated as:<\/p>\n I researched a lot of examples of visualized networks and found this plot lines tree diagram on Buzzfeed<\/a>. It became the perfect visual model for the network security app I was working on.<\/p>\n Photo credit: Buzzfeed<\/a> <\/em><\/p>\n As a tree diagram combined with a subway map, it\u2019s really easy to understand high-level information. It makes perfect sense because it fits into the forest metaphor. We see roots representing the accounts of focus and the branches representing the entire forest (network). Color coding calls out what\u2019s most important, as well as the sources which are; groups, account types and devices. And we see the high-level relationships of everything as an easy to digest image.<\/p>\n The model allows users to immediately view the entire forest (whole network), the red seeds (security breaches), and how they entered the forest and if they\u2019re growing (paths of entry and destination). <\/p>\n Photo credit: Jessica Lowry<\/a> via Buzzfeed<\/a><\/em><\/p>\n When the user flies over the flat forest, the key areas are easy to identify. As you can see in the below lo-fi mockup created in UXPin<\/a>, I used color coding to highlight the time between a red seed finding it\u2019s way into the ground (a security breach) and beginning to grow into a plant with roots and leaves (a spreading virus). The red seed is a risk. The development from seed into plant is an even greater risk. The different colors visually told the user which seeds to investigate first.<\/p>\n I\u2019ll admit it\u2019s not the prettiest prototype, but it illustrates the rough functionality – and that\u2019s exactly what we\u2019re looking for. <\/p>\n Once the user selects a seed to investigate, the path to take becomes clearly highlighted. The other elements of the forest are still visible, but aren\u2019t distracting. In fact, all the unnecessary layers peel back to reveal the journey of the red seed and its current development status (which is what users care about most).<\/p>\n For the above prototype, I simply dragged an existing image into a UXPin project, added hotspot elements to where I wanted interactions, then dropped in the boxes on the left-side to build out the pop-up modal.\u00a0<\/p>\n To design\u00a0more narrative-driven interfaces, seek inspiration outside of the office. Pay attention to nature, to great visual artists, to anyone who boils down complex structures into simple emotional understanding. Once you have your direction, go ahead and start prototyping in UXPin with a free trial<\/a> like I did.\u00a0<\/p>\n To know more about designing compelling visual stories, check out the free e-book Web UI Design for the Human Eye<\/a>. You’ll learn from example with the 33 design teardowns included.\u00a0<\/p>\n\n
![\"image04\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image042.jpg\")
<\/i> <\/p>\nEmbrace the Storytelling Power of Metaphors<\/h2>\n
![\"image00\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image003.png\")
<\/p>\nCreating the Story<\/h2>\n
\n
\n
Turning Stories Into Reality<\/h2>\n
![\"image01\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image01.jpg\")
<\/p>\n![\"image05\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image054.png\")
<\/p>\n![\"image03\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image033.png\")
Photo credit: Jessica Lowry<\/a> via Buzzfeed<\/a><\/em><\/p>\nNext Steps<\/h2>\n
![\"tw-promo-3\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/tw-promo-3.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"