Add how to provide tabular data

[kelliedesigner]

As a user of the Design System I want to know how to provide tabular data So that there's consistency across products

Links and resources

• https://design-system.service.gov.uk/components/table/

• https://uxdesign.cc/design-better-data-tables-4ecc99d23356

Acceptance Criteria

• [ ] Add table component to the Design System

[kelliedesigner]

Example of in-progress Barnardo's product:

[e-booker]

The website & intranet teams identified the following needs:

• I need to be able to create a table with fixed columns so I can show content consistently - for example, for each development phase of a project without 'Discovery' being much bigger than 'Alpha'
• I need to be able to create a table with visible columns/rows so that a user can read/understand the content within

Example from current CMS for transformation pages:

[e-booker]

Example from GOV.UK:

[jeddy3]

Findings from WebAim:

Use Proportional Sizing, Rather than Absolute Sizing The rule that applies to layout tables also applies to data tables. Let the browser window determine the width of the table whenever possible, to reduce the horizontal scrolling required of those with low vision. If cell widths need to be defined, use relative values, such a percentages, rather than pixel values. Defined cell heights should generally be avoided so the cell can expand downward to accommodate its content - something especially useful for users with low vision that may enlarge text content.

[jeddy3]

Findings from UX Design:

The row style helps users scan data. Reducing visual noise by removing row lines or zebra stripes works well for small datasets. Users may lose their place when parsing larger datasets. Line divisions help users keep their place. Alternating rows (aka zebra stripes) help users keep their place when scanning long horizontal datasets. Although they cause usability problems when there is a small number of rows because users may ascribe meaning to the highlighted rows.

[jeddy3]

Findings from Dark horse as response to this research:

As with charts, rather than dressing up our data we should be stripping it down. For more information on table design

[claire-littley]

Table's v's 'Data Layout'

Here's an example of table I've just designed - (as we know tables are known to be not particularly useable on mobile as the nature of horizontal data is not visible on the screen so swiping left and right is needed)

And here's an example of a 'Data Layout' option - (Which is fully responsive as the figures stack - Useful for simple tables, but still not brilliant for complex data) I'll be showing how these look on desktop / larger screens next -

There are iterations of these designs, ie. no dark blue module header style, this background colour is needed in the context of the page as a whole, so soft grey bg col hdr style could be used.

Hope this is useful! :)

[jeddy3]

From Smashing Magazine:

There is a myriad of table design patterns out there, and which approach you pick depends heavily on the type of data you have and the target audience for that data. At the end of the day, tables are a method for the organization and presentation of data. It is important to figure out which information matters most to your users and decide on an approach that best serves their needs.