SaaS Interface Design: Trends, & Best Practices for Designing a SaaS UI
Designing a SaaS product for the web isn’t any simple task. It needs not simply a concept, however a transparent set up of however it’ll work and that options you’ll support. This additionally means that lots of UX coming up with from the first wire framing to careful mockups.
I’ve place along some common trends I see in SaaS websites and have compiled all of them here with examples. I’m hoping these will offer some concepts and inspiration for anyone coming up with their own SaaS websites.
Every major SaaS app should have some large global navigation. This may be where you’ll keep links to all or any or any your tools, features, and individual charts/data.
Users don’t need to dig around endlessly simply to seek out what they’re yearning for. But at the same time you may have dozens of custom features and it’s not easy cramming them all into one navigation.
I like the Hootsuite dashboard because they use icons within a vertical navigation menu. This stays fixed and always in view so it’s super easy to manage without much effort.
The only downside is that icons don’t clearly explain what a page does. So users are left clicking through icons until they learn how the interface works.
This isn’t inherently bad because it does save space on the page. It just means a SaaS app with this navigation style may take a little longer to learn.
One different website that features a similar vertical dashboard nav is FreshBooks. But they embrace labels next to the icons thus you’ll simply tell what every link is for.
This absolutely makes navigation easier; however it conjointly takes up extra space.
It’s perpetually a trade-off with world navigation menus as a result of you wishes them to carry as several links as attainable. They ought to be actually “global” across the complete SaaS interface.
But at identical time you wish them usable thus you can’t cram an excessive amount of. I believe FreshBooks features a very nice quantitative relation and it’s one among the cleanest dashboards I’ve seen.
One different design I prefer is that the Flow dashboard. It’s super clean and has navigation alongside both the top and the side of the page (only on certain pages).
This gives more room for users to access all pages globally and it doesn’t feel too crowded. Project information has dropdown menus to open/close as needed so users can take even more control over the interface.
None of these designs are perfect but they showcase how much should go into a global navigation.
If you’re not sure where to start I recommend mapping your content so you have a plan for all your SaaS pages in advance.
Dynamic Sorting Options
Almost every web application involves some type of data or search feature. And both of these work much better if you can limit the searched data based on relevant information.
That’s why dynamic sorting is a must-have for all of these pages. I specifically think of apps like BuzzSumo where you’re looking through social shares over certain time periods across different websites, and with different sorting options like # of shares.
Their vertical nav panel is employed entirely for these sorting choices once you’re viewing search result pages. Notice the highest nav is basically however you progress through the opposite areas, typically a demand after you have an outsized SaaS product.
Each sorting option is hidden underneath a dropdown menu so you can expand or hide the sorting options at will.
The team at BuzzSumo is even expanding their app lineup to include a new product BloomBerry. This one pulls common questions based on a primary topic or seed keyword.
It has a really similar interface wherever the highest horizontal navigation includes links to connected pages and also the vertical nav is for sorting & customization.
Right now the app continues to be in beta therefore it’s not absolutely completed. I imagine over the coming months/years this interface will include far more features and get a lot more complex.
But even in its infancy you can see how this UI is designed around usability for searching & sorting above all else.
Clear Visual Data
Some of the largest SaaS apps that i exploit share data and reverend info into one dashboard.
This is vastly useful and it’s one among the most reasons folks build SaaS product to start with. If your product idea includes lots of custom data then you’ll want a design that clearly visualizes this data.
SEMrush is a great example because they have so much data to go through. You’ll find at least a dozen different charts for any website you look up in their index.
Traffic stats, keyword volume, competitor graphs, top keyword performance, and even rich snippet data all comes with visuals.
The key is that SEMrush segments these graphs onto different pages. The “overall” dashboard view for a website is packed with data. But as you get deeper into the interface you’ll notice each page only shows visual data relevant to the topic(ranking increases, competitor research, etc).
There’s another great example of this in the Ahrefs dashboard.
This is a very close competitor to SEMrush so they both have similar types of data to share. But Ahrefs focuses more on backlinks and link quality so the visuals primarily focus on total backlinks, graphs of links over time, and other related metrics.
Getting deeper into the interface there is a lot of raw data in tables. This is generally the easiest way to consume that kind of data, so remember that visuals aren’t perfect for every single page.
But they should be used in the dashboard when possible because they make data far easier to consume at a glance.
Tight Interface Designs
This may be a dissentious topic however i believe SaaS UIs feel easier once they’re a lot of incommodious instead ofspaced out.
Users simply wish stuff that works with easy-to-access options. This doesn’t mean you wish to form the interface thus incommodious that it’s unusable. Rather you should aim for a balance of fitting as much onto the page as possible while still keeping it clean.
There are some different techniques you can use but here are my suggestions:
- Side and top navigation menus
- Multiple dashboard panels on one page
- Graphs, charts, and icons segmented on each page
- Alternate text sizes based on the significance of the content
One look at the VWO dashboard and you can tell there’s a lot going on.
At first this may be off-putting so new users can struggle to get started. But the more you use the application the easier it becomes and the clearer it is to mess with.
That’s why I like these kinds of dashboards because you have everything right at your fingertips. Nothing is perfect but the best you can do is give users everything they’d want all within arm’s reach.
Another great example is the Manage WP page with a dashboard full of charts, tables, and raw data. Plus the links are clearly accessible and there’s even two different menus: a link menu and a sorting/options menu.
When your SaaS product is this technical you really need to find a way to fit it all in. No it probably won’t be pretty, but there’s also no better way to encourage user interaction while also keeping the site usable.
Every step of the design process will be tough for a SaaS app.
But the more you work at it more you’ll learn what fits best, what doesn’t, and where to put your energy. I hope this post can at least offer some guidance for your design and get you thinking about the user experience too.
April 4, 2019
April 4, 2019