Refresh value

We often use plenty of free space around our designs, but this might not always be a good idea. Consider the following case, where the user scrolls to reveal more of the area B, while hiding area A (parallax scrolling).

parallax scrolling example

There are three potential problems with this design. First, the refresh value may be low. This means that the browser needs to repaint the areas to the left and right of the screen, where they may be empty. (With Ajax, we don't have this problem, because we can update only the area of interest).

In the following table I have marked with 0 the screen areas that have either no content or just a predominant solid color and with 1 screen areas that have an interesting content. There are a couple of combinations that can happen as the user scrolls.

 refresh value

In the first case, the light gray area is empty, before it is hidden by a similar dark gray area. In the second and third case, the only difference is what gets shown or hidden first. But content is always in one of those areas. We should also take into account that the old and new areas can be off-screen—for instance, when an image is appearing sideways on the screen. In the last case, one content area is replaced with another, which is where most of the transition value is. We have a (subjective) sum of 2, but if we assume that the areas A and B take 50% of the screen width and the blank areas the other 50% (viewing this on a widescreen monitor), we would come to: 0.5*2 + 0.5*0 = 1 (refresh value). In other words, we are having a design that is equivalent to scrolling down from a full blank screen to a full screen of content or vice versa, which isn't very good. We should be more aware of the refresh value in our designs. Repainting the minimum useful areas ensures that the browser and the graphics card remain more responsive while scrolling.

The second problem with the quick alternations between different colored areas that constantly appear and disappear is that this may cause eye strain. It seems a good idea to try to minimize the dynamics of (global) perception as much as possible. If we transition smoothly between the different background colors, this could reduce the harshness on the border between the different light intensities. But how exactly this is done can make all the difference.

The third potential problem is “stamping down the dot of focus.” It's shown on the first image, where the top of the letter A remains hidden. This may have been the place where the user was currently focused or where he was reading, before the accelerating and not always predictable speed of the overlay was suddenly interfering with the view. The effect is that the interface is making itself very visible and not in a very supportive way. Like it's saying: "I'm more important than you" and it's disrespectful. It can also be seen as a usability problem.

This shows that dynamic content updates that were triggered by the user aren't an area where we can make cuts.