Small guide to making nice tables [pdf]

https://inf.ethz.ch/personal/markusp/teaching/guides/guide-tables.pdf

by murkle • 7 years ago

167 43 7 years ago

inf.ethz.ch

irrational• 7 years ago

This is talking about print tables. Do the same design principles apply to online tables?

Yes, many of the rules do. Here is a presentation by Richard Rutter (co-founder of a design agency and an online font service) on Web Typography. The presentation includes advice on how to improvement table readability and appearance.

Link to the segment on tables (approx 7 mins length):

Set tables to be read

https://youtu.be/hbIZX6tE9JY?t=704

uxcolumbo• 7 years ago

Here is a good guide to apply to tables used on the web

https://alistapart.com/article/web-typography-tables/

yosamino• 7 years ago

I'm fond of the condensed way similar advice is presented here: https://www.darkhorseanalytics.com/portfolio/2016/1/7/data-l...

pgtan• 7 years ago

Page 10/11: -94.7351 etc. is so wrong, my eyes are bleeding! Should be typeset in math mode like $-94.7351$ (or whole column in math) to get at least the minus sign right.

ygra• 7 years ago

Not using math mode (along with improper font setup) here also uses a different font for digits in the header and the body, which looks a bit weird.

michaelcampbell2• 7 years ago

What about it is "wrong"? Perhaps I'm scarred by my own institution's predilection of left-justifying (or center) columns of numbers that this seems fine to me.

dmlorenzetti• 7 years ago

As shown, the minus sign is rendered as a hyphen. This looks glaring when you're used to math mode's thinner, longer minus sign.

To see the difference, typeset this with LaTeX:

    \documentclass{standalone}
    \begin{document}
    -50 vs $-50$
    \end{document}

eatbitseveryday• 7 years ago

The following tables are taken from the magazine Economist

The Economist is in fact a newspaper.

Edit: do people think this is a snobby comment? The Economist maintains this despite publishing in a medium which looks like a magazine.

papln2• 7 years ago

Getting offended on behalf of others is controversial in general, but in this case it's plain silly.

URL: subscription.economist.com/Magazine/Subscribe

www.economist.com/about-the-economist

Frequently asked questions
Why does The Economist call itself a newspaper?
[...] By the time the transformation from newspaper to magazine format had been completed, the habit of referring to ourselves as “this newspaper” had stuck.

redbergy• 7 years ago

I found the lack of any horizontal line separating rows in the given examples of good tables off-putting. In the examples given from The Economist they are using horizontal lines and I agree those are great examples.

bhaak• 7 years ago

I think it depends on the width of the table.

For a small 3 column table, it is not necessary. The tables on the page "Example Tables I" could have done without horizontal lines and a little more space between rows would have been enough.

pault• 7 years ago

This is an annoying trend; it's true that row lines add a lot of noise that distracts from the content, but you should use color and value to reduce the dominance of the table lines, not remove them altogether.

rossdavidh• 7 years ago

Hmmm...I had the opposite reaction. "Good guidelines, why don't their Economist examples follow them?" I find very light shading to be way better than horizontal lines.

hammock• 7 years ago

In most cases they are using dotted horizontal line which is better than a solid line.

In Google Slides or Excel it's easy to use low-contrast shading between dark and light backgrounds which is another less-intrusive way to delineate rows without using a solid line.

papln2• 7 years ago

Those "nice" tables are not very nice.

Upvoter33• 7 years ago

Tufte has a lot to say about this (and many viz things) - worth reading his books, really. The general guideline I try to remember is "facilitate comparison" (present things that you want the viewer to compare/see near each other) and "maximize data/ink ratio" (put as much data, and as little other stuff, on the page). The latter, in particular, tells us to reduce lines from tables as much as possible; I often find just one (not the three this approach recommends) to be plenty, depending on the data. That is, just the line separating header and data. Of course, YMMV :)

mrpigeonpants2• 7 years ago

Great points! Those are wonderful design principles, and can really help everyone in evaluating the layout of a table.

simonebrunozzi• 7 years ago

For a moment I thought this was a guide for physical tables (like the ones you use to have dinner).

kawfey• 7 years ago

Likewise...with HN you never know what esoteric guide or advice lies beneath a somewhat vague headline, and in almost every case it's unexpectedly convenient or interesting.

zild3d• 7 years ago

Me too, was excited to learn about some nice wood working :(

Isamu• 7 years ago

Here is the advice:

- Avoid vertical lines

- Avoid “boxing up” cells, usually 3 horizontal lines are enough: above, below, and after heading (see examples in this guide)

- Avoid double horizontal lines

- Enough space between rows

- If in doubt, align left

I agree with this, although some of his examples I would tweak slightly, and sometimes I wonder about how much better "align left" ends up working.

garettmd• 7 years ago

I was honestly expecting (and hoping) this was an article on carpentry...

keeganjw• 7 years ago

Haha same. Disappointing.

lelima• 7 years ago

I though it was about database tables!

Interesting to see how different backgrounds change your first impression.

mrpigeonpants2• 7 years ago

Weighing in as a UX designer. I appreciate the attempt to encourage people to think about design, but this guide has issues.

What's wrong with the advice:

-Removing horizontal lines decreases readability in the complex examples given

-Vertical lines are very helpful when there are more than three columns

-Serifs have actually been found to be more readable due to their distinct letterforms and can be comprehended more quickly. San-serif fonts are fine too though. Basically, choose a font that has good legibility.

-Don't rely on light gray lines, because they might not be visible on all screens, or in various environments, and likely won't translate to print

-Double horizontal lines for column headers are fine.

-Overall, if you're presenting important information, usability is much more important than minor aesthetics.

Here are some more actual tips for laying out tables:

-Ensure that if a horizontal line needs to be scannable, that it actually has enough padding, or a horizontal separator, be it a dotted line or some other type of visible anchor

-If columns have a lot of information, a table may not be sufficient. Consider aggregating individual rows into a card format.

-Padding is your friend. Also, be consistent with it. A table with too little, but consistent padding looks better than one with more breathing room and inconsistent padding.

-Most information should be aligned left. One exception is currency. That should be aligned right

chrisseaton2• 7 years ago

You're just countering his subjective opinion with your subjective opinion.

It's like he said he prefers cherry pie, and you're saying 'no that advice has issues, I prefer apple pie.'

kemitche• 7 years ago

Sure but is that a problem?

If the originally submitted guide is admittedly subjective, then it seems like sharing different subjective viewpoints (with reasoning) in HN comments is a great idea. If it's a subjective thing, I'd rather hear from several viewpoints before making decisions about how to handle my own tables.

RivieraKid• 7 years ago

There is an objective truth to design, for example one table style can be faster to read or more visually appealing when averaged over the population.

OP is just expressing his subjective view about which design is objectively better based on his expertise as a UX designer.

loco5niner• 7 years ago

I thought the "bad" tables were the "good" tables until I was 6 pages in.

To each his own, I guess.

digitalni• 7 years ago

Same here. You're not alone

lazzlazzlazz• 7 years ago

These tables are almost unusable. They look better in the most superficial possible way. They're more "pleasant", but absolutely not better for a serious use-case.

bonoboTP• 7 years ago

I make my tables like this guide recommends, but more because I know that it's the "professional", "publication quality" way that the people "in the know" prefer. I myself don't really feel that strongly about vertical lines but I avoid them to not look ignorant.

It says a lot that the first slide doesn't even say which is the good one and takes is for granted ("Easy decision, isn’t it?") but some here have thought the bad ones are the good ones.

Shows that it's more of a fashion thing. (Not counting the intentional mistakes in the "bad version" like kerning "fi lter" and other spacing errors in the math, like the exponent in the top right formula -- seriously why introduce those additional mistakes, why not just make the tables themselves different?)

bjourne• 7 years ago

It says a lot that the first slide doesn't even say which is the good one and takes is for granted ("Easy decision, isn’t it?") but some here have thought the bad ones are the good ones.

It's because people on HN loves to be contrarians. The tables with the double lines really do look like garbage. The examples aren't doctored. One variant is what you get with Latex's builtin table commands, the other with the booktabs package.

ivanhoe• 7 years ago

IMHO author is missing the point here, lines are not just arbitrary decoration, they've got an important purpose to guide the eye. If line is removed, it needs to be replaced by enough white space that will separate the content visually. The 1st example fails horribly with this, it's impossible to see where the 2nd row begins without reading the whole text. Also, the longer a row/column is, harder it is to follow the separation and line is a better choice in those cases (or more spacing is needed). There's nothing particularly special about these "rules", they're just the normal typography practices and some common sense applied to tables.

thatoneuser2• 7 years ago

No offense but when you compared and said which is better - I had to read the rest of the slides to figure out which one was supposed to be better. Too many lines is gaudy but also can provide high level information. Too little lines might look "nice" in its own sense but then you have a lot of double checking.

lstamour• 7 years ago

(2010)

fuzzieozzie• 7 years ago

Bulma.io does most of this (web site tables!)

uptownfunk• 7 years ago

This is some good advice for making PPTs or Excel spreadsheets as well.

Small guide to making nice tables [pdf]

Related Stories