Hacker News new | ask | show | jobs
by TheAceOfHearts 1378 days ago
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.

3 comments

"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

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

Sounds interesting, please link me to those guidelines if you stumble upon them!
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-cb48fb9fdf1...

- https://pencilandpaper.io/articles/ux-pattern-analysis-enter...

- https://www.nngroup.com/articles/data-tables/

- 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-desi...

Thanks for sharing
Data Looks Better Naked: Clear Off the Table - https://www.darkhorseanalytics.com/blog/clear-off-the-table
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.
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.

interested too