https://www.nngroup.com/articles/dashboards-preattentive/ – I highly recommend you read this
At-a-glance, single-screen view of the data that they monitor, and must quickly communicate important information to a user.
Q: What kind of dashboard is telemetry?
Operational dashboards must impart critical information quickly to users
Time-sensitive tasks
Typically present data that is continuously updating and changing
Analytical dashboards provide the user with at-a-glance information
used for analysis and decision making
not as time sensitive as operational dashboards.
Preattentive features: Things that “pop out,” without the user having to engage in a visual search to locate it.
Line length (longest line will be obvious), area, angle, 2D position, and color (lime green against grey – don’t need to look for it)
Position and length are great for communicating quantitative values and magnitude
Color should not be used to communicate information about quantitative values or magnitude
Linear graphs (scatter plots) – use to compare variables on x & y axis
Bar graphs – rely on bar length (esp in ascending/descending order) to communicate info quickly
Circular, area-based, and angle-based (dial) graphs are difficult to interpret quickly or accurately – should be avoided most of the time
Bottom is tree map. Can be useful at representing complex data in a compact overview IF there is leisure time to explore.
Angle-based graph: unless very disparate, hard to tell quantities
is light blue and yellow the same size? who knows
3D graphics bad. Distorts the shapes and alignment of the visual features that are showing the data
don’t sacrifice usability for aesthetics
also much more difficult for user to visually line up the top of the bar with the numerical value/grid line
Pie graph: a slice that’s closer to the viewer will appear larger than a slice at the back that’s actually the same size (things closer to you are larger)
Use Color, Shape, and Grouping to show categories
items that have similar shape or color are usually perceived as related
don’t use colour as primary grouping cue: colour blindness, computer screen in sun
https://www.nngroup.com/articles/closeness-of-actions-and-objects-gui/
Q: How will the data of telemetry be grouped?
Things that are seen close together are seen as related
also applies to same colour or shape, things that move or change together, and things that are in the same enclosure (box)
When buttons, drop-downs, checkboxes, or other actionable GUI elements are too far away from the objects they act on, people don't see them. Often, users don't realize what they're missing and simply assume the features aren't available.
ex// users overlooking availability in other colours and sizes
https://www.toptal.com/designers/data-visualization/data-visualization-best-practices
Humans can’t comprehend numbers larger than 5 without some kind of analogy or abstraction
Avoid unnecessary visuals by defining purpose and priorities
Ensure that the dashboard is compatible with the audience’s expertise
Types of Graphs:
Coherence helps design fade into background enabling users to easily process information without being “in your face”
Hierarchy of data shows various data points in a relevant way. Can sort highest to lowest to emphasize large values or important categories prominently
order, colour, size, interactivity can help interpret data more easily
beware of creating bias when there shouldn’t be any
Colour
represents and differentiates information. key factor in user decisions
subtle palettes make charts harder to analyze
even harder to read for people with vision impairments
use large font and contrast
complement colour with use of pattern or texture to convey different types of info
use text icons to label elements
don’t use font with serifs
16 px
Data distortions
don’t use 3-D
https://medium.com/design-ibm/designing-for-data-visualization-c2b18359878c
Data visualization should be as immersive as possible to uncover insights and delve deeper into data
data exploration isn’t the end, but rather a means to gain as much use out of the data as possible
https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a
Provides overview of different table styles
Spreadsheet style grid (horizontal and vertical lines) recommended for data-heavy tables
Zebra styles (alternating rows are shaded) also good
Shade the background of a row if it’s different from other data in that column
For example, if the table is showing a bunch of values, and the bottom row is the average, shade the bottom row to differentiate it
Change colour of cell background to show data trends
red if trending down, green if trending up
watch out for colourblindness
Align textual data to the left (ie. Name)
Align numeric data not related to size (ie. date, zip code, phone number) to the left
Align numeric data related to size (ie. count, percent) to the right
Align headers according to their column data
Use tabular (monospaced) number fonts to make the table easier to scan
Row heights
Condensed: 40px
Regular: 48px
Relaxed: 56px
Padding
Maintain a minimum of 16px padding on both the right and left of each column. This means the space between each column should total at least 32px.
Subtext – the little grey text. Saves room so you don’t have to add another column
Fixed Table Header – keeps everything in context
Fixed Table Column – keeps everything in context if user is side scrolling
Hover Actions
Present common actions when a user hovers over a row.
This reduces visual clutter but may cause discoverability issues for new users.
Bulk Actions
Allow users to select and update multiple items at a time.
Once the rows are selected, common actions are made available at the top of the table.
This feature can save users a lot of time by batching together repetitive tasks.
Offer Filtering
Only show entries that ___ (ie a value is above 100)
If users want filtering, will need to look into filtering best practices
Pagination
Make Column Data Customizable
Enable users to choose what data is included in their table.
This functionality allows the user to add, remove, and reorder columns based on their use case.
Additionally, this feature can include the ability to save column preferences if repeated use is likely.
Sort Columns
Allow users to organize rows by a specific category.
Any column can be ordered alphabetically or numerically by clicking the sort icon next to the column label.
Resizable Columns
Allow users to expand and contract the width of any column to expose eclipsed data in full
Display Density
Allow users to toggle between row heights depending on their use case and visual accessibility.
Designing Compelling Dashboards: 10 Tips for More Powerful Designs
Proper Use of Colour and Text
There are three types of colour schemes you can use on your charts — diverging, sequential, and categorial
When a central value is shared between both ends, use diverging colour schemes
With numeric or ordered values, use sequential colours
With distinct variables without any order, use categorial colours
Using Effective Interactions
Modern data analytics programs allow users to analyze data with ease using simple, yet effective interactions. These interactions include dynamic filtering, drill-down, and dashboard linking
Dynamic Filtering allows you to add filters to your dashboard so that you are able to pivot your data anytime and gain deeper insights.
With drill-down, you enable hierarchies within your category or data fields, which allows your end-users to do deeper analysis.
In this visualization, you can drill down from different marketing channels into the specific product to gain more insights into what awareness you are driving.
You can also use this for treemaps, which display a large amount of hierarchical data in a compact space at a glance and they show data as part of a whole
With dashboard linking, you are able to link data points or visualizations to other dashboards
In this visualization, you can first set up an overview of a marketing dashboard that presents the ongoing results of a marketing campaign. Then, you can set up a link between this dashboard and a more detailed one about each of the campaigns you are running.
You can also use images and text fields to create landing pages or right from within dashboards to link as well.
Highlighting What’s Important
Highlighting key points, trends and bounds within your data can be crucial to providing your end users with the quick insights that they need
By using series highlighting, it allows the user to focus on what you want them to look at
You can bring attention to key data points with conditional formatting, which helps set bounds that correlate to variations in your data
Chart annotations can provide your consumer with insights deeper than data points and can help support your storytelling as a whole
Outlier Detection allows one to highlight anomalies or deviations in a data set quickly
Time Series forecasting allows you to make predictions for future data points based on past and present data, giving your consumers predictive analytics
Take Advantage of Visual Cues
https://www.gooddata.com/blog/5-data-visualization-best-practices-0/
https://www.storytellingwithdata.com/blog/2018/6/26/accessible-data-viz-is-better-data-viz
https://help.tableau.com/current/pro/desktop/en-us/accessibility_best_practice.htm
A useful to demonstrate performance is the use of colour, arrows, text, and various other visual cues. These help viewers see at a glance how to interpret the information.
While using colour is extremely useful in distinguishing various marks, symbols can be considered as well.
Aggregate Data
Even if there is a lot of information you want to communicate in your view, dense views can be extremely difficult to navigate. Aggregate data whenever possible to reduce the number of marks showing.
Include key data points but limit the number of marks to make it much easier to read and understand.
If we are only including key data points on an aggregated view, there could potentially be an option to focus the view on specific data sets for underlying details.
Too many data points
Aggregated graph using the same data
Labels
Labelling data directly can help limit the burden placed on users. Decreases the work of scanning back and forth trying to match the data with the legend. This will likely get confusing depending on how much data we are showing.
Employ a takeaway title where people know what to look for in the data when they read the graph takeaway in the title. When the graph title includes the point of the data, the cognitive load of understanding the chart decreases.
Could include extra explanatory text on any legends or data filters to provide additional context on what the view is showing. ← may not be as necessary if our users are already familiar with the dashboard and know what they should be looking for.
Too little text makes it less accessible
Shows the same view but includes explanatory text in the title and caption making it more accessible to users.