The ‘Good’ and ‘Bad’ of Mobile Design

I was recently asked to give an example of a good mobile website and contrast it against one that’s bad. Before I could meaningfully respond, I first had to define what “good” meant in the context of the question. A good mobile website is one which allows the site user to be accomplish their online task in a manner that is easy and free from frustration. Among the wide universe of possibilities, some common user tasks on mobile sites include reviewing the latest news, researching a product, making a purchase, verifying an address, or checking the weather forecast. A good mobile site facilitates quick, painless completion of tasks like these in a way that never calls the user’s attention to the limitations of a small screen or restricted bandwidth.

According to Joy Busse, the mobile apps that are easiest to use follow the principles of “natural user interface design” that focus primarily on the user’s experience. Such a design paradigm uses design cues based on the user’s natural workflow and does not require them to “learn” the site’s interface to be successful. In other words, the interface is completely intuitive and has no associated learning curve.

SnapQuotes

Using this definition of “good,” an example of a good mobile site is SnapQuotes. SnapQuotes is an auto insurance quote comparison service that helps customers find a provider and plan that best fits their budget and needs. This site features all of the desirable factors mentioned above: the site’s purpose is clearly stated on the home page; submitting a quote request is as simple as following the on-screen prompts; and there is no penalty to the user for being on a mobile device. While the number of form responses—including various radio buttons, text fields and drop-downs—is a bit lengthy, it’s been reduced about as far as can be expected given the amount of information that the site needs to collect in order to generate a meaningful and accurate insurance quote.

One of the best features about the site is that the user is automatically guided along a data entry path. As they complete each form, they are transferred to the next one in the sequence, ultimately navigating through a series of five separate screens. The user need only initiate the quote request process by entering their home zip code and clicking the “request a quote” button. After that, the site is largely on “auto pilot.” While the same is true for the desktop version of the site, this sort of simple workflow is even more important in a mobile use case where the user may well be in less than ideal conditions such as at a bus stop, on a train, or in a waiting room.

SnapQuote’s data input forms are easily operated on a small screen. The user is presented with touch target areas that are large enough to comfortably accommodate human fingers without needing to pinch or zoom to enlarge the interface.

When viewed on a desktop, the SnapQuote site looks virtually indistinguishable from its appearance on a mobile device. All content is placed in either one-, two-, or three-column containers making it easy to rearrange everything into a single column when rendered on a mobile device. The site has an extremely small content inventory that makes mobile site navigation a breeze. Most of the navigation links are simply anchor tags that connect to content on the home page. Navigating large content structures is one of the most challenging aspects of designing for mobile and SnapQuotes dispenses with this problem by keeping their content footprint small. This is a distinct advantage for focused, single-purpose websites.

The visual and functional experience of using www.snapquotes.com on a mobile or desktop platform is identical. All content is fully available regardless of how the user chooses to access it. Mobile users would never have the impression that they were in any way penalized for using the service on their smartphone. In all respects, this is a “good” mobile website.

Cats Who Code

As for “bad” mobile sites, i.e., those that fail to accommodate small screens, realistic human finger sizes, and users who are likely in a rush, there are far fewer prominent examples than there used to be. Before responsive web design emerged as an industry standard in 2010, many recognizable commercial websites had terrible mobile implementations that either forced the user to download an app or spend a lot of time pinching and zooming to navigate a standard desktop site. A few years ago, it would have been easy to ridicule the mobile experience of the websites of ESPN, American Airlines, or Hulu, but those days have largely passed. If one wants to find examples of poor mobile implementation now, they’re largely confined to modest critiques of minor design choices. An example of such a site is Cats Who Code.

Cats Who Code a website dedicated to web developers and designers, whose aim is to make web development “easier and more fun” by sharing resources and tutorials. While the website has a perfectly modern appearance that does nothing to undermine the user’s confidence in the quality of the site, its mobile implementation contains a glaring error. The desktop version has a clear and well thought out header containing the site identifier, five content category links and two icons that link to Twitter and Facebook. The unforgivable sin committed by the mobile version of this site is that this clear navigation interface is missing. It’s not tucked away somewhere behind a hamburger icon; it simply doesn’t exist for mobile users. While it might be acceptable practice to obscure or withhold sections of a desktop website that are of limited use to those on smartphones, it’s never acceptable to remove site navigation in its entirety.