Monthly Archives: October 2021

Site Speed Optimization: Testing & Measuring

Site Speed Optimization: Testing & Measuring

The Local Tampa SEO System Emblem - Spicy Nuggets Eden Ads

SPICY NUGGET
The primary purpose of optimizing the speed of your site is not getting better grades from Google. No. It is to improve the experience of visitors of your website, to accomplish the purpose of your business.
 Phil Chavanne, CTO

In this video, we show business owners how to test properly the speed at which their home page loads. Testing is done in several browsers to understand your visitors’ visual experience, then in PageSpeed Insights, the tool used by Google to measure the speed indicators called “Core Web Vitals”.

Google and Lighthouse have developed the Core Web Vitals as speed optimization benchmarks for mobile websites. Passing the Core Web Vitals is both an achievement and a necessity for business owners: Google is pressing web designers and business owners to speed up their mobile sites to improve visitors’ experience (“Customer Experience” or “User Experience”) on their site.

Google has made increasingly clear over the past 3 years that the experience offered by a website to its mobile users ought to be a core focus of businesses, and that obtaining a passing grade on the Core Web Vitals (in order words, making a site really speedy) would be a ranking factor going forward. Better speed, better ranks.

Site Speed Optimization is measured by the Core Web Vitals Score of PageSpeed insights - Eden AdsUnderlying reasons

Google’s position is reasonable in more than one way. Google does not emphasize SEO at all… but points to user experience. Many studies have shown the negative effects of a slow site on its visitor traffic:

      • Potential visitors are turned away before they even visit
      • Potential buyers abandon their shopping cart before completing their transaction
      • Visitors form a negative opinion of a company (frustration, impatience)
      • Bounce rates (single-page visits/multi-page visits) reach high levels, penalizing the Google ranking of a site
      • Visits become shallow (few pageviews): visitors don’t see enough information to form a bond with the business

Google suggests business owners to take a good look at their website and to work to help visitors accomplish quickly the purpose of their visit. (We discussed this point in a blog post about mobile-optimized sites)

In other words, to quote Google: “Making a mobile site requires prioritization. Start by working out what the most important and common tasks are for your customers on mobile.

We encourage all local businesses to test their website speed at https://developers.google.com/speed/pagespeed/insights/; or to use the free Core Web Vitals testing tool we have integrated on this website: https://edenads.com/what-we-do/#searchengine to guide you through your site speed optimization.

Note about testing

It is important that you clear your browser history and cookies before you test, because if you have been on your site before, it is likely your browser will have retained some of it in memory. Browsers do this to speed up access to websites you visit. To observe the real experience, clean up your history and cookies.

Slow site? Failing the Core Web Vitals?

If your site is slow, or fails the Core Web Vitals test, take advantage of our complimentary consultation. We offer a site speed optimization service with a goal of reaching scores of 90/100+ for both mobile and desktop.

Give us a call at (813) 940-5699.

Mobile First Sites: Designing for Outdoor Use

Mobile First Sites: Designing for Outdoor Use

The Local Tampa SEO System Emblem - Spicy Nuggets Eden Ads

SPICY NUGGET
We use our mobile phones in weird and stressful circumstances. Web designers must re-think their mobile GUIs to minimize the negative effects of external, non-controllable constraints on the browsing experience.
 Phil Chavanne, CTO

This is Part V on our series on mobile-optimized websites (aka “Mobile First Sites“). We will deal here with issues of legibility related to how mobile phones are used.

Mobile-optimized websites must be designed with the specific circumstances of their use in mind; and this is just another reason why “just responsive websites” are a thing of the past.

Mobile phones: keeping close tabs on them

Mobile phones rarely leave our line of sight, and when they do, research shows we really feel bummed out. A term was coined in the UK in 2012 to designate this fear: “Nomophobia“, a “fear of not having your phone around”.

According to a study conducted by Monash University in Australia, some 99.2% of the Australian population using mobile phones would have nomophobia (really?).  A study conducted in 2019 on a small sample of the U.S. population of university students showed that 75% of them would present moderate-to-severe symptoms of nomophobia.

 

Nomophobia and the prison of mobile phones

 

Since we apparently don’t like to be separated from our mobile phones, it is safe to assume that we use them everywhere: at home (in the weirdest places), at work (where we may not be allowed to), and everywhere in-between.

A couple of statistics clearly show this is indeed the case:

      • 70% of employees keep their phones “within eye contact” at work. [Career Builder, 2016]
      • 88% of smartphone owners use their phone while driving on average 3.5 minutes/hour every day. [Zendrive, 2021]
      • 80% of shoppers use a mobile phone in a physical store. [OuterBoxDesign]

What does this imply for web designers?

A Variety of Situations

In a previous blog post, we discussed a variety of situations in which we use our mobile phones:

      • In our vehicle
      • Out in the street
      • With and without readers
      • At the office
      • With children in tow, babies in arms
      • At restaurants, coffee shops
      • In stores
      • Etc, etc, etc.

 

Using a smart phone in many different situations: the reason why mobile first sites

 

In all these situations, we highlighted 3 external constraints impacting visual experience:

      • Lighting conditions
      • Speed of visual interaction
      • Situational stress

All 3 of these constraints are likely to cause a user to bounce off our mobile site faster than normal (not good for SEO and lead generation).

Let’s dive into each one to discuss how a Mobile First site will tackle them.

Contrast

The LED screen of a mobile phone emits a good amount of light at a short distance, but contends with a much more powerful source of light: the sun. The glare of the sunlight on a phone screen make it harder to use it outdoor. You can’t outpower the sun. You can’t count on people to use anti-glare screens on their phones either.

As a web designer therefore, if you want to ensure your Mobile First website remains legible, boost the contrast of your mobile design.

The eye and the brain perceive objects by differentiating them from their background. Shape and color are perceived almost simultaneously (See reference study). Color catches the eye but color alone does not identify the object for the brain. Contour, form, or shape does. The cleaner its contour, the more identifiable the object. Contour includes 3 dimensions, as depth defines the limits of the surface of the object.

 

visual contrast and clean edges

 

A “clean” contour means a sharp differentiation of the edge of an object from its background. As web designers we work in 2 dimensions, and add artificial shadows and a Z axis to create the illusion of depth. Sometimes we use the 4th dimension, time, with animation.

But the web is essentially two-dimensional, and flat objects can’t count on relief (3D form) to be further differentiated from their background.

The sharper their edge, the more readily identifiable objects become.

Let’s take an example. The letter “F” is shown here in 4 different ways:

 

Differences of lebility stemming from contrast between object and background

 

Obviously, #2 and #4 are more identifiable than #1 and #3. The edge of the letter is crisper, sharper, more differentiated in instances #2 and #4, and much more fuzzy in #1 and #3.

The background color does not help. We measured the contrast ratios of each set (foreground color vs. background color) using the accessibility tool offered by WebAIM:

      • #1    CR= 1.15:1
      • #2    CR= 3.99:1
      • #3    CR= 1.55:1
      • #4    CR= 6.48:1

In cases #1 and #3, the shape/contour of the letter F isn’t quite easily as perceivable as in cases #2 and #4.

The contrast ratio of #2 is about 61% that of #4. Yet both letters can be easily perceived. Their contour is clearly differentiated from the background.

If color takes a backseat to contour, it definitely accentuates contrast or decreases it. Try looking at your mobile screen in bright sunlight and reading yellow (or light grey) letters against white background. You will be fighting with a lack of contrast due to the power of the sun.

In WW I, French soldiers where doning light blue uniforms. German soldiers uniforms were dark green-brown. Guess who was killed more easily against the muddy backdrop of the terrain in Northern France?

Here is an example of the impact of color on legibility:

 

Example of the impact of color on contrast and legibility

 

The 4 letters present the following contrast ratios:

      • #1   2.51:1
      • #2   1.37:1
      • #3   6.38:1
      • #4   1.31:1

Letters #1 and #3 are sharply differentiated against their background, but “red bleeds over green” and the contour of the letter F in #1 isn’t as sharp as in #3. Although #2 and #4 have almost the same contrast ratio (1.37:1 vs. 1.31:1) and their edges are still well defined against the white backdrop… green stands out better against white than light grey against white.

Color accentuates or decreases differentiation between foreground and background.

It can make the contour of an object appear more fuzzy when the background color blends into the object color.

A good illustration of this phenomenon is the difficulty facing graphic artists when they need to separate two objects of similar color, like a black tire against the asphalt of the road.

 

Illustration of the lack of visual contrast at the contract patch of the tire and the asphalt

 

The designer of a Mobile First site will take contrast into consideration in the very early phase of the design, when defining the color palette of the site, the color of the fonts and the color of the background.

This is one of the reasons why the “Mobile First” philosophy changes design habits: designers can’t just design for the desktop and “hope for the best” for the mobile site. On mobile, tested in various conditions, the resulting website may be very difficult to read, and ultimately call for a redesign.

Size and separation of design elements

Speed of visual interaction is the second external constraint bearing on mobile site design.

We often use our mobile phones in situations where time is a factor: looking for an emergency plumber; finding quickly the location of a restaurant when driving to the place; answering text messages as the red light turns to green; comparing online prices when we are in a store; etc.

Considering time is of the essence, a mobile-optimized website will have certain qualities: it will download fast, clearly show where to find relevant information, and display such information to make it easy to interface with it.

We wrote about the topics of mobile speed and information hierarchy earlier in our series on Mobile First sites, and we also discussed graphical user interface, notably in relationship with the tools we use to interact with phones: our fingers, mainly.

Although our fingers are pretty good at macro motions, they can be clumsy when the design objects display on the surface of a mobile screen are small and too close together. So the size factor plays a role in the legibility and usability of a mobile phone interface.

Mobile usability is impacted by the degree of separation and proximity of design elements.

Too close to each other, desgn objects can’t be handled easily. Too far from each other, their functional relationship may become difficult to grasp quickly. We’ll discuss this specific aspect in a later post.

Google’s engineers have worked to make designers more aware of the separation/proximity issue: the Google Search Console sends us messages to warn us that elements are too close to each other, and urges us to take action (under penalty of seeing our rankings fall off the sky).

 

Google Search Console Design Warning

 

Because Google only identifies these issues programmatically (algorithmically, without human intervention), the warnings are not always right. But they deserve a look, if only to make sure our mobile site is indeed usable as intended.

Compounding ergonomic issues, the speed at which we have to make choices — because of the circumstances in which we use our mobile phone — makes usability a real problem when design elements are too close to each other, or not contrasted enough to easily recognize them and their function.

Lastly, for those of us who are 40 and over, if we consult our mobile phone in our car or even in the street, chances are we don’t wear readers… which makes interacting with bad design a real source of frustration. Again, contrast, size, and degree of separation of the design elements will impact mobile user experience in a variety of unfavorable situations.

An example from the real world 

We are in a car, and looking for “Chinese restaurants near me” to select one based on description, proximity, and reviews. We are using Google Maps, the absolute best finder of “Chinese restaurants near me” ever devised on the web. It’s a last-minute decision, and we are near closing time. The car is stopped; we are good drivers, we are not driving and reading our phone at the same time.

This is what Google Maps shows us. Considering the above, what would you change in this GUI to make it more usable?

 

Searching for a Chinese restaurant on Google Maps - Busy GUI            Finding information about a selected Chiense restaurant on Google Maps - WTMI

 

Spoiler alert: If you have followed the explanation above, you’ll probably have answered that the elements are too small and too close to eath other.

And you would be right!

There are several other issues with this GUI design, but we keep our powder dry for another blog post.

Situational Stress

We all have been in situations where we had to make decisions under immediate stress. The hormonal secretions caused by stress (“fight or flight”) have an effect on our vision. A well-researched aspect of this issue is the “tunnel vision” effect that sets in when we drive at high speed. Tunnel vision is a focusing of the field of vision and a decreasing of peripheral vision. When we have “tunnel vision”, we are less able to see things around.

Stress also creates “mental chaos”, a temporary incapacity to focus on a task. If you have ever been trying to help someone in accomplishing a technical task requiring a lot of attention under stressful conditions, you have a representation of what “mental chaos” or “mental dispersion” is.

Tech support hotlines are manned up with staffers who, beyond their technical savvy, can also tolerate intense emotional behaviors: angry or tearful callers who don’t know what they are looking at, and won’t easily look where you want them to look to resolve the situation they call for.

 

stress and emotional outbursts

 

Since we use our mobile phones in all kinds of situations we probably shouldn’t, or simply under unfavorable circumstances and pressed by time constraints, we are liable to miss some of the clues the website we are looking at is giving us. This is particularly true of graphical user interfaces with small, low-contrast objects.

One such instance is “neumorphic design”: beautiful design, but very difficult to read on a mobile phone.

 

neumorphic interface objects

 

Not being able to see or find what we need when we need it (in a hurry) induces more stress and frustration. Chances are we take it out on the website and bounce off really quick, with a bad experience.

Never mind that this bad experience is, to a large degree, due to our specific browsing circumstances. We will assign the blame to the website.

For the sake of their clients, therefore, web designers must conceive mobile GUIs that minimize the incidence of situational stress.

IN Summary

External constraints such as sun light, stress, and speed of interaction impact visitors’ browsing experience. In turn, this experience affects their behavior vis-à-vis the website they visit.

A mobile GUI that is not calibrated for outdoor use and ignores those external constraints will lead to the premature loss of potential leads… A situation which stands at the wrong end of your client’s expectations.

Mobile First sites are designed from the ground up with the external constraints of outdoor use in mind.  

Call Now Button