Choosing & Customizing the Right UI Patterns to Build the Experience
The Userpilot experience editor gives you access to a wide range of different UI patterns. Let's break down each one and some of the use case examples for it:
A modal overlay is a window that sits in the middle of the screen and demands the user's utmost attention.
It works great to welcome new users, introduce a tab within the product or start an onboarding flow.
Here's what it looks like:
The aggressive nature of modals means it's probably best to save it for when you need to drive extremely meaningful actions/behavior.
With the Userpilot editor, it is easily possible to control every aspect of your modal design.
Each modal consists of sections with each one being fully customized. You easily can add text, images, videos buttons and more to craft the perfect experience while keeping your brand design consistent.
You can also create progressive modals (sliders) where users can go back and forth in a series of modals.
Slideouts are very similar to modals in terms of functionality and design, except that they are, by nature, less aggressive.
Instead of a full-screen takeover, slideouts are triggered on the corner of the app allowing users to freely keep browsing.
It's best used to introduce new features or drive user action in a more subtle way.
Here's what it looks like:
As with modals, every aspect of the slideout is customizable including its position on the screen.
Tooltips are by far one of the most popular UI patterns among product teams.
Tooltips are very useful in drawing the attention of users to a certain element of the screen.
This can be crucial in drawing users’ focus into certain clues within that page as well as giving them tours of a certain view.
Note that unlike modals and slideouts, tool-tips are associated with a certain element on the page, and if the element isn't visible on the screen the tooltip won't show. (You can change this option to try to find the element or wait for user action to trigger in the tool-tip settings bar.)
It also lets users freely browse the app and interact with other elements by default. (You can change this by adding a backdrop from the theme settings.)
Driven actions are tooltips that direct users to take a certain action on a specific element on the page.
Driven actions serve the same purpose as tooltips but with the intent of driving user action. They also are the building block of interactive walkthroughs.
Hotspots are a subtle UI pattern that is less invasive than tooltips.
The idea behind hotspots is to allow the user to subtly discover clues at their own pace.
Hotspots won’t trigger on their own, instead, they will show a tooltip when clicked. The hotspot, then, will disappear after the tooltip is dismissed.
As it is with the other tools, hotspots can be fully customized to fit your needs including changing the beacon type or color.