Challenge: optimising data presentation on a mobile device

As a strategy for displaying data on mobile devices, it is better to maximise the ratio between the ‘ink’ used for decoration, and ‘ink’ used for displaying data. If a lot of ink is use for decorative purposes rather than data display purposes, then the report consumer’s visual processing system is required to do more work in order to understand the message being displayed. It is important to maximize the data/ink ratio in order to simplify the message that is being given in the graph.

There are a number of different issues involved in ensuring that data is presented clearly and concisely in a way that the human brain can process in an optimal manner. One major issue is the area of illusions, in which the image presented to the eye can cause a distraction that can mean that the data is not communicated clearly on a small mobile screen.

One common illusion that can apply here is the Hermann grid illusion. This illusion was discovered by mathematician Hermann, when he was reading a book by Irish physicist John Tyndall. This illusion can make a black and white matrix appear as if it contains grey as well. Although the same light intensity is transmitted along the white spaces in the matrix, the intersections can appear to be grey rather than white. An example follows:

It is known that the Hermann Grid illusion is not just restricted to black and white: it has been found in other colours as well. For example, a red and white matrix may appear to have reddish intersections. The dependency is that there must be a high contrast between the two colours involved in the grid.

This illusion occurs as a result of the cell activity of the retina in the eye in resolving the ‘gain’ or the average power of light intensity in the image. Although a television or computer screen only has one ‘brightness’ setting, the eye can vary the ‘brightness’ setting for different parts of the image. The fovea, of centre of the retina, is the region of highest visual acuity: it has a greater concentration of cells and thus has finer-grained control over the ‘brightness’ settings. So, if you look directly at a grid intersection, the intersection is resolved by the fovea and it appears white. On the other hand, the neighbouring intersections can appear grey. The peripheral areas of the retina do not have the same fine-grained control over the brightness setting. This means that the neighbouring intersections can appear gray as the ‘gain’ or average light intensity of the image is turned down.

The Hermann grid illusion will not work if there is a low contrast between the colours involved in the grid. As a sidenote, this is why Excel has light blue cells with a white background: there is not enough contrast between the light blue and the white colours to confuse the visual system, so the illusion does not appear.

Another illusion which has direct impact on the display of data on a mobile device is the Moiré effect. Moiré patterns are a focus of interest in visual systems, and more generally in physics as an area of investigation of the fundamental substance of the universe. A Moiré effect can be described as a visually disturbing experience, when the consumed image contains a series lines or dots that are superimposed at an angle to a parallel series of lines or dots. An example can be found below:

Here, the Moiré effect can be seen in the horizontal bars that have been produced as a result of a series of vertical lines which have been overlaid by an identical series of lines at an angle. Moiré effects can be used to create some beautiful patterns as well, such as Kolomyjeck’s Moire images.

Moiré effects are also thought to occur in nature as well. Recently, string theorists in physics have an area of study which focuses on Moiré patterns and the creation of the universe. M theory proponents have held that the universe was formed originally out of two membranes, which collided. The vibrations that occurred at the intersection points of the two membranes is posited to be responsible for all of the observed particles in the universe. The resulting pattern between these two membranes is like a moiré effect, and some work is being conducted to understand the different moiré patterns that could be held responsible for producing fundamentally the laws of physics. A pictorial representation of superstrings and M theory can be found below:

• It is recommended that report creators avoid high-contrast grids. For example, a high-contrast grid may invoke the Hermann grid illusion in the report consumer, and this may distract the report consumer from the ultimate message of the data. In fact, if possible, mute grid-lines or even avoid them altogether if possible. Gridlines, whether vertical or horizontal will increase the ‘ink’ on the page; the main message here is to increase the meaning of the data, rather than increase the amount of ink which is not totally necessary.
  
• solid colour should be used in bar charts, piecharts and so on; not bitmaps, hatches or grids. A ‘hatched’ graph can seem to ‘buzz’ in the eye of the viewer. This can produce a Moiré effect in the perception of the report user, which can be annoying and distract attention away from the true meaning of the data.
  
• there is no need to ‘box’ the colours in a bar chart by drawing black lines around them. This may produce the Hermann grid illusion by producing ‘fuzziness’ at the intersecting black points. Also, this increases the data/ink ratio. It is argued here that the eye is very capable of fine-grained detail, as evidenced by the high visual acuity found in the fovea. Thus, the eye can distinguish clearly between blocks of colour. This is enough to get the clarity of meaning across in the report, as well as reduce load on the visual system by reducing complexity.
• use 2D images: they are processed more quickly than 3D images. Although these graphs may look nice, they can sometimes be difficult to interpret due to the additional hatching that may be involved in the production of the 3D effect. In order to ensure that the data is understood in a way that does not require an overhead on the visual system, it is recommended that graphs are kept to 2D. Further, this can also maximize the data/ink ratio, which is recommended as an overall strategy.
  
• data display is restricted to displaying data meaningfully, and that non-essential images should not be included. This may include company logos, for example. There is no need to include them since they do not add to the meaning of the data; instead, they also serve to reduce the data/ink ratio. Additionally, it is not possible to control elements of the company logo which may produce effects such as the Hermann grid illusion or the Moiré effect; so it is best to reduce them altogether.

To summarise, this blog has discussed some of the physiological and psychological elements of visual processing, and has applied these principles to displaying data on a mobile device. From these psychological and physiological discussions, some recommendations regarding data display have been given here. To add this post to Twitter, please click here