Responsive web design is almost a household name among web designers and developers. The web designer focuses on the speed and layout of the screen across all devices, but what also needs to be taken into consideration is the experience of the user. An aesthetically pleasing site is important, but the importance of the user overall experience is key. The user should be able to easily navigate around the mobile website or application easily. A responsive mobile navigation menu will improve the experience and ease of use.
Navigational Design Requirements
The requirements for navigation are not the same on the small screen as they are on larger screens. The size of the screen alone means that normal navigation (on a desktop/laptop computer) is not possible. Smaller touchscreen devices, such as smartphones, require tapping by the thumb or finger. Navigation on a small screen with the fingers is not as precise as clicking with a mouse. For this reason a designer needs to consider making links larger. Even larger tablets or touchscreen computers generally need larger links since the finger is not as precise as using a mouse pointer. A common practice is to design the trappable navigation links to be 44 points square (about 57 pixels square).
Navigation Menu Placement
The placement of the navigation menu on the mobile site is important as well. If the menu is only at the top of the screen and disappears as the user scrolls down the page, it is not always likely to believe that the user is going to scroll back up to get to the menu. By “fixing” the menu to the top of the screen, or better still partially hiding the menu until the area is tapped is better. Hiding the menu will save valuable screen space while the visitor is viewing the site.
Creating Navigational Menus for Large Tablets
On large tablets it acceptable to keep the navigational menu at the top of the screen because most users would assume that is where it would be. On a narrower screen, like those on phones, some designers prefer to place the navigational menu at the bottom. This way when the user reaches the end of the page and is ready to go somewhere else on the site, the menu is readily available. Increasing the ease of use will help keep users on the site.
Using a Responsive Select Menu Plugin
Long, mulit-level, and menus with links are generally obtrusive. These kind tend to take up unnecessary space on the user screen. Converting to a select menu is an acceptable approach to solving this issue. Many web designers rely on Responsive Select Menu plug in to help make the navigational menu less obtrusive.
The developer can also make different navigational menus for different devices by simply using a CMS along with conditional code and/or plugins. By doing this the mobile site or application will have a prominent link that is viewed only on small screens. Often a mobile user does not need to see everything in the navigational window, so coding the menu to only show the most important elements of the menu will save valuable screen space.
The mobile web designer will want to make the navigational menu render on as many devices and screen sizes as possible. It should also be kept in mind that making the tappability of the navigational links is paramount to the overall user experience. The goal of a business mobile site or application is to make the customer/visitor happy so that they will purchase the products or services being offered or frequent the site more often. Aesthetics are important, but so too is user navigation. If the user cannot use the site easily then they will most likely close out and not return. By making some simple adjustments of the navigational menu the designer can make the user experience much better.
This post is written by John Lewis and he works at PriceCollate as a writer.