SaaS UX Best Practices

Introduction

The SaaS UX landscape is a crowded one. Every day, new products and services are released into the wild with the hopes of attracting new users and growing their customer base.

While many of these products achieve success through innovation or groundbreaking technology, many others succeed because they simply do what they promise to do in a straightforward way.

This article explores some of the best practices for creating great user experiences for SaaS products.

SaaS users are looking for simple yet powerful tools that will help get their work done efficiently.

Think about your SaaS product as a tool people pay rent to use.  They rent it because it helps them do their job better, faster and more effectively than before.  If it feels like a chore and isn't making their life simpler, it will diminish in value and they'll go pay rent elsewhere.

To acquire new customers and retain your current users, you need to provide them with an intuitive interface that makes it easy for them to get started as quickly as possible without feeling overwhelmed by too many features or screens full of information (unless it's necessary).

To help do this:

• Split features into the jobs they help your users accomplish (more on this below)
• Use one primary action button per page
• Avoid cramming too many features into a single page
• Improve the onboarding experience so users feel they have accomplished something easily when they first sign up. This sets them up for success and makes it more likely that they will continue to use your product.

Understand your audience's jobs to be done.

Jobs to be done (JTBD) offers a way of thinking about how products or services are used with additional context.  

The idea is that people don’t buy things; they buy solutions to problems.

For example, when you go and buy milk, you’re not just buying milk; you’re buying the solution to a problem of needing something to drink with your cereal. So the solution; 'I need milk', lacks understanding. You need to understand the situation and reasoning behind the solution.

This helps you deliver the solution in the best way. In this example, you wouldn't package the milk in a giant pail, or in one of those tiny milk pots. You'd use a carton that fits in the fridge.

The best way to understand your audience's jobs to be done is by interviewing them. However, if you don't have the resources to conduct interviews, there are other ways of collecting data. For example:

• Read reviews of competing products/services on social media sites such as Yelp and TripAdvisor
• Analyze customer feedback emails and surveys
• Observe users completing a task using your product or service (e.g., watching people sign up)

Go beyond minimalism.

While minimalist design is great for many things, it's not always the best option for user interfaces. It takes a great deal of understanding and nuance to create an interface that appears minimal but is enjoyable to use. Practice restraint and simplicity instead of focusing entirely on minimalism.

Here are some tips:

• Use whitespace effectively. You can use whitespace in different ways: as padding around content; between sections of text; between elements within a page (like on buttons). Whitespace helps create visual hierarchy in design by creating contrast between different areas on the screen. It makes your product seem less cluttered and easier to navigate when there's plenty of room available for users' eyes to rest after scanning through each section before moving forward again into another one! We'd recommend using something like the 8pt grid to help maintain spacing consistency.
• Icons. Stick to convention where possible, and never rely on a sole icon to communicate a message. Icons obvious to you might not be to others.
• Typography. Focus on legibility over personality in your SaaS app. Avoid using small, thin fonts. Use larger font sizes with consistent spacing between words and lines.
• Colour. Stick to convention again. For example, for statuses, stick to traffic lights. If you need to add personality, use a single accent colour that matches your brand.
• Accessibility. If you maintain at least AA standards, all your users will thank you because it means your contrast is on point.
• Feedback. When an action or error has happened use toasts / notifications to tell the user what has happened. Otherwise they'll feel like they've been left in the dark.
• Avoid making your users guess.  What do I do next? What will this action do? These questions create anxiety and decision fatigue. Make it clear what an action does and if possible allow any action to be undone.  
• Progress indicators. The ultimate goal is no waiting but when required loading screens and indicators can help comfort users when a big task or action is happening.  On the flip-side, if your SaaS product involves sensitive data (personal, finance, credit checks) or the user has put in a bunch of work and expects the processing of the information to take time, intentional loading indicators can help comfort users.

Make your users feel smart.

SaaS UX design should be easy to learn and easy to master.

It should be intuitive, so that it’s immediately obvious what the user needs to do next in order to achieve their goal. The most successful SaaS products are ones where customers can get up and running with little or no training required—and if they do need more help, they can easily find it on the site itself (or through other channels).

Customer support is also critical, so make sure you have a plan for how you’re going to engage with customers who have questions or problems using your product.

It also doesn't hurt to remind them of the progress they've made using your SaaS product. For example, small celebrations when a task is completed (without being patronising!).  

Don't reinvent the wheel.

It’s tempting to create a unique design language for your product, but a standard one is better. You want people to choose your product over your competitor because they love using it not because it looks prettier.

Many design patterns are mature to the point that any deviation can annoy your users. People develop habits with familiar sites and apps: They know how they work and what they look like — which saves us time when we switch between them in our daily lives — so why break this habit?

To add personality without breaking convention, use a single headline font throughout, along with icons that are easily recognisable by users. Use copy with personality and pair this with a single accent brand colour. Your SaaS product will feel unique and memorable enough without causing confusion.

Test everything.

• Test everything.
• Test early and often.
• Test with real users.
• Test with actual data.

Testing is an indispensable tool for improving business performance. It can help you determine the most effective copy and design elements for your site. User testing is a great way to find out if users prefer one process over another or highlight if something is confusing.

You can do this pre or post-build, during the design phase (using prototypes) to move forward with confidence.

Prioritise UX microcopy.

Microcopy is the small bits of text that appear on your website or app. It’s used to help guide users through the process of using your product, and can be helpful in providing information that explains how to use your product, as well as why you are asking for certain information.

Setup clear standards for your copy, what you call things. Across hundreds of pages, this can become inconsistent quickly. To help align your team, setup a standardised lexicon for your SaaS app.

For tasks are information gathering (eg forms) it doesn't hurt to provide guidance.  Keep it concise but informative. Always avoid making users guess.

Provide a clear path to conversion.

If a user can't convert, then there's no point in them using your product. You need to make money.

A great SaaS UX design offers users an easy way to convert or upgrade. Help them out by providing clear call-to-actions and visual cues showing where they should go next:

• Make sure the path from signup form to conversion page is as simple as possible
• Don’t make people work too hard or feel stupid
• Visual cues around features that are pro or need upgrades show the value they could be missing out on

Embrace restrained design principles.

In a world of endless design options, it can be tempting to amp up the number of graphics or animations in your product. But adding too much complexity will cause users to overthink their actions, which is the opposite of what you want them to do.

Research shows people prefer less choice due to decision fatigue.

A restrained design keeps things simple and clear without being boring or generic. It also matches the brand image of your company and builds confidence in customers, who tend to favour products that don't look cheap or unprofessional.  In fact a study by NN Group found that users are more tolerant of minor usability issues when they find an interface visually appealing.

Resisting this temptation will help you avoid overloading users with unnecessary information—and it's not just aesthetics that have an impact on UX; if something looks like it's part of a larger puzzle, it can feel overwhelming.  Ground your users as much as possible with devices like breadcrumbs and clear, logical content structure.

Conclusion

If you want to create the best SaaS user experience possible, focus on simplicity and clarity. Make sure your app is easy to use, that it doesn't overwhelm users with too much information or get in their way by constantly throwing popups at them. And make sure you're talking directly to your audience's needs as well—they're looking for shortcuts when it comes time for conversion.