Mobile First : Best Practices and Patterns Part 1
User Behavior
Part 1 of a 3 part series
In August of 2010 I was a 21-year-old fresh out of art school. I had a degree in graphic design and zero experience in a world where an entry level job requires at least 2 years experience. The path ahead of me was not clear.
After months of hustle I landed my first job at a startup that specialized in building mobile websites for retailers. I knew nothing about mobile design. Hell, I didn’t know anything about web design. My classes at school focused on print design. We were taught how to one page build flash websites (ha!).
Nonetheless the founders of the company saw something in me and hired me. I promised myself I’d work as hard as I could to learn everything there was to know about mobile design. And I did. And I kept learning. I spent 6 years at that job, and I spent 6 years learning about how to design mobile websites, native apps, and responsive websites. I’ve since left that job for another job in another industry. But still I’m often asked about mobile design, about best practices and patterns.
I could write for days about mobile design. It’s a huge, at times complicated, subject. I wanted to write a series about my experiences in mobile design outlining best practices and patterns that you can use when you begin to think about designing for mobile. This series will focus on mobile web patterns, best practices, and the behavior of mobile users based on my experience in the space.
Let’s begin with user behaviors.
Users Move Fast & They Aren’t Paying Attention
Mobile users are different. They behave differently and they operate under a different set of conditions than your average desktop user.
The average human attention span is about 8 seconds long. Couple that with the fact that a mobile user is easily distracted and frequently interrupted and you find yourself with an interesting challenge when designing mobile interfaces.
These users are also looking to accomplish their task quickly. They’re spending less time on the mobile site than they are on desktop, but they’re looking to accomplish the same overall goal.
This user is sitting on a bus commuting home and they’ve realized they forgot to order a mother’s day gift. They’re in a waiting room, and they’re looking at a sale they just got an email about. They’re standing in the aisle of a store trying to price compare a product they see on the shelf.
You need to engage your user almost immediately and set them on a path in which they can accomplish their goal quickly and efficiently.
Keep It Simple
To conform to mobile user scenarios, you need to break down your flows into simplified tasks. You only have a few minutes of their attention so you need to create a frictionless path to a goal.
One way to do this is to take away barriers and extraneous information.
Imagine you’re the person from the scenario above who forgot to order a Mother’s Day gift. You’re on the bus on your way home when the realization hits you- you have to order a gift today and get next-day shipping to have it in time. You go to your mom’s favorite website, momgifts.com. You click on the “Dresses” category in the sites navigation and you land on a page with a large banner advertising the new line of sweaters. You’re confused, you want to look at dresses. You spend a minute looking around for a link to take you to the dress product grid. You look up and realize the bus is about to pull up to your stop. You put your phone back in your pocket and make your way off the bus, forgetting about what you were just doing.
Hitting that marketing page for new sweaters instead of the dress product grid confused the user and caused them to spend another minute trying to find a way to get to what they really wanted. That was a friction point, and it potentially cost you a sale.
When designing mobile first, an option would be to limit those pages and relegate them to special sections of the site outside of the purchase path. Perhaps you only hit that sweater page by clicking a special banner on the homepage, or by navigating to the “New Arrivals” category. These methods allow the user to click a category of products they want to view and be directed straight to what they’re ultimately looking for, a product grid. The marketing pages still exist, but they are no longer acting as friction for a user to encounter on the purchase path on the way to their end goal. You’re allowing the user to evaluate the products available quickly and efficiently.
Display All of Your Content
There are some tasks that are simply way too complicated to perform on a mobile device. I’ve worked on mobile sites that allow the user to build custom furniture orders. I’ve worked on sites that allow you to custom engrave gifts with a near infinite number of options.
These types of features usually required a high amount of detail-oriented focus on the part of the user to execute, and were difficult to execute well on a 4-inch screen.
However, just because these features might not be heavily used by a mobile user, does NOT mean you should hide/restrict/eliminate that content on mobile devices. If it’s a feature on the desktop version of your site, it should be available on your mobile site.
If you hide features or content from your users on mobile, you run the risk of them never knowing that the feature exists on your desktop site. Imagine I’m the user in the waiting room scenario from earlier. I get an email about a sale running on your site. I’ve never shopped with you before, but I’m looking for a new couch and it’s your annual furniture sale. I get to your site and I see the perfect couch. Well, it’s almost perfect. I’m not a big fan of the color of the fabric, and I wish the stain on the wooden legs was a shade darker. Oh well, guess I’ll go check out your competitors site and see if they have a comparable style. Little do I know that if I had been on my computer, I would see an option to customize the fabric and the legs on this particular couch.
Hiding features for mobile users could cost you a sale. This user may not have actually customized the couch on the mobile site, but they would have known it was an option and may have returned on desktop later.
Don’t pair down mobile content. It degrades the overall experience for the user, and it could cost you in conversion rates.
Don’t Force Another Device
Have you ever tried to visit a website on your phone, and been presented with a screen that says “to access this page, expand your browser window”? Isn’t that annoying? How often do you actually return on the larger device? I personally never come back on a larger screen.
You have your user’s attention for a very short period of time. They’re on the move and easily interrupted or distracted. Why intentionally build a feature or a section of a website that temporarily locks these user’s out? Are you confident that you’ve demonstrated enough value for them to return later on another device? Are you willing to gamble with your conversion rates?
Forcing the user to change devices to access certain information or perform certain actions kills the experience. Users should be able to access your page or feature from their phone, even if its not an ideal experience. Let the user decide if they need to switch to another device, but don’t force them to do it.
User behavior is just one piece of the puzzle, but understanding your user is the first step to designing for mobile. If you know your user’s motivations and can empathize with their scenario, you can create a truly frictionless experience.
That concludes Part 1. Up next is Part 2, where I’ll be discussing how to design for your user’s hardware.
You can also skip ahead to Part 3 which covers mobile interaction patterns and best practices.
