Navigation design and responsive websites

1st January 2012

Interacting with websites mobile, tablet and desktop

Part of the difference in mobile and desktops is the method of interaction: keyboard & mouse vs touch. In most instances pure responsive websites will change to the mobile view when the desktop window is re-sized and this change of view can pose a challenge.

Clearly a desktop shouldn’t be presented with a touch based interface when the main interaction method is mouse and keyboard. If we look at small laptops, in some cases these users will be presented with the mobile look of a website. This means that immediately some users can be alienated if elements they are expecting, like the main navigation, change dramatically.

It is commonplace on mobile and tablet devices for the main navigation to be held within some form of slide out. On desktops this navigation is always present and often has an extra layer (mega navigation) when the user hovers over the main menu items. Because touch based systems do not have the ability to hover it is accepted that the user will have to touch menu items to achieve the same level of mega navigation.

The extra interaction in itself goes against some traditional site design principles that suggest that the user shouldn’t have to click on more than three items to get to relevant content. However on some implementations of mobile mega navigation the user is expected to touch two or more menu items to get to the next level of navigation structure. These extra points of interaction further highlight that by presenting a desktop user – regardless of screen size – with a mobile specific navigation goes against user expectations based on their learned behaviour from good desktop navigation.

One last thing to think about: Could it ever be considered correct to show a small screened laptop user a mobile navigation? I have mentioned above that people using mouse and keyboard interfaces expect a particular style of navigation, however if their screen is too small for a “traditional” style of navigation and mega navigation shouldn’t we present these users with a mobile style? After all, it’s designed to make use of smaller spaces and should make the page more focused on its key objective. Is it a case that we need to re-educate users to understand their screen space and how it should be best utilised? Or should we keep the layout consistent with the input method, meaning that the sites focus is the same for each input method of the same type and when the users screen is to small for that method (very small desktop screen) the user is presented with scroll bars rather than a completely different user interface and layout, you wouldn’t remove a touch optimised interface from a large screen tablet so why would remove a mouse and keyboard interface from a small desktop.

Kagool have a proven approach to optimising sites for mobile and tablet. You can contact us to find out more.