Chapter 11: Top Mobile UX Design Principles to Remember

Focusing on the user experience (UX) ensures your website is one that visitors appreciate and want to use again. With more and more people using mobile devices to access the internet, mobile UX design principles should be a regular part of your design process. The number of mobile phone users around the globe will hit 4.68 billion this year. The huge growth in the market is likely due to how popular smartphones are and the added accessibility of wireless connectivity. If your website isn’t ready for mobile users, you may lose out on hard-earned potential customers. You are likely already familiar with some basic UX design principles, but mobile UX design principles vary slightly. Here are 14 of the top mobile UX design principles to keep in mind as you work on your next project.

1. Focus on the Hook

People’s attention spans are fairly short, so make sure you hook the user from the first second they land on your site. Keep in mind that those using a mobile device to access your website are likely between meetings and have a very small window in which to find the info they need. Your headline must grab the user quickly or you risk them bouncing away to another task.

2. Cut Clutter

Since the user has a much smaller screen, it’s important to simplify your mobile design as much as possible. Since everything will be condensed, you don’t want images and text so small that the user can’t see it. Instead, cut out as much as you can so the size is optimized and the choices are limited.

3. Enlarge Links

As much as 70 percent of website traffic comes from mobile devices. Think about how people move from one point in your site to another and create links and buttons large enough for the user to tap with a finger. If you make links too small, the precision required to click the link may frustrate some users. Instead, use finger-friendly tap targets.

4. Communicate Current Location

One thing people sometimes forget to focus on is letting users know their current location on mobile. It’s easy for users to lose their way, especially with browsers that open a new tab every time the user clicks on a link. However, if you show where the user is, it is much easier for them to navigate back to the place they started when needed.

5. Strive for Consistency

Customers often use more than one channel when connecting with companies. Around 65 percent of consumers said they’ve felt frustrated over the lack of consistency between different interactions with the same company. Work toward the same appearance and features for mobile and desktop access as well as on social media.

6. Keep Font Size Legible

It’s hard to get all the information you need onto a smaller screen. However, if you go below about 11 points for your font, the text will be unreadable. It’s better to create a long scroll or remove some information for mobile rather than use a smaller font.

7. Allow Ample White Space

Another mistake some designers make when creating a mobile version of a website is pulling everything together and losing white space. However, lack of breathing room makes the text blur together and creates a crowded feel to the page. It’s better to lose non-vital elements than to push things too closely together.

8. Create High Contrast

If you want everything to appear clear, use colors that contrast sharply. For example, you might use a white background, black text and a pop of red for accent. Make sure the colors all contrast enough that users can read the text and see buttons with a quick glance. Keep in mind that some users turn down the backlight on their phones, which makes the screen appear less vibrant. Test your mobile UX design principles for different brightness settings.

9. Think About Thumb Placement

Even though the research is older, one study found that about 49 percent of people use just one thumb to complete most tasks on mobile. When you’re designing navigation placement, think about where the thumbs naturally rest as a person uses their phone and place links and buttons within easy reach. Keep in mind that mobile UX design principles such as this one require picking up a few popular models of smartphones and testing them out to see where thumb placement goes.

10. Consider Other Gestures

Tapping with a thumb or finger isn’t the only action users take on a mobile device. Think about some of the other things site visitors tend to do, such as pinching to zoom in and out. People might also double-tap, scroll and slide around your website. What result will each of these actions cause, and how can you make the process easier for the user?

11. Reduce Required Typing

Typing on a small device is difficult and time-consuming. Think about ways to reduce the number of fields and making the process simpler, such as including a one-tap option for popular email address such as yahoo.com or gmail.com. Anything you can do to make adding an email simpler for the user, the more likely they are to sign up for your newsletter or other offers. Smart mobile UX design principles focus on how to save the user time and effort.

12. Focus on the User Goal

You likely know what your goal is for a landing page. For example, you want the user to sign up for your newsletter. However, you must also consider what the user’s goal is for good UX. Why did they come to your site? What are they likely looking for? Look at information such as popular keywords to find clues about what users really want and then do your best to deliver and make it easy for them to reach their goal.

13. Personalize the Experience

People today expect a highly personalized experience when interacting with websites and apps. Think about how you can create a more personalized experience for your user. You might base the experience on location, ask for the person’s name, or create an app that sends push notifications when the user is near a store.

14. Test Your Designs

As with any type of design, it’s important to fully vet your finished project and make sure it works well for the end-user. Conduct A/B testing and also pick up a smartphone and test out different elements on your own. Anytime you make a change, test your site again for usability.

Best Mobile UX Design Principles

Some of the basic good design practices that work for any type of design also apply to mobile, such as ensuring the speed is fast and you have a firm navigational hierarchy in mind. The areas that are unique to mobile design include considering the smaller screen size and the unique way people use their phones to navigate to different elements on your page. With a little focus on user experience, your mobile site will be just as valuable as your desktop design.

CHAPTER 10: How to Become a UX Designer  CHAPTER 12: Dark Patterns: The Trickery Behind These Poor UI Tactics

The UX Design Guide for All Levels: Introduction

Chapter 1: The Top Front End Technologies for UX Designers
Chapter 2: What is the Difference Between UX and UI?
Chapter 3: The Laws of UX
Chapter 4: Why Mobile UX Matters
Chapter 5: What Is the UX Process?
Chapter 6: Why User Experience Design Is Essential to Everything
Chapter 7: What Is Lean UX?
Chapter 8: The Top UX Design Principles
Chapter 9: The Best UX Tools and Techniques
Chapter 10: How to Become a UX Designer
Chapter 11: Top Mobile UX Design Principles to Remember
Chapter 12: Dark Patterns: The Trickery Behind These Poor UI Tactics
Chapter 13: What Does Good Customer Experience Look Like?
Chapter 14: The Different Types of User Interface
Chapter 15: The Top UX Design Courses
Chapter 16: Skills Needed to Become a Great UI Developer