Lessons from building mobile-friendly, accessible data tables

This is the fifth post in a series on accessibility from Shopify’s UX team. We’re publishing posts every two weeks. You can check out the introduction here.

Last December I joined the Reports team at Shopify to build a mobile-friendly solution for data tables. Reports provides our merchants with data that helps them make decisions about their store, and in most cases this data is presented in tables. For a while, these data tables were a big pain point for mobile users, as the small screens would squish the tables making the content illegible.

The designers on the Reports team came up with a slick solution for mobile data tables: sticking the leftmost column to the side, and have the rest of the table scroll beneath it. This allowed users to view the full table regardless of the number of columns.

This is the fifth post in a series on accessibility from Shopify’s UX team. We’re publishing posts every two weeks. You can check out the introduction here.

Last December I joined the Reports team at Shopify to build a mobile-friendly solution for data tables. Reports provides our merchants with data that helps them make decisions about their store, and in most cases this data is presented in tables. For a while, these data tables were a big pain point for mobile users, as the small screens would squish the tables making the content illegible.

The designers on the Reports team came up with a slick solution for mobile data tables: sticking the leftmost column to the side, and have the rest of the table scroll beneath it. This allowed users to view the full table regardless of the number of columns.

Load article and continue reading - 6 min read