Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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

  • No labels