Layouts: Organize your visual insights

Widgets, report and dashboard layout designs


Figure 1 : A Strawberry showroom in a marketplace


Brief start about Layouts


When we walk in a marketplace, a seller puts the most delicious looking strawberries on the frontline of his selling desk. Yet when we ask him how the strawberries are, he answers us:

“ They are all perfect ! “.


Stephen few, made a similar observation in visualization as he states in Information Dashboard Design: The Effective Visual Communication of Data, [1] “Everything that deserves

space on a dashboard is important, but not equally so, the viewer's eyes should always be directed to the most crucial information first.”


In this article, we are going to loopback through the history, define what is the most crucial information, present visualization layout notions, and give ourselves some design recommendations.



Rollback in History


According to the Merriam-Webster dictionary, the first sense of our word is “The plan or design or arrangement of something laid out: such as.”


According to Diogo Terror in Lessons From Swiss Style Graphic Design, [2] The International Typographic Style, also known as the Swiss Style, is a graphic design style that emerged in Russia, the Netherlands, and Germany in the 1920s and was further developed by designers in Switzerland during the 1950s. This style influences design related fields such as graphic design, thus data visualization.

According to the movement, our keywords for visual displays are: cleanness, readability and objectivity.


Now that we took the dust off, let’s dive into the hearth of our topic.



Applying layouts


First things first, let’s set up our notions in order to have a common language.



Notions


Layout: A layout is a bi-dimensional canvas

Canvas : A canvas is a container for graphics.

Grid: A grid is a two-dimensional structure made up of a series of intersecting straight lines.

A layout grid : A grid “laid out” on a layout. It is a temporary grid supporting a user to better design his charts.



Layout : Apply and organize


In this section, we are going to explain how to organize our layout with our graphics, and provide some guidelines.


Figure 2 : A Layout grid example


Figure 2 shows us our starting point of our design: An empty layout !


We deliver our insight to our audience by fulfilling our layout with graphics such as charts, titles, theme, interactivity


Figure 3 : A Layout containing a widget


In figure 3 , we added our first chart : A Sankey Diagram.

Let’s continue our design.


Figure 4 : A classic dashboard example


We played a little more with the previous example and added more graphical elements.

Figure 4 is a classic dashboard : we got all our designs in a single screen.


But, does it make our audience life easier ? Do we manage to convey our message to help our viewer gain insight and take effective decisions ? What happens if we transition display modes such as reports or mobile ?



The most outstanding position


This section provides some guidelines, in other words best practices, on how to place our visual elements on a canvas.

According to Stephen Few in Show Me The Numbers, we can [3] “

  • Prioritize (i.e. rank information by importance),

  • Group (.ie segments information into meaningful sections),

  • Sequence(i.e. provide direction for the order in which information should be read)”

Prioritize


This section discusses how to prioritize a message.


Figure 5. English Search result of the keyword “Google” in Microsoft Bing


Figure. 6 Arabic Search result of the keyword “Google” in Microsoft Bing


We are usually sensitive to the first processed reflection of light, that is just how our brains work.


We just apply this same principle to visual components in visual designs. As shown in figure 5, Microsoft tries to dissuade users from switching to a concurrent search engine. One of the strategies, is to place the current search bar on the top left of our navigation page to influence our click activity. Thus, we achieve perception manipulation.


Figure 6, is the same result but displayed in a different language. As known, we read from right to left in Arabic. So design should also consider cultural, linguistic and accessibility for maximized satisfaction.


Importance is correlated with position.


So our first guideline is to place the most important visual component to the top left , top centre or top center of the canvas. Figure 7 is a canvas example in which our virtual rectangle points out to the top left area of our screen.


Figure. 7 An empty canvas annotated by a top left rectangle


The least important visual component should be displayed at the bottom section of our canvas as seen in Figure 8.


Figure. 8 An empty canvas annotated by a bottom rectangle


We can discuss on how to choose or create the most important visual in an upcoming article related.



Group


This section discusses how to group pieces of messages.


Figure. 9 A dashboard example illustrating grouping


In Figure 9, we try to present energy consumption. We applied two Gestalt Principles to distinguish energy categories : similarity and closeness. The principle helps us categorize our elements into larger “groups”. As we can see, we got three types of charts delimited by an imaginary guideline dividing our canvas into 4 virtual sections.



Sequence


This section discusses how to represent a message displayed in a sequenced order.


Figure. 10 A dashboard example illustrating sequence


In the following design, as shown in figure 10, we got one type of chart per virtual “row”. Our goal is to guide our audience to compare different context belonging to the theme “energy”. We can notice that our eye tends to follow a left to right reading with ease.


In all the three types of layout, the organization's main goal is to ease reading our visual displays and increase effectiveness in transmitting our message. But what happens if we change our display modes ?



Switching layouts modes


The previous examples are useful to display visuals on monitors or desktops. Yet, we can also adapt ourselves for reporting and mobile representations by configuring our layout. Thus, we can deliver the same information yet represented in different views



Let's Apply


This section provides different layout configurations based on the same example. Configuration adds flexibility in our designs.


Figure. 11 Illustrations of visual elements displayed in different views.


Figure. 12 A canvas example displayed as a portrait report



Figure. 13 A canvas example displayed as a portrait report with reduced margins.


Figure. 14 A canvas example displayed as a landscape report


Figure. 15 A canvas example displayed as a mobile viewed representation.


Figure 12, 13, 14, 15 are an expanded view of every sub display presented in figure 11. As we can see, our content and context can adapt itself to the "windows" of our insights: our screens !



Conclusion


We can conclude that whether we got the most rare and potentially useful data, or the most beautiful visual designs, presenting them is as important as having them. Thus, let’s end our article with what said Willard C. in “Graphic methods for presenting facts “ [4] It is not the foundation, but the structure built upon foundation which gives the result ”.



Reference


[1] Few, S. (2006). Information dashboard design : the effective visual communication of data. Sebastopol, Ca: O’reilly.


[2] https://www.smashingmagazine.com/author/diogo-terror (2009). Lessons From


[3] Few, S. (2012). Show me the numbers : designing tables and graphs to enlighten. Burlingame: Analytic Press.


[4] Brinton, W.C. and Day, E.E. (1915). Review of Graphic Methods for Presenting Facts. Journal of Political Economy, [online] 23(2), pp.183–187.