Common UI issues with tables
This blog will outline some of the common problems we have encountered in terms of table design, layouts, and interface challenges that we have experienced on projects. We will discuss some of the common concerns but also include recommendations and some useful resources.
There is a myriad of great resources that cover this topic in great detail and provide a fantastic guide on best practice and design.
- Design better data tables by Andrew Coyle
- The Ultimate Guide to Designing Data Tables by Molly Hellmuth
- Designing better data tables for enterprise UX by Lalatendu Satpathy
- Web Typography: Designing Tables to be Read, Not Looked At by Richard Rutter
- Design Better Data Tables by Matthew Ström
- Designing Tables for Reusability by Havana Nguyen
- Mobile Tables: Comparisons and Other Data Tables By Amy Schade
Common problems
We would like to detail some of the common pitfalls we have encountered in terms of user interface constraints and content requirements but also offer recommendations in terms of best practice to ensure a better experience for your users.
Are tables suitable?
When used in an appropriate way, tables can help organise tabular data in a clean and readable way. It is important for designers, developers and editors to ensure that tables are used in the right way.
Appropriate use of tables
Tables can be useful to present tabular data in an organised way when dealing with the following types of data:
- Quantitative information
- Data comparison
- When you have more than one set of values that have a direct relationship
Poor use of tables
Tables can often be used in the wrong context. This can lead to user interface inconsistencies, accessibility issues and poor layouts. Tables should never be used for laying out content or as a workaround to organise content into columns and grids or in the following circumstances:
- Should not be used to layout content
- Should not be used to layout lists or content blocks
- Should be used as a workaround inside a Rich tech editor inside a content management system
Alternative options
Before using a HTML table as a content solution, it is important to consider if alternative User interface elements are more appropriate:
- Consider grouping content by heading and paragraphs
- Consider list variation, unordered lists, ordered lists, definition lists
- CSS grids can be used to layout information into columns
Tables with too much data
Tables can often be seen as a solution to transcribe large spreadsheets into web form. Expectations for the volume of content to be included can be often overestimated. Lage spreadsheets do not translate well into standard table layouts and present the following challenges:
- Restrictions in terms of screen space for desktop and especially mobile
- Restrictions in terms of balance and clarity
- Lengthy data can break cells and lead to poorly formatted content
Simplifying content
Complex data tables need to be analysed and summarised to be suitable for web.
- Prioritise Users needs and focus on what’s important.
- Simplify content for web
- Synthesise content
- Ensure columns are clear and easy to read
- Consider what content can be moved to a detail page
- Consolidate actions
- Simplify design
Addressing Complex tables through design
There also ways to extend tables through creative design and development approaches that help to retain clarity and consistency for layout but offer ways for users to expand or view additional information when needed.
Some ideas include:
- Expanding rows
- Use of search and filters
- Option for users to customise a table view
- Sorting and advanced filtering
- Freeze columns
The following articles provide some great ideas on how to extend table functionality.
Tables need to display on small screens
Designing readable tables that work for small, cramped resolutions present major challenges. Tables do not respond well to smaller screens, however there are ways to address and support this:
- Reduce font size but ensure that columns are still legible.
- Horizontal scroll – introducing a horizontal scroll allows users to swipe left and right. This can be a low impact solution for scrolling through wide tables on mobile.
Design recommendations:
Horizontal scroll
Apply horizontal scroll so that users can swipe right and compare table columns.
Stackable columns for small screens
Consider applying a completely different layout for mobile. Table columns can be stacked to fit the table into a much narrower viewport. This approach is less compact and takes more vertical space but prevents the need to scroll horizontally.
Let users select the data to view
Load minimalistic table view with core columns but provide filter for user to include more columns where required.
Further reading:
Tables need to be accessible
Users who use screen reader technology need to be supported. This technology assists people with vision deficiency to navigate through websites and applications via the speech output.
Screen readers find it particularly difficult to read through table layouts. Accessibility is an important aspect of public sector bodies are required to comply with web accessibility standards and guidelines.
Common problems with table markup
- Missing table headers
- Missing table captions
- Data Cells with the Appropriate Headers
Recommendation
Wave - web accessibility evaluation tool is Chrome browser extension that provides comprehensive accessibility review of your webpage. This tool can provides comprehensive feedback and identifies issues directly on the page with recommendations for fix.
Further reading on table accessibility:
Tables can be flexible and useful for presenting tabular data however these common issues need to be considered before choosing table structures as a tool for presenting data. It is important to consider:
- Are tables the right interface element to use
- Only display what is important to users
- Large spreadsheets need to be adapted for web
- Consider how tables will display on smaller screens
- Ensure tables are accessible for all users
Are you planning a website redevelopment? Get in touch to discuss your options.