Categories
User Experience

Guide to Onboarding UX and Best Practices

When it comes to building a mobile app, website, or any other product, building a great, effective, and intuitive UI is only half the battle. Onboarding UX is an important part of the product building. Even if your UI is amazing and intuitive for a current user, it also needs to be accessible for new users – and they need to quickly understand the purpose of your product, how to interact with it, and what benefits it can offer them. This is when the onboarding UX (user experience) becomes important – the user onboarding process allows you to give your users a quick overview of what your app or website does, and demonstrates how to use it.

In this article, we’ll take a deep look at this process, and provide you with some best practices about how you can improve the onboarding UX process for your own app or website. Let’s get started now.

What Is User Onboarding?

Imagine that you’re trying to get your pilot’s license. You’re dropped into a cockpit for the first time, and your instructor says “Alright! Time to get in the air! Take off for me, would you?” You’re staring at dozens of dials, hundreds of switches, and more flashing and blinking lights than you can count. You don’t even know where to begin!

Chances are, your customers feel a similar feeling when they first open your product and begin their customer journey. They don’t know what button performs each function, and they need an overview of how things work before they can start exploring your app on their own.

Okay, maybe it’s not quite as complicated as learning how to fly – but the analogy is still there! Just as an experienced pilot would know how to make sense of the cockpit, a user who gets an overview of your app and learns a bit about its basic functions will be more able to explore it on their own and deepen their familiarity with the app and what it does.

Most often, user onboarding consists of a few screens that include information about the basic functions of an app or website. On-screen tooltips are also frequently used to deliver contextual information.

In some cases, tutorials are also an important part of the user onboarding process – if you built a calendar app, for example, users may be walked through the initial process of setting up an event for the first time. The particular type of onboarding UX that should be used depends mostly on the app or website you’re building.

Why Does User Onboarding UX Matter?

User onboarding matters because it’s the way that you show your product has value. Chances are, your app or website is presenting itself as a solution to a particular problem – and it needs to demonstrate its ability to solve that problem. If it doesn’t demonstrate its ability to solve the problem, the user will become frustrated – and stop using it.

If you build a messaging app similar to Slack, for example, and release it to customers without any information about how to use it to send messages to users, they’ll load it up, get confused, and then become frustrated and uninstall the app.

That’s why user onboarding is important – it demonstrates the value of your app, and gives users the basic tools they need to explore it on their own and see the benefits for themselves.

When you are building a product, this will also result in a higher customer retention rate – customers are more likely to stick around and explore once they know what they’re doing. In addition, customer churn will also be correspondingly lower, and you’ll also get fewer support requests about the basic functionality of the product.

How Can I Make The User Onboarding Process Better?

Wondering how you can streamline your user onboarding process, and maximize the potential of your onboarding UX? Here are a few tips and techniques you can use to ensure that your users learn what they need to use your product properly.

Define the type and purpose of your onboarding UX – First and foremost, you need to define the type of onboarding you’re doing. There are 5 distinct types of onboarding UX, as follows:

  1. Benefit-focused – This type of UX onboarding helps explain a few of the core benefits of an app or website, and why they matter to the user.
  2. Function-focused – This type of onboarding explains the primary functions of the product and how to use them.
  3. Doing-focused – Doing-focused onboarding UX walks the user through the process of a few common actions – like writing their first note in a “memos” app, or browsing the latest headlines of a news website.
  4. Account-focused – This is often used for social media apps. It walks the user through the process of account creation, adding interests/friends/preferences, and so on.’
  5. Combination – In some cases, a combination of all of the above types of onboarding may be necessary.

By knowing which type of onboarding you’re using – and why – you can ensure that your onboarding UX is focused and delivers the right information at the right time.

  • Keep it as brief and concise as possible – You’re walking a fine line when it comes to onboarding UX. You want to give users enough information so that they can start using your product properly – but if you make them go through dozens of setup screens and tooltips, they’ll get frustrated and leave. Because of this, you need to do your best to keep your onboarding as brief and concise as possible. Limit yourself to just the essentials. Otherwise, your onboarding UX actually can cause users to leave.
  • Let users skip onboarding (but make it repeatable) – Some people prefer to learn by doing, and don’t want to sit through your onboarding screens. You should make sure it’s possible for these people to skip the initial onboarding process so that they can get straight into experimenting with your product. Importantly, though, you should make it easy for a customer to repeat the initial onboarding process – this way, if they find themselves lost and confused, they can bring the initial startup screens and tutorials back, and choose to go through the initial process to make sure they understand what they’re doing.
  • Onboard users whenever you add a new feature – If you have added a great new feature to your product, you can’t just wait for users to discover it on your own. You need to make sure that both new and existing users know about it – so we recommend a quick onboarding pop-up or screen that helps announce it, and show users how it works. Doing this will help speed up the adoption of new features, and boost product satisfaction.

With these best practices – knowing the intentions behind your onboarding UX, keeping things brief and simple, allowing it to be skipped, and keeping both new and existing users updated about your product’s features – you’ll be able to build a much better onboarding UX.

Need more tips? Take a look at this blog from IdeaTheorem now for even more best practices for onboarding UX!

Demonstrate Your Product’s Value With A Great Onboarding User Experience!

You only get one first impression – and that’s as true in product development as it is in real life. Your onboarding is when you get the first opportunity to blow your users away – and demonstrate the value of your product in a real, tangible way.

So make sure you understand what onboarding UX is, why it’s so important, and the best practices that can help you improve your onboarding user experience. If you do, your product is sure to succeed.

What Next

Idea Theorem is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
Mobile App Design

Guide to Mobile App Design – 10 Quick & Actionable UI UX Tips

The number of smartphone users is forecast to grow from 2.1 billion in 2016 to around 2.5 billion in 2019, hence having a good mobile app design will help retain users. Users depend on mobile apps to deliver content and services. There are about 5.8 million apps (in both App Store and Google Play store). How to ensure your mobile app is relevant and useful in the ocean of apps? Users experience is an important part of mobile app design.

Creating a good mobile design is not easy. Good apps need to have a clear focus and clarity. If the experience of the mobile app is not great then the user will abandon the app and never come back. The mobile app’s main job is to provide users with “I-wants” moment without any hiccups.

App Navigation

App navigation is very crucial for mobile design. App navigation should be intuitive and friendly. Buttons should be clearly labeled with proper attributes. DO NOT write jargons which users will not be able to understand. Menu categories should not overlap. Allow users to go back easily. Engage users by highlighting key or new features.

Keep in mind:

  • Navigation should NEVER be hidden.
  • Navigation should follow the same pattern across the mobile app.
  • Use tab bar for iOS and Navigation Drawer for Android for easy user interaction.
Guide to Mobile App Design - 10 Quick & Actionable UI UX Tips - Side Drawer
Kibii App using side drawer
Guide to Mobile App Design - 10 Quick & Actionable UI UX Tips - Uber Eats Navigation Menu
Uber Eats using iOS’s tab navigation

Declutter UI

Keep mobile UI design user interface clutter-free. Clarity is an important characteristic of a good mobile design. Too much design elements like buttons, images, text can make any phone app complicated and unable to use. Clutter is one of the worst enemies of UI design. Keep it simple and minimal otherwise, the user will not be able to focus on delivering the message in a clear and concise manner. Already mobile screens have a less real estate (as compared to desktops), so it is best to get rid of unwanted elements. Keep the mobile UI design as inconspicuous as possible and let the user get what they came looking for.

Keep in mind:

  • Try for minimal design for better and easy user interaction
  • Try to focus on 1 or 2 actions per screen
  • Don’t fill the screen with random content
  • Keep headlines and text concise and clear
  • Use white space wisely
  • Don’t use colors full-heartedly, it will confuse the user and also use brand colors
  • Use simple icons
Minimal Weather UI
Minimal Weather UI

Readability

Mobile devices have small screens as compared to desktops, fitting in a lot of information in a small mobile UI is a big challenge. Hence, keep the content should be short and easy to skim (users don’t read every word instead they pick out keywords and phrases). The content should be accessible when the user has no data connection. The content needs to be prioritized to enable a seamless user experience.

Guide to Mobile App Design - 10 Quick & Actionable UI UX Tips - Readability
Medium iOS App

Finger-friendly tap targets

When designing a mobile UI, keep in mind the tap targets. The tap targets should be big enough for the user to tap easily. The smaller the tap targets, the user will have a tendency to tap on the wrong target.

Keep in mind:

  • Research indicates that the average human finger pad is 10 x 14mm and the average fingertip is 8-10mm, making 10mm x 10mm a good minimum touch target size. Keep the touch target at least 10 x 10mm.
  • Have enough distance between 2 or more tap targets, so the user does not accidentally tap on the wrong target.
Guide to Mobile App Design - 10 Quick & Actionable UI UX Tips - Finger-friendly designs

Don’t forget the thumb zone

With every new phone release, the screen sizes have increased, holding the device with one hand and browsing the app is becoming difficult. The mobile app design should not only be aesthetically designed but also should focus on the movement of the fingers and thumb (and also keeping in mind which handed side the user is).

Keep in mind all zones when mobile app design is being created. Bigger the phone, more difficult for the user to hold the phone with one hand and tapping on targets if they are in the “OW” zone.

Guide to Mobile App Design - 10 Quick & Actionable UI UX Tips - Thumb Zone
Thumb Zone heat map applied to every iPhone display size since 2007 by Scott Hurff

Use OS design guidelines

Follow the design conventions set by Android/iOS. Each has a different way of navigation, content layout, buttons etc. If you have Android design guidelines for iOS (or vice versa), you are risking a seamless user experience of the app. Try to keep everything as native as possible. Mobile UI kits are different for each OS. Understand each OS guidelines and then start working on mobile app design.

Guide to Mobile App Design - 10 Quick & Actionable UI UX Tips - iOS Guidelines
iOS Design Guidelines
Guide to Mobile App Design - 10 Quick & Actionable UI UX Tips - Material Design Guidelines
Material Design Guidelines

Accessibility

With governments taking measures to make products accessible for everyone, designers need to have empathy and create a different experience for different people through the same mobile design. A well-designed product should be accessible to different users such as users with low vision, any type of blindness, motor and hearing impairments. With inclusive design, people with disabilities can perceive, navigate and interact with your product.

Keep in mind:

  • Contrast: Use color combination with high contrast.
  • Language: Use simple language as there would be many users for whom English will be a second language.
  • Focus: Use focus to determine the order in which the elements should receive first priority.

To read more about accessibility design, go here.

Idea Theorem - A Guide to Accessibility Design

Idea Theorem - A Guide to Accessibility Design

Idea Theorem - A Guide to Accessibility Design

Buttons

Use familiar mobile UI designs for the buttons. Do not make any fancy shape or element and say that this is a button. For mobile app design, do not use text links as a button. Few common button design types are:

  1. Filled rectangle with square edges
  2. Filled rectangle with round edges
  3. Ghost Buttons
  4. Floating buttons used in the material design
Guide to Mobile App Design - 10 Quick & Actionable UI UX Tips - Buttons

Keep in mind:

  • Whitespace: Have enough white space between buttons and other design elements. If the button is closer to the design elements, the user will not be able to see the button. Have the right type of button for each mobile app.
  • Placement: Buttons should be located where the users can see it without any concerns. Place buttons in the traditional layouts and follow design conventions set up by the respective OS design guidelines.
  • Discoverability: Buttons should be easily discoverable. The user should not spend time in finding where the button is. The more the button is hidden, more abandonment of the mobile app.
  • Labelling: Label the buttons with what they are actually meant to do. For example, if the button is meant to add an item to the cart and the buttons say “Move Ahead”, the user will not understand the meaning and leave.

Typography

As the real estate for the mobile screen is very less, it is quite difficult to make the right typographical decisions. Mobile typography needs a huge attention to detail with the use of the right fonts, white space, and alignment. The key things to keep in mind while designing a mobile UI is that the content should be legible and readable.

Keep in mind:

  • Font size: The font size should be of the optimum size. Overall, anything below 16px would be difficult to read.
  • Font: Choose the right font which is easy to read and expresses the mood of the app. Do not use more than 3 fonts. (2 is better).
  • Typeface: Choose one typeface. If you feel that there should be a secondary typeface, choose the one which flows between the primary typeface. BUT do not go with more than 2 different typefaces.
  • Leading: Keep the leading (distance between 2 lines) just the right size so that it is easy to read and skim through different lines. Do not think that since mobile has less space you can cram up everything in one screen.
  • Tracking & Kerning: Keep tracking (space for groups of letters) and kerning (space between pairs of letters) consistent all through the mobile app design. The closer or farther the tracking or the kerning, it might make users unable to read the text.
Guide to Mobile App Design - 10 Quick & Actionable UI UX Tips - Typography

Reduce the number of user inputs

Users don’t like to be bombarded with huge forms, especially in the mobile phone where they like things to be done quickly.

Keep in mind:

  • Keep the forms short and sweet. Remove unnecessary fields.
  • Customize the keyboards according to the input fields. If the field requires numbers, show the numeric keyboard.
  • Validate the forms dynamically, so that the users don’t have to update the error inputs while submitting the forms.
Guide to Mobile App Design - 10 Quick & Actionable UI UX Tips - Forms

Make a great first impression

The first impression is the only impression users will remember. If the user does not like what they see for the first time, the mobile app will not get a second chance. Onboarding should not be boring or repetitive or long. In today’s world, nobody has time, especially with a mobile app. The app should be fast and the user should quickly understand the purpose.

Conclusion

At the end of the day, there should be a seamless user experience without the user scratching his head to understand how the product works. Before starting mobile app design know your target audience by creating lean personascustomer journey map and user research. So that you know who you are designing the product for. The better you know your audience, the right experience can be created for them.

WHAT NEXT

Idea Theorem is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.