UX Design Patterns for Mobile Apps: Which and Why

Tips

You can make Two-Step even safer for your customers by pairing it with Delayed Registration, Magic Links, and Android’s SMS Access.

Delayed Registration means the first thing your users see isn’t a form or an onboarding flow. Foursquare is an example of this. You’re allowed to browse freely without an account, but certain actions and screens promote registration and log in (see the image above).

The advantage is that users are more likely to register after they’ve tested your app and understand how it’s valuable to them.

During this period, it’s likely the user has provided a phone number or email while ordering or booking a cab, so you can even prefill the Two-Step registration form for an even simpler registration flow.

One tricky bit is merging data created by the user during their usage as a guest. What happens when the address provided during a guest booking is different from what is in the account they then log into?

My recommendation is to adopt a save-everything approach.

For properties that may contain multiple values, save all existing values; for single-value properties, the best you can do is display a review screen where the user can pick the desired version. Optionally, you may simply override older values with the latest ones provided by the user.

Magic Links: Apps like Slack generate what they call “Magic Links”, which is a fancy name for a URL containing the One-Time Password. When followed, this URL opens the app, which can then read the OTP from the URL itself instead of relying on the user to manually type it in. You can implement your own Magic Links with App Links (Android) or Universal Links (iOS), and send them via SMS or email.

SMS Access: On Android O, you can add a new method to automatically retrieve One-Time Passwords sent via SMS, saving the user from manual inputting and allowing your app full SMS access.

This was the method I chose for a previous client, as it offers by far the best experience on Android (or any other platform) as it takes literally seconds for a user to log in or register.

In one case, my client went from a 12-field form down to a 2-second registration process. Consequently, conversion rates for registration went way, way up.

Ensuring account access: Although unlikely, users may change phone numbers or lose access to email.

Always remember to collect multiple contact details to use as a backup contact method for sending OTP codes. This is mainly a non-issue, as the longer the user uses your service, the more likely it is for a backup method to be in place.

Immediately after registration, you may not have a backup contact method, but there’s also no data to lose in the newly-created user account.

Tips

• To increase the likelihood users don’t loose access to their account, ensure you gather alternative contact methods.
• Be mindful of places where users naturally provide their contact method, and prompt for authentication when they’re not mid-task, such as when they’re waiting for their order to be completed.
• Use Android O’s new SMS Retriever API to retrieve the authentication code without burdening the user. Full SMS access might work on older Android versions. Consider using Magic Links as detailed above.
• Copy matters! Place the authentication code at the very beginning of your message so people can see it in the system notification preview. Use Chunking to make it easier to read by splitting the 6-digit code in two 3-digit parts.

Accelerator

Accelerators are hidden shortcuts that allow users to perform actions or view content more efficiently.

Because they’re hidden, Accelerators should never be the only alternative, but instead complement slower ways of using your app.

This single Instagram screen contains five hidden accelerators:

1. Tapping the status bar instantly takes you to the top, faster than scrolling.
2. 3D Touch on the author (or long-press on Android) displays an account summary with name, post/follower/following count, and the top six photos. While a simple tap would display the same information, 3D Touch shows it as fast as tapping, unlike long-press, and exposes the three most used actions. More importantly, it allows for instant dismissal by releasing the finger. This is valuable for those who peek into multiple photos or accounts in a short space of time (as seen in the above video).
3. Swiping left/right lets you create a story/direct message, which is easier than tapping the icons on the hard-to-reach top area of the screen.
4. Long-pressing the tab bar plus button invokes post from your Photo Library, which is one less step compared to tapping the plus icon, waiting for the animation to finish, and then tapping library.
5. Long-pressing the tab bar account button displays the account picker. This is easier than tapping account, tapping settings, and scrolling down past all settings.

The takeaway is that all these shortcuts are hiding in plain sight, facilitating or doubling functionality without adding extra buttons to this screen.

When To Use It

Use Accelerators when you want your app to serve the majority of your users who need an obvious but slower interface, as well as serve advanced users who are willing to learn shortcuts to get things done more quickly — without compromising the experience for either of these groups.

In a content app such as Instagram, the majority of users will skim through the timeline, and you’ll want to promote content interaction by making it obvious and dead-easy to use. A smaller group will post content more often, grow their follower base, and have multiple accounts. In this case, Instagram has filled its consumption interface with shortcuts for the creators, as seen above.

Even when all your users are part of the advanced group, accelerators are still a better option than alternatives such as customizable interfaces that, while powerful, burden everyone with thinking about the right settings. This also makes your app more complex to use and maintain.

On authoring apps such as Final Cut Pro, or code editors such as Xcode or Android Studio, the majority of users are familiar with accelerators such as keyboard shortcuts, and rely heavily on them to get work done. Without keyboard shortcuts, giving emphasis to this piece of text would’ve taken me more than a simple Command+B. As a developer, searching the project navigator and clicking the file I want to edit would be a distraction compared to Shift+Cmd+O (Quick Open) or Ctrl+Tab.