The death of the grey: no more tiger striping rows by default


(Jeff Atwood) #1

I know what you’re thinking. It’s been weeks since we had a good bikeshed discussion!

We have decided to do away with tiger / zebra striping (alternating odd and even background colors on the topic lists), in favor of a simple grey bottom border line between rows:

We feel this change has a number of advantages:

  1. Simpler, no more odd and even row stylings

  2. Less grey dominating the page and fighting for priority with the default grey action buttons, the grey composer, grey numbers in the topic list, grey quotes within posts, grey progress bar, etcetera.

  3. Cleaner, a bit more whitespace with the border-bottom and less visual “blocks” to process

  4. More consistent, it better matches what we do within the topic between posts and have for a long time

We were inspired to make this change by https://forums.meteor.com/ who implemented this some time ago. After we had been thinking about backing away from tiger striping for a while, as @sam said recently:

I am really not sure about zebra striping anymore, I think its actually causing more harm than good, the subtle line works way better in my simplified design

We saw it there and liked it a lot, it works well in practice, and has a number of advantages, so we are making it so.


Minimal Discourse
How do you set alternating colors in the list of topics
Alternative to blue colors for coldmapping
(Erick Guan) #2

Looks awesome on mobile!


(Jeff Atwood) #3

Some experimental data here on usability with real users:

Conclusions:

Unfortunately, this study hasn’t given us a clear answer about whether or not to continue applying zebra stripes to tabular data. However, it didn’t give any indication that zebra striping makes things worse, and we do know that it is liked by a number of users, so it certainly doesn’t seem to cause much harm.

At the end of the day, the decision about whether to use zebra striping probably comes down to a subjective assessment of likely gains versus the cost of implementation.

So, yeah, bikeshed, we knew that :wink:

I feel the more columns you have, the better zebra striping is, and we’ve steadily pared down the number of columns in the topic list over the last year and a half .

I also wonder if removing the striping will help with the perceived “party in a spreadsheet” problem that @awesomerobot talked about a while back. You definitely associate tiger striping with spreadsheets and tabular data in many, many columns…


(Philippe Rollin) #4

Alright, i’ll be the one going against the grain here :slight_smile:

I find the striping actually beneficial for readability; it is a subtle yet more visible way (that a thin separator) to keep track of what I am looking at in an already text focused medium.

Topic posts usually have more content this is why it seems like it is not such an issue there.

That being said, this is probably a highly subjective thing and unfortunately I don’t have much hard evidence to present. I wouldn’t base such a decision on 1 forum that seem to like it though (also their mobile version still have the stripes).

Personally, I like the “cards” design where there is a background color for the page (off white or light grey) and each post has its own box with a very subtle shadow.


(Dave McClure) #5

I don’t know what your talking about. It’s obviously better without tiger stripes :wink:


#6

No, I never have that sort of thing in spreadsheets. I have it on web pages to make it easy to separate lines. But yeah, tabular sort of data, like, for instance, a list of topics on a forum.


#8

I personally like the new bikeshed color. But I do hope that someone, somewhere, styles a Discourse topic list to look like this:


(David Maxwell) #9

I like it! Flashbacks to my college days and the first job out of college.


#10

Just want to say that I really like this change! :+1:


(Tobias Eigen) #11

I like it too! So much cleaner and nicer. :clap:

I noticed the zebra stripes are still showing on the category page. Is this intentional?


(Jeff Atwood) #12

Yes it is intentional, the striping there makes more sense. Try removing it via the F12 controls to see what I mean… how do you tell which topic belongs to which category?


(Tobias Eigen) #13

that’s a good point.


(Michael Downey) #14

Oh, I don’t know …

… perhaps? :wink:


(Tobias Eigen) #15

oi, remember we are bikeshedding here. :slight_smile:

actually, I still think the zebra stripes make more sense. that would be alot of grey bottom border lines between rows, and there’d probably have to be some thicker ones between categories.


(Mittineague) #16

I’m not particularly partial to one way or another. The main thing for me is that I don’t get lost as my tired old eyes dart from left to right and back. i.e. grouping


#17

Not that bad, isn’t it?


(Dan Dascalescu) #18

Not that bad with just lines between the rows, but zebra striping makes it much easier for me to follow the row horizontally across columns.

The advantage zebra striping has is not just delineating a row from the next, but allowing you to match the first (leftmost) columns with the last (rightmost) ones. The thin lines only separate rows, but don’t visually guide the eye as well from the first to the last column because the lines are all of the same style and color.

As @codinghorror said, the more columns you have, the better zebra striping is, and the screenshot from the OP misses the users column, which in actuality, e.g. at http://meta.discourse.org, is quite large:

With that in mind, which styling makes it easier to see the view count of “Release 1.3 ETA”?


(Jerry) #19

I have keratoconus, as I’ve said here already. This change makes it way worse for me particularly.

Anyway, it’s one thing we have to change on our forum. We don’t, and can’t, use the default theme anyway. We haven’t been able to for months because of changes like this one.

Not saying it’s bad as a default. But for vision-impaired users, which I am one type of, it’s worse.

Edit: Moreover, it’s funny to read that zebra striping is competing with other gray zones of the page, when a few months back you decided to eradicate almost all traces of color on Discourse. Of course it’s competing with other gray zones: everything’s gray. It’s like a cemetery here. Add chirurgical blue and antiseptic green, and we’ve went from the cemetery to the morgue…


(Erlend Sogge Heggen) #20

Since we’re just kicking the can around in the bikeshed, there’s a third option that popped up by accident a while back:

A “boxed” layout might be the best term for it. Could be worth a shot. Here are some better mockups:

In any case, we’re pretty much back to the “s**t should be customisable” conclusion.


(Michael Scott Shappe) #21

As much as I wouldn’t want to copy Google too closely, their “card oriented” design (aka the boxed design suggested above) does have some good points. It would be a pretty big change for the look-and-feel of Discourse, but that’s not necessarily a bad thing.

I do think the current topic view is still a bit too spreadsheet-like. even with the lines rather than the stripes. I would actually like a view that either eliminated the numbers, or presented them not as separate columns, but just as small text under the topic. Still have an option (via a pop-down menu or something) to sort by the different numbers, but ditch the spreadsheet presentation.