Smart is Seamless: How UX Leverages Edward Tufte’s Principles of Visual Information (Part 2)

Posted 4 years ago by Kyle Averack No Comments

In the excavated necropolis of Beni Hassan (Figure 1.0), an Egyptian archaeological site dated from the 21st century BC, twelve out of thirty-nine tombs, carved into limestone south of the city Al Minya, bear the remains of wall paintings and inscriptions brilliantly depicting the artistic talent of the time and of an idealized record of life (LeSuer 2012). Among these, the tomb of Baqet III stands out because of its size, extensive scenes, and of the notable fresco paintings illustrating about 200 wrestling positions (Figure 1.1).


Screen Shot 2014-05-10 at 6.23.33 PM
Figure 1.0 Beni Hassan Site

The sequential wrestling positions are significantly informative, as the fresco, in its entirety, leverages a principle Edward R. Tufte calls, small multiple design. Small multiple designs visually enforce comparisons of changes, differences, and of the scope of alternatives. With a wide range of design challenges, the small multiple design approach provides an at-a-glance view for users to make swift comparisons of the elements reviewed.
Screen Shot 2014-05-10 at 6.21.56 PM
Figure 1.1 Wrestling Athletic Positions in Baqet III

The fresco depicting wrestlers in various athletic positions are beneficial to the observer since the differences in movement and technique are more readily comparable (Figure 1.2). The use of constancy puts emphasis on changes in design, and the illustrations, while similar, consist of differences noticeable by comparison, supporting a fluid user experience.
Screen Shot 2014-05-10 at 6.31.28 PM
Figure 1.2 Inside the Baqet III

The origins of these frescos span over four millennia, and communicating data visually was a challenge then, as it is now. In this second review, I will cover how Edward R. Tufte’s small multiple design principle is leveraged in contemporary UX design in the recipe discovery system, FlavorPrint by McCormick, and social media visualization tool, WDMTG (Where Does My Tweet Go).

FlavorPrint by McCormick is changing how people cook by introducing a new way of discovering recipes. Based on 120 years of sensory science, FlavorPrint introduces a new technology that looks at food based on flavor instead of ingredient, genre, or type (Figure 1.3).
Screen Shot 2014-05-10 at 6.22.13 PM
Figure 1.3 FlavorPrint by McCormick

It illustrates your preferences by reading your palette and translating your flavor profile based on your “likes” and “dislikes” of recipes and food you review. The information analyzed is illustrated in a visually stunning and legible representation of flavor where customers can intuitively evaluate food. The system gets smarter over time; the more you interact with the service, the more the recommendations become tailored to you (Figure 1.4).
diagram
Figure 1.4 Top Flavors View in FlavorPrint by McCormick

This approach to data visualization leverages small multiple design by allowing the users to efficiently compare a variety of flavors at-a-glance (Figure 1.5). With color and size variations, determining whether a recipe would fit your flavor profile becomes a fun and easy experience. Never before has there been such a smart and intuitive lens of discovering recipes and food.
Screen Shot 2014-05-10 at 6.22.32 PM
Figure 1.5 Key Flavors identified for FlavorPrint by McCormick

Simplifying complexity is always a challenge in data visualization. Think about your social media profiles and how much effort there is to make sense of it all. How does your information propagate? In particular, how do your tweets spread? In response to these questions, WDMTG seems to have the answer (Figure 1.6).
Screen Shot 2014-05-10 at 6.36.39 PM
Figure 1.6 View State of WDMTG

WDMTG reveals the mystery, in 2D, 3D, Bar graphs, or Tree structures, the reach of individual tweets, in concentric circles, over Twitter’s social network. With the original tweet in the center of the graph, blue lines indicate retweets and green lines grow vertically representing the amount of people tweeters have reached. In addition to its visual configuration, the tool offers visual animation to the growth pattern of your tweets’ reach.

Screen Shot 2014-05-10 at 6.36.27 PM
Figure 1.7 Multiple Degrees of Freedom in WDMTG

This application expertly leverages Tufte’s small multiple design approach by providing information slices positioned within the eyespan of the viewer for uninterrupted visual reasoning. This creates an intuitive and seamless experience for the user to rationalize multiple challenges in one centralized visual interface.
Screen Shot 2014-05-10 at 6.38.20 PM
Figure 1.8 Side View in 3D of WDMTG

Edward R. Tufte’s small multiple design approach reconciles a multitude of design challenges in visualizing information. When you are faced with communicating various changes, differences, or the scope of alternatives, small multiple design may very well be one of the best approaches for optimal UX. Regardless of the canvas in discussion, whether limestone or graphical user interfaces, societies need to comprehend the data/information we generate through these timeless, and necessary design strategies.

Tags: , , , ,

Leave a Reply