Five Ways to Improve Website Navigation for Touch Devices

With the widespread availability of smartphones and the increasing popularity of tablets, more people relying on their touchscreen devices to browse the web. Developers and designers need to find ways to make websites that are easy for both desktop and mobile users to visit and interact with.

Creating responsive websites that automatically detect and adjust to the device used to access it is an effective way to address this challenge. One of most important aspects of responsive web design for desktops and touchscreen devices is creating an intuitive navigation menu. Visitors who access a website from their touch devices have different navigation requirements because they have smaller screens and do not have a mouse or keyboard.

Here are five important tips to keep in mind when designing navigation menus for touchscreen devices.

1. Use Buttons Instead of Text

Clicking on text links in a typical website menu is easy with a stylus or a mouse, but it can be a challenge for people using touchscreens. Using buttons makes everything easier and more intuitive by showing users exactly where to tap. They should also indicate what page they lead to, as touch devices don’t have cursors to accommodate hover states to determine where links go.

Buttons should also be large enough to accommodate the average fingertip size. According to Apple’s iOS Human Interface Guidelines for apps, tappable elements should be about 44 x 44 points square (or about 57 pixels square).

2. Avoid “Crowded” Navigation Elements

The limited amount of space on touchscreens and the fact that visitors will be using their fingers to interact with the site makes it important to keep navigation elements to a minimum. Squeezing too many navigation buttons into this small space increases might frustrate users, as they are more likely to click on the wrong buttons. Limit menus to about five buttons. If there is no way to reduce the number of pages and categories to five, use nested or collapsible menus to accommodate them.

3. Place Navigation Menus Strategically

The ideal spots to place navigation menus are at the top or the bottom of the page, depending on user behavior. Placing navigation at the top is the most popular option, but placing a menu at the bottom can also help prevent users from navigating away from a site after they scroll down.

4. Use Color and Typography to Keep the Design Consistent

A minimalist approach is best for overall mobile website design because of the small amount of available space. It’s not wise include large graphics and images that can use up this valuable space. Maintaining a specific color scheme and using the same fonts across all aspects of the website’s design can create a cohesive look without overcompensating with graphics.

5. Navigation Must Always Be Intuitive

Some mobile websites use unconventional designs like radial menus instead of the traditional vertical list of buttons. There’s nothing wrong with using creative menu formats for mobile web design, but navigation for touchscreens should always be intuitive. Users should be able to take one look at the menu and immediately figure out how to use it. As Dan Rajan from Webdesigner Depot says, “There’s no point in creating the most innovative UI imaginable if no one can understand how to use it.”

There are no universal navigation menus that will work for all devices and all users. The important thing is to look at a website’s needs, the menu’s content and purpose, and the users’ behavior to come up with the ideal navigation solutions.

Added Incentive

Getting people to share a pre-launch page on social networks or fill out an email opt-in form is much easier if they’re given additional incentive to do so. Early access can be good incentives, but throwing a few freebies in can encourage users even more.

The pre-launch campaign for The Drowning, a mobile first-person shooter game, offers users free wallpaper for their mobile devices as incentive to pre-register. The game has already launched for iOS users, but now the page extends the offer to Android users in anticipation for the game’s launch on Google Play store.

Data Collection

Gathering data about people interested in the app can help improve its marketing campaign. The most common option is to add a simple form that can be used to collect visitors’ email addresses for inclusion in a mailing list, but other developers may also include live chat features or polls to gather additional information about their target market.

Social Sharing

People often share anything they find interesting with their contacts on social networks. Social sharing is the online equivalent of word-of-mouth advertising, and this can help get even more people excited about an upcoming app. Make sharing easier for visitors by including adding social buttons to the app’s pre-launch page.

Facebook and Twitter are the most common options for social sharing buttons, but consider including other networks’ buttons, such as Pinterest or Tumblr.

Creating a pre-launch page with these five elements can get people excited about your upcoming app, but it’s only one part of your app’s marketing campaign.