Alternate row in Microsoft Modern UI (Metro)

Question

Can I use alternate colors for rows using Metro design guidelines?

And if I've multiple ListBox in the same view which is the suggestion?

Can I use alternate colors (the same for each control)? I see that this creates a bit of confusion.

[Update]

Here the sketch. The mockup.

Michael Lai · Answer 1 · 2014-07-02T23:36:34.900

The Dark Horse Analytics blog has the best explanation on how to make tables more visually appealing by actually removing the distracting visual elements from them: http://darkhorseanalytics.com/blog/clear-off-the-table/

If you look at the blog you'll see that they advise against the 'zebra stripes' approach, which in my experience causes other design problems due to the alternating nature of colours. You should be able to convert any alternate colour row tables to ones without using them if you think more carefully about the use of styling in your tables. It actually makes the design more flexible and adaptable.

Just to provide a balanced argument, here is another article that does some testing on different strategies for table designs: http://alistapart.com/article/zebrastripingdoesithelp

The only issue I have with this article is that it doesn't compare plain table styling to the optimized table styling like what the Darkhorse Analytics people suggested, so you can't really compare the results.

Not all of the suggestions will necessarily be applicable, but I think you'll find at least a number of changes that you can make to improve the clarity and cleanness in the presentation of information. Also, I think you will find it easier to do this for web applications compared to desktop because there is more space and flexibility in the design, but I would be interested to see how it works out for you. — Michael Lai, Jun 12 '14 at 04:53

score 6 · Accepted Answer · answered Jul 25 '13 at 11:09

6

Design guideline shouldn't be a barrier for some usability improvements. Guideline is universal document while each case could have its own features.

For easy reading of separate rows (in tables etc) one should be able to distinguish them. So, be sure, whether reading is hard. Then use some techniques to distinguish them. It could be not only alternating colors, but supporting lines, too. In any case, it should be just enough to distinguish, not to cry out of it.

enter image description here

answered Jul 25 '13 at 11:09

Alexey Kolchenko

22,666
2
29
57

ok, so I can use the alternate rows in all controls in the view? – Matteo Migliore Jul 25 '13 at 11:20
It will be consistent to use same technique for all the controls. But also try less prominent (but still usable) supporting lines instead of zebra colors. – Alexey Kolchenko Jul 25 '13 at 11:39

Alternate row in Microsoft Modern UI (Metro)

2 Answers2

Linked