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.
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.
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.
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.
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.
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.
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.
When it comes to the design of success states, it's essential to think about the following things:
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.