16

There appears to be a trend in web-based table design to use a lot more space for each row in the table. In particular the new gmail default of "comfortable."

I'm also seeing it in the height of the tables the developers I work with are using when they use bootstrap. Here's the example: Table with tall rows

What's behind this change in the size of the row height? More readable, less clutter on a page?

Anyone know of any guidelines for when to make a table more compact and when to provide this extra white space in each row?

Improve this question
3
  • This is the same as increased line spacing and the same reasoning for it applies.
    – Dan D.
    Mar 9, 2012 at 8:01
  • I disagree that this is the same as increased line spacing, although it is related there is a difference. In a table there is generally a physical line separating the text in one row from another, creating a natural break. Furthermore, generally a user's task with a table is different than reading a paragraph of text. Plus, there is another visual difference in my example above, zebra stripes (if that's the right name for it).
    – Laura Beckwith
    Mar 9, 2012 at 8:21
  • I agree with Laura technically, but with Dan in principle: line height is an unavoidable consequence of row height, while lines between table rows are merely optional.
    – Taj Moore
    Mar 13, 2012 at 19:43

7 Answers 7

Reset to default
16

In a nutshell[1]: Information[2] Density[3].

While not exactly research, I can quote from Google themselves as to why they've made the changes: (From the Google GMail Blog).

We also thought quite a bit about the density of the information on the screen in the new design. Gmail’s old design packs a huge amount of information into a small space. While this is perfect for some, many people appreciate a more airy design with more whitespace between lines and elements on the page. This is especially true on larger monitors.

We wanted Gmail to be more attractive and easier to read by default, so if you’re on a larger monitor you will see that the items in your inbox are spaced farther apart than they were in the old design. We believe that this results in a better overall experience, but it does take some getting used to.

...

Our density settings reflect our design philosophy that Gmail’s new look should be more responsive, personal, and beautiful.

Jason Cornwell, User Experience Designer (Gmail)

[1] http://www.codinghorror.com/blog/2006/07/information-density-and-dr-bronner.html

[2] http://hcil.cs.umd.edu/trs/98-13/node126.html

[3] http://www.lukew.com/ff/entry.asp?15

Improve this answer
3
  • @cdeszaq thanks for the edit, some great links you've added but you should post them under your own answer and reap the associated rep. I'll feel guilty getting up votes based on your found links ;)
    – JonW ♦
    Mar 8, 2012 at 19:00
  • 2
    I'm not that big on having multiple answers that say essentially the same thing. I would rather have a single place that has as much info and support as I can. I know from experience that I often end up coming back to Stack Exchange answers I've touched on, so I'm really helping myself as much as I am helping you. And I also don't care all that much about rep. Just in the past few days I've already jumped 100 points, so I'm sure I'll have plenty soon enough. ;-)
    – cdeszaq
    Mar 8, 2012 at 19:03
  • In 2008, Khoi Vinh wrote an article about Gmail and how an increase in spacing would be an improvement. I'm betting the Gmail designers were at least aware of this as they redesigned. subtraction.com/2008/06/17/spacing-is-e
    – mg1075
    Mar 11, 2012 at 22:48
7

Additionally, greater row height also provides for a larger click target for things like inline editing (think of the behaviour of <label for=""> tags).

Improve this answer
2
  • 1
    +1 I think this factor is even more apparent when designing for a mobile interface.
    – cdeszaq
    Mar 8, 2012 at 18:56
  • 1
    Indeed! I meant to write "click or tap target".
    – msanford
    Mar 8, 2012 at 19:16
3

It's simply a readability (and clutter) improvement by increasing line height. Line height is important for readability as you can see from examples here.

Another article suggests a Golden Ratio for line height, though that might be going a bit over-specific.

More generally I think it's simply becoming accepted that whitespace is good and we're shedding the print-based notion that paper is expensive; on the web we have plenty of space to introduce whitespace wherever it's called for.

Improve this answer
3
  • I agree with you about the rise in accepting that good design includes whitespace too, but "on the web" we have pixels instead of expensive paper/ink, especially with mobile interfaces.
    – cdeszaq
    Mar 8, 2012 at 18:55
  • @cdeszaq Right, but the point is that pixels are free (or, rather, their only cost is in usability from scrolling too much, which is more directly offset with usability from being easier to read)
    – Random832
    Mar 8, 2012 at 21:10
  • @Random832, yes, free as in don't directly cost anything, but I don't buy your assumption that scrolling reduces usability to the same extent that more space increases usability. That said, I was mostly playing devil's advocate wrt. the fact that electronic media still retains some constraints.
    – cdeszaq
    Mar 8, 2012 at 21:47
2

My thoughts -

  1. Row height as in Google Mail is good for the way that how different users need to look at the screen. Elders would really like to have a more spacious feel of row heights since that makes them easier to read. Visual sense and Accessibility.

  2. Row height (consider it as imaginary table around) on Google Chrome browser has been minimized on "History" page. This really makes it easier to glance through information, since the rows are much closer and readability increases. As far as I would feel that a larger row space - is inconvenient to me - and also lessens the reading speed considerably, since you need to jump between lines - eye takes time to graze the object on the next line when the row height increases, since the length is more. This is not the case on Mobiles though rows are far apart also.

  3. Row height also links with the Visual styling, as row stripping is a benefactor when you find too many rows are in a page. It also is a way that mobile pages and web pages can be differently looked on row height design. Look at Mobile pages, they never put them closer, its always far apart as in for touch screens - due to clickability issues.

So its accessibility, context and content & visual rules govern the row height.

Improve this answer
1
  • Do you have any research as asked by the OP to substantiate your thoughts?
    – dnbrv
    Mar 11, 2012 at 18:42
1

Visual

  • Look & feel
  • line height proportionate
  • mouse hover color changes
  • If we use various type of font style we need to give some space, so information gets more visibility

Usability

  • Clickable area
  • They can know which row are in if they select particular row to perform
  • We can give more actions while mouse hover
Improve this answer
1

The best practices of Table Design from the book of "Show Me the Numbers, Designing Tables and Graphs to Enlighten"

  • Delineating columns and rows

    • White spaces
    • Rules and grids
    • Fill color

So white spaces is the preferred way to arranging data into columns and rows, which can help the use easily track the content in a row.

Improve this answer
0

The readability improvements are undeniable. They would have been 5 or more years ago.

What I think prompted the trend is people's ability and willingness to scroll. Designers have figured that out. I would sum it up to the advent of fixed positioning, and the ubiquity of mouse wheels, trackpads and swipe gestures that make scrolling easier than ever.

I cannot dig it up but somewhere I read an article about two years ago that said research indicated people don't mind scrolling as much as people thought. It's reached mainstream web design.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.