Designing Web Applications

Well after a long hiatus, I thought I would share learnings from a large scale web application redesign project I have been involved in. There are many blogs that have shared similar recommendations but it is only when you come out first hand of designing a complex application for a large customer base do you realise how crucial attention to detail is when designing web applications.

Websites v. Applications


An application is typically defined as a website that requires a higher level of interaction from users, predominantly data entry. In a website, users are typically tasked with information gathering. By the time they come to your web application, they are looking to engage with your brand, self-service their acquired products or expect something on interaction with the application, whether that be a new account, transfer of funds or completion of a purchase order.

User behaviour and experience expectations of app design

Users usually have a limited attention span whilst they are seeking information about your products and services on your website - and that's on a good day. By the time they hit your application, they expect logic, intuition and plain old common sense principles integrated into your app to make their interaction as fast, concise and finishable with little thinking as possible. Admittedly there are applications that are geared more towards casual use (eg. social networking apps) but for this post, I am focusing more on B2C applications that have an eCommerce / conversion focus.

Remember, by the time a user gets to an application, they are no longer in browse mode, they are here to get a job done and it's at this crucial point of conversion that you need to utilise design and technology to get the customer over the line.


Guidelines for designing usable web applications


Self-service based applications

• Typically, you'll have a lot of information on a home page for example the main screen on an online banking system so research, user test and create multi-variates of the home page so you ensure you present the information that is relevant. You'll need to have a thorough understanding of what information users want to see when they logon to your application. 
• Whilst you can easily through everything onto the one page, this will impede user experience as they is too much information to take in, it will cause large download times and in the case of notifying the customer about news/updates/things to do, these areas will be dilated if they are overpowered by information overload on the homepage. Widget designs and other web 2.0 interfaces may look cool but for most of your market, it is simply too much and the learning curve for the average online punter outweighs any value they may get out of dashboard type view.
• When designing our online banking system, we asked users what they're top tasks are and designed for the user. We also utilised white space and split out each major section into clearly defined real estate on the page. This way, users become acquainted of knowing in the top left, where users look first, notification messages are displayed. Nice to know information is contained in the bottom right which is the least view section of a webpage.

Even a trusty Facebook page (which I'd consider an application) follows basic principles of having major navigation options / core content on the top left whereas mostly unused functions in bottom right as users rarely look at this part of a webpage. Interesting to note the mass decluttering that occurs on each Facebook redesign with white space being more and more utilised each time. White space is your friend when designing info heavy applications.

Designing the layout of a typical application form

• When designing for a non-self service application, it is important to notify the customer of where they are in the form, task wise. Customers invest time in an application form but they also like to 'budget' their time and not spending 15 minutes filling out a form where they thought 5 would suffice. Utilise step '1 of 4' indicators etc. and visual markers to show the progress they're making.
• Don't clutter your app with copy that isn't necessary. Keep a leash on the legal content as it can either create too much noise on the page or simply scare customers off. 
• Go easy on the assistance test. If you find you're putting too much help and assistance text in your application, you haven't designed it well enough or are covering up design flaws with quickie ' how to' blocks of text.

Form design and data capture

• Don't ask or force the customer to enter anymore information than they need to. A culprit is often the 'where did you hear about us' question or asking for 4 different phone numbers. Customers usually have one preferred number and analytics software will tell you where they have come from so don't clog up your form with these types of questions.
• Use progressive disclosure. Don't show 10 questions per page if only 5 are relevant to a customer. Ask leading questions at the top of the form that dynamically configure the form. This will give the illusion of a shorter form which can assist conversion dropout but will also demonstrate that you're actually making the form as short as possible. 
• Use auto-complete, calendars and address lookup. When a user is entering details such as their address, offer suggestions to save them entering the data themselves. For recent date entry, a calendar is usually more convenient than a customer entering a full date. Ensure there is year toggling too for longer searches.
• If you have a question with 3 or less options, use radio buttons. For 3 or over, utilise a dropdown but don't have a million options in their as it makes scanning harder for users. Trying and break your question into 3 drop downs combining with progressive disclosure to make selection more efficient.
• Pre-fill as much data as possible such as drop-downs for area codes, postcodes and streets. Populate the most popular options at the top eg. If you're in Australia, make Australia at the top! Don't make users search through 200 different countries on a drop-down.

Error Handling

• Use real time in-line error handling appropriately when you can. If the customer usually enters a 10 digit mobile number, check for 10 digits now, it will save effort on correcting data if you have a mass submit / check data process. You should really only be doing the real processing on submit, using server side validation to check 'you haven't selected a title' simply wastes time for customers
• Have clear indications of where the error is. The best combination is a list of friendly error messages on the top of the form, an in-line error next to the field and a highlighted field box. There is nothing worse than being told that you have entered something incorrectly and have to trawl through the form to find it.

A simple example of good vertical alignment of fields for easy scanning, right aligned labels which also assists in scanning and friendly errors / highlighted missing information in field boxes

Things to avoid

• Poor AJAX - Some forms can either have too much AJAX where 2nd click a user makes, an AJAX loader spins away and delivers something with little value. This can become frustrating so have clear calls to action so a user knows that intend on bringing information in from the backend. On the other hand, having no AJAX at all is just as frustrating as a user fills in field, hits next, information loads and repeats this process 2 or 3 times when all of this information could have easily been shown on one clean screen via AJAX.
• Don't suggest or predict everything - Being an iPhone user, I find it's predicted text more harm than good when composing emails so don't predict forms where for most part, will have a wide range of responses from customers.
• Don't be too aggressive on the validation - Let the customer write English when they fill out your form. Don't be so aggressive on spaces, formatting, grammar, special characters etc. that the customer basically should code their response in HTML and email it to you

Summary

Applications utilise a lot more of your customer's or prospective customer's attention than your website so take care in providing an intuitive, simple and efficient application. Whilst you can incorporate all of the above, testing your application is key and seeing how customers interact will provide a plethora of information on how to enhance your application, scale back, design tweak and provide a user experience that will either retain customers or convert new ones.