Visa : Failing the navigation challenge

Unconventional ‘hamburger’-based navigation fails to solve the problem of combining modern web design with good usability.


click to view

The feature

Visa, the US-based credit card and payments company, has followed current website fashion by employing large image panels on its US home page, with no top or left navigation. The main device for getting around the estate is a small ‘hamburger’ menu (an icon with three horizontal bars) in the upper right-centre of the screen.

Clicking on the icon reveals a right menu with a set of primary topics intended for personal and business customers, government stakeholders, jobseekers, as well as traditional corporate audiences including investors and the media. Each of these primary options has a ‘plus’ sign next to it, revealing tertiary and in some cases several deeper levels. The hamburger icon is a constant around the web estate and serves as the main navigation device.

The takeaway

The Visa website is a visually striking billboard, with a clear priority to promote Visa’s marketing messages to personal and business customers. It is responsive, automatically adjusting to fit any screen size. The hamburger icon and unconventional right menu seems designed as a way to drop permanent top and left menus, and thereby maximise the space for this billboard effect on both desktop and mobile.

Only a few companies have managed to balance a clean, modern look and feel without sacrificing usability – what we call the navigation challenge – and this attempt also falls short. The icon is relatively small and especially hard to see when the rotating background image changes to a paler colour. Visitors must first locate the icon, and then click once before being presented with primary options in the unconventional right menu. These primary links extend below the fold on a standard desktop screen, forcing users to scroll down to see every label. All of this is overly time-consuming.

The right menu’s ‘system’ also takes some time to figure out, relying as it does on a series of ‘plus’ and ‘minus’ menus that progressively hide and reveal options and sub-options. It is easy to become confused, especially as a first time visitor, about where you are within the hierarchy. If you make a mistake, you must precisely navigate back up the chain of pluses and minuses. When visiting a page within the site, the menu disappears, and users must click into it again to navigate somewhere else.

Visa’s hamburger menu works better on a smartphone (as it was likely intended to) on the home page at least. But even the overall mobile experience has drawbacks because not all of the pages within the site are mobile-optimised, so the hamburger icon and right menu are too small to use comfortably deeper within the site.

http://usa.visa.com
First published 11 February, 2015
< Back to Tips