How to Improve The Happy Path UX Flow by Focusing on Unhappy Paths
The more your users stick to the happy path UX, the more they’ll see the value in your product and want to stay around. Your retention rates will potentially increase, and so will customer satisfaction.
Best of all?
You can make this happen by optimizing the UX for unhappy paths within your product. This article shows you how.
TL;DR
- The happy path, also called happy flow or golden path refers to a series of ideal steps that the user takes within your product to achieve the desired result.
- Happy paths are designed such that each step gets the user more excited about accomplishing their goals.
- Happy paths are created to be error-free and ideally have zero friction -there’s only one happy path per user flow.
- Unhappy paths are the opposites of happy paths – they contain friction and don’t lead the user to their end goal.
- There are multiple ways errors can arise within a product, so there’s no single yardstick to determine the unhappy path.
- Additional alternate path scenarios may occur within a product that also leads the user to valid outcomes. The most effective path is identified and labeled the happy path.
- Exception paths arise from fault conditions like data entry errors, and they don’t lead the user to the expected outcomes.
Five steps to designing a successful user experience:
- Define the key user flows to focus on
- Map the happy path for each user flow
- Look into additional alternative path scenarios
- Determine unhappy paths
- Test and iterate
Five tactics to improve the happy path:
- Adding context to your error messages and making debugging fun will help increase user patience when things go wrong within the app.
- Besides your error message, use clear CTAs to direct users to possible solutions.
- Use input validation to help the user avoid mistakes when filling out forms.
- It’s always good to use different formats for your error message. This will provide broad accessibility and ensure all users understand what you’re saying.
- Avoid blank empty states and use driven actions to guide users through your product/features.
- Need a better understanding of user experiences and start building happy user flows? Book a Userpilot demo today!
Try Userpilot and Improve Your User Experience
What is a happy path in UX?
The happy path refers to a series of ideal steps that the user is expected to take to achieve the desired result.
A typical example of this is when users visit your app and input their login credentials. If the inputs are correct, they will gain access to the app but will receive an error message if the login details are wrong.
This is a simple example, though. Happy paths can be more complex (i.e. involve more steps) than this.
What is the unhappy path in UX?
This is the opposite of the happy path.
As mentioned earlier, the happy path is designed to help users achieve their end goals. However, the unhappy path ends abruptly, without the user achieving the desired outcome.
There are many ways things can go wrong within an app, so there’s no single unhappy path.
Happy path vs. alternative paths vs. exception paths?
What’s the difference between these basic concepts?
By now, you know that the happy path is the frictionless path the user takes to accomplish an objective. But there could be different other paths that lead to valid outcomes. These are known as alternative paths.
When valid alternatives are identified, the path that gives the most likely positive alternative is labeled as the default or happy path.
Exception paths arise from fault conditions, such as data entry errors, and they don’t lead the user to expected outcomes.
Steps to design an intuitive user flow and prevent unhappy paths
Ready to fill the customer journey with happy experiences that reduce the time to value and increase retention rates?
These are the steps you should take:
- Define the key user flows to focus on
- Map the happy path for each user flow
- Look into additional alternative path scenarios
- Determine unhappy paths
- Test and iterate
Let’s get into the proper details.
Define the key user flows to focus on
User story mapping helps you do this. It involves visualizing the different steps users go through within your product to achieve their objectives.
Creating a story map will enable you to see the various user flows within your product and how each one leads to another.
You’ll also see which flow is more important than the other. Common flow examples in SaaS include signup flow, primary onboarding flow, using a feature flow, etc.
Technical teams use sketches and sticky notes to create a story map, but you could use software like Miro to get this done easily.
Here’s what a user story map will look like on Miro:
Map the happy path for each user flow
After identifying the flows, your next step is to design a happy path for each flow, starting with the most critical flows and walking your way down.
Look into additional alternative path scenarios
This is needed to prevent system errors when edge cases happen.
In UX design, edge cases occur when a user performs an action that’s not expected of them in an ideal flow but still gets the needed results.
Imagine you have an app that tells users they can create “unlimited” designs in a day, knowing that users rarely make more than 500 designs. An edge case will be when a user decides to create over 500 designs in one day.
There would be a system error if your app weren’t equipped to handle this.
Edge cases are extremely rare; only about 1% or less of your users will be affected by this. However, it’s still something you should consider as you design the ideal path and user interface for your product.
The question to ask yourself is, what possible alternative paths could users take, and how can we prepare the system for it? It’s not easy to answer this question at once, but with some brainstorming and testing, you’ll come up with different possible alternative path situations.
For example, you can use Userpilot’s Path report to analyze how users navigate through your product. This enables designers to identify potential alternative paths users might take and implement necessary adjustments, especially in edge cases.
Track and Analyze How Users Navigate with Userpilot
Determine unhappy paths
Decide on what the obvious unhappy path flows are for your product, then create solutions to bring users back on the happy path.
For instance, login errors are common unhappy paths in SaaS. What’s a possible solution that redirects users to the happy path? Simple: show an error message when a user enters a wrong password and add details on how to fix it.
You can also use funnel analysis to catch drop-offs where users commonly encounter errors or deviations from the expected happy path user flow.
There may be multiple unhappy paths for your SaaS. Share them with the product owner and the entire UI/UX teams. Then together decide on the most critical one and start unhappy path testing.
When mapping out the unhappy paths, add screenshots of each step to help with design later.
Test and iterate
There are only a few possible alternative paths, but there’s no limit to how many unhappy paths you can have in a system – this depends on each user’s perspective.
The good news is that every product keeps evolving, no matter how successful it is. So, as time progresses, you can always do happy path testing, examine your system for unhappy paths, and create solutions to them.
Here’s how to go about it: prototype first, then do happy path user testing and iterate. Only implement in the live environment when you validate a solution.
How to steer users on the happy path with good UX design
Carefully created, your UX design will make users stick to your product even when they encounter errors. Best of all, you can maximize your UX to ensure users don’t even encounter errors at all.
Let’s find out how.
Add context to your error messages
Recall the password example we cited earlier? It’s not just enough to show an error message and not tell users how to fix it. This will leave them confused. And you know what confused users do—they start clicking everywhere, get frustrated, and give up.
Take a cue from Simplenote:
The same applies to errors that need further debugging. See the image below for how Asana makes it fun for the reader with unique error codes.
“5 evil cobras jog sadly” is a way more entertaining unique code and puts a smile on the user’s face instead of a generated number that most software companies use.
Remember that putting a smile on the user’s face helps keep them patient and further motivates them to perform the next action you want.
Use constraints to prevent errors
For forms, don’t allow users to input the wrong data or click a button if the data is not okay.
This is very easy to do: don’t allow text when the field is supposed to contain just numbers and vice versa. If the criteria are preset, the user will instantly realize they input the incorrect data and fix it immediately.
Also, for dates, you can make it so that users can only input the end date after the start date. All these constraints will help guide the user on the happy path.
Don’t forget about accessibility
Not all your users are the same. Some are color blind or have low vision, so only using color to signal an error is insufficient.
Add short messages too, or even animations — CSS animations that shake a field in a form when the input is not correct. You could also use sound to signal errors.
Provide the next action when the user is stuck
It’s nice to use error banners, notifications, etc., to steer the user, but don’t stop at just telling them what to do.
Add a clear CTA if users need to take a specific action.
Your CTA will ensure they don’t miss the point and get the additional help they need.
Mural does this for suspended accounts. The user is notified that they can’t log in because their account has been suspended. But it doesn’t stop there – they tell the user what are the options.
Either reactivate the account or select another workplace. These two separate CTAs make sure the user gets on the right path.
Focus on the loading experience
Content is coming; it’s just taking a moment. But who likes to wait for a moment when they shouldn’t have to?
Ideally, no one would see it when your content is loading, but sometimes it cannot be helped.
The loading experience should provide feedback, reduce the users’ uncertainty, offer a reason to wait, and reduce the users’ perception of time.
While the Userpilot Chrome extension is loading, we display a loading message and some inspirational messages to keep users patient and put them in a good mood while waiting. Another reason we do this is to avoid them clicking around and accidentally ending up on an unhappy path.
Don’t leave empty states-empty
When the user dashboard is blank, it might cause users to freeze and do nothing or start randomly clicking everywhere.
The best way to keep them on the happy path as they first log in to your app or access a feature for the first time is with messages and CTA on the empty state. This sets the expectation and tells them the next step to take.
Clear and simple, Airtable uses the blank space to prompt users to take action.
A progress bar on the UI goes a long way
Use progress bars to set expectations of the steps the user has to go through, making the process clearer and also feel shorter.
A good place to use this is in your signup flow to keep the users on the path to completing the flow.
Use driven actions and guides
Want to educate and guide users through your product/features so they don’t make mistakes?
Use driven actions!
Driven actions are small tooltips that guide users and are triggered by action. What makes them so effective is that the next step won’t show unless the user has performed the needed action instructed by the first tooltip.
Try Userpilot and Enhance Your User Experience with Interactive User Guide
Conclusion
The happy path is that single path that yields the most positive outcome and has no friction. Unhappy paths are exact opposites of the happy path — they have errors and fail to meet user expectations.
As we’ve discussed in this article, you can take advantage of unhappy paths to improve the happy path flows for your users. And we’ve gone over different tactics to enable you to accomplish that. Identify the ones that apply most to you and start implementing them.
Want to see how Userpilot can help you create a better happy path UX that guides the user through exciting product experiences? Book a demo call with our team and get started!
