Responsive design which dynamically adapts to different display sizes? Or rather one site for desktops and another version optimized for smart phones and tablets? New development or adaptation? These are questions which companies face with the ever greater proliferation of mobile devices, which are also increasingly becoming the “first” device used to view sites. In particular, the user interface design, that is, the appearance, behaviour, and functionality of the menu navigation are obstacles which need to be mastered as soon as a mobile Internet site contains more than a few pages.
In a recent analysis, we viewed and compared the mobile sites and menu navigation of BMW, Porsche, Skoda and Toyota. These are representative of companies with rich product worlds, corresponding high information content and numerous hierarchical menu levels. After qualitative expert interviews in advance, a total of 16 personal 90-minute individual interviews followed, which involved subject eye tracking whilst viewing both on desktops and mobile devices. The aim was to derive recommendations for cross-device mobile website design and identify practical solutions for an optimized user experience.
We found five rules of success:
1) A common look & feel on all devices
A similar page structure with uniform look and feel, whether with responsive design or a mobile-optimized site, has a positive effect on the user experience. Users feel comfortable and find their way better when websites look the same, or very similar, on all devices.
2) The navigation menu must be tailored to the specific device
For complex pages, the navigation should be adapted to the respective device to facilitate ease of use. On the car manufacturers’ desktop sites which subjects viewed, multiple menu bars, “sticky” elements, which are anchored when scrolling, and large flyout menus with pictures of various models are used. Such navigation elements do not work on mobile sites and frustrate the user. Here other solutions are necessary and possible, such as the popular hamburger menu.
3) Hamburger menus must always function the same way
If mobile-optimized pages use hamburger menus, it leads to a best user experience if many or all of the following criteria are met:
- The hamburger menu must include all navigation entries.
- It should be placed in the top left or top right corner.
- It should use the “classic” icon.
- Closing the menus should always be possible and visible.
- Ideally page contents should remain visible behind the menu.
- If further sub menus are needed, symbols can be used as indicators in the menu. For users it is not important which are used (arrows, plus signs, etc.)
4) No hamburger menu on desktop pages
On desktop sites the hamburger is not at all desired by the majority of users! High screen resolutions provide enough space to display a fully visible navigation menu that instantly creates an overview. The concealment of navigation elements is useful on small displays to make way for the content, but on large displays our subjects were confused and could not cope intuitively. But even on large screens, there is a user experience no go: fly-out menus which suddenly overlay the majority of the screen are not welcomed by users as it makes them feel overwhelmed and surprised by the contents.
5) The same content on all devices: content must not be abridged
Nowadays content must be available on all devices to the same extent. A reduced content mobile-optimized version may seem clearer, but is perceived by users as being incomplete. It is expected by users, given the fact that smartphones and tablets are well established and used for surfing, that companies deploy all their content everywhere. Here responsive designed pages are often one step ahead, because their contents are mostly applied across devices from the outset.
By the way: Porsche has the best cross-device website: