SaaS Interface Design: Trends, & Best Practices for Designing a SaaS UI
Designing a SaaS product for the web is not any simple activity. It requires not simply an thought, however a clear plan of the way it’ll work and which options you’ll help.
This additionally means a lot of UX planning from the early wireframing to detailed mockups.
I’ve put collectively some frequent traits I see in SaaS web sites and have compiled all of them right here with examples. I’m hoping these can supply some concepts and inspiration for anybody designing their very own SaaS web sites.
Every main SaaS app must have some giant international navigation. This is the place you’ll hold hyperlinks to all of your tools, options, and particular person charts/information.
Users don’t wish to dig round endlessly simply to search out what they’re wanting for. But on the identical time you could have dozens of customized options and it’s not simple cramming all of them into one navigation.
I just like the Hootsuite dashboard as a result of they use icons inside a vertical navigation menu. This stays fastened and all the time in view so it’s tremendous simple to handle with out a lot effort.
The solely draw back is that icons don’t clearly clarify what a web page does. So customers are left clicking by way of icons till they find out how the interface works.
This isn’t inherently dangerous as a result of it does save house on the web page. It simply means a SaaS app with this navigation type might take a little longer to study.
One different web site that has a related vertical dashboard nav is FreshBooks. However they embody labels subsequent to the icons so you’ll be able to simply inform what every hyperlink is for.
This completely makes navigation simpler, nevertheless it additionally takes up extra space.
It’s all the time a trade-off with international navigation menus since you need them to carry as many hyperlinks as attainable. They needs to be really “global” throughout all the SaaS interface.
But on the identical time you need them usable so you’ll be able to’t cram an excessive amount of. I believe FreshBooks has a very nice ratio and it’s one of many cleanest dashboards I’ve seen.
One different design I like is the Flow dashboard. It’s tremendous clear and has a navigation alongside each the highest and the facet of the web page(solely on sure pages).
This provides extra room for customers to entry all pages globally and it doesn’t really feel too crowded. Project data has dropdown menus to open/shut as wanted so customers can take much more management over the interface.
None of those designs are excellent however they showcase how a lot ought to go into a international navigation.
If you’re undecided the place to begin I like to recommend mapping your content material so you’ve a plan for all of your SaaS pages prematurely.
Dynamic Sorting Options
Almost each web software entails some kind of information or search function. And each of those work a lot better should you can restrict the searched information based mostly on related data.
That’s why dynamic sorting is a must-have for all of those pages. I particularly consider apps like BuzzSumo the place you’re wanting by way of social shares over sure time intervals throughout completely different web sites, and with completely different sorting choices like # of shares.
Their vertical nav panel is used solely for these sorting choices whenever you’re viewing search consequence pages. Notice the highest nav is basically how you progress by way of the opposite areas, typically a requirement when you’ve a giant SaaS product.
Each sorting possibility is hidden beneath a dropdown menu so you’ll be able to broaden or cover the sorting choices at will.
The staff at BuzzSumo is even increasing their app lineup to incorporate a new product BloomBerry. This one pulls frequent questions based mostly on a main subject or seed key phrase.
It has a very related interface the place the highest horizontal navigation contains hyperlinks to associated pages and the vertical nav is for sorting & customization.
Right now the app continues to be in beta so it’s not absolutely accomplished. I think about over the approaching months/years this interface will embody way more options and get a lot extra complicated.
But even in its infancy you’ll be able to see how this UI is designed round usability for looking out & sorting above all else.
Clear Visual Data
Some of the most important SaaS apps that I take advantage of share information and curate data into one dashboard.
This is immensely useful and it’s one of many predominant causes folks construct SaaS merchandise to start with. If your product thought contains plenty of customized information then you definately’ll need a design that clearly visualizes this information.
SEMrush is a nice instance as a result of they’ve a lot information to undergo. You’ll discover at the very least a dozen completely different charts for any website you lookup of their index.
Traffic stats, key phrase quantity, competitor graphs, high key phrase efficiency, and even wealthy snippet information all comes with visuals.
The key’s that SEMrush segments these graphs onto completely different pages. The “overall” dashboard view for a website is full of information. But as you get deeper into the interface you’ll discover every web page solely reveals visible information related to the subject(rating will increase, competitor analysis, and so forth).
There’s one other nice instance of this within the Ahrefs dashboard.
This is a very shut competitor to SEMrush in order that they each have related varieties of information to share. But Ahrefs focuses extra on backlinks and hyperlink high quality so the visuals primarily deal with complete backlinks, graphs of hyperlinks over time, and different associated metrics.
Getting deeper into the interface there’s a lot of uncooked information in tables. This is usually the simplest technique to devour that form of information, so do not forget that visuals aren’t excellent for each single web page.
But they need to be used within the dashboard when attainable as a result of they make information far simpler to devour at a look.
Tight Interface Designs
This could also be a divisive subject however I believe SaaS UIs really feel simpler after they’re extra cramped relatively than spaced out.
Users simply need stuff that works with easy-to-access options. This doesn’t imply you should make the interface so cramped that it’s unusable. Rather it’s best to purpose for a steadiness of becoming as a lot onto the web page as attainable whereas nonetheless maintaining it clear.
There are some completely different methods you should utilize however listed here are my recommendations:
- Side and high navigation menus
- Multiple dashboard panels on one web page
- Graphs, charts, and icons segmented on every web page
- Alternate textual content sizes based mostly on the importance of the content material
One have a look at the VWO dashboard and you may inform there’s a lot happening.
At first this can be off-putting so new customers can wrestle to get began. But the extra you utilize the appliance the better it turns into and the clearer it’s to mess with.
That’s why I like these sorts of dashboards as a result of you’ve every thing proper at your fingertips. Nothing is ideal however the perfect you are able to do is give customers every thing they’d need all inside arm’s attain.
Another nice instance is the ManageWP web page with a dashboard filled with charts, tables, and uncooked information. Plus the hyperlinks are clearly accessible and there’s even two completely different menus: a hyperlink menu and a sorting/choices menu.
When your SaaS product is that this technical you really want to search out a technique to match all of it in. No it in all probability gained’t be fairly, however there’s additionally no higher technique to encourage person interplay whereas additionally maintaining the positioning usable.
Every step of the design course of shall be powerful for a SaaS app.
But the extra you’re employed at it extra you’ll study what suits finest, what doesn’t, and the place to place your vitality. I hope this put up can at the very least supply some steering for your design and get you fascinated by the person expertise too.
If you need some associated studying on SaaS app design then these posts are price skimming as properly.