The goal of onboarding isn\u2019t to show new users where features are. Instead, it\u2019s to guide users towards their \u201caha\u201d moment<\/a>, the moment of delight where the value of your product becomes immediately clear.<\/p>\n As my colleague Ruair\u00ed Galavan explains in his C.A.R.E framework<\/a>, three core components make up successful onboarding:<\/p>\n It is vital to consider how these components interact throughout the customer lifecycle and in different channels, but they should also come together in that very first impression, the moment of first use.<\/p>\n A positive first impression that shows the true value of your product sets the tone for a fruitful, long-lasting relationship with your user.<\/p>\n To build that lasting first impression, first understand the actions your users should take and how to motivate them. Answer these questions:<\/p>\n Answering these questions takes time and experimentation, but it pays to consider the answers as you craft the very first encounter users will have with your product. Those first impressions will define so much of the relationship to come, so do everything you can to make it the start of something beautiful.<\/p>\n Once you\u2019ve determined what your first use experience needs to achieve, it\u2019s time to consider the UI design patterns you can use to create that experience.<\/p>\n “The first time someone uses your product, they\u2019re likely a little disoriented”<\/p><\/blockquote>\n Put yourself in the shoes of a potential customer. The first time someone uses your product, they\u2019re likely a little disoriented as they attempt to familiarize themselves with the new environment \u2013 your app\u2019s UI. They\u2019ll be searching for cues to find their way.<\/p>\n UI design patterns like empty states and inline hints and tips can help make the unfamiliar feel familiar and get the user to see value, fast. Let\u2019s run through the most useful patterns.<\/p>\n They might seem incredibly simple but a considered welcome message can make or break your tour. This is your first opportunity to greet your new user, so it\u2019s important to be warm and approachable and give them a reason to engage.<\/p>\n A large window that takes priority on your screen, most often dimming the background, the modal is an effective design pattern for focusing the user\u2019s attention. But it may come across as noisy if not used well. You\u2019ll often see a modal when you sign up for a product and are asked for your email address.<\/p>\n Modal windows work well with contextual educational content like videos or GIFs. However, if you\u2019re referencing a specific element within your app, the focus should be on that element, not on the modal.<\/p>\n Empty states are how your app or product looks on first use before it\u2019s filled with user content. An empty product or app can appear like a blank page to a novice writer \u2013 it can feel overwhelming. Not only are users trying to get oriented with this new space, they\u2019re excited to jump in and get started, but they need guidance and reassurance on how to proceed. However, a well-designed \u201cempty state\u201d design pattern can offer reassurance by providing context and setting expectations, guiding the user to fill in content and take important steps.<\/p>\n Rather than leaving an intimidating void, an empty state design ideally prompts the user to begin filling in the content. Or it can include sample content to illustrate the app\u2019s value and help the user feel more confident about taking the next step. With Intercom, the first time users sign in, they’re presented with sample messages they can edit and send.<\/p>\n Inline hints and tips are subtle and look as though they fit in with the rest of the content on the page. Their subtlety is what sets them apart from the other UI design pattern. As a result, they should be used to enhance a user’s success in your product, for instance by providing additional information about a complex feature or best practice tip.<\/p>\n To pick the best UI pattern for your message, consider a content hierarchy. Is this a \u201cneed to know\u201d or a \u201cnice to know\u201d tip?<\/p>\n Traditional tooltips are text labels that appear when a user hovers over a field, link or UI element, and disappear when a user moves their pointer away.<\/p>\n “Avoid the temptation of relying on tooltips as a substitute for well-designed interface elements”<\/p><\/blockquote>\n\n
Get to know your customers\u2019 needs<\/h2>\n
\n
Useful UI design patterns<\/h2>\n
Welcome message<\/h3>\n
![](\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/06\/First-Impression-welcome-message.jpg\")
<\/p>\nModal<\/h3>\n
Empty state<\/h3>\n
![](\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/06\/First-Impression-empty-state.jpg\"){kind=spacer}
<\/p>\nInline hints and tips<\/h3>\n
![](\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/06\/First-Impression-inline-hint.jpg\")
<\/p>\nTooltips<\/h3>\n