Mobile Design

Mastering mobile design: focusing versus expanding

View all posts

Editor’s note: This is an excerpt from Mobilized: An Insider’s Guide to the Business and Future of Connected Technology, by SC Moatti.

The best mobile products feel so obvious that it seems like anyone could make them. Of course, nothing could be farther from the truth: it takes a lot of work to make something beautiful. There are 2 types of design elements designers use to create beauty on mobile: focusing design elements and expanding design elements.

Focusing design elements are about efficiency

Companies have 5 types of focusing design elements at their disposal:

1. Onboarding

Onboarding design elements aim to deliver value to a user before they even sign up.

Think of a recent situation when you met someone interesting and fun—someone who could be a friend. Did you immediately ask them personal information such as their age or email address? Likely not.

“The best mobile products feel so obvious that it seems like anyone could make them.”

It’s the same on mobile. Before anyone commits to using a mobile product, they need to know it will be worth their while. They want to understand what it will do for them and how. Optimizing app store descriptions, ad copy, screenshots, and video tutorials by focusing on value first—before asking people to invest by sharing personal information—is important.

When someone commits to becoming a user, after they have been convinced by the onboarding design elements, their expectations are set and need to be met or surpassed. This is where single-task design elements come into play.

2. Single-task

Single-task design elements keep a user focused on what they need to accomplish.

Reflect on your own interactions with others for a moment. What do you do to convey that you are paying attention? When do you know they’re not? How does that make you feel?

Mobile products mimic our behavior. When they offer too many choices or irrelevant options, they cause hesitation and confusion—and eventually, we stop using them. The easier it is for a user to complete a task, the more likely they are to come back—and therefore the more familiar they become with the app, and the more helpful it becomes. It’s hard to get rid of things that make our lives easier.

“When mobile products offer too many choices, we eventually stop using them.”

On the other hand, great mobile products need to allow users to effortlessly navigate from one task to the next. That’s the role navigation design elements play.

betterdesigner1

3. Navigation

Navigation design elements are often hidden or positioned out of the way to make room for the single-task design elements to take center stage.

In most cases when it comes to navigation, less is more. In some rare cases, it’s necessary to have multiple levels of navigation. Airbnb is a good example of that, because the experience of a guest is very different from the experience of a host.

Designers often spend a lot of time polishing navigation elements because they drive how effective a user will judge their product to be. Reviews stating that something is hard to use generally come from a poorly designed navigation.

Worse than that are reviews complaining about crashes and other malfunctions. Efficiency design elements can never be ignored.

“It’s hard to get rid of things that make our lives easier.”

4. Efficiency

When people discover they’ve invested time in a product that doesn’t work, they feel that their time is not being valued. They vent their frustrations and stop using the product.

Teams that are new to mobile will often underestimate the importance of efficiency design elements because they assume that mobile works just like the web. If it breaks, it can be fixed within a few hours with a so-called patch. Not so on mobile: fixing something broken can take weeks, if not months due to the constraints of the ecosystem, such as app store approvals.

The cost to a company of a product that would be broken for weeks ranges from negative reviews to disengagement, lost sales, and more.

5. Gesture

On rare occasions, innovative gestures can be disruptive. Double-tap on a picture on Instagram to automatically “love” it. Swipe right on someone’s picture in dating app Tinder to express romantic interest. Swipe left to rule them out.

However, we have come to expect something very specific out of gestures on mobile: one tap is like pressing a button, 2 taps is for zooming, a right swipe on an item deletes it, pulling down a list refreshes it, etc.

Imagine for a moment that you’re browsing for flight in a new travel app. You see a return ticket that fits your criteria and tap on it. What do you expect to happen? What if it doesn’t? What if something else happens?

Expanding design elements are about context

Whether onboarding, single-task, navigation, efficiency, or gesture, focusing design elements are meant to be efficient. They establish simple and predictable rules of communication. They build trust. As trust builds, users start to expect more. This requires access to personal information, which is where expanding design elements come in. They come in 2 types:

1. Pull

Pull design elements grant permission to access users’ personal data, such as a contacts, photos, or location. Because of how private that information is, designers need to be very transparent about when and why they need it. Context is key.

Take the example of Instagram. The service could not function without the ability to take and store photos. So getting access to a user’s photos is required for every user—and it’s one of the very first steps for every new user. On the other hand, sharing photos and videos with friends is not something everyone using Instagram wishes to do. So the permission to access a user’s address book is only requested when that user is about to share.

Obtaining permission to access a user’s personal data is a huge step. Getting the green light to send them so-called push notifications is an even bigger one.

“As trust builds, users start to expect more.”

2. Push

When done right, push notifications keep a design so simple that users no longer need to use the product itself.

Take Facebook. The push notifications reminding people of a friend’s birthday help everyone remember to celebrate. On top of this, users no longer need to open the Facebook mobile app to find out when their friends’ birthdays are. Push notifications tell us when we should use our mobile products.

In fact, they are so powerful that companies like Leanplum, Mixpanel, and others have created services offering specifically to help brands optimize their push notification strategy.

“The easier it is for a user to complete a task, the more likely they are to come back.”

What does this mean for you?

If you’re working on a mobile product, here’s what you can do with that information:

  1. Describe a typical user of your product
  2. Go through the most important task you want your users to accomplish. Did something distract you even for a split second?
  3. Navigate through every key feature of your service. Did you have to tap more than once or twice to switch context?
  4. Go back and forth between features as fast as you can. Are you experiencing any discomfort? Maybe because the screens take a long time to load, or maybe your app crashed. Congratulations if not!
  5. List 2-3 permissions you need to get from your users in order to personalize their experience
  6. When would be the best place and time to ask for these permissions?

Picture what the user is doing immediately before these permissions are required. Can you associate it with a couple of focusing design elements, such as the onboarding flow, or the completion of a simple task?

To learn more about the formula for mobile success, including how to apply it to your own company, read my book, Mobilized: An Insider’s Guide to the Business and Future of Connected Technology, or visit scmoatti.com.

CTA for those not in hs to DO UI kit
Author

SC Moatti, Founder of Products That Count and Author of "Mobilized"
SC Moatti dedicates her time and energy helping companies succeed with mobile. She is the author of mobilized, an insider’s guide to the business and future of connected technology, and has been called “a genius at making mobile products people love.” While serving as an executive at mobile pioneers like Facebook, Trulia and Nokia, SC launched and monetized mobile products that are now used by billions of people and have received prestigious awards, including an Emmy nomination. Today, she runs Products That Count, an organization that advises businesses on how to leverage mobile technology and produces some the largest product events in the world, including the Manifesto conference. She also serves on boards of both public and private companies, including mobile technology giant Opera Software (OPERA:Oslo). SC speaks frequently at conferences, has been featured in Forbes and is a regular contributor to the Harvard Business Review and the Huffington Post. She lectures on mobile and innovation at Stanford University, where she earned her MBA and has a Master of Science in electrical engineering. For more information, visit scmoatti.com.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.