My question is pretty simple. In your opinion, does changing the background color of the hovered row in the datagrid is a plus for the user - or a distraction that should be discarded? All rows / columns are already separated by a dotted line.
5 Answers
The answer to the question depends on how the styling of the data grid has been implemented. For example, the usual zebra-striping applied to tables and data grids actually reduce the impact of highlighting because there are already alternate colour patterns, so you should provide an outline of the cell/row instead. However, if you applied good whitespacing in the design, it allows you to use background colour change on hover-over to create a stronger visual impact. But there are different views on this and I think you can find other answers like this: Hover states on tables with striping
It is also important to consider the context of such as designing for mobile devices versus desktop devices, as you might want to think about how a user will know their place in a data grid without the highlight.
Definitely a plus, as this is a pretty common functionality (implemented by enterprise DataGrid components like Shield UI's), especially if the datagrid supports some kind of interaction like selection, clicks, etc.
--> Animated version
Here is a excellent shot designed by Virgil Pana using a lot of features described in the Design Better Data Table article.
-
1The contrast between the text and table cell shading could be a little bit better, but it does look very clean and well laid out.– Michael Lai ♦Jul 29, 2017 at 23:50
IF the datagrid is very dense (meaning - high number of column/rows/ and small font) and IF each row spans the entire width of the screen then it is helpful to add a hover background color. Librarians/accountants in olden days would use a wooden ruler to scan across rows in their big ledger books.
-
That is true, the issue being that my grids are fully dynamic - knowing it is impossible to know what will be inside before runtime :) Not to mention that the layout is fluid so the grid can be displayed on any screen size.– reeaxJun 29, 2017 at 10:12