Article written by Joe Toscano as a guest post for InVision’s blog. Photo by Chris Dorwart. If you want to see more incredible shots from Chris, check out his Instagram.
No matter how much I want to believe we’re all up to speed on mobile-first design, there are still many experiences that are lagging behind. This is something that needs to change. Especially considering over 25% of the world is not only mobile first, but is mobile only, according to a recent trends report by UX Magazine.
I recently went a month without a computer to see what life was like without the machine that we’re all so attached to. You can read more about the story in my article, The Computer-less Month.
By forcing myself to not only be mobile first, but mobile only, I learned a lot about mobile-first best practices. Here are some insights I hope help you create better mobile experiences!
1. Make navigation easy
According to a study by Nielsen/Norman Group, a global leader in user experience research, training, and consulting, hidden navigation patterns (like hamburger menus) decrease content discoverability by 21% and increase the amount of time it takes to actually use the navigation by 2 seconds, on average.
This decrease in usability happens for one of 2 reasons:
- The hamburger menu is used so much that we start to ignore it.Think about your front door. Do you know the color of your front door? You might implicitly know what color it is but if you had to tell someone about your house and they asked you what color your front door is, would you know? Like our front doors, hamburger navs have become so familiar to us that we don’t even see them anymore.
- When people don’t know what’s hidden in the nav they scroll the page to see if they can find what they’re looking for first. Opening a nav is a commitment. And what if when I open it I don’t find what I’m looking for? Research shows users would rather take their chances and scroll the page before diving into your hamburger nav.
“Users would rather scroll the page before diving into your hamburger nav.”
While a fully visible nav that shows all possible links at once is the best navigational pattern you can create, it’s simply just not feasible most of the time on mobile with the limited amount of screen realty. The best navigational pattern to use on mobile is a combo navigation.
A combo navigation allows the user to see the options they need the most and makes the rest accessible in a hamburger menu or something similar. Apple’s site does this really well.
The site’s content is laid out so well that I don’t need nav buttons. I can scroll the page and get where I want very easily, but a “buy now” button is always visible and available in case I decide I want to purchase.
And if I can’t find what I need after scanning the page, I can always dig deeper in the nav to discover what’s available.
Together, the combo navigation pattern and the well-thought out content within the pages of Apple‘s site are a great example of how to create the best mobile experience for your users.
2. Design for thumbs
There’s plenty of research on the Thumb Zone, yet many sites and apps still keep their navigation at the top of the screen.
Why? Because everyone else is doing it, so it must be the best way to do it, right? Well it’s not.
“Have the backbone to break industry standards for the good of your user.”
If you look at the Thumb Zone, you can see that the bigger the device, the harder it is for users to reach content at the outer edges of the screen. Keep this in mind when you’re designing.
For more insights check out Designing Products People Love by Scott Hurff.
If you look at the Safari Browser, the Google Now app, or well-crafted mobile websites like Pitchfork, you’ll notice that the main navigation is at the bottom of the screen.
We’re seeing mobile experiences, even on the web, move their navigation to the bottom — a place that’s easier for users to reach. This is something we’re only going to see more of as mobile usage continues to grow YoY.
3. Make clicks meaningful
There’s this fallacy that floats around the UX world telling everyone that less clicks means a better experience. And if users don’t have to click, well, then the person that created it must be some sort of UX god. Well, here’s the truth: Users won’t mind extra clicks as long as they’re meaningful.
“Users won’t mind extra clicks as long as they’re meaningful.”
Got a long set of forms that need to be filled out? Break them into individual forms to make users focus on what they need to do. Fill in forms for your users wherever you can, based on info they entered into previous forms. Change the keyboard so the default for that form makes filling it out faster — continuously flipping keyboards is a pain in the ass. And give your users a status bar that shows them how far along they are in the process. Knowing there’s an end somewhere is huge!
Each task your users complete will give them a sense of accomplishment, especially if they can watch how much they’ve completed add up. The fact that users can do everything faster than normal because your experience is based on the context of the interaction only multiplies their sense of accomplishment and, in return, their love for your experience.
It sounds counterintuitive, but you can reduce complexity by adding in a few extra meaningful clicks. Each tiny bite is much less of a cognitive load for your users than if you push everything on them up front. Make your experiences contextual-based and digestible, and no one will notice that it took them a few extra clicks — because it felt necessary.
4. Make content digestible
Think of what happens when you go to a restaurant and open a menu. Are you quicker to make a decision when the menu has 10 items with pictures next to them or is it easier when you have 4 pages of 50+ potential items to read through?
“Card-based design makes your content easy to interact with in a limited amount of time.”
There’s a reason Google chose to make card-based design their standard and the rest of the web has slowly adapted. Each card represents a digestible piece of related information — typically defined by a headline, an image or graphic, and a short string of text that gives you a general overview. This style gives users just enough information to decide whether they want to explore deeper or move on in a very short amount of time.
For more design inspo from Nick Velichkin check out his Dribbble.
Just because you have a lot to tell your users doesn’t mean they want to spend their time scrolling through pages of content to make a decision. No one wants to read the whole story. Your paragraphs of technical jargon are made for internal purposes. Hire a copywriter to help you focus your content into something users will actually read. And don’t be scared to give bullet points so users can read, understand, and move on.
Give your users the high-level overview initially, then progressively give more information as they dig deeper — just enough to keep them interested and moving forward, but not so much that they become bogged down.
When it comes to content, be that gourmet restaurant that knows what you want before you do. Use your analytics to figure out what users are doing, create content to make that better, then break that info into bite-sized, digestible pieces so your users can make a decision.
5. Optimize screen realty
Sticky navigation, ads that take over the screen, excessive marketing jargon. None of this makes your user enjoy the experience more.
When your users are scrolling or trying to read, hide your navigation so they have more screen realty to explore your content — and place that content strategically so that they don’t need to use your nav if they don’t want to.
Don’t ever force an ad on your users that takes over the screen — especially when they are in the middle of reading or interacting with content. There’s nothing that makes a user want to leave your site more than an ad that takes over their experience and makes them wait 15 seconds until they can get back to what they were doing. Buh-bye.
If you’re going to push ads at your users, make them in-stream and based on the context of what your users are looking at.
If users are looking at a story about machine learning and the ads in the article are about how they can learn more about machine learning or are otherwise related to the subject, it’s not so bad. But when your platform pushes ads completely unrelated to what your user is exploring, like pushing an ad about a product they were previously viewing on Amazon, that’s when your experience starts to feel more like an ad platform.
“Value your users and they will value you.”
Nothing’s worse than when you ruin your user’s experience (or cause them to bounce) in order to make profits. Soon enough your users will just stop coming, and when they leave so will the revenue you were making off the fact that you had users.
6. Use animation meaningfully
Too many apps try to use animation as a band-aid for the poor experience they’ve created. Remember that animation is there to help explain what is happening, not entertain. You’re not making a Disney movie.
If I’m going through a long process, show me how long I have left. If I open something, let me see it open before my eyes. If I close something, let me watch it minimize or otherwise disappear off my screen. Never drop your user somewhere with no indication of where they’ve landed or how whatever just happened, happened. And for the sake of all things often forgotten, please make sure there’s a back button!
It’s okay to use animation for nondescript purposes like Mailchimp does with its post-send high-five, Twitter does with its micro-animations on retweets/hearts, or like Facebook does with its new animated reaction emojis. Animation can be a great way to make your experience expressive and human. Just make sure to do it tastefully if you’re going to — don’t have fireworks exploding all over every time your user touches the screen.
Read more about expressive interactions in Designing an In-App Survey by Budi Harto Tanrim.
Animation can be a great complement to your experience if it’s used appropriately. Use animation to help your user understand what’s happening throughout their experience or to enhance it otherwise, not to entertain.
Design to enhance lives, not KPIs
I think the biggest thing I learned about design through my experience is that I’d rather create something that people come back to over and over as a tool to enhance their lives than something that makes people waste their lives unconsciously staring at a screen just because it drives revenue.
Although we all want to create “sticky” experiences, we should focus on making useful, usable, and compelling experiences that enhance our lives. By focusing on the user’s actual needs instead of our business KPIs we’ll see more growth than we could ever predict with analytics.
I believe that by taking the human into account and not just doing what drives revenue you’ll see that you end up making more revenue. It’s the inverse of what your analytics-driven boss believes, but it’s true.
“Let’s focus on making useful, usable, and compelling experiences that enhance our lives.”
So the next time your boss tells you that you need to create a “sticky” experience to drive KPIs, I challenge you to push back. Fight for the person using it. Do the job you’re supposed to do.
And when your boss gets upset that you’re pushing back, be patient. Help him or her understand. Show no fear of rejection, because you’re not wrong. Stay calm and explain your thoughts in a way that they can’t say no to. **Hint: Use research and keep your opinions out of it.**
The only way we’ll ever see change in the big picture of experience design is by taking small steps toward that future every day.