3 ms·

One point which is missing from this article is how information should be aligned and formatted within cells. This is an underrated feature which can really imp

One point which is missing from this article is how information should be aligned and formatted within cells. This is an underrated feature which can really improve table readability. For example, right aligned numbers make skimming by size a bit easier. There's more common UX guidelines but I can't remember them off the top of my head.

lakesare 4y ago
Sounds interesting, please link me to those guidelines if you stumble upon them!
- et-al 4y ago
  Data Looks Better Naked: Clear Off the Table - https://www.darkhorseanalytics.com/blog/clear-off-the-table https://www.darkhorseanalytics.com/blog/clear-off-the-table
  - donkeybeer 4y ago
    The "improved" bar chart looks atrocious. If these are the articles modern designers are reading, its no wonder the state of design is what it is now.
  - lakesare 4y ago
    Hah, it basically goes into denormalisation! This certainly looks prettier than the initially shown full-fledged table structure, however I'm having more trouble reading it - it makes me slightly uncertain what text belongs to what row, and whether I properly track the row lines with my eyesight.
- luckylars 4y ago
  interested too
- warpech 4y ago
  For anyone interested in building data tables for the web or ERP systems, here are the resources that I have collected (in no particular order): - https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1... - https://pencilandpaper.io/articles/ux-pattern-analysis-enterprise-data-tables/ https://pencilandpaper.io/articles/ux-pattern-analysis-enter... - https://www.nngroup.com/articles/data-tables/ https://www.nngroup.com/articles/data-tables/ - https://www.csescienceeditor.org/article/best-practices-in-table-design/ https://www.csescienceeditor.org/article/best-practices-in-t... (this one is about print, not web) - even more guidelines: https://stephaniewalter.design/blog/essential-resources-design-complex-data-tables/ https://stephaniewalter.design/blog/essential-resources-desi...
  - math-dev 4y ago
    Thanks for sharing
math-dev 4y ago
Do Share when you have a moment. Others I have (personal) - Alignment of Headers should match that of content (centre aligned headers = centre aligned content) - Headers should be bolded or another color - Subtotal & grand total should be bolded - Keep same font for both headers & content - Try to keep columns and rows equally sized and spaced - Table heading at the top (IMO) - Avoid using cell (0, 0) that the article talks about All of the above IMO aids in simplifying the table and hence makes the content stick out more. But granted they are more design principles vs. UX so I too would be keen to learn more about UX guidelines to apply
hazelnut-tree 4y ago
"There's more common UX guidelines..." I can recommend the table guidelines from this 2018 conference talk. The advice has not dated and the presenter shows before-and-after examples of making tables easier to read. The section on tables starts at the 11.47 minute mark in the talk: Web Typography (2018) | Set tables to be read: https://youtu.be/hbIZX6tE9JY?t=707 https://youtu.be/hbIZX6tE9JY?t=707

lakesare 4y ago

Sounds interesting, please link me to those guidelines if you stumble upon them!

et-al 4y ago
Data Looks Better Naked: Clear Off the Table - https://www.darkhorseanalytics.com/blog/clear-off-the-table https://www.darkhorseanalytics.com/blog/clear-off-the-table
- donkeybeer 4y ago
  The "improved" bar chart looks atrocious. If these are the articles modern designers are reading, its no wonder the state of design is what it is now.
- lakesare 4y ago
  Hah, it basically goes into denormalisation! This certainly looks prettier than the initially shown full-fledged table structure, however I'm having more trouble reading it - it makes me slightly uncertain what text belongs to what row, and whether I properly track the row lines with my eyesight.
luckylars 4y ago
interested too
warpech 4y ago
For anyone interested in building data tables for the web or ERP systems, here are the resources that I have collected (in no particular order): - https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1... - https://pencilandpaper.io/articles/ux-pattern-analysis-enterprise-data-tables/ https://pencilandpaper.io/articles/ux-pattern-analysis-enter... - https://www.nngroup.com/articles/data-tables/ https://www.nngroup.com/articles/data-tables/ - https://www.csescienceeditor.org/article/best-practices-in-table-design/ https://www.csescienceeditor.org/article/best-practices-in-t... (this one is about print, not web) - even more guidelines: https://stephaniewalter.design/blog/essential-resources-design-complex-data-tables/ https://stephaniewalter.design/blog/essential-resources-desi...
- math-dev 4y ago
  Thanks for sharing

math-dev 4y ago

Do Share when you have a moment. Others I have (personal) - Alignment of Headers should match that of content (centre aligned headers = centre aligned content) - Headers should be bolded or another color - Subtotal & grand total should be bolded - Keep same font for both headers & content - Try to keep columns and rows equally sized and spaced - Table heading at the top (IMO) - Avoid using cell (0, 0) that the article talks about All of the above IMO aids in simplifying the table and hence makes the content stick out more. But granted they are more design principles vs. UX so I too would be keen to learn more about UX guidelines to apply

hazelnut-tree 4y ago

"There's more common UX guidelines..." I can recommend the table guidelines from this 2018 conference talk. The advice has not dated and the presenter shows before-and-after examples of making tables easier to read. The section on tables starts at the 11.47 minute mark in the talk: Web Typography (2018) | Set tables to be read: https://youtu.be/hbIZX6tE9JY?t=707 https://youtu.be/hbIZX6tE9JY?t=707