The project: Improve the affordance of horizontal scrolling in a datagrid
My role: CSS/javascript prototyping, graphic design, influencing engineering
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.
Testing showed that the flat top/bottom style is the most popular, although people don’t always know why they prefer this option.
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.
Figure 1. Youtube uses a shadow on the right to indicate there is more if you scroll horizontally
Figure 2. Without the shadow it is harder to notice there is offscreen content
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.
The details are not *just* details. They make (or break) the design.
