Modern UI/UX for SaaS applications in 2015 and Beyond
The world has moved on from old clunky desktop software. Cloud software-as-a-service is the name of the game. There is a whole lot of competition, and a great UI/UX is more important than ever in making your app stand out from the crowd.
This article is a primer on what issues you should be focusing on, and how we at Zoho have made our UX better over a long period of experimentation and learning.
Design Issues for SaaS Applications
Layout: A user interface has a lot of things, and how you put them together in a way that makes sense is what we call layout. With new trends, new user habits and multiple devices to consider, nailing a good layout is crucial to the usability of your app.
Product Workflow: I need to get something done. How do I do it? The less time it takes, the more UX points we win.
Visual Design: It’s no longer enough that products just work. They need to look beautiful too. There was a time when this wasn’t really a requirement. But right now, if your product ain’t beautiful, it ain’t gonna be used.
Forms: Forms are a huge, necessary evil. Nobody likes creating them. Nobody likes filling them out. But we can’t live without them. And that’s why making them easier to fill is something every UX designer needs to do.
How we redesigned Zoho Books
Zoho Books has been around for a long time, and has experienced a full transition over the years from outdated UI elements to new, modern ones. At Zoho, we’ve conducted extensive usability tests for each and every change, and learned a lot in the process.
Trust me when I say that usability tests are super-important in knowing what changes you make are for the better. You can always start with testing your product with your own employees/colleagues as your test subjects!
“Your employee experience is where your customer experience begins.”
Jennifer Winter
UserTesting.com
1. We Moved From Tabbed Navigation to Left-Hand Side Navigation
If you’re a regular user of today’s SaaS applications, you would have noticed that more and more products are moving towards a left-hand side navigation, compared to the old trend of using tabbed navigation right at the very top. This is better for usability, and there are a couple of solid reasons for that.
- Lots of horizontal space: We use widescreen resolutions everywhere. Right now, unless you’re reading this article on your phone, there is a lot of unused whitespace on the left and right. That whitespace is where you can put a handy vertical navigation menu that makes everything easier.
- Better use of limited vertical screen space: With widescreen resolutions, introducing tabbed navigation takes away part of what limited vertical screen space that you have. Moving the navigation to the left means you can make full use of all that vertical space for your main screen/interface.
- More menu elements: It’s possible to have a lot more menu elements in a sidebar which can be scrolled through easily, rather than horizontal tabs which are unintuitive to scroll through.
Left-hand side navigation is not something that’s really new. We’ve been using it for ages in Windows Explorer and Finder on the Mac. Moving this over to online SaaS applications is a positive move that’s awesome for users everywhere.
Another unconsidered issue that I’d like to propose is why we don’t use left-hand side navigation on websites. While this has been increasingly prevalent on online apps, moving to left-hand side navigation on websites should surely improve usability by a great degree.
2. We Switched to a Three-Column Layout
A three-column layout is natural extension of the now common sidebar navigation. With three columns, you have a really easy way to show a list of items in the second column, which can be manipulated easily. A selected item in the second column will show up naturally in the column on the right.
3. We Spiced Up Our Forms
Ah, forms! They are boring, but so necessary. As clever UX designers, we have a whole lot of tricks up our sleeve to make the form-filling experience as easy as it possibly can be. That means going beyond standard browser form elements and coming up with your own, custom forms.
Check out Luke Wroblewski’s Best Practices for Form Design to get a primer on making forms better. This article was written way back in 2008, but the principles proposed here are grounded in human psychology and are still being followed.
Here are just some of the ways we have customised our forms and made them a little less boring, and a little more intuitive to fill out.
Contextually searching a drop down list: Boo for scanning through a huge drop-down list to find what you need. To make things faster, we’ve incorporated search right into the drop-down menu.
Contextually adding new list items: We’ve included an option to add a new customer right from within the drop-down list. Clicking this brings up a pop-up menu which you can use to create the new customer right then and there, without having to go to a separate screen.
Hiding Optional Form Fields: When creating a customer in Zoho Books, there are a lot of fields that are optional. We’ve hidden them in separate tabs to make the interface less cluttered.
Improving Readability and Focus: Readability is a huge factor in making your form easier to fill out. We’ve meddled a lot with the colors and the focus on the form fields to make the whole experience look as smooth as possible.
4. We Introduced a Right Sidebar
You can use more of that abundant horizontal screen space by introducing a right sidebar, which you can use for contextual settings related to the item that is currently selected.
5. We Contextualized Everything!
When a user needs to get something done in your app, make the experience seem as linear as possible. This means that you have to contextualize each and every “side-task” involved in the process, and not send them off to separate settings screens.
For example, here’s how we have contextualized creating goods/services items right when the user is creating an invoice for said goods/services in Zoho Books.
Conclusion
A great UX, and by extension a great app, is all about implementing these little tricks that make the product just a little bit better.
We’ve designed the skeleton for the app and it works brilliantly for all the apps we have — Zoho Books, Zoho Invoice, Zoho Expense, Zoho Subscriptions and the new upcoming Zoho Inventory.
If you’re working on multiple apps in the same domain, then this approach helps to bring in the consistency which so many others lack.
I hope this will help you to ensure better User Experience in your product designs. Feel free to share your views and suggestions.
Recently, we have enhanced our Expense Tracking Software — Zoho Expense to suit the requirements of Modern Day Enterprise Businesses.
