1. Pay attention to the first 2-3 columns, the ones the user immediately sees. E.g. short or hidden id, short but readable name, useful next column (e.g. sales or views or whatever is the most useful data).
2. Put columns that need to be evaluated together close to each other. On desktop it's easy to see 2 numbers even if there's a column in the middle, on mobile it may require scrolling horizontally.
In summary, just focus on what people want to see at a glance and make it easier for them.
I'm just a user suffering the pain, this is an example of a table I need/want to monitor and it's very poorly done, I need total revenue = sum of column 5 + 7, on mobile it's a very bad experience due to column 6 in the middle, unnecessary width of some columns with repeated text, etc.
https://app.vx.tools/income/BfgMdL4FaNHp5zZpD7WMYG5sZUrCWQPE...
What are the users trying to accomplish? "Look at data in a table" is rarely actually the reason someone is looking at a table. They are trying to gain information in order to... what? Don't let a prior implementation choice lock down your thinking. Ask why are they looking at the data. What are they trying to learn? What next action does the data drive?
Your best UX is going to depend on how those questions are answered. Like you said -- cards are one option to step away from tables. There may be others. But take a step back and understand the underlying problem that the table solves, then see if there is an alternative approach.
Even if you don’t use tailwind the tailwind UI page has some nice example options. It’s nice in that they’re all on a single page so can quickly compare what UX might work for your use case.
Have repeated table header rows <tr><th>…</tr> in between the table data rows to always have the column headers nearby. Amazingly, this just works when dumped into <tbody>.
In my own experience it keeps both me and others from getting lost too easily.
A couple suggestions:
1. Pay attention to the first 2-3 columns, the ones the user immediately sees. E.g. short or hidden id, short but readable name, useful next column (e.g. sales or views or whatever is the most useful data).
2. Put columns that need to be evaluated together close to each other. On desktop it's easy to see 2 numbers even if there's a column in the middle, on mobile it may require scrolling horizontally.
In summary, just focus on what people want to see at a glance and make it easier for them.
I'm just a user suffering the pain, this is an example of a table I need/want to monitor and it's very poorly done, I need total revenue = sum of column 5 + 7, on mobile it's a very bad experience due to column 6 in the middle, unnecessary width of some columns with repeated text, etc. https://app.vx.tools/income/BfgMdL4FaNHp5zZpD7WMYG5sZUrCWQPE...
What are the users trying to accomplish? "Look at data in a table" is rarely actually the reason someone is looking at a table. They are trying to gain information in order to... what? Don't let a prior implementation choice lock down your thinking. Ask why are they looking at the data. What are they trying to learn? What next action does the data drive?
Your best UX is going to depend on how those questions are answered. Like you said -- cards are one option to step away from tables. There may be others. But take a step back and understand the underlying problem that the table solves, then see if there is an alternative approach.
Even if you don’t use tailwind the tailwind UI page has some nice example options. It’s nice in that they’re all on a single page so can quickly compare what UX might work for your use case.
https://tailwindcss.com/plus/ui-blocks/application-ui/lists/...
It depends on the data, but the best implemented some sort of column selector so that unnessesary data isn't even displayed
Bremser (2019) suggests that long beats wide (Maxim 19).
Bremser (2019) https://support.sas.com/resources/papers/proceedings19/3062-...
Have repeated table header rows <tr><th>…</tr> in between the table data rows to always have the column headers nearby. Amazingly, this just works when dumped into <tbody>.
In my own experience it keeps both me and others from getting lost too easily.
I'm developing a web app that makes it easier to view Google sheets (and forms) on mobile. My solution is:
- Expandable rows
- Optional custom row summary
- By default, the row summary is just as much of the row that fits.
- Some data in the row summary is shortened (like a timestamp is reduced to just a date or relative date)
- Sticky header row (with the column titles)
Live demos:
- Custom summary rows: https://veneer.leftium.com/base/g.chwbD7sLmAoLe65Z8/list
- Sticky header rows: https://veneer-nd4fdlulz-leftium.vercel.app/v/s.1mJ_jtZuqL40...
Source code: https://github.com/Leftium/veneer
Sticky first column, and sticky headers.
Sticky first column is a good idea that I have implemented now.