User Onboarding

UI Patterns Proven to Work for User Manuals

May 14, 2021

Patterns for user manuals

Effective onboarding is the key to ensuring your users understand how to use your product and see the value in it, driving retention and product adoption. At Nickelled, we know that one way to design great interactive user manuals is by using UI patterns that are proven to work. 

With that said, in this article, we’ll analyze the key patterns to look for in interactive user manuals and share our best practices for implementing them.

Why Use Existing Patterns In Your Onboarding?

Patterns are used as standard as the basis for all types of UI design, including creating interactive user manuals. Even experienced user interface designers use them to solve recurring problems and ensure effective design.

Most interactive user manuals combine different onboarding patterns to meet users’ needs throughout their lifespan. There are patterns to introduce new users to your SaaS as well as patterns to ensure effective continuous onboarding. Reusing design patterns not only saves time and money, but it also means your onboarding processes are consistent with the rest of your product.

Interactive User Manual Patterns: Best Practices

There’s no one best fit for patterns in interactive user manuals. Having said that, by implementing best practices used in great onboarding experiences, you’ll create effective and engaging user manuals for your SaaS.

  • Focus on the user. Successful interactive user manual patterns are designed around the user’s needs and based on research and anticipation of issues they may come across. However, it’s important not to assume an average user, hence implementing patterns in context with user actions is key to effective onboarding.
  • Keep things simple. When interactive user manuals are too long or complex, you get user dropoff. UI patterns should be simple and the onboarding experience should be as quick as possible.
  • Make it repeatable. The key to great onboarding is that it continues throughout a user’s lifespan. Your interactive user manual should be based around patterns that can be repeated again and again – this will save time and money and reinforce the consistency of your brand.
  • Don’t use onboarding to replace bad UI. Flawed UI is a pitfall to avoid in onboarding that no amount of great patterns in your interactive user manual can solve. Make sure your app is well-designed before trying to teach users how to use it.

Key Patterns In Interactive User Manuals

UI patterns vary depending on how, when, and who you’re targeting with your onboarding. So, this section will analyze different examples of key patterns to look for in interactive user manuals, when and how to use them.

First-Look User Manual Patterns To Introduce Your SaaS

Product tours

Nickeled product tour
  • Example: Product tours like the above example from Nickelled give users a guided, interactive walkthrough of your SaaS. Our interactive user manuals use other key patterns, like tooltips, to provide clear, simple information about each process and indicate how many steps remain in the guide, an important tool for motivating users through onboarding. Product tours are one of the most comprehensive UI patterns to show your user around your app.
  • When to use them? Throughout the onboarding process, from creating an account to continuously teaching users how to use your product and new features.
  • Top tip. Segment users to direct them to product tours relevant to their needs; make the copy concise and keep the focus on demonstrating how the user can reach their goals using your product rather than just showing them how it works.

Self segmentation

Pinterest onboarding
  • Example. Pinterest is one of many apps that ask users what they want to see to target their interactive user manual. After inputting a few key details about themselves and selecting their interests, users are shown the Pinterest UX filled with posts tailored to their choices. Pinterest then implements other key patterns like modal windows and tooltips to show users around.
  • When to use them? During the account setup process, to personalize the app itself and the onboarding experience, demonstrating the product’s value immediately.
  • Top tip. Make the customization pattern visually appealing, consistent with the rest of the UX, and don’t ask for too much information about the user!

Demonstrating value before account creation

Canva walkthrough
  • Example. Graphic design platform Canva is a great example of an interactive user manual pattern that demonstrates the value of the SaaS before a user has even created an account. Users are given a guided walkthrough of the service with clear instructions. An eye-catching banner at the top reminds them that they’ll have to create an account to save their work.
  • When to use them? This pattern doesn’t work for every SaaS, but offering the opportunity to achieve a goal on your platform before they’ve signed up for an account is a surefire way to ‘wow’ your user.
  • Top tip. Get creative with the copy inviting the user to create an account, as Canva does by implying work might be lost if they don’t sign in.

Patterns To Indicate Progress in Onboarding

Progress bars

Etsy progress bar
  • Example. Online buying and selling platform Etsy shows users their progress when setting up a shop with a simple progress bar. It clearly indicates how many steps they have left and what they have to do in each part of the process.
  • When to use them? This pattern works alongside each part of your interactive user manual to show users how simple your product is to use and accelerate their onboarding experience.
  • Top tip. Don’t start the progress bar at zero: show users they’ve already achieved something when they see the bar. This is a psychological hack in onboarding that encourages users to continue completing the steps in your interactive user manual.

Checklists

Evernote checklist
  • Example. Note-taking app Evernote is renowned for its great interactive user manuals, so it’s no surprise it uses many key patterns like checklists. Their checklists are fun and eye-catching with emojis and animated hotspots to show what the user needs to do next.
  • When to use them? Like progress bars, checklists can and should be implemented throughout your interactive user manual to encourage onboarding completion.
  • Top tip. Combine your checklist with a progress bar to maximize the dopamine-releasing effect of achieving a task and seeing progress.

In-Context Patterns in Interactive User Training

Welcome messages

Evernote user manual modal
  • Example. Like the majority of other apps and platforms, one of the first steps in Evernote’s onboarding process is a modal window containing a welcome message. Use this pattern to personalize your user’s first experience of the product, give minimal information reminding them why they’re here, and include a CTA. Having the welcome message as a large modal with your SaaS’s UX shown behind a transparent layer in the background makes it non-intrusive and cohesive with your design.
  • When to use them? The first time a user accesses your SaaS after creating an account. You can also implement “Welcome back” messages if users haven’t used your product in a while.
  • Top tip. Keep the greeting short and fun: you could even personalize it with your user’s name.

Action-based tooltips

Etsy interactive user manual
  • Example. Pinterest’s interactive user manual yet again shows a key pattern for progressive onboarding: combining an action-based tooltip with a pulsating animated circle to show users how to save posts. This pattern is triggered by a contextual prompt: in this case, when the user first clicks on a post after setting up their account.
  • When to use them? Throughout the onboarding process, whether to get users to grips with the basics of the app or to introduce a new feature. The key is that this pattern should be action-triggered: implement tooltips to appear when a user attempts a relevant function in your SaaS.
  • Top tip. Keep the copy short but make it empowering by using the imperative like Pinterest does here with “Save it for later”. Make sure it’s easy to exit the tooltip too!

Hotspots

  • Hotspots offer contextual information based on the user’s actions, similarly to tooltips, but are even less intrusive to their workflow.
  • When to use them? To make your users aware of additional, non-essential features and encourage product adoption throughout their onboarding experience.
  • Top tip. Make it eye-catching with an animated graphic, like in the Pinterest tooltip example above.

Demo content

Evernote's hotspot
  • Example. Yet again, Evernote offers a great example of this onboarding pattern. They use empty states: filling each blank aspect of their UX with demo content to show users the value they can get from using the app.
  • When to use them? To introduce features the user hasn’t used before, either as part of a first-look product tour or triggered by the user’s actions, for example when they hover over or click a particular feature.
  • Top tip. Use the demo content to demonstrate the value of your product by showing real content examples, like Evernote does, rather than just explaining how to use it.

Design Great Interactive User Manuals For Your SaaS

Implementing effective user manuals is essential to your app’s success. Knowing how and when to use the right UI patterns in onboarding is a key step in designing a great interactive user manual. 

Having decided which key patterns to use to onboard your users, it’s time to pick a software package to design your product tours. Using expert onboarding software like Nickelled ensures your users are getting the best possible introduction to your SaaS and takes the stress out of onboarding UI design.