Redesign onboarding screen Prelo.id apps

Prelo logo

According to sources I read, onboarding screen is the initial screen that is seen by the user before they enter the contents of the apps, the purpose of which is to provide a first impression for a comfortable of users when using an application also introducing what the apps are about. Usually introducing the functions of the apps then what users can get when using these apps.

Examples of onboarding screens usually have 3–4 screens that contain images, titles and a little text that explains the contents of the apps and that’s onboarding screen.

Then how do you make a good onboarding screen page?
7 important components in it for an onboarding screen an application page that has

1. Don’t use too many screens
Onboarding screens are just introductions so don’t make too many screens, the number of screens on this page is only 3–4 pages, because if too much can make the user feel bored and leave the apps.

2. Place the button in the bottom area
The goal is that users can easily reach the buttons on the application screen, to get a good application design, we have to think about how users interact with the applications we make.

There are three user habits when holding a smartphone. Some types use one hand and input with one finger (one-handed), some use two hands, one hand holds and one-handed phone to input (cradled), some use two hands for input (two-handed). From the results of the research, it was found that the percentage of users holding their smartphone devices was 49% One-Handed, 36% Cradled, and 15% Two-handed. From each of these users, we can design an area that makes it easy for users to enter inputs or navigate in applications that we develop. Since the largest percentage is one-handed, it is important for us to make sure our application is friendly to the one-handed user.

One-handed — Cradled — Two-handed

There are rules for designing the applications so that the buttons and content that we make are easily accessible to users, the rule is called Thumb Zone. Scott Hurff, an expert in the field of UX with more than 15 years experience discussing Thumb Zone from several mobile applications and showing how the UI and UX should be designed. He took the example of a poor navigation case from the Facebook Paper application. Thumb Zone theory is interesting because we can set the placement of icons by following an area that is easy to reach for users. This helps us to prioritize icons or which information is important for us to display on a very limited screen.

3. Add interesting and appropriate images
Don’t use images that are too big and crowded, this will make it difficult for the user to focus on the actual content, namely text, and buttons, use images with the same style on all screens.

Here I use the example of the Prelo.id onboarding screen application and the images used in this screen are too large and contrast with the text is less comfortable, as well as buttons that seem clumsy.

prelo.id onboarding

4. Use text that is short and easy to read.
Don’t waste the user’s time to read text that is too long. Make sure the text and background have enough contrast so that it’s easy to read.

Text

5. Add indicator progress
The goal is to inform the user, how many screens there are onboarding, and make them not guess when the onboarding until the end.

indicator on screen

6. Add the skip button
Not all users want to take a look around of screen is provided just in case the user is ready fast and hurry up or the user has already used the application before.

7. Give of touch in animation
The purpose to make the orientation process more interesting and realistic. Movements in animation can make important details more quickly seen, but animation can contain more time for users who have fewer smartphone specifications, so first discuss with developers in terms of technical realization.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store