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.
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.
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.
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:
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:
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.
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).
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?
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.
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.
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.
