Mobile First Websites: Graphical User Interface (GUI)

In Part I of this series about mobile-optimized sites (“Mobile First sites”), we alluded to the rules mobile sites must conform to in order to find grace in the eyes of Google. In Part II, we looked at the need for speed as browsing and searching happen increasingly on mobile devices, and consumers prefer speedy sites.

In this new part, we’ll discuss how the design (GUI) of a mobile site contributes to its usability, the quality of a user’s experience, and beyond, its conversion rates.

Graphical User Interface & Responsiveness

Anyone who lived on the web longer than in the last 10 years will remember the clunky mobile interface of websites made only for desktop. Web designers didn’t anticipate the mobile revolution and were slow to catch up with it. iPhone was “something for Apple apps”. In the late part of the first decade of the new millennium, Flash was still at the top of what could be done with a website, and with the advent of broadband, the canons of web design favored screen-wide images, animated text over hero shots, and video served from regular hosting servers.

As a result of the design trends of the times, mobile users were saddled with websites that had to be resized with 2 fingers, and constantly re-centered with 1 finger to be read in the viewport of an iPhone 4. Loading times were horrendously long, unless you were browsing an old site hard-coded in HTML. But then again, the look and “mobile-readiness” of these sites were questionable, at best.

By 2010, it had become obvious that mobile users’ experience was crying for a long-overdue change. And then, just like that, the next revolution in design happened.

WordPress theme creators started to code themes to be resized on a mobile screen to keep them legible, and avoid the “2-finger spread” and the “1-finger drag”. The responsiveness discontinuity started with these 2 imperatives: keep the text legible by keeping the font size as was set for desktop, and organize the design elements always visible in the mobile viewport without forcing users to drag the design back to center.

The verticalization of design was a complete innovation for the industry, and so was the advent of WYSIWYG page builders. The new capacity of WordPress to recalibrate the front-end to make it display in a legible format, coupled with its ease of use and its document management capability, imposed it as the obvious replacement for the best site builder software of the mid-2000s, Adobe’s Dreamweaver.

For web designers, the new slew of responsive WordPress themes was a killer sales tool. Local business websites started to look awesome again, and thanks to a vibrant developer community, WordPress quickly expanded its already predominant market share, dwarfing all the other content management systems combined. Drupal and Joomla didn’t even stand a chance.

The discontinuity stopped there, however, at “mobile responsiveness”.

Responsiveness: Useful… but incomplete

In fact, responsiveness as both a coding and design concept has not much evolved since its early days. Mobile-responsive themes adapt to more screen sizes and more devices than in 2012. New plugins have been developed to make building a WordPress mobile site even easier.

In 2015 Google came out with AMP, a development framework designed to speed up mobile sites. AMP HTML was a rudimentary language, with a limited number of expressions, difficult to implement with a sophisticated graphical user interface (GUI). It took years to mature, and caused a lot of grief in the web design community. Its birth and maturation take place in the stream of incremental changes aiming at  sculpting the web for mobile browsing.

As imperfect as their approach to the new mobile web paradigm has been, Google has played a critical role in moving the developer community forward towards better mobile sites. By way of example, Google’s engineers have kept offering testing tools to the community, to validate their code. Google adopted WebPageTest.org to offer practical diagnostic solutions to bottlenecks and code optimization issues.

From “mobile responsiveness”, Google gradually transitioned to “mobile friendliness”. The Google Search Console is the testing framework in which this evolution is taking place.

User interface issues

Inevitably, the quest for better mobile usability led designers, developers, WordPress theme creators, and Google engineers to work on the GUI of mobile sites.

Mobile browsing occurs in a variety of situations that have little in common with the environment in which desktop browsing usually happen. Think about it: where and how you do consult your smart phone?

• • In your car, quickly, at the red light (hopefully)
  • Out in the street, night and day (when a glaring sun reflects off your screen and blinds you) 
  • With and without your readers (if you are 40+)
  • At the office, between 2 tasks (surreptitiously, as The Man doesn’t like it) 
  • With your baby in your arms (who’s the focus of your attention?)
  • At the restaurant, in a fully lit or a dark intimate setting (ah, those pesky neon lights reflecting off your screen)
  • On motorcycle handlebars, glance by glance, to follow map directions (high vibrations and traffic dangers don’t make for comfy reading)
  • Under the rain, looking for directions (trying to protect your expensive iPhone from the shower)
  • Etc…

In all these situations, at least 3 external constraints impact your visual experience:

• • Lighting conditions
  • Speed of visual interaction
  • Situational stress

These constraints will translate into a set of specific design issues:

• • Is there enough contrast between the design elements to allow a quick read in all type of lighting?
  • Are the design elements big enough that they can be read at a glance, with and without readers?
  • Are the design elements well-differentiated and their individual function recognizable at a glance through color coding?
  • Are the design elements grouped by functional types that are easy to understand?

Likewise, because the conditions under which you search and browse on a mobile device can be less-than-ideal, the ergonomics of a mobile website will affect the quality of your interaction with it.

The set of external hindrances at play comprises:

• • Small viewport size (until they invent the holographic phone)
  • Interactivity tools (fingers + voice + stylus, vs. mouse pointer)
  • Situational stress

From this set of hindrances arises a new set of graphic user interface issues:

• • Is there enough space between the elements of design to enable a clumsier interaction? (Your fingers are not as accurate as a mouse)
  • Is there too much space between the elements of design to enable quick decision-making without forcing you to move the site up and down? (Value-destructive interaction)
  • Are design elements big enough to enable a simple interaction? (Don’t you hate those extra-small buttons?)
  • Are design elements quick to respond to interaction? (Or do you need to tap twice to get a response from the site?)
  • Are design elements uselessly “floating” in the viewport? (Forcing you to re-center them left and right in a wasteful interaction)
  • Does the general page design create “reflows” forcing you to wait to interact with the site or even impeding your interaction? (E.g. bothersome ads that change the position of design elements)
  • Does the design give you a visual feedback of your interaction? (E.g. color change when tapping on an element, audible or haptic signals)

In the past couple of years, the Google Search Console has started to integrate programmatic tools designed to send you alerts (“mobile usability issues“) about perceived design flaws of your mobile site.

These alerts are not always accurate (far from it), but they call your attention to potential design hindrances that may impact user experience. Since Google never wastes a good opportunity to threaten you with de-ranking (“We recommend that you fix these issues when possible to enable the best experience and coverage in Google Search“), it’s a good rule of thumb to login to the Search Console and have a look at what their programmatic tool has to say.

This effort takes place in the framework of the “mobile-friendly” site, a design step-up from the “mobile responsive” site.

Mobile-friendly sites

“Mobile-friendly” is an expression coined by Big G a couple years ago to designate websites that comply with a set of guidelines:

1. 1. Make it easy for customers
   2. Measure the effectiveness of your website by how easily mobile customers can complete common tasks
   3. Select a mobile template, theme, or design that’s consistent for all devices

The task-oriented approach is the core of Google’s user interface design guidelines. The goal of your design is to help visitors accomplish their purpose in the shortest time possible, with the minimum number of steps, and with the greatest ease. All this in a format that is consistent across platforms. Measure and optimize.

In this approach we find commonalities with the philosophy of “lean manufacturing” pioneered by Toyota: measure and optimize your process to consume the least possible materials and energy (incl. human labor), eliminate re-work (or waste, “muda” in Japanese), bring in your materials and subsystems only as you need them, and detect/remedy quality issues as they happen (to avoid more “muda“).

Google’s approach to mobile-friendly sites is holistic in nature: align all elements of your system under a single goal of serving your customers well. Anything that does not concur to this objective is to be removed from the system.

One of the key concept behind the making of a mobile-friendly site is the hierarchization of information. As Google puts it:

“Making a mobile site requires prioritization. Start by working out what the most important and common tasks are for your customers on mobile.”

Information hierarchy

The fundamental differences in browsing experience between desktop sites and mobile sites make it necessary for web designers to organize the information presented to visitors in a different way.

The design concept dubbed “responsiveness” never included information hierarchy. Based on our experience, only web designers close to their local clients actually observed they could not show on a mobile site all that they could show on a desktop.

When local users shop for a plumber, an HVAC company or a restaurant, they typically have 5+ options to choose from within a 10 mile radius, and way more in a big city. They don’t like wasting time in navigating a complicated site.

On the other side of the ledger, local businesses can’t afford wasting leads. They are keenly aware of the calls they get, and they watch their pennies: if their website doesn’t generate business, they are quick to fire their web team. This explains why local web designers are usually a step ahead of Google insofar as the best way to present important information first. There are “the quick”, and then there are “the dead”.

Some of the issues that need to be planned out when designing a mobile site:

• • What services do people most often look for when they need a plumber? An HVAC company? A mechanic? How to display these services on a mobile site so they can be accessed with 1 single click?
  • Do visitors expect to find specials and coupons on a site they visit? If so, where to present them?
  • What do visitors have to do to find your phone number and call? Do they have to go up and down the home page trying to locate your number? Or do you show it so obviously that no one could miss the call button?
  • It is important or not to display a map with your business on it? Should this map be interactive?

All these issues relate to the hierarchy of information presented on the site. What to present, where to present it, how to present it.

Information hierarchization involves making choices in the way core information is presented, or omitted, or moved to the bottom of the menu.

In other words, it is counter-productive to show on a mobile site everything you show on a desktop site, and in the same order. Your visitors will leave in droves before they even interact twice with your mobile site.

As designers, we have to be careful to not misinterpret Google’s concern with “skinny” mobile content. Google states: “Don’t get caught in the trap of only creating a mobile-formatted site that doesn’t provide the full functionality [of the desktop site].”  Yes, Google will penalize skinny content. But they won’t penalize a site because its mobile menu is organized differently from its desktop menu. However, if your desktop site has a blog, this blog’s better be present on your mobile site.

Mobile-First sites are mobile-optimized

Google does not instruct designers as to where and how the information should be presented on a mobile site. Each client has different needs, and this is the designer’s job to define these needs correctly, and hierarchize information according to a workable model. The model just has to work for end-customers AND for Google.

This is the reason why we believe Google’s concept of “mobile-friendly sites” falls a tad short of what really needs to be done on a mobile site to make it efficient for both users and search engines.

At Eden Ads, we have pushed the mobile-friendly concept a bit further, to create mobile-optimized sites:

• • Optimized information hierarchy
  • Optimized ergonomics & graphical user interface
  • Optimized speed
  • Optimized schema mark-up for local search
  • Optimized page tagging for search engines
  • Optimized conversions

The process through which we go to design an optimized mobile size requires studying your business with you, defining what your visitors expect, what your customers buy, what offers are necessary to clinch a deal, etc.

The philosophy of Mobile First is not an after-thought, but a carefully prepared planning process
that will make your mobile site a great weapon in your lead generation arsenal.

Don’t build a mobile replica of your desktop site. That won’t generate the leads and sales you need.

Free independent evaluation

Eden Ads is a full-service digital marketing agency in Tampa, FL. Our team offers qualified local businesses a unique opportunity to have their website and digital marketing/advertising campaigns fully evaluated under multiple aspects:

• • ROI of Google Ads campaigns
  • Finding where you waste money in your Google Ads campaigns
  • ROI of Facebook campaigns
  • Search engine position checks on your 2 or 3 main keywords
  • General SEO-readiness
  • Adequacy of mobile design
  • Google speed scoring of your mobile website

This free independent evaluation can reveal weaknesses that hurt your site and prevent it to get to the top of search results. It can also highlights design issues blocking it from converting more visitors into leads. Call our web consultants today at (813) 940-5699 to request a free independent evaluation, and discuss your most pressing needs.

If you’re want results, speak with one of our Marketing Consultants to find out how we can help you! Call us at (813) 940-5699 or make contact with our team via our secure online form.