Designing for Mobile: Tips for Usability and Accessibility

In first grade, my computer class would dedicate ten minutes each day for us to draw a picture on our computers from the teacher’s example on the projector. No matter how much I tried, mine looked worse than everyone else’s. It wasn’t necessarily because I was a terrible drawer (I mean, it was first grade, we all were), but rather because I was one of the only students who was using the mouse with my non-dominant (right) hand.

I recently experienced similar frustration with a mobile app. Every time I tried to select the CTA I wanted, a different CTA would appear on the left screen where I was hovering, resulting in me firing the opposite action than I had intended. It turns out, oftentimes mobile experiences are designed with the majority of users (right-handed) in mind.

While left-handed individuals make up only ~10% of users, there are a considerable amount of other users that get neglected in the design process. However, by paying attention to usability and accessibility best practices, designers can keep unique user difficulties in mind and design better digital experiences for everyone.

Usability and Accessibility: What’s the Difference and Why Do They Matter?

Usability and accessibility are used interchangeably since they aim to improve user experience, but they actually focus on different goals. To understand where each of these comes into play, let’s run through them individually.

What Is Usability?

Usability assesses how easy it is for users to interact with an interface with few errors while limiting frustration and increasing satisfaction. A process with great usability is easy for a user to learn, adapt to, and remember.

Usability is crucial, especially for saturated industries and markets. Your business can sell the highest quality products or services, but if a user can’t locate the product, get their questions answered, or easily complete checkout, they might just settle for a lower-quality product that offers a more usable web experience. The bottom line is that the usability of a site can make or break a business.

What Is Accessibility?

Accessibility, on the other hand, is more of a “usability 2.0.” While usability aims to improve the general user experience, accessibility focuses on creating equally positive experiences for users who may experience various technological, learning, or physical disabilities. An example of an accessibility measure is creating image alt text so users with screen readers can use audio to visualize image content. Another example is providing settings to make text appear larger for users who have trouble reading small text.

No matter how relevant or engaging your content is, if your website or app isn’t intuitive for the typical user and those with disabilities, they won’t return to your site. As more businesses emphasize mobile experience optimization, you must understand how to meet all of your users’ needs to keep them happy and, as a result, meet your business goals.

Mobile Usability and Accessibility

Designing to meet users’ needs for desktop experiences is already a challenge; however, there is more to consider when designing for mobile experiences. Regarding usability, users interact differently with mobile devices than computer monitors and laptops. For example, users read content differently on a mobile device than on a desktop. Instead of reading in the typical patterns as expected on a desktop device, mobile users tend to focus on the center of their screen first.

""
Image source: Toptal

Not only that, but users hold their mobile devices differently than they do a computer mouse or a laptop. Rather than merely reaching out and touching a computer, users treat mobile devices as an extension of their own hands, and they do so in a couple of ways. According to UX Matters, most users hold their phones in one of three ways:

  • 49% of users hold it in one hand
  • 36% of users use one hand to interact while cradling it in the other
  • 15% of users use two hands to hold it as if they were using a small tablet
""
Source: UX Matters

It is important to know that most users favor holding their smartphones with their dominant hand and design with these physical user behavior patterns in mind.

It is also important to question whether the two-handed users prefer to hold their device this way, or if they feel obligated to through usability issues they have faced. Users may feel compelled to use both hands due to the large size of their screen, making it heavy to hold or hard to reach certain areas.

The thumb zone in the image below shows the areas users can and can’t reach while using one hand. The green area indicates the most natural zone for users to interact with mobile pages. The yellow area showcases the area it is possible to reach but might take more effort. The red area signifies hard-to-reach areas.

""
Source: Addy Osmani

A standard smartphone screen already loses a fourth of its real estate when determining where to place important information, icons, and CTAs, and it is only losing more as new versions with larger screens roll out. Below, you can see a progression of how much reachable space has decreased over time.

""
Source: Scott Hurff

Since users can interact with your content on devices that drastically differ in screen size, optimizing for physical disabilities and impairments is difficult. With desktop experiences, it can be a bit more “one design fits all.” But when it comes to mobile experiences, there are more ambiguous changes to try and stay ahead of, like new sizes of screens rolling out every few years. Not only does the large screen size make it harder for users with disabilities to use, but mobile devices can also cause users to develop more mobility issues as time goes on.

How to Incorporate Usability and Accessibility in Mobile Design

So now that we know the importance of designing with all users in mind, let’s go through how to do it, with a few good and bad examples. To design for mobile, here are four best practices to follow.

1. Center Important Content

The best option for copy, CTAs, icons, or features, is to center them on the screen as much as possible. As previously mentioned, mobile users look to the center first when reading. By locating the most important copy there, users can get the information quickly at first glance.

""
Source: Smashing Magazine

Another reason to center important features is so users can easily reach them whether they are right- or left-handed.

""
Source: Smashing Magazine

Centering content doesn’t just help users find information quickly, but it also helps them convert quickly. Most businesses rely on users easily hitting that CTA button to drive a lead. If CTAs or other important icons that users will need to select are out of reach or placed on just the left or right side, it takes users more time, energy, and mental load to select them.

2. Make Important Features Reachable

Aside from centering content, critical elements should be located toward the bottom of the screen. This could include menus, important icons, CTAs, and even navigation panes.

If you have ever fumbled trying to switch your camera’s perspective or hang up a video call on Instagram, it is likely because the most important and most used icons are out of the mobile thumb zone for users, no matter what hand you use.

""
Source: Guiding Tech

Instead, a better example of a usable video call design would be IOS FaceTime. The features like mute, flip, and hang up are easier to access on this interface since they are located at the bottom of the screen. This means you can quickly and easily select the options you are most likely to use without straining your reach or using two hands.

""

Many other businesses are adapting to users’ needs by creating bottom navigation panes and sticky menus in their mobile interface. Spotify identified that the most common user needs are to access their home screen, playlists, and search. They have included these key features at the bottom of the screen, where the settings and account information are harder to reach since they are visited less frequently.

""

Dusen Dusen has a sticky menu that stays at the bottom of the screen as you scroll up and down the page, so users don’t have to scroll to the top to view their main menu or view their shopping cart. This improves the ability for users to explore other pages and enter the last stage of the buyer’s funnel without having to scroll to the very top all over again.

""
Source: Dusen Dusen

Even Google has participated in this trend and recently added an address bar at the bottom of the page and the top, so users don’t have to strain their fingers to type in a query.

""

3. Test With Diverse Users

After making design decisions, it is time to test. Testing how users interact with your mobile interface can help you identify usability issues. But, to help ensure that your site is accessible, it is vital to diversify your test subjects. Make sure your group has a representation of mobility, vision, hearing, or learning disabilities. This will help catch any usability and accessibility holes missed and help your designers proactively solve them before users have to suffer. If you don’t have the option to widely diversify your test subjects, provide means for them to interact with the digital experience in different ways. For example, asking users to navigate an app or complete a task with their non-dominant hand or with more limited reachability can help identify how easy it would be for others different from them.

4. Prioritize Usability and Accessibility Over Aesthetics

One issue with mobile design (and design in general) is that oftentimes, companies will favor aesthetics over practicality. Since mobile design is becoming more prevalent and important, businesses try to be aesthetic, trendy, and different. The fact is, no matter how good a website looks to the naked eye, if it is hard to use, it doesn’t matter. Sure, a pretty website is intriguing, but it won’t gain lifetime users if there are heavy usability flaws. Ensuring that your users can interact with your site regardless of their age, mobile ability, or prior experience will stretch measures beyond an aesthetic website.

In Other Words

When it comes to designing digital experiences, a considerable portion of users’ needs are not getting met. Even if businesses and designers make waves when appealing to various users on desktop experiences, it can be harder to apply on mobile devices.

It can be difficult to proactively design with users in mind, especially if you do not experience the same challenges as others. As I discovered, just the challenges I have faced as a left-handed user have shown me how easy it is to miss certain accessibility best practices if you are not personally affected by them.

To improve usability and accessibility on mobile devices, it is important not to see your user as you see yourself. Instead, question if your design could pose risks to those with trouble reading small text, viewing certain colors, clicking small icons, and more.

By understanding your users’ unique circumstances, not only can you uncover why your bounce rates and performance metrics might have been suffering, you can design experiences that can benefit both your business and your users in the long run.

Katie Spencer

Content Specialist
Content Specialist

Katie is a content specialist at Portent, with a background in journalism and media communication. She applies her insights into human behavior to expose the “why” behind a winning piece of content, and enjoys blending her creative and analytical sides to build successful content strategies for clients. Katie loves the local music scene; when she’s not at work you’ll likely find her discovering her new favorite band at Seattle’s indie radio station, KEXP.

Start call to action

See how Portent can help you own your piece of the web.

End call to action
0

Leave a Reply

Your email address will not be published. Required fields are marked *

Close search overlay