Educational content helps the user to understand the product or service benefits and what it will do after the launch. It can appear either as an illustration with some description or as a video with instruction on how to use the application.
Any educational content inside the empty state form is constructed of three parts:
Message. This is the most important part with a description of what you are trying to convey to the user. It should consist of a headline with main information and body text that explains the details. Message should always be as short as possible, informative and friendly – in general, easy to perceive. Width of the text block is recommended to be the same as the width of illustration for better readability.
CTA (Call To Action button). This element should lead to the most logical action that can be made on the page, whether it is the “next” button, confirmation button or a link to the help page. Never create more than two CTA buttons on the screen – it can mislead and confuse the user.
Illustration. Visualization of the content often helps to perceive the text and to make the interface more user-friendly. Image should complement the content, but not take all the attention to itself.
Some hacks for the educational empty state that will make your life and user’s life easier:
Try to always make the possibility to skip the content that the user already knows or just doesn’t need right now.
Keep it short and brief. The content should help the users to understand the interface, not create the stressful situation for them.
Educational content should be contextual to the current screen. It doesn’t have to be the instruction for the entire app in one message.
Users should have an opportunity to remove the educational content from the page once it’s not necessary.
Despite the name, empty states are always more helpful with some content, especially when it is educational. You may use it in your design and improve the interface detail by detail with some educational tips.