Fundamentals of Dashboard Design (FODD)

As a designer, I always felt to describe the way a designer sees the world or a design.

I’ve seen the development of a “Dashboard”, from where it was a term in automobile industry to now where it is an Informative tool in Business Intelligence. Believe me, I’ve been a part of this growth and I feel the meaning to this word has gone manifold since it has become an integral part in BI.

I still remember my FOD classes 13 years back, when I used to study Design, and now that I have practically explored the real meaning to this word, I can say that they inculcated the Design into my DNA and now I always see the world or anything in a Designer’s perspective.

Good Dashboard design is important to increase user adaptation and also to prioritize the way information is being presented to the users. But the real challenge for a Designer, comes when one has to create a concoction of design with FOD, Business and Technology, in a way that the simplicity of design is never lost and the motive of design is supplied in a way that user needs not to spend much effort in understanding the design rather they should understand their business.

Design – A Designer’s Perspective

In any kind of design work, there are “Elements” and “Techniques” that are used to achieve certain “Effects” and “Feelings”.

fodd_01

Knowingly or unknowingly, a designer always uses the concepts of FOD in most of their designs. A good designers sometimes disregard the principles of design, however, there is usually a compensating merit attained at the cost of this violation. Unless you are certain of doing things, it is best to abide by the principles.

These fundamentals works on human behavior for dashboard design. This will really help you to understand each of the elements and provide examples of combinations that can be used to maximize the impact of a dashboard.

Elements

  • Shape
  • Size
  • Direction
  • Hue
  • Saturation
  • Value

Shape

The simplest definition of shape is a closed contour, an element defined by its perimeter. The three basic shapes are: circle, rectangle (square) and triangle you might found this almost on every dashboard. Form is the shape and structure of a dimensional element within a given composition. Form can be both two-dimensional and three-dimensional and can be realistic, abstract or somewhere in between. The terms form and shape are often used synonymously, which is why they are both included here. In reality, form is derived from the combination of point, line and shape.

fodd_02

Size

Size only takes on meaning when compared to other object of different size. Bar chart or pie chart is the best example of the size on dashboard. It creates interest and depth by demonstrating how each item relates to each other based on size.

fodd_03

Direction

All lines/shape have direction – Horizontal, Vertical or Oblique. Horizontal suggests calmness, stability and tranquility. Vertical gives a feeling of balance, formality and alertness. Oblique suggests movement and action.

fodd_04

 

Hue, Saturation and Value

Color is light reflected off objects. Color has three main characteristics:

  • Hue or its name (red, green, blue, etc.).
  • Value (how light or dark it is)
  • Intensity (how bright or dull it is)

Saturation” refers to the AMOUNT of color.
Value” refers to the darkness or brightness of a color. I think of a color’s “Value” as how much black has been added.

Techniques

“Techniques” can be applied to “Elements”. Some of them are

  • Comparison
  • Contrast
  • Repetition
  • Proximity

Comparison / Juxtaposition

Balance in design is similar to balance in physics. A large shape close to the center can be balanced by a small shape close to the edge. Balance provides stability and structure to a design. It’s the weight distributed in the design by the placement of your elements.

We may place two shapes side by side with no change in their physical appearance. One might use this technique when there are two metrics that are important to regard with equal weight in comparison to one another.

Contrast

Contrast is the juxtaposition of opposing elements (opposite colors on the color wheel, or value light / dark, or direction – horizontal / vertical). Contrast allows us to emphasize or highlight key elements in design.

Repetition

Repetition strengthens a design by tying together individual elements. It helps to create association and consistency. Repetition can create rhythm (a feeling of organized movement).

Proximity

Proximity creates relationship between elements. It provides a focal point. Proximity doesn’t mean that elements have to be placed together; it means they should be visually connected in some way.

Effect

 

  • Harmony
  • Agitation
  • Rhythm
  • Focus
  • Balance
  • Hierarchy

 Harmony

Harmony in visual design means all parts of the visual image relate to and complement each other. Harmony pulls the pieces of a visual image together. Harmony can be achieved through repetition and rhythm. Repetition reemphasizes visual units, connecting parts and creating an area of attention.

fodd_03

Now you know how designer see the world with FOD (fundamental of design) in their daily life and how these “Techniques” used on the “Elements” to create certain “Effect” (harmony, agitation rhythm, focus, balance or hierarchy). Good design is all about the right relationship between these fundamentals of design and as a result users attached meaning to these relationships. With the right string of this design principle user feelings lead to “Emotional Design”.

I was told that there is nothing called “Emotional Design” in business. But on contrary, I feel user’s emotions are important and are capable of taking effective and sound decisions.

In the below image by contrasting “Saturation” and “Hue”, we can create “Hierarchy”. This results in the most “Out-of-place” color getting the attention first. The whole Emotional Design which is ultimately the design “Elements” and “Techniques” create “Effects” that help Human emotion which drives a decision.

fodd_05

In the image there is “Contrast” and not sameness, so the user feels some discomfort driven by the dashboard “Uh-oh” color, red. This results in the user feeling alarm.

In future Dashboard Design articles I will explore additional ways to leverage the fundamentals of design to improve user experience of dashboards and showcase Emotional design.

Epilogue

Writing an article on some topic is a painful process. And then you start the even more painful process of revisions, editing, and layout! But like all things that stretch and challenge us, when you reach the end, you find the pride and joy of accomplishment.

For this, I have many people to thank. In no particular order, my thanks go to…

Vikas Gupta, It really feels so amazing to work in a positive environment with you. Working under your management is indeed a great opportunity for any individual like me. Thank you, Vikas, for showing me the true meaning of Dashboard.

Hitesh Singla, for stepping in at the last minute to, help me get across the finish line.

2 thoughts on “Fundamentals of Dashboard Design (FODD)

  1. I designed dashboard for 8years.
    Dashboard design user’s environment.
    Many user are different environment, and needs.
    Even though it is very interesting field as a designer.

  2. Good perspective on the UI design for BI and Analytics solutions. You are right, there are so many elements of design which only a seasoned designer with a eye for detail OR a discerning ability can detect if these elements are required, not required, desired or a must to create that overall perfect dashboard feel liked,loved and happily adopted by a Business User.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s