Like everything else in digital marketing, the more data you have on customer behavior, the better you can optimize your marketing around your audiences. And it’s no different when it comes to design usability. Over the years, many companies have invested in website and mobile eye-tracking studies, which look at how users interact with a site.
Not surprisingly, such studies aren’t done for purely academic reasons. The data has shown that even slight changes—moving an image, changing a button, or the location of a call to action—can mean the difference between converting someone and leaving money on the table.
The science around eye-tracking is quite sophisticated, and with heatmap data from sites such as Hotjar, user experience designers can get a good handle on what’s working and what isn’t. That said, interpreting the data is still more art than science. The human eye, for example, moves three to four times per second on average, pausing to sample information that attracts its attention. And because it’s not always obvious what that will be, any new user experience should be tested.
Difference between Desktop and Mobile Usability
Good desktop and mobile designs share many best practices, especially with responsive design, which is the same content poured into a different layout based on page breakpoints. The usability must be designed so that it’s great for both mobile and desktop. That said, there are key differences that affect how you might design the layout, based on what we know about user behavior. In particular:
Readers scan landing pages
As early as the mid-to-late 1990s, eye-tracking studies began analyzing how visitors experienced website desktop pages. What was clear then and still clear today is that visitors don’t read a landing page; they scan it. On a desktop, they typically do so in a “Z” pattern, per the famed Gutenberg Diagram.
The diagram exhibits the Western behavior of reading left to right and top to bottom, where the content in area 3 is often ignored due to the way individuals scan the page, with the top left and top right being the two primary areas of focus. Area 4 is where individuals settle and pause, which is one reason call-to-action buttons are often found here.
Individuals scan in mobile, too, but they do so in an F shape, which is more similar to an article on a desktop: The eye scans left to right across the top, then moves down and scans left to right again, and keeps moving down.
On mobile, most individuals read in portrait mode, so there’s not a lot of room for different elements moving left to right, as there would be on a desktop. It’s mostly a downward movement (and make sure there’s no horizontal scroll). Keep in mind that most users hold their mobile device at a focused distance of 20 inches (50 cm), versus about two feet away for a desktop.
“Above the Fold” still holds true on desktop but not on mobile
“The fold” is the average bottom of the top viewable portion of any page on a desktop. In the early days of the Internet, many design experts believed that users didn’t scroll much—that if the top portion of a page wasn’t interesting, the user simply exited the page, never seeing anything below the fold. To an extent that’s still true today: If the content above the fold isn’t immediately engaging, no one will see what’s below it. That’s one reason designers have created new features such as “skinny” navigation and have removed ads from the tops of many pages. Today, eye-tracking studies and mouse-based heatmaps have confirmed that users continue to scroll down a desktop page if the content is interesting (although the top remains the most heavily consumed portion of any page.)
On mobile, it’s a completely different story. The default behavior on phones is to naturally scroll down. Because of this behavior, well designed mobile websites take advantage of the anticipated downward motion of the user.
What Eye-Tracking Tells Us about General Usability on Both Mobile and Desktop
Again, mobile and desktop share many principles when it comes to user experience. Regardless of the screen size or shape, the eye is naturally drawn to particular elements. Here are a few best practices to think about:
Use whitespace or negative space effectively
On both mobile and desktop, it’s critical not to crowd too much in any viewing window. On the desktop, keep the design airy, with no more than four or five content items viewable at once. On mobile, the best practice is to focus on one content area—or at most two, depending on the responsive breakpoints—in the viewing window. Keep plenty of negative space so the visitor can focus on the primary content.
Use imagery or color to draw the eye and communicate an idea
If you use whitespace effectively, your visuals will stand out. But images don’t just draw the eye—they also help communicate about the topic. For example, let’s say you have a conference to promote. Studies indicate that simply showing an image of a crowd versus, say, an alternative concept or design could boost registration rates by 40%. Similarly, using color and contrast can change the visual “weight” of an item on a page. Usability best practice is to design pages that invest the weight in clickable items, such as call-to-action buttons
Test the call-to-action locations
Call-to-action (CTA) buttons such as “buy now” should be weighted on the page and stand out in terms of contrast. But the location also matters. If there’s too much whitespace or too much distance a CTA button will seem disconnected from a description or pricing, and can be demotivating. For example, putting the price closer to the CTA button on a product page can increase how many individuals add the product to their cart simply by visually facilitating the next step.
Develop a page hierarchy
The old journalism maxim “don’t bury the lead” holds true for webpages, too. Having the right page hierarchy is important; studies show that people first look for the big idea and then scan down a page, stopping at headlines to learn more. So start with an H1 headline at or near the top (there should only be one H1 per page) and then move down the page to H2 and H3 sub-headlines. Creating a good hierarchy makes the page easy to follow and scan. In other words, put the big idea upfront, then design the page around supporting points. This is a good rule for any design.
Conclusion
These are just a few tips to help you design a page that creates a great user experience. If you have questions on how to enhance your user’s journey or need help in design, don’t hesitate to contact us at MOSAIC for creative and marketing support.