Design Adequate Onboarding | UXPUB

I am writing this article primarily for beginners who have just started to master the work in the field of UX and UI design, in order to explain to you the basic principles of creating onboarding.

My name is Max and I am a product designer. Very often I have to work with young guys who, like a blueprint, make the same mistakes when creating onboarding for mobile applications.

Also at the end of the article you will find a link to a small Figma-layout, which you can freely use when creating your work.

What is Onboarding?

Most often, the first thing that the user sees when launching a new application is several training screens that introduce him to the main functions and tricks of the product. That s what it is Onboarding.

Unfortunately, most application developers do not pay enough attention to these elements, so onboarding turns into a boring slideshow, which the user feverishly skips. In this article, I want to introduce you to the basic principles that every designer should know.

The 3 main types of Onboarding:

• Describing the main benefits:
  a description of the main features and benefits of the application that can convince the user to try your product.
• Carrying out preliminary personalization:
  the user is prompted to set up information about themselves in order to personalize the application before they start working with the basic functionality. (remember how in music apps you are asked to choose your favorite genres of music first, and on Pinterest your areas of interest)
• Fast start: a type of onboarding in which a person is taught to use the functions of an application using prompts.

Some examples:

Why is onboarding so important?

The main acquaintance of the user with the application occurs just during the first launch. Therefore, the impression of a product is directly related to how onboarding looks like. Most successful projects use this tool so competently that the user buys a subscription immediately after viewing the onboarding.

Some important tips for designers:

• Many screens are EVIL!
  3-4 screens are enough to familiarize the user with the main functions of the application. Do not annoy the user with an endless skip of screens.
• Only Bright and understandable illustrations!
  Our brain processes visual content much faster than text, so clear and high-quality illustrations will tell you about the functionality of an application much faster than a kilometer-long text.
  It is important to use illustrations that accurately reflect the meaning of the text block. So ask the illustrators to save your abstract art for solo exhibitions.
• Love the animation!
  Even the simplest animation will make the user pay attention to the graphic content. Thanks to clever animation of illustrations, you can introduce a person to a whole story that fits on one screen.
• Don t be crazy about the developer!
  Don t forget that your design will be make up! Neomorphism, a billion shadows and gradients look undeniably cool, and on a dribble they can collect 4 likes, but it is often impossible to typeset it. Therefore, study the official documentation Human Interface Guidelines and Material design.
• Use the progress bar.
  From the very beginning of the interaction, users need to know where they are and how long the entire process takes.
  When you read a book, you always have the opportunity to see how much you still have left. Take care of the user too)
• Meaning in every letter!
  The main task is to convince the user of the usefulness of the application. You have a few seconds to convey important information to the person. Therefore, each letter must carry a meaning! If possible, ask a copywriter about it. Also pay attention to the fonts, their color and thickness. Text blocks are the most important element of any application!
• Give first, ask later! ?
  A fatal mistake, which is extremely common, is posting a request to rate an application in the store on onboarding. Often windows are shoved there with permission to access the camera, contacts, etc.
  Tests show that such actions sometimes cause instant application uninstallation.
  First, the use of the application must be consolidated with a positive effect, and then ask for feedback.
• Give the opportunity to skip!
  The user may already have experience using your app on another device. Therefore, your goal is to give him the opportunity to skip training. Add a little skip button.

Prototype

I created a small prototype based on the main benefits type. You can use it to create your first onboarding. Try changing colors and pictures.

Link to Figma file in my Telegram channel. I still have a bunch of materials that I would like to share with you. Therefore, fly in for a visit!

I will be glad if you use my 3D illustrations in your real projects. I modeled them from scratch in Blender, so there won t be any problems with copyright holders! In the future I will fill in a whole asset of 3d illustrations!

Conclusion.

Onboarding is like a date – you don t get a second chance to make a first impression. Therefore, do not dismiss this section of the application.

I m glad you read to the end! We will step by step analyze with you all the main elements of the mobile application, so subscribe and wait for the news.

I m waiting for you for the source code in the telegram