Design features of Software as a Service and Web Applications
Apr 16, 2012
Table of contents:
- Prominant search
- Consistant navigation at the top of the page
- Simplify data
- Present data as visual representations
- Infinate scrolling
- Restricted clear options and icons
- Auto complete search, suggestions and FAQs
- Reveal options on action
- To conclude
The new hot trend on the Internet is Software as a Service and Web Applications that have the form and functionality of their traditional desktop software counterparts. This modern crop of software applications are entirely based in the cloud and allow their users to login and use their service from just about any computer with an Internet connection. And Like I wrote last week the view that design and usability is crucial to business success has meant that we now have some of the best designed software applications ever!
Here is a run down of some of my favourite aspects of Software as a Service and Web Applications for you to consider implementing whilst designing your next project.
Prominant search
It’s quite likely that your web application has some level of complication for first time users. No matter how much time you spend on making your application as well designed and usable as you possibly can, there will still be users who get confused or lost. Search is a beauitul and often over-looked aspect of any piece of software. Search has become so intrinsic to users that it will nearly always be the first thing they look for if they are confused. Search offers the quickest way to find the solution to a problem and so your application should feature search as one of the most prominant features.
Don’t hide your search bar away in a sidebar or a footer, place your search box at the top of the page and make sure it is big, clear and prominent.
The example above is from Basecamp.
Consistant navigation at the top of the page
Web design that makes use of the full real estate of the screen is all the rage right now and so this presents a good opportunity to have consistant navigation area that spans the top of your application. In years gone by, fixed with websites and applications tended to feature the navigation area on the side of the screen. But now that we have such a wide variety of screen sizes, it has become far more appropriate to have a navigation area at the very top of the screen.
A side note to consider, keep your top level navigation restricted to the key areas of your application. If you can’t do this, or you find it a struggle, your application is probably too complicated and any new user will get lost if you give them too many options.
The example above is from Treehouse.
Simplify data
Many Software as a Service applications display complicated data to users. If your application presents data tables, financial figures or just about any type of chart or graph, you need to make sure that this data is appropriatly displayed for your target audience. Key terminolgy should be explained, the use of colour should be implemented to show the difference between key areas and tool tips should be used wherever is appropriate to offer an explanation or a nudge in the right direction should your users become lost.
If your application is too complicated or doesn’t display data well, your customers will leave.
The example above is from FreeAgent.
Present data as visual representations
Linked to the point above, take every opportunity to offer your data in a number of different forms. Every person is different and so not every can comprehend data from a table. Some visual people need to be able to see data represented as a chart or graph.
Again this point should be used with your discression. Don’t overwhelm your customers with a huge variety of data display options, pick the format that works best with that dataset and go with that single option. Just remember that different types of data and content need to be displayed in different ways.
The example above is from Google Analytics
Infinate scrolling
Another hot web design trend that has come about quite recently is infinate scolling. This is where as you get to the bottom of the page, the next chunk of content is loaded in for you. This takes away the userbility nightmare of pagination. Infinate scrolling can work really well if you have content that is likely to be read a page at a time. For example, if your application is based around Project Management, a useful use case might be to show the history of a project. However infinate scrolling does come with a usability warning label. Firstly, it can be very annoying if you are presenting content that shouldn’t be read in order. For example, if you are showing content that a user is likely to jump back to a specific point in time, infinate scolling would not work as well. Secondly, infinate scolling means you can’t have a footer unless you build in a nifty work around (see Forrst). This is because the user will not be able to click on anything in the footer if it is keep being replaced with more content.
The example above is from Twitter.
Restricted clear options and icons
This is really two important poinst combined into one. Firstly, I’m sure your application has a number of really cool features and possible use cases, but you need to put restrictions on what you present to the user or they will become overwhelmed and confused with your user interface. Like I mentioned in the second point about navigation, you should aim to distil your options down into the lowest possible denominator.
Secondly, as the old saying goes, “a picture is worth a thoudand words”, an icon can usually give a better indication about a feature than a single word explanation could. For example, adding a new item can easly be represented with a “+” or a spell check feature can be represented by “abc”. Invest in a good user interface and icon designer to ensure your web application is designed to the highest standard.
The example above is from Tumblr.
Auto complete search, suggestions and FAQs
With just about any comprehensive web application or piece of software, there will be a percentage of users who are confused or don’t quite understand how something works. This is your opportunity to wow your users by offering them intuitive help before they are forced to contact you. Three great ways to do this are auto-complete, suggestions and tool tips and FAQs.
Firstly, auto-complete can be a great way to help a user form a question, if they are struggling to think of how to word their predicament. You could use auto-complete in a search bar to either suggestion options, find appropriate help documents or find a feature of your application that they didn’t know existed.
Secondly, suggestions and tool tips should be used whenever a user is asked to complete an action such as filling in a form or choosing a non-obvious option. Make use of inline form validation to ensure a user has entered correct details before submitting a form so they don’t have to go back if they got something wrong and they can fix their errors straight away.
And finally, offer an easy to access, well presented Frequently Asked Questions page. At first you will need to think up possible scenarios that could lead to Frequently Asked Questions. But as your user base increases, you should be using your contact feedback and user analytics to constantly update this page with more relevant questions and answers based on where your users are finding difficulty. An FAQ page should never be static because you should always be looking to improve your web application and make any bottlenecks or confusing elements simplified.
The example above is from Media Temple.
Reveal options on action
In order to keep your user interface as clean as possible, you should simplfy and hide additional options that should only be triggered when a user performs a certain action. For example, if a user wants to add a new a task into a project management application, you might first allow them to click on a text area to trigger a new task, then reveal the date/time, assignment and further information boxes that only become relevant once the user has taken that first step.
It is important to simplify your interface as much as possible, but with triggered actions like this, you can give the user the power to complete complicated tasks without leaving the page.
The example above is from Dribbble.com.
To conclude
The featurs I’ve listed above are really just the tip of the iceberg for what you should consider when building your Software as a Service or Web Application. Fortunately this is not new ground as there are many good examples of extremely usable and well designed cloud based applications. Whilst some of the features I’ve mentioned above are critical for usability, others might not quite fit into your application and so you shouldn’t look to find a place for the latest hot feature for the sake of it. You need to take a step back from your application idea and design, and look to solve your user’s problems. You then build the tools and features to facilitate this problem solving. In just about every case, the building of the technology behind a web application or Software as a Service app is the easiest part of the journey. The real challenge is buidling something that is adored by your users.
