Articles & Tools > The Dashboard Squint Test
Software usability experts and web designer use a quite effective way to assess the organization of a web page or a user interface, the so called Squint Test. You squint your eyes and make an assessment on the overall layout, of elements that stand out, the visual balance and other characteristics of an effective user interface.
This test can be easily extended and applied to dashboards. Squint your eyes and assess the overall layout.
A) Which dashboard elements draw the most Attention? What color pops up?
In a well designed dashboard, no element should stand out if everything is normal. Most dashboard elements should use de-saturated colors, normal fonts, light borders, visual elements that do not stand out. Pure bright colors should be reserved for small highlight areas that draw the users’ attention. A small bright, red icon can indicate that our production costs are above s defined threshold that requires the manager to take action.
B) Do the dashboard elements Balance? Does the dashboard have a clear organization?
Do the dashboard elements balance? Each dashboard elements has a visual weight and our goal is to get a visually well balanced dashboard. Large, bold fonts, full saturated colors have a higher visual weight, than normal fonts, and de-saturated colors. White space has no or negative visual weight. Heavy Grids have a lot visual weight can have some other unpleasant effects.
C) Do the dashboard elements Contrast, group, align, does you visual grid work?
Do my dashboard elements contrast well against the background? Do they group well, obeying the Gestalt Laws of Proximity, Similarity, Continuity and Closure? Do the tables and charts align well in a visual grid?
Let’s try to assess the following dashboard with the Dashboard Squint Test and the ABC criterions:
This is more or less how it looks when you squint your eyes:
A) Which dashboard elements draw the most Attention, what color pos up?
The elements that stand out most are the column chart and the deviation bar charts in the bottom. The designer of the dashboard used the Excel default blue, green and red which are fully saturated. As dashboard is in the normal state -none of the KPIs exceeds the alert thresholds- no visual element should stand out.
B) Do the dashboard elements Balance? Does the dashboard have a clear organization?
Most of the upper left part of the dashboard uses tables with normal fonts and light gray borders. This part is well balanced and has a neutral visual weight. However, there is too much white space on the very top and bottom right of the dashboard and the bright blue columns are much too heavy and make the column chart the visual center of the dashboard.
C) Do the dashboard elements Contrast, group, align? Does you visual grid work?
The tables in the upper left part are grouped and align well in the visual grid. But there is a lot of white space in the top, and the bottom right of the dashboard it seems. Also the right part of the dashboard does not align in the visual grid.
Let’s now try to fix the design problems staying in the squint mode . First we rearrange the tables and charts to get better visual balance and to align well in the visual grid:
This dashboard looks much better balanced, but still the charts pop out visually for no reason:
This can be fixed by using de-saturated colors for the charts:
Now open your eyes and compare:
