TableHero.jpg

Table Component

Table Component

Role: UX Architect

In order to create a unified user experience for an insurance company, I was tasked with creating a system of tables that works across all different existing products and serve future streams and features to come.

There were several varied examples of different table components across various product sites we were using, leading to a confusing experience when learning about a product from one page to another.

Some of the key pain points for users were:

  • Disjointed experience going from Desktop to Tablet to Mobile screen sizes.

  • Difficulty reading and scanning tables especially on Mobile screen. For example, some tables not being able to see header or first column or row titles when scrolling can lead users to getting lost in table.

  • Longer time spent to understand the table layout and structure. Not all table design are laid out from user’s perspective in mind, for example, which row and column to highlight for contrast isn’t always clear why they were done so in the first place.

My main goal was to create a system of tables that are easy to read and scan so that users can easily find information, patterns and insights from them.

I’ve identified 3 major variations: Simple, Comparison and Technical within table component that can serve our current content, as well as room to grow and develop as complexity increases. With the system in place, I detailed UX guidelines to provide details of what the variations are, what the best practices, interactions and behaviour as well as style, format and content guidelines.

 

Definition

Tables are used to display data in a structured format, organized into rows and columns. Tables should be easy to read and scan so that users can easily find information, patterns and insights.

 

Best Practices:

  • Tables should always contain row or column heading.

  • Avoid using tables for non-tabular data like list with a single column.

  • Column should follow the same alignment for both column header and column cells.

 

Interactions/Behaviours:

  • Tables are usually presented at full width, however, can also adapt to the space available depending on screen sizes. The content within a cell will move to the next line when condensed to a smaller screen size.

  • For lengthy tables with rows beyond 12, consider using zebra stripes. When row header container with coloured background or grouping is applied to technical table, M to XS Screens ignore zebra stripes applied from XL to L screen sizes.

  • Sticky headers are used for larger tables, allowing users to keep track of where they are.

  • The interactions and behaviours for tables are dependent on the content within them. 

Responsive Behaviour for simple table:

  • XL, L – When copy within cell are too long, use coloured container for row headers.

  • M, S, XS – When coloured container is used for row headers, row headers become stacked with following 2nd and 3rd columns nested below each corresponding row.

Responsive Behaviour for comparison table:

  • See All Tab

    • Dot navigation from carousel component will behave differently for tables, as dots will indicate the total currently displayed columns.

    • XL, L – Row headers will always have coloured container.

    • M, S, XS – Row headers become stacked with following 2nd and 3rd columns nested below each corresponding row. Touch-enabled devices have the ability to swipe left and right between column until user reaches the end column. Tabs and column headers are fixed at the top of the screen until user reaches the end or bottom of the table.

  • Compare Tab

    • Dropdown column header allows users to select which column they want the respected column to display. Dropdowns for tables are prepopulated as default state and table dropdown list will display all items excluding the currently selected column header.

Responsive Behaviour for technical table:

  • Highlight feature can be used to provide users to select a column they would like to focus their attention. Highlight feature can also be used to feature a product or column that are the most relative to the user.

  • M, S, XS – Technical Table stack from M to XS screens. Depending on the content of the table, it can either stack column or row. Grouping cells vertically or horizontally will a help user see content better in relationship to each other, making it easily visible and scannable while providing additional screen real-estate for M to XS screens.

  • Any grouped cells will carry grouped columns and visual elements like line boxing and background colour throughout all screen sizes.

 

Content Guidelines

  • Content within cells can be left, center, or right aligned and should be always aligned with the column header. For languages that read left to right, use left align, icons or visual elements should be aligned to center and numbers and language that read right to left, use right align.

  • Keep the row and column headers short.

  • Limit the information or data for each cell. For example, use labels to limit the lengthy content that can repeat throughout the cells.

    Recommended character count max. (with spaces):

    • Row/column header – 25 chars

    • Cell copy – 80 chars

    • Button copy – 15 chars

    • Link copy – 35 chars

 

Variations:

There are three types of tables:

Simple

  • Simple table presents content in a tabular format best used to display tables with two to three columns.

Style/Format:

  • Header = Heading Level 3

  • Can contain primary button

  • Can contain row header container with background colour

  • Cell copy in paragraph formatting

  • Use horizontal lines from all screen sizes but use vertical lines from M to XS screens only.

  • Header line can be used with the brand colour


Comparison

  • Comparison table presents content in a tabular format best used to compare features or data.

  • Comparison Table should use 5 or less columns.

Style/Format:

  • Header = Heading Level 3

  • Row header container with background colour

  • Cell copy in paragraph formatting

  • For see all tab, use horizontal lines through all screen sizes but use vertical lines from M to XS screens only. Use both vertical and horizontal lines for compare tab through all screen sizes.

  • Header line can be used with the brand colour


Technical

  • Technical table presents content in a tabular format best used with more complex or data centric content. It is used to allow information to be readable and obtainable with minimum effort from the user as possible.

Style/Format:

  • Header = Heading Level 3

  • Row header container is filled with background colour

  • Cell copy in paragraph formatting

  • Can contain a secondary button

  • Header line can be used with the brand colour

 

Template Examples:

Here are the tables being used in page templates to visualize and show them in context with content.

 

glc implementation:

With the final design, I’ve

 

The importance of good table design

The new system of tables has proven to increase readability and scan-ability of data tables while providing uniformed user experience across different stream of products. With adoption and implementation within the design system, the MVP version will continue to adapt and evolve to better serve the users to provide tables that takes the hard work out of data so that the users can get to the information and data they need quicker and easier.

Through the experience of creating a table system, I’ve learned that how valuable it is to do most of the heavy lifting for the users from UX perspective through design so that users won’t have to when they are presented with the information.