Module 3: Creating an effective mobile UX
3.2 Mobile site design best practices
A desktop homepage often serves as a welcome page, messaging center, and promotional space all in one, but the mobile homepage should focus on connecting users to the content they’re looking for. In this section, we explore the principles for building a mobile homepage that gets users what they need, fast.
When you’re talking to your client, communicate the following navigation principles to ensure a great user experience.
1. Keep calls-to-action front and center
Feature primary calls-to-action in the most prominent site space.
It can be easy for mobile users to miss menu items, so your clients should always put their key calls-to-action where users will see them. Study participants had an easier time completing tasks on sites that clearly displayed primary calls-to-action in the main body of the site, with secondary tasks available through menus or below the fold. Your client’s mobile calls-to-action will probably be different than on desktop, so ask him to put himself in his users’ shoes when determining placement.
2. Keep menus short and sweet
A shorter menu with distinct categories is easier for mobile visitors to navigate.
An extensive menu might work well for desktop sites, but mobile users won’t have the patience to scroll through a long list of options to try and find what they want. Consider presenting the fewest menu items possible: For instance, a major department store refined the product categories on its mobile site, presenting study participants with a shorter, more clearly defined list than on desktop.
3. Make it easy to get back to the homepage
Use the logo as a navigation button to return to the homepage.
When mobile users navigate through a site, they want an easy way to get back to the homepage. In the study, participants usually expected tapping the logo at the top of a page to take them back to the homepage, and became frustrated if it didn’t work.
4. Don’t let promotions steal the show
Make sure promotions do not interfere with navigation and are clearly distinct from calls-to-action.
Promotions and ads can overshadow the content they’re next to, making it harder for users to accomplish tasks. Participants visiting one company’s mobile site were distracted by a large promotional banner and missed the navigational buttons beneath it, making it hard for them to learn more about the company’s offerings. For app promotions, participants preferred easily dismissible banners as opposed to large interstitials.