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.