Roche: Confusing symbolism

Icons allow a compact navigational matrix but create problems of recognition.

The Site

Roche, the Switzerland-based pharmaceutical group, has a sophisticated corporate website with several unusual features.

One of these is a three-by-three matrix at top left of every page, containing nine icons. Some are self-explanatory – the ‘envelope’ brings up a contact form – while others can be interpreted only by rolling the mouse over them, at which point a text explanation appears. For example, an intertwined double ‘S’ leads to a Disclaimer while an ‘eye’ symbol connects to the Index.

The Takeaway

Icons can be a neat way of providing quick routes around a site without taking up too much room. Roche’s matrix is particularly efficient: creating nine links in text would use up vastly more space.

The problem, as Roche has discovered, is that it is very difficult to make the icons intuitive – adding text clarification rather spoils the point. Its site is fine for people who have got used to it, but is a little confusing for newcomers. Roche should stick with the idea, but spend time tweaking and testing the icons to make them immediately comprehensible. And if it cannot come up with a sensible one for, say, the disclaimer, maybe this should be moved away to become a standing link at the bottom of the page.

First published on 13 September, 2005