10 Ways Mobile Sites Are Different from Desktop Web Sites

5.  Contextual and Global Navigation

Desktop Web sites typically use various forms of navigation, as on the Best Buy site shown in Figure 9. Some of them are global and remain consistent across a site, while others are contextual and change depending on where users are on a site. However, while global navigation is common on mobile sites, contextual navigation is not. The Best Buy mobile site shown in Figure 10 provides an example of typical mobile site navigation.

The main reason for the reduction of global and contextual navigation on mobile sites is the limited screen real estate on mobile devices. However, a lack of global and contextual navigation may cause users to find themselves in the middle of nowhere, not knowing where they are. Therefore, it’s essential to reduce hierarchy when organizing the content on mobile sites, so users don’t have to dig too deeply to get things done. They should be able to achieve what they want to accomplish before becoming lost.

6.  Footers

There are two types of footers that are in common use on desktop Web sites. One type of footer provides links to content that users might expect to see on a site’s home page, but has a lower priority than the primary content on the home page—for example, Careers or Sitemap. Another type of footer provides quick links to content users typically need to view most often. As shown in Figure 11, these quick links are often grouped in lists in a footer, so users have access to them across a site. Mobile sites employ footers that provide access to content users often look for on a home page, keeping its links to a minimum, as shown in Figure 12, but they do not use footers containing quick links.

7.  Breadcrumbs

On desktop Web sites, breadcrumbs are an effective way of reassuring users they are on the right page and allow them to backtrack on their navigational path like those shown in Figure 13. They make sense for large, hierarchical Web sites with lots of different content at multiple levels in a hierarchy. However, breadcrumbs rarely appear on mobiles sites, and there is usually no necessity for them. Limited space is one reason breadcrumbs are uncommon on mobile sites. But the main factor is that the design of mobile sites prevents users from having to go too deep into a hierarchy to find what they are looking for. Again, users should be able to achieve what they want to accomplish on a site before they start feeling lost.

8.  Progress Indicator

On desktop Web sites, when users must progress through multiple steps to complete a process—whether they are making a purchase, as in Figure 14, or filling out a long registration form—there is often a progress indicator at the top of the page to guide users through the process. Such progress indicators do not appear on mobile sites. Again, limited space is the main reason.

Use alternative approaches to make users aware of their progress without a progress indicator. For example, instead of using buttons with implicit actions such as Next or Continue, use buttons with explicit labels that inform users exactly what the next step is—for example, Proceed to Checkout or Specify Shipping & Payment. Users still receive information about where they are in a process and what to expect at the next step.

9.  Integration with Phone Functions

Smartphones are communications devices, so making phone calls is their most basic function. While mobile platforms place many limitations on design and content, they also open up new opportunities that traditional Web sites cannot provide. For example, there is better integration with phone functions such as direct calling and text messaging, which lets mobile sites facilitate ordering products by phone—as shown in Figure 15—or send promotional text messages. Usually mobile sites let users select a phone number, then call or text that number—without having to type the number.

10.  Localized & Personalized Search

Another area of opportunity that is unique to mobile sites is the use of geolocation services or support. While this technology has been available for some time, only in the last five years has it gained traction in the consumer marketplace. Now, it is commonplace for mobile applications and Web sites to take advantage of this functionality by integrating it into value-adding services such as mobile search.

Many mobile devices can automatically detect where users are and give them local search results, as exemplified by the store location search on Best Buy, restaurant search on Yelp, and airport suggestions on Kayak, shown in Figure 16. This capability offers powerful opportunities for businesses to promote their products or services based on a person’s proximity to their place of business and their immediate intent.

In Summary

Based on my company’s research, which looked at a number of mobile sites from various industries, I’ve discovered 10 ways in which mobile sites differ from desktop Web sites:

1. In comparison to desktop Web sites, which usually contain a wide range of content and information, mobile sites usually include only the most crucial and time- and location-specific functions and features.
2. On desktop Web sites, horizontal navigation at the top of a page is a widely accepted way of structuring and presenting a site’s content. However, vertical navigation replaces horizontal navigation on more than 90% of the mobile sites we analyzed.
3. Hypertext is the signature component of the Internet and the Web. However, on mobile sites, there are few or no hypertexts on pages.
4. On desktop Web sites, designers use graphics for many different purposes, including promoting, marketing, and navigating. Mobile sites avoid using promotional and marketing graphics and use minimal graphics for navigation.
5. Various types of navigation are available on desktop Web sites. Some are global, so are consistent across a site, while others are contextual and change depending on where users are on a site. In contrast, while most mobile sites have global navigation, contextual navigation is rare on mobile sites.
6. On desktop Web sites, footers typically provide either links to content users might expect to see on a site’s home page or quick links that are available across a site to provide access to content users often need. Mobile sites employ a minimal form of the first type of footer, but they do not use footers containing quick links.
7. On desktop Web sites, breadcrumbs reassure users that they are on the right page and let them backtrack on their navigational path. Breadcrumbs are rare on mobiles sites and really aren’t necessary, because of the relatively flat structure of mobile sites.
8. Process funnels on desktop Web sites frequently use a progress indicator at the top of each page to guide users through the process. Such progress indicators do not appear on mobile sites.
9. Mobile sites offer better integration with phone functions—and present marketing opportunities such as facilitating direct orders by phone or sending promotional text messages.
10. Mobile sites can take advantage of technology that automatically detects where users are to present local search results. When users set up their preferences or profile, personalized search results become even more relevant and valuable to them.