Page Comparison

Accessible data visualization

• Many accessibility best practices make things easier for ALL users

• Some of these best practices support some telemetry use cases

https://www.logianalytics.com/dashboarddesignguide/using-the-right-visualizations/

• Found this website and it outlines nicely different types of data visualization and their application (e.g. line chart for trends, bar charts for comparing categories) ^^

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

• 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

      Image RemovedImage Added

  • 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 way 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.

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.