The Relicans

loading...
Cover image for Design: Art or Process?

Design: Art or Process?

ReisDev
・4 min read

Cover by UX Indonesia on Unsplash

Recently I took a course of Data Visualization at the college, and the teacher chose, weekly, a set of articles about design, creative process and Data Visualization. I loved it and decided to write about one of those sets.

The articles were published in the Nature Methods. Each topic is followed by its respective link.

Summary

Salience to Relevance

Source of the article

The first one is basically about highlighting some information over others. The author uses a very interesting example:


Source: https://www.nature.com/articles/nmeth.1762/figures/2

According to the author: Matching salience to relevance draws visual attention to important information.

On the heat map above, the intention was to highlight the red dots over the blue dots. But, the effect was the opposite. The dark blue dots are highlighted over the red ones. Then, the goal of this visualization wasn't achieved.

The idea of this article is trying to expose how to create relevance using salience. Highlighting one information is really useful, but it need to be efficient. The use of colors and figures need to be done carefully.

The second figure highlights the problem of using moving figures. The image suggests that the text is more relevant for the given slide. However, the figures moving on the side can be a distraction to the reader and make the information comprehension harder.

Elements of visual style

Source of the article

This article is about building visual elements and how the choice of each component can influence the reader comprehension.

The first example is the following image:

Image of a multicolored graph, with 3 to 4 edges connecting nodes pairs. The edges also have multiple colors.
Source: https://www.nature.com/articles/nmeth.2444/figures/1

According to the author: A flood of identical symbols triggers semantic satiation, a phenomenon in which overwhelming repetition results in loss of meaning.

The problem of this image is the elements with multiple colors,both nodes and edges. Then, the colors loses its meaning. The missing color labels makes impossible the mission of understanding the colors meaning. Use a limited set of colors and present the meaning of each one makes the reading of visual element way more easier.

A image with a set of figures: a bar chart, a pizza chart with multiple colors, a chromosome, a sequence of geometric shapes, a cylinder with a kind of rope around it, a green arrow with a red circle upon it with "K3" written inside it, and, the last one, a balloon with the word "Cancer"
Source: https://www.nature.com/articles/nmeth.2444/figures/2

According to the author: Use the simplest visual representation for objects and "omit needless words".

The use of elements with different shapes on figure A, besides making the interpretation harder, adds nothing to its meaning. The figure B makes the comprehension a way lot easier, and the most important information are, in fact, highlighted.

A set of figures with different shapes. On the first line, two sets and its interception, the first one with multiple colors and the second one with only one color scale. On the second line, 8 figures: At the left, a undefined drawing with the word "FOXA1", a rounded rectangle with the word "FOXJ1", a hexagon with the work "FOSL1" and a circle with the work "FOXR2". At the right, 4 regular rectangles with the same words at the first 4 figures. On the third line, the words "Cancer STEM", "Cancer" and "Neoplastic". To the left, 2 non-regular figures below each word. To the right, 2 regular figures below each word.
Source: https://www.nature.com/articles/nmeth.2444/figures/3

According to the author: Objects that interact or share common meaning should be formatted in a similar way that appeals to intuition.

Once again, the choice of colors and shapes affecting the comprehension of the information of a visual element. The images at left do not induce a co-relation between the elements that should be similar, because they have different colors and form. The images at the right side, otherwise, suggest a relation between the items and even highlight some of them.

Narrative

Source of the article

This article is about using visual elements to tell histories, part of the "Storytelling" technique. The visualizations of this kind relates events to a time our values interval.


Source: https://www.nature.com/articles/nmeth.2571/figures/1

According to the authors: Use aggregation to reduce data detail and emphasize the message: there are relatively few middle-range values.

Starting with a set of values and ending up with a bar chart, the previous image represents the process of transforming the data into a visualization that conveys an ideia in a more succinct way, without needing a lot of visible information.

According to the authors: A story adds meaning and clarity to complex statistics.

In some cases, visual elements are not enough to present a information in a clear way. When you have complex statistics, presenting a context of the problem/situation can make the comprehension easier.

Conclusion

After a dozen of examples of how design works and the criteria that it needs to follow to reach its purpose, what do you think? Design is only an "art", a figment of the imagination and creativity, or it's a result of a rigorous process that requires knowledge and dedication? Maybe both?

If you want more content like this, follow me here and on my other social media accounts: Twitter | Instagram | Youtube.

Discussion (6)

Collapse
thejonanshow profile image
Jonan Scheffler

This is a great article, well done. Really useful discussion of how much design matters in representing data. I expect I'll be using this advice a lot for my work. :)

Collapse
reisdev profile image
ReisDev Author

Thank you! When I first read these articles I got impressed with how many factors can impact the comprehension of data. Design deserve our attention :)

Collapse
wyhaines profile image
Kirk Haines

This is a great article. Making things look good is hard, but it is a really important part of sharing information. Great job highlighting a lot of the important considerations involved! I really like this.

Collapse
reisdev profile image
ReisDev Author

Thank you! It's tough, but essential!

Collapse
captainellie profile image
Captain Ellie

Great post! We usually are too focused in process to see the art in it!

Collapse
reisdev profile image
ReisDev Author

Thank you, Captain! You're right! Art is a process, and the process is an art too!