Now recruiting for a Senior UX Design Freelancer! Click here for more information →
UX Pattern Analysis

Success UX

September 12, 2022
Written By:
Fanny Vassilatos
Ceara Crawshaw

In the absence of positive success feedback people are at risk to assume the worst (a classic human move). Success, high fives, affirmations the reassuring part of life isn’t to be forgotten and disregarded.

Often error states are treated as more important than success states, however, all of these patterns need to work together to communicate properly with users. Success patterns are the other, more positive side of the ‘error’ coin and help you form a solid foundation of any SAAS product’s UX. Success UX feedback patterns happen over all sorts of components (inc. fields, toasts, banners, notifications) and roll up into an overall success UI pattern of letting people know what they did worked.

Definition of success UX feedback
Success UX feedback is any behavior sequence that acknowledges when an action happening in the system is completed. These actions can be either directly performed by a user or performed by the system itself. Success is indicated through microinteractions of individual components like form fields, list items, table rows, toasts, modals, etc and interaction patterns, which are a sequence of multiple behaviors layered together. As long as it’s a positive confirmation of success acted out by the UI, it counts as success UX.

☝️👵🏻 These powerful patterns aren’t simply nice to have embellishments employed for ‘touchy feely’ purposes, they serve to reassure your users, build trust with them and set the tone for your product’s experience.

Things to consider when designing success UX patterns

Creating the UX for successful interactions in your system is involved and needs to be carefully considered between design, development and product so make sure your patterns are reusable, consistent and follow your design principles. Start (or continue) the process guided by these prompts to spark your 🧠.

Where are the parts of the experience where success should be indicated?

Check your forms (and form field inputs), lists, workflows (and wizards) to get an idea of where the trouble spots are.

How ‘big of a deal’ is the interaction and how often does it happen?

Gauge the UI ‘response’ in terms of how often it happens, things that are routine and occur over and over shouldn’t get a huge party every time, this can become a hindrance to progress and efficiency.

Are there high stakes interactions where a process or operation completing successfully isn’t acknowledged?

Prioritize these places first, as their absence has a higher impact. High stakes refers to the relative importance of the action, whether it has a large impact on the person’s workflow, costs time, or requires a lot of upfront work to initiate. For example, if someone is about to hit ‘run’ on something they took 2 days to setup, this would be a high stakes interaction.

Success UX feedback examples

Here’s our chance to bring wins to the surface. In this section we’ll look at ways to communicate success from examples out there in the world.

UX tip: provide a clear confirmation message or indicator –  when creating success UX feedback, make sure you inform the user of this success with a clear confirmation message.

A nuance to the ‘success’ experience is to match the scale of the action, to reflect the importance of that action being completed.

Full page success pattern

Progress confirmation feedback UI with steps and checkmarks

You might use a full page confirmation message, maybe with a joyful illustration, if it was a critical action for which such a break in the user flow is appropriate.

Toast success pattern

Success UI shown in a toast bottom left corner

For smaller scale task completions, you might prefer opting for a more subtle successUI like a banner or toast.

gmail undo send UX pattern example

This Gmail example does double duty, it indicates success and has an ‘undo’ functionality.

Inline success indicator

The least disruptive way to communicate a successful machine task is with a subtle inline success UI indicator.

Inline loader on list item in a table progress and success feedback combination

Your confirmation message can even happen inline directly where the user performed the action. This example shows a combination of loading and success UX in a table.

💡 Also worth noting:
If you use top-banners to showcase these success messages, make sure they’re distinct from one another as users might trigger multiple tasks at once. If your message is too generic and is simply repeated 3 times, it might become confusing and worrisome for the user.

A good example of this is the “Saving” and “Saved to Drive” indicator while working on Google Suite documents. It’s great to constantly show the user what’s up without taking too much of their attention. It’s a small reference point users become used to seeing there if they need it.

Saved to drive success indicator in Google Docs

Next action success pattern

In both success state cases, you want to guide users towards their next goal so they don’t hang out in front of a big green checkmark forever. What can they do now? Has this unlocked some other action for them? Can you guide them towards another object that needs the same task done to it? Is their next step to communicate this change to another user? Bring these suggestions right there, front and center, in the success state.

UX tip: Guide the user to their next action

Jira guide user towards next action
This success UI example from Jira guides the user towards what they would do next.

See our breakdown of microinteractions for inputs in our improving interaction article – one key state is ‘filled’ which is a success state or sorts.

System success patterns

Use Case: the computer successfully performed a task – A system-side success state is the same but for a task completed by the machine. These tend to be more “in the background” actions such as exporting a dataset, running a machine learning flow or converting a selection of files.

The concept of success feedback for things that the system has performed ties closely with the UX heuristic of ‘system status’ which specifies the importance of communicating with users where the system is ‘at’ and what it’s doing next.

System success moments may be timed a little differently, especially when say a process was running for a long time and is finally completed. Maybe the interaction you design, if more of an email notification type of flow.

Wrapping up

Imagine for a second that a UI is a conversation. If you’re telling a story to someone, they’re looking another direction and not responding to you (even though they LOVE what you just said), that would be quite weird and eerie.  

Compare that to a conversation participant who’s nodding their head acknowledging that they are listening and actively responding to what you’re saying. Now that’s a real conversation. UIs and interactions in those UIs is how we develop and nurture the human<>computer relationship here people, let’s make it a nice one.

UX Heuristic Report Template Kit

Spend your time and life force on capturing heuristics problems rather than endless visual fiddling. Meganne Ohata will guide you the whole way, so you can propel your work and become their most trusted advisor.

$79
$59
Learn more
ux heuristics series

Download our Table UX Audit Checklist

Do a mini UX audit on your table views & find your trouble spots with this free guide.

Available in a printable version (pdf), plain text markdown, Apple Keynote or Microsoft Powerpoint.

Please fill in the form below and it will be in your inbox shortly after.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
letters

Want to dig deeper on flow diagrams?

Be the first to know about our upcoming release!

If you found this intro content useful and find yourself needing to express yourself more efficiently on your software team, this training is for you. Our new flowchart training includes real-life enterprise stories and examples for using flowcharts for UX. You’ll get tips on how to make your diagramming efforts successful, how to derive info for the flow charts, and how to get others to use and participate in the diagramming process.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Get to know us
“Your article made me realize our tables suck.”
Matthew S.
Mazumago
Previous Post
5 Flexible Enterprise UX Patterns
Next Post
Empty states