Mobile First : Best Practices and Patterns Part 3
Mobile Patterns & Best Practices
Part 3 of a 3 part series. Read part 1 and part 2.
As I explained in part 1, mobile design is all about minimizing friction. Imagine if every website you visited worked in a completely different way. What if navigation, adding items to a cart, product browsing flows were all completely unique experiences that had their own original interactions and components from site to site? How would you know how to use each site? You’d spend time, and probably lots of it, trying to solve a unique puzzle every time you wanted to order tickets to a concert, or find information about that new product your friend mentioned. Patterns help to minimize this friction for your user.
When I talk about patterns, I’m talking about interaction design. Interaction design patterns are solutions to common usability problems in a given context. Your UI should employ these common interaction patterns whenever possible. Patterns will help you adhere to usability standards and best practices.
In the previous two parts of this series we established that mobile users are different from desktop users. They think differently, their motivations are different, and the hardware they’re using is different. So naturally, mobile users also require different interaction patterns.
The Hamburger Menu
The infamous hamburger menu. You may love it or hate it, and there are countless articles spanning the internet to argue the benefit or detriment of this pattern. I am of the opinion that the hamburger menu has it’s place, and can be used to enhance the mobile user’s experience.
As a general rule, sites with more than 5 top-level primary navigation links can and should be condensed in some sort of menu system on mobile. A hamburger menu is perfect for this. Some of the concerns around the hamburger menu center around it’s discoverability. I have found that labeling the hamburger icon (with “menu” or “shop”, etc.) helps to increase the discoverability of the menu system. I also recommend breaking out the navigation links on your site homepage so mobile users can see all categories upon landing.
Overall, hamburger menus are a useful and distinctly mobile pattern. I would not recommend utilizing hamburger menus on desktop sites. Mobile sites are constrained by screen size, but on desktop you have the real estate to display your full navigation to your user. So why condense or hide it? When you have to conserve space as you do on mobile, hamburger menus are a solid method of doing so.
Fixed Headers & Back To Top Buttons
There once was, and truthfully still is, a belief that users are afraid to scroll. Really, there is concern that users on every device type will a.) not realize they can scroll on a website if an element appears below the fold of the screen and b.) should your user by chance scroll down, they won’t be able to scroll themselves back up again.
The first issue with this line of thinking is that you give your user absolutely no credit. The second issue is the way that people try to solve for this “problem”.
One solution is the fixed or “sticky” header. Fixed or “sticky” headers have seen their share of popularity. These headers on mobile eat up valuable vertical screen real estate and don’t provide a tremendous amount of value to the user. Generally your user’s know to scroll back to the top when they want to navigate, that is a basic pattern that exists across the web in all forms.
A better solution, in my humble opinion, is the “back to top” button which usually appears on particularly lengthy web pages. A great use of these buttons is on product grids with lots of results. They allow your users to jump quickly and easily back to the top of the page when they’ve scrolled to the bottom of a page that’s loaded, let’s say, 150 products. These buttons don’t eliminate vertical real estate, and they don’t exist on the assumption that your user isn’t smart enough to scroll back up. They simply exist to help your user perform a simple action faster.
Breadcrumbs
I often find myself in a position where I have to make a case for including breadcrumbs on sites. I’ve found breadcrumbs to be extremely important for mobile users.
They’re particularly helpful for users dropping in from search engines. Breadcrumbs give your user a sense of where they are within the site when they land, and gives them a jumping off point for navigating to other related categories to continue browsing.
I’ve also seen many mobile users use breadcrumbs to navigate backwards through a site, instead of using the native back button on their phone.
Breadcrumbs occupy a minimal amount of screen real estate, and are ultimately very helpful form of navigation for your user.
Search
Search, particularly on commerce sites, is a primary form of navigation for many users. Mobile users tend to browse with an end goal in mind, so allowing them to search for the exact product that they’re looking for is key.
A common pattern that came out of the need to reduce header space on mobile was the collapsing the search bar behind an icon or hiding it within the navigation menu on mobile. This reduction of visibility often results in a drop in conversion.
Keeping your search bar exposed and always visible in your site header is great way to get your users to utilize the search function.
Buttons
It’s estimated that 70-95% of the world’s human population is right handed. With the vast majority of the population being right hand dominant, it’s a fair assumption that most mobile users will be holding their phones in their right hand and navigating with their right thumb. If the buttons on your mobile site are aligned to the right ride of the screen, that makes for an easier reach for your user’s right thumb.
You might be thinking, “why right align my buttons to accommodate right handed users when I can make them full width and therefore an easy reach for both right and left handed users?” That’s a reasonable enough thought process, but there’s a reason why it may backfire on you. That reason is a phenomena called banner blindness.
Banner blindness is when users consciously or unconsciously ignore content on a web page that they perceive to be associated with a banner. Full width buttons are at a high risk of being ignored because users perceive them to be unimportant, banner-like information. Half width, right aligned buttons usually perform better that their full width counterparts on mobile devices.
Forms & Inputs
The last patterns I’d like to address in this series have to do with forms and inputs. Forms are mobile user kryptonite–the bane of the mobile user’s existence. Forms can be long, requiring a lot of different inputs, and cause confusion and feelings of tediousness. Bad forms can be conversion killers, but there are ways to make them less painful for your users.
Forms fields should be kept to an absolute minimum. In your checkout process, do you really need your user to enter both a home phone number and a mobile phone number? Is their company name absolutely necessary? If not, get rid of it. Every non-essential field in a form is a potential roadblock for your user.
Form fields should also run the full width of the screen, and have an omnipresent field label attached to the top of the field. Not only is this easier for your users to read, it’s also an accessibility requirement.
You should also take every possible opportunity to pre-populate information for your user. If they’re logged into their account on your site, pre-populate their name and e-mail address in the checkout form. By doing this you’ve potentially just saved them the time it would take to enter 3 additional fields (and remember time is of the essence for mobile users).
One of my favorite time saving techniques on mobile is the implementation of Google Place Autocomplete. Google Place is a huge time saver when utilized in a checkout flow. It allows your user to begin typing an address which Google will autocomplete, saving your user the hassle of entering each component of their address into individual fields.
My final tip for creating a mobile form that adhere’s to best practices is a simple one. Serve the correct keyboard for the corresponding field type. When your user taps into the phone number field, bring up the numeric keyboard instead of the alpha-numeric keyboard. It’s easier for your user to tap the appropriate digits, and they don’t have to toggle the alpha-numeric keyboard on their own. It’s a low effort adjustment, that will save your user friction.
Forms and inputs on mobile are difficult experiences. But adhering to some of these patterns and incorporating some best practices can save your users a lot of friction and help them accomplish their goals quickly.
That concludes my three part series on mobile design. This is a huge topic, and one I could write about for days. I hope this series has been both informative and engaging. Mobile design is a constantly changing and evolving area, and I hope to continue writing more about it in the future.
Thanks for reading!
