Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Here's a hypothetical question partially inspired by a real scenario.

Assume that you have a table with many rows of data. This table isn't static; rows can be dynamically altered, added and removed based on user actions. To make rows appearing/disappearing feel more intuitive, a brief animation plays that expands/collapses the row from/to zero height. (Also of note is that the rows aren't necessarily of uniform height.)

Would there be any (reasonable) way to add zebra striping to such a table? The big concern is that whether or not a row is odd or even can change over time, which probably means that either a big chunk of the table can suddenly change color (which would probably be distracting) or one must allow two neighboring rows to have the same color (which would partially ruin the point and also potentially become a mess as more rows are added/removed).

Does anyone have a clever idea how something like this could be accomplished without being annoying to look at?

share|improve this question
    
Are you after a technical implementation option to do this, or are you more interested in whether or not it's a suitable method to go with in the first place? –  JonW Nov 29 '13 at 15:08
    
@JonW: A bit of both. Whether you have an idea on how one could do this well or you have a good argument for why the mere concept is a horrible idea, it's welcome. –  Smallhacker Nov 29 '13 at 15:23
    
For the animation have you thought about a fade out of the row THEN collapsing the row? –  bendataclear Nov 29 '13 at 17:21
    
@Smallhacker - there seems to be some misunderstanding related to your question. Could you please clarify the following (sorry if you have explicitly said it already): 1) It is user actions that trigger the data manipulation (removal/reorder) and there will be some animation showing which records have changed. Is this correct? 2) Your prime concerned is that with row striping, the background colour of rows will toggle with edits. Is that right? –  Izhaki Dec 3 '13 at 20:06
    
@Izhaki: 1) Sort of. In the scenario that inspired this question in the first place, user action may result in adding/removing rows, but not necessarily the ones the user directly interacted with. For instance, some rows farther down the table may be irrelevant and thus removed if Row X's data doesn't meet certain criteria. 2) Yes. –  Smallhacker Dec 4 '13 at 8:56

5 Answers 5

If you're working in html/css, the effect is really quite simple to set up: CSS can take care of both the alternating row color and the transition effect on a row-removal.

A Fiddle demonstrating the working effect.

The CSS establishes a 'base' green colour for each table cell, but then sets the cell background of every 2nd row (tr:nth-child( 2n )) to red - and will always do so even if rows are dynamically removed or added.

The second part of the td {} declaration uses CSS3 transitions to establish that for any (supported) change in the element's style, it should transition between states over 2 seconds.

Even if you're not working with web technologies, a similar effect is probably what you're looking for. Sliding content over static background rows is quite jarring (see any website that has a static/non-moving background image with scrollable text... yikes) and still wouldn't cover cases where row-height changes. You can play around with the colours (these are quite garish) and transition timing/effect (like ease-out/in, etc..) to find the most inconspicuous combination for your ui - but I find a relatively "long" effect length aids in hiding it from notice.

share|improve this answer
1  
great technique, thanks! –  Stephen James Nov 29 '13 at 14:29
4  
Thanks for the example, but I find the effect quite jarring! Instead of just the area where the change happens asking for attention, you now have the whole area below it begging for it. –  André Dec 2 '13 at 14:13
1  
Unfortunately if your requirement is zebra-striped rows and you remove a single row, every row after the change will also be effected visually, regardless of what particular effect you apply –  Brian North Dec 3 '13 at 3:53

This is an excellent question for which there is an excellent answer. Allow me to start with two examples.

Colour and meaning

Consider you are using a system and wish to delete a record (and you do wish to delete the record). The interface presents the following dialog to you:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Which button will you press?

Now after a while, you wish to delete a record again, now the following dialog comes up:

mockup

download bmml source

Which button will you press?

In the following image, do you see the same mobile device, only with different colours, or do you see 5 different mobile devices?

5 iPhone 5c with different colours

Semantics

The point is that some visual information is semantic whilst some is not (or complementary). Unless colours are used to represent semantics, the brain does not attach any meaning to them.

A great example is London's tube map. The line colours are semantic - they denote the line name and if tomorrow they'd change the blue with red, many people will confuse the Piccadilly and Central lines.

However, the grey/white zone coding in non-semantic - if these where to be swapped tomorrow, hardly any of the 3.6 million people travelling the tube each day would notice.

London's tube map

Row Striping

The 2 shades that toggle between rows have no semantics - the brain is 'smart' enough to recognise these as visual aids (and unless your brain tries to follow the horizontal line, these colours will be ignored). The semantic data in a table is the text. Unless there is clear meaning to the background colour, the brain won't even notice the change in background colour when records are reordered.

However, the colours need to be similar enough and not attention grabbing - while 20% grey and 30% grey will work, red and green may be an issue.

Thus, changing toggling raw background colour is a safe practice, so long the colours used cannot be interpreted as semantic.

On Animation

Animation is one of the most effective way to draw someones attention. Thus, it should be used sparingly. Animating the effect will only add visual noise, and force the users attention to something that is completely meaningless to them. Please see this quote from chapter 2 (What we can easily see) of Visual Thinking for Design, Ware 2008. Note that motion means animation:

The web designer now has the ability to create web pages that crawl, jiggle, and flash. Unsurprisingly, because it is difficult for people to suppress the orienting response to motion, this has provoked a strong aversion among users to the web sites where these effects flourish. The gratuitous use of motion is one of the worst forms of visual pollution, but carefully applied motion can be a useful technique.

Compare the animated JSFiddle, with the non-animated one to see the differences yourself. I hope you'll find the non-animated version less intrusive and attention garbing.

Conclusion

The answer argues from a visual-cognitive perspective, why you shouldn't be concerned about stripes background toggling when data is reordered/modified.

You should:

  • Pick appropriate colours for the backgrounds - that is, close shades of the same colour, ideally grey.
  • Not animate the stripe background - by doing so you are forcing attention on what should be meaningless information.
  • Do not allow adjacent rows to have the same colour - it defies the purpose of the stripes and results in inconsistency.
share|improve this answer
    
While an interesting and informative post, the subway map example isn't fully applicable to the situation. Your hypothetical scenario, "if these where to be swapped tomorrow", implies a discontinuity, in that the user looks away from the map for some time before looking back. In that case, yes, the user would likely fail to notice the difference. My scenario however involves live updating of the table. Surely, a person reading a map as it magically updated to add a new zone between 2 and 3, causing a cascading color change, would be distracted by it, especially if it happened often. –  Smallhacker Dec 2 '13 at 8:19
1  
I can just share my experience and I have been involved with a few system that row-strip a grid - we have never observed users being confused by it. –  Izhaki Dec 2 '13 at 12:07
4  
I'm somewhat puzzled as to how this has anything to do with the question of if/how to implement dynamic row striping? It says a lot about colour theory, etc., and ends with a bit about how row-stripe colours are "okay" to use and that static rows don't confuse users, but includes nothing about pros/cons ifs/hows of dynamic effects on striped rows... –  Brian North Dec 3 '13 at 4:00
    
The brain interpret the stripes as a visual aid, thus no meaning is assigned and the visual information is ignored until needed. Per inattentional blindness, the brain practically ignore the stripes, whether static or dynamic. This means that any 'dynamic animation': A) will hardly be noticed by the brain B) will not affect the brain's ability to process the important information. Thus, the simple toggling of row colours (odd-even css style) should not be a problem. –  Izhaki Dec 3 '13 at 11:55
    
Also added a section on animation. –  Izhaki Dec 3 '13 at 12:03

Row remove steps

If your strips and your text aren't linked with some animation you could remove the annoyance. I guess it's even possible to work without uniform height if you wait for the text animation to finish before changing the stripes heights.

share|improve this answer
    
Great idea! It just needs to be said that the choice of colours in your example is not ideal. Need I explain? –  Izhaki Dec 4 '13 at 0:34
    
Lol agree that colour picking need to be banned from any application. But I'm for banning striping of odd and even lines too. The 4 by 4 lines stripping is an improvement on readability other are just fancy presentations. –  ColdCat Dec 4 '13 at 9:12

In my opinion, Brian North's Fiddle looks far less jarring, and suitably clear, without the transition.

http://jsfiddle.net/wzBLB/

share|improve this answer
    
But surely that makes it worse? You need it to be jarring otherwise you don't know which field had updated. I didn't even notice row 2 disappears in your example and I was actually looking for it. –  JonW Dec 3 '13 at 7:08
1  
I'm pretty sure the OP intention is to animate the row that has changed (where the user is the one to trigger the change anyway); this animation is important. Myself, and seemingly Mike are referring to the animation of the stripe colours (not the edited row). –  Izhaki Dec 4 '13 at 0:31
1  
I agree, but I think it's a heck of a lot clearer if the removed row animates (as lzhaki mentioned). –  Kit Grose Dec 6 '13 at 11:39
2  
And just for completeness, here's the same fiddle with a row being added in the same way. –  Kit Grose Dec 6 '13 at 11:54

Smallhacker - Do you need the zebra striping to begin with? If it's to help the user scan across a wide row, maybe another design pattern would work? You could try "highlight row on hover".

A list apart has two interesting articles about whether zebra striping is useful:

Jessica Enders, “Zebra Striping: Does it Really Help?” at A List Apart, May 6, 2008 http://www.alistapart.com/articles/zebrastripingdoesithelp

Jessica Enders, “Zebra Striping: More Data for the Case,” at A List Apart, September 9, 2008 http://www.alistapart.com/articles/zebrastripingmoredataforthecase/

share|improve this answer
    
Like I mentioned in the post, this question is hypothetical but inspired by a real scenario. I don't need zebra striping; it's more of a "Can it be done well?" question. –  Smallhacker Dec 5 '13 at 9:01
    
Worth noting that Jessica comments around here occasionally too. –  Kit Grose Dec 6 '13 at 12:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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