Displaying Data

Displaying Data

Data is useless without the ability to visualize and act on it. What is seen, where it is presented, and how interactions are afforded, does influence actions.

Less is more

Hick’s Law describes that the time it takes for a person to make a decision depends on the choices available to him or her. So if the number of choices increases, the time to make a decision increases logarithmically.

Unnecessary information and options compete with relevant units of information which diminishes their relative visibility. Users often receive overwhelming options to choose from in cases where it is not necessary.

Restrict available options to the minimum to increase relative visibility of important interface elements and reduce the user's cognitive and operational costs.

Order

The order is the arrangement or disposition of options and data records concerning each other according to a particular sequence, pattern, or method.

When sorting data consider this set of principles:

  • By default, the most common option should be selected
  • If there is a clear difference in usage frequency for alternatives, the most frequently picked options should come first
  • The default order is alphabetical order
  • If there is a meaningful other order, use it (e.g., most recently created first)
  • Do not use a random order
  • When listing applications, always display default applications first and custom applications second (both in alphabetical order)

Filtering

Help users by providing a data string filtering component in every record list to quickly filter records.

Data tables

A table is the most basic format for displaying a list of records. Each record is a single row of data that begins with the record’s primary field and shows additional fields in subsequent columns. The data is labeled using column headers that can be interactive.

This display type is appropriate for large numbers of records in which all columns must be visible, allowing users to quickly scan and navigate the list using sorting, filtering or scrolling.

We provide workarounds for narrow viewports. Check tables for more info.


Basic principles when building a table:

  • Tables must always be responsive
  • Numerical data is right-aligned
  • Textual data is left-aligned
  • Buttons are right-aligned
  • Headers are aligned with their data
Status Name Model Serial number Group Registration date System ID IMEI Alarms
Cloudgate
M2M-111111-01
Tieto Building
35196000
Groundfloor
632915011
clientSSL
MacBook Pro
C02J73SUDKQ4
pryn group
633334444
ntc_6200
165711153700502
Demoboard
February 17, 2016 11:24 AM
635184236
359054050121023
RaspPi BCM2709
0000000071d36506
February 18, 2016 12:46 PM
635236265
March 1, 2016 2:06 PM
638073731
clientSSL
NTC-6200-02
165711153701256
KATANA
May 12, 2016 2:28 PM
651642958
359054050128762
OBU_GT
400
MyWerk
May 31, 2016 5:56 PM
655387898
400
NTC-6200-02
165711141901287
SCADA
June 2, 2016 9:49 AM
655796515
359054050013873

List groups

List group is a flexible and powerful widget for displaying a list of records.

Primary fields are visible by default. Store additional fields in a collapsible container allowing a less cluttered and responsive layout.

Temperature

Demoboard Energy Monitor

Speed

Demoboard Energy Monitor

Alarms report
Last week Last month Last year  
Events report
Last week Last month Last year  

No data received from device within required interval.
25 October 2016 22:23  
 My Device My Device

No data received from device within required interval.
25 October 2016 22:25  
 OBU-GT_abcd OBU-GT_abcd

Timeline list

Timeline list displays a chronological timeline of activity on a given item. Supports .active for highlighting (e.g., switching to a previous history state).

Split view

Ideal for working through a queue of items. It allows the user to stay on the same screen while viewing and editing multiple items.

Simulators


Split view

Simulators detail open


Split view

SmartREST templates


Split view

Tree list

Useful for displaying large amounts of hierarchical data, where parent-child relationships group records.

A plus button at the beginning of the row shows and hides nested children. It also indicates whether a record has children. Children are indented below their parent to communicate their position in the hierarchy.