Amgen : Camouflaging sections

Main navigation headings embedded in images are persisted with despite legibility issues.

The Site

Amgen, a US-based biotechnology company, incorporates its primary navigation headings into page imagery.

Amgen site navigation is founded on two horizontal strings of headings. The string containing the main sections is overlaid on a photo panel that runs in letterbox format across the top of all pages. Each heading (Patients, Medical Professionals, Partners, Investors, Careers, Media) is in small white type while the image in the panel changes according to the section, acting as a kind of location identifier. In most cases, the picture absorbs one or more headings in its lighter areas despite use of a faint grey swatch to give the headings a visual ‘lift’.

The second navigation string sits outside and above the photo panel and includes a mix of content areas (About Amgen, Science and Corporate Giving) as well as utilities such as Search and Contact Us. The image in the panel is again governed by the current location.

The Takeaway

Amgen has painted itself into a corner by its decision to go with the overlay of primary section headings on page-header photo panels. Not only is your eye drawn more to the secondary string, lying on a white background, than to the main string, but you have to look hard at the main string to make out all the options whatever section you’re looking in. While a different choice of type colour might have given a bit more room for manoeuvre, any gain would be marginal and simply change which headings blend into the background rather than overcome the effect.

That Amgen recognises the problem but chooses to persist with the design is clear from the use of swatching to increase the contrast in the background around the type. Inevitably, the resultant shadowing is an unsatisfactory compromise between increasing the legibility and preserving the look. While further amendments could be tried to boost legibility – bigger/bolder type or a more selective choice of photographs to ensure a darker background behind the full string, for example – the answer ultimately is to let go and put usability above design.

First published on 14 June, 2011