React Developer at SoftwareSupp
Onboarding is a sequence of steps explaining the most important functions of your website/app to new users. As a developer using the product everyday you may overlook how complex it becomes, especially for fresh users. Moreover, it’s a great way to convey the app's core values.
The first and the most common problem is the tendency to explain every minor step and to forget to pass WHY a new user should click this and that. You can be surprised how easily you change your approach from “it’s all obvious” to “ok, one more step, one more explanation”. Submitting a form is a typical example. If every field has a precise title and placeholder as additional help, there is really no need to create the third place for one instruction. Instead you should...
…encourage a user to submit that form! What are the benefits of submitting the form? Is it safe for sure? It's extremely important to understand that your primary focus when creating onboarding must be value for your users. In case, to pay users attention how to do something you have to firstly interest them, make them feel that they really need it!
The second trap is “attacking” a new user with a wall of text. It is certainly a challenge to reconcile the amount of text with the clarity of the message, but trust me, no one is going to read an essay on your app feature.
Writing skills. Therefore, consider hiring a professional copywriter to create content for your onboarding sequence. The text should be long enough to contain the relevant instructions and values, but short enough not to bore the reader. I can also recommend a simple trick – to include graphics or icons. People tend to remember images better and if your recipient is too lazy to read all the text there is still a chance that more information will be left in their heads if core values are passed through pictures.
The form is no less important than the content. Think about your reaction when you open a webpage/app and the very first thing you see is a popup. Let me guess, you are looking for X to close it.
A common solution to this problem is to create an element (typically a button) that triggers the onboarding sequence. It doesn’t bother users, who don’t need help and it meets the needs of users, who are not sure what to do. If you still want to use a welcome popup, consider waiting a few seconds so the user can have a quick look on your app/website. Take care of variety. For example: when you want the user to click on an element, create a modal near that element, you can dim the rest of the screen.
There is a wide variety of tools and libraries for onboarding and the main dilemma you’ll probably encounter is to choose between no-code vs code tools. Coding option has two main advantages: it is free and gives you almost unlimited possibilities, especially in terms of styling. However there’s also a serious drawback – you have to be able to code it ;)
As obvious as it may seem, you should remember that onboarding is a variable element. If you add a new feature to your app, it would be worth introducing it to your users. There can also be major changes that will affect order of onboarding steps. Coding that changes can be complex, time-consuming and finally - only a developer can do it. Here come no-code tools like Userguiding, where you can easily create and edit various forms of onboarding process so every member of your team can do this. Main disadvantage? The price.
Thus, my final advice: if you can entrust an aesthetic-skilled developer with a constant updating task and spare some money, choose the code option. However if your development team is rather small and busy, consider picking one of many no-code tools available.