Web design is debatable, but menu layout and the amount of content on mobile websites is not. That is the result of a study by market research experts Facit Digital in which the sites of four automobile manufacturers were analyzed for their (mobile) user experience. The best cross-device browsing experience is offered by Porsche.
Munich, November 12th 2015 — 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.
The market research institute, Facit Digital – a part of the Serviceplan Group – is engaged in, among other things, the user experience and research in the field of user experience design. How do the wishes of companies and the ideas of agencies meet current consumers’ needs? How can they provide users with the best possible browsing experience and, among other things of course, contribute to a more positive brand perception?
In a recent analysis, the Munich researchers 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.
The results of the Facit analysis can be summarized in a total of five recommendations:
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.
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 currently popular "hamburger" - or "sandwich" menu with its three characteristic horizontal lines which open when touching a menu.
"Even up until last year, the hamburger menu was considered exotic and it continues to be discussed and controversial in the web design scene," says Christian Bopp, the managing director of Facit Digital. "However, it is now understood much better. Users have learnt the symbol and its meaning, and, to our knowledge, know how to use it correctly - assuming its presentation and implementation follow the assimilated look, function and positioning."
If mobile-optimized pages use hamburger menus, it leads to a best user experience if many or all of the following criteria are met:
On desktop sites the hamburger has not (yet) been learnt and 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. A fatal mistake for a positive user experience," warns Christian Bopp.
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.
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," said Christian Bopp. Here responsive designed pages are often one step ahead, because their contents are mostly applied across devices from the outset.
Of the sites tested, BMW, Skoda (both with mobile sites), Porsche and Toyota (both with responsive design) Porsche's web design meets the five criteria the best. A clearly-structured, clearly-reduced navigation on the desktop site and thoughtful, intuitive menu guidance for smaller displays lead to the Stuttgart car manufacturer's good performance (average score of 8.6 – 10 being the best possible).
After Porsche comes BMW with an average score of 7.3: The amount of content is significantly reduced on the mobile site with the over-prominent dealer locator providing most users compared too little information compared to the desktop version.
An unsuccessful unintuitive navigation on mobile devices lead to negative experiences for the subjects with Skoda - it reached an average score of 6.9 taking 3rd place.
The only provider whose mobile site was rated better than the desktop variant was Toyota. An unnecessary hamburger menu on large displays and an overloaded flyout menu which overwhelmed users lost it points. With an average score of 6.6 Toyota was just behind Skoda in 4th place.
Christian Bopp concludes: "Overall, companies must be careful to optimize their websites so that users experience the most positive possible user experience on any device – whether with a responsive design or its own mobile site is primarily irrelevant. Much more important is that sites on all devices have a similar look, a uniform information architecture, map all content and provide each intuitively in an easily understandable menu navigation."
Further charts (in German) are available here on SlideShare.
Corporate Communication & PR
+49 89 2050 2273