<  Onboarding UX Patterns


Success states

What are they?

Success states are like "error" states, only the opposite: instead of letting users know that something went wrong, you're letting them know that what they're doing is working.

Three kinds of success states

Success states have become synonymous with celebration, particularly in user onboarding. But the fact is that guiding a user through a complicated flow of actions with positive feedback is more than celebrating a milestone. It's expanding the first conversation that users have with your product.

There's no doubt that 'Congratulations!' figures in the conversation somewhere. But equally important: the understated messages that keep users engaged—'You're doing great, here's step two,' 'thanks for checking this out,' or 'that's the right step.'

Success states broadly break up into three types depending on when and why you need to use them.

Success states for confirmation

Confirmation states answer questions that users have when they're taking action—questions like 'did I enter the correct information?' 'can I choose more than two options here?' and 'did I complete this step?'

When to use them

They're an essential part of UX in general, but "confirmation" success states are particularly important in user onboarding because they build trust with the product.

In many workflows, a screen makes a demand of the user and when the user complies, the product moves on like nothing even happened. Taking a beat to verify that all is well can give the user 1) mental closure and 2) feedback that the product is listening and reacting.

Counterexample 1: Skype's sign-up form

Skype's sole password requirement: choose a string between six and twenty characters long. They don't follow up with a confirmation state, though, and you find out, two steps later, that you need to repeat the step:

Pointers to nail them:

  • Make them visual (confirmation and green go great together!)
  • And immediate (don't wait until a user has finished filling out a form to let them know there's more password work to do.)
  • Remember that it's a conversation (your user communicates in interactions, your product responds in success states)

Success states for context

Have you ever played the game Hot & Cold with a kid? Context states follow similar beats—as users make progress with your product, success states can be your way of providing feedback about it: "you're getting warmer..." "you're burning up!" "you're standing in lava!"

Think of these success states as signposts -- you use them to situate users in a new environment and tell them where to go next.

When to use them

Audit your onboarding flow to identify "signpost" opportunities—if your flow branches into different directions for segments of users, you'll need a context state to direct users at every junction. These success states are also useful in particularly long onboarding flows, where users can easily lose their sense of how steps they've completed or how many steps are left.

Example: Unroll.me uses its "inbox zero" to tell users what they’ve accomplished so far (two emails unsubscribed and one rolled up) and direct to something new while they wait for new emails to show up—sharing their stats:

Example: Optimizely uses a milestone moment to inform users that they’re almost done with their setup and that it’s a great time to think about a paid plan:

Pointers to nail them

  • If you're using a progression system (like a to-do list for example) make sure your context-providing success state and your progression system don't  pull users in two different directions (to two different steps).
  • Make your CTA clear—A single CTA works better than many to choose from. The more visual the CTA the better.
  • Make sure that the next step you're suggesting is relevant to the user.

Success states for encouragement

A well-timed pat on the back can simply feel good to receive, especially when it's for a meaningful accomplishment. These success states are good ol' fashioned celebrations of progress.

Where to use them

Use a success state to celebrate a meaningful accomplishment!

The usual candidates are: Successfully getting to the end of an onboarding flow or signing up. But these are meaningful from your point of view, not necessarily the user's.

Success states work best for achievements that are meaningful from a user's point of view—this way you're not celebrating their activity within the product, you're celebrating their taking another step towards a better version of themselves.

Counterexample: Vimeo celebrates signing up. Significant from a product perspective—another user, yay! But I haven't even started using the product yet.

Example: Wordpress celebrates creating your site—a significant accomplishment considering that's the reason people sign up with Wordpress to begin with.

Pointers to nail them

  • Save encouragement states for milestones. Empty praise usually erodes motivation instead of amplifying it.
  • You can use success states to do more than one thing at a time: combine "encouragement" and "signpost" success states to celebrate users and steer them towards a follow-on activity.

For your consideration

  • Buffer gave a well-timed pat on the back for doing the most important thing in their onboarding flow
  • Duolingo sprinkled success states in throughout their entire intro journey
  • Eventbrite went all out with an ultra-rare footer success state
  • GetResponse got all flourishy with a big, italicized "Well done!"
  • LiveChat created a big, empty screen state just for giving a giant congrats
  • Meetup made sure to welcome new attendees -- fittingly social!
  • OKCupid not only confirmed that a photo was uploaded, but gave a little pep talk while they were at it
  • Pinterest provided praise after people persisted in procuring their first pin
  • Shopify had a rocket ship take over the entire screen to commemorate your store's launch
  • Skype threw a li'l emoji in there and called it a day
  • Slack flipped the script and turned the "go confirm your email" step into a celebration of its own
  • Sticker Mule gave a rubber stamp to your sticker-purchasing dreams
  • Twitter made its inline validation extra reassuring with some fun copy
  • Unroll.me broke out the party favors for learning its gestures, and then again for cleaning your inbox
  • Vimeo congratulated you just for signing up
  • WordPress celebrated your site launch and followed it up with even more suggestions for improvement