Blog,  Mobile Experience

Mobile Website Requirements Beyond Google’s Expectations

Panic over Google’s request that webpages pass its mobile test for inclusion  in their mobile search index focuses on passing a test and not on user experience for mobile users.

Google provides an automated test that allows site owners to submit web pages to be evaluated by a short, specific set of technical criteria.  Websites set up for tracking by Google Analytics and Webmaster Tools were emailed warnings indicating where issues were found.  Google provides information and education for free to anyone wanting to understand their expectations and how to resolve any mobile rendering issues.

However, it is not Google’s intent to teach mobile human experience design.  In fact, web site design in general has changed drastically.  Old rules of thumb such as optimized content for organic SEO and making tasks easy to find and follow have taken a risky back seat to a new emphasis on visually appealing pages, a return to animation and parallax layers.  Since so many design fads do not render well on smartphones, they are removed altogether, leaving the mobile version far less delicious to view and more likely to be confusing to use.

Inside train station
Do your mobile experience requirements include distractions?

I’ve been performing mobile device emulation testing for years.  Think about how long you have had a cell phone, and later, your smartphone.  Long before mobile applications became popular, web pages needed to work on cell phones like your old Blackberry and Nokia flip top.  Website owners were given options such as building different versions of a website that would display differently depending on the browser type, screen resolution and mobile device.  Dynamic pages were coded to re-direct to different domains or an “m-dot” version.

Today, the buzz-word is Responsive Web Design (RWD), which unlike Dynamic design, uses one web design, but it is coded to render each element depending on the screen size.  Liquid or fixed page layouts have morphed into fluid grid layouts of columns and rows that respond to screen sizes depending on CSS3 instructions. Bootstrap uses HTML5, CSS3 and JavaScript to determine when to hide header navigation and stick it into a “hamburger” icon, hide background images and videos, and stack product images depending on how much room the user’s screen size permits.  Responsive design uses the same code for desktop, tablet and mobile devices, but contains instructions for where and how to display page elements based on the size of the screen.  There is one website and one domain, but various renderings.

Google recommends a Responsive design for their mobile search index (not to be confused with their search engine index) because it wants to cater to users searching from their smart phones.  Google is not concerned with tablet use here, just smartphones.  So for example, if you own an ecommerce website and want people to find your products while searching using Google from their cellphone, unless your site passes Google’s Responsive Design tests, it may be not be shown in their mobile search results.

Adaptive Web Design (AWD) is a close cousin but its mission is to know the device and screen size rather than the screen only.  Using what is referred to as Progressive Enhancement, the emphasis is on the user rather than the screen resolution.  So, rather than removing slide shows from view, Adaptive Design looks for a way to provide it by researching in advance what end users prefer and how to deliver it to them on any device they are using.

I ran a search for new WordPress themes the other day and while there were many Responsive themes, only four were Adaptive.  I’ve also been tracking how Internet marketers are handling mobile design because optimizing content for a small screen presents an entirely new set of hurdles for organic SEO.   Next, I tested websites listed as “Top 10 Web Design Companies” and found that while many passed the Google Mobile test, they failed persuasive design, user experience design, mobile experience design and accessibility standards.

The painful truth is the rush to get websites redesigned for Google’s mobile requirement did little to help with usability, special needs users, customer experience and conversions.  Add to this the enormous push for mobile application software that function on Apple and Android operating systems, are user friendly and competitive enough to not be uninstalled, and you may want to pause and reconsider your business goals and user requirements – just to name two.

Gathering Mobile Website Requirements

Google provides instructions and code to help companies pass their simple mobile search requirement.  What they don’t help with is user centered design techniques for mobile devices, accessibility standards compliance, persuasive design, backwards compatibility for older cellphones, usability standards for web design that translate into smaller screens, how to optimize text and links for pages instructed to place content out of view or way down a page and how to design for disruptions.

While your company may be scrambling to hire more programmers to build that next big hot mobile application or design a new visually compelling website for desktop users, have you put together your new web guidelines and style guides for mobile design?  Are you performing user testing with participants using smart phones only? Have you sent your developers and designers out into various environments to perform the tasks your target customers are going to be expected to do using your mobile application or mobile version of your website?

Formal requirements gathering is a painstaking process that includes asking difficult questions, but the exercise has a beautiful silver lining because the more detailed the discovery process, the more concise the final plan.  Your business survival is not related to scare stories from SEO’s upset over what Google demands.  In fact, search engines have the same goal as your company does, which is to give customers what they most desire.  How your company designs for mobile is critical to your success, but you cannot design what you don’t know and to be competitive with mobile design, go ahead and leave the office to watch how people use their smartphones.

Now that your website passes Google’s mobile test, you are ready for mobile user experience design by adding these criteria to your mobile design requirements:

  1. Does your mobile site make your visitors feel good while using it? In other words, they didn’t leave in sheer frustration and they refer it to their friends or social media sites.
  2. Does your mobile site do its job? You will need to test with humans to know for sure, not analytics software.
  3. Can your mobile site be used in any environment where a smart phone is used? Think farms, train stations bustling with people, government programs that provide older cell phones, and much more.
  4. Have you planned for areas where cell phone service suddenly disappears while performing a task? Can text be downloaded to read before the flight attendant asks everyone to turn off their phones?
  5. Did you test your mobile site to see how it displays on older phones and models?
  6. Are your forms re-coded for mobile usage?
  7. If you have a video, is there a text transcript provided? Does it appear, not appear, and run automatically?
  8. Are your web pages designed for one eye, one finger use?
  9. Does your header navigation disappear completely so that all that is left is a hamburger icon and logo?
  10. Can everyone use your mobile site regardless of being constantly interrupted or in a hurry?

How many times have you tried to read an article on your smart phone but are prevented from doing so because there is a form awaiting your attention first?  My tests consistently show that mobile pages remove calls to action buttons, introductory text content, navigation labels that describe in seconds the layout of the site and quickly point out where to go, load slowly, scroll forever, hide where to log in or register, hide the shopping cart section, and ignore the 10 second rule that says, “Tell me why I should stay on this page in 10 seconds or less” (some people use 5 seconds. For mobile, it can take that long to click away the ads, pop-ups and other distractions.)

Your mobile web site’s performance depends on how well your pages are designed for mobile devices.  Search engine marketers are worried that rank in Google’s mobile search index will drop unless websites are designed for mobile.  The brutal truth is that mobile design for human experience is the most important requirement on your list.