Success States Design
Every user interaction with a product can be described as a story. Every story has a beginning, a middle, and an end. But almost in every story, it's possible to find the moments that make the experience truly memorable. Product designers use a particular state to celebrate such moments - success states.
Below I want to share the concept of success states, four excellent examples of success states, and things to remember when designing success states.
What are success states
When users interact with a product, they a goal that they want to achieve. Success states inform users that they are closer to achieving a goal or already achieved the goal.
A design of success can have a tremendous impact on user experience. Let me give you an example. All people who run email marketing campaigns know the feeling when you need to send emails for dozens of people for the first time. It's pretty stressful. Mailchimp tries to alleviate the fears by offering a High five animated hand that users see when the press 'Send' button.
Why success states are so important
Humans are emotional creatures. When we interact with digital products, we feel emotions (both positive and negative). The peak-end rule suggests that people judge an experience largely based on how they felt at its peak (i.e., its most intense point) and at its end, rather than based on the total sum or average of every moment of the experience. By creating a huge positive peak we have a better chance to make users remember our products.
Examples of success states
1. Task completed
Task management tool
How to make user interaction with the task management tool more memorable? Asana, task management tool, offers a good example. One of Asana's four celebration creatures (a unicorn, yeti, narwhal, or phoenix) sometimes flies across user screen as users complete tasks. What makes this little design detail great is the fact that animations are randomly generated and won't occur each time user completes a task.
2. Order placed
online shopping
Placing an order on an eCommerce website is among typical things we do online. However, with a bit of imagination, it's possible to turn this exercise into something fun and delightful.
3. Money sent
Sending and receiving money
When it comes to sending money, user shouldn't be left wondering if they've completed the task or not. Stripe has one of the best examples of success states. It reassures users about the success of operation without too many visual details. When the user clicks "Pay," a spinner briefly appears on the screen, and shortly after that, the user sees the success state.
4. Achievement unlocked
Language learning app
A well-designed system of rewards creates a habit loop, and the loop can keep users doing certain activities over longer periods of time. Duolingo successfully uses this technique to encourage users to learn a new language. When users complete certain levels, they are rewarded with experience points as well as badges.
3 thing to remember when designing success states
When it comes to the design of success states, it's essential to think about the following things:
- Ensure that the message of the success state is crystal clear to your users. Users should know that their action was completed successfully.
- Make an educated guess on what the user will try to do next. Design element on the screen that allows them to do it right from the success state (i.e. call to action button that triggers the next potential action).
- Think about how the success screens will look for first-time users and for a regular user. Things that look nice during the first interaction with a product can quickly become annoying after the 100-time users see them. It is especially true for fancy animated effects.
Conclusion
People are both rational and emotional. That's why when it comes to product design, we need to focus both on creating good usability (rational) and making the interaction delightful (emotional). The design of success states can improve both usability and emotional impact of your design.