The project: Improve the affordance of horizontal scrolling in a datagrid
To make sure users realize there is so much data off screen we need to ensure we are using the right design cues. I added buttons that appear when a user hovered their mouse in the right side of the datagrid.
Hover mouse over the datagrid below:
Even the style of the button was tested. And in case you’re wondering, people seem to like the left/right buttons to be flat on the top, perhaps due to the fact that street signs are designed in the same way.
To explain the importance of shadow cues I showed my team examples from Youtube. Figure 1 shows a shadow on the right side that works together with a button to indicate there is more. But without this shadow, as shown in Figure 2, the button loses some of its oomph.
Originally the shadows were implemented incorrectly so I worked with dev to make sure we used the right CSS:
With this tweak in place, the shadow would go on to become a useful tool for our design toolkit to help convey layers; we now use shadows in other locations to subtly emphasize sticky navigation bars as well as the scrollable datagrids.