Top 10 Tips for Designing Great Web Applications

Here are ten tips for designing a great UI experience:

1. Clear Primary Action

Data entry forms can have two or more buttons to close the form. One button will save the data, another will close the form without saving and another may blank all the fields. There may even be two different buttons to save data, one to submit it and one to save and return later. It is useful for users to know to highlight the primary button which will actually complete their request.

For example, the two save options in bold will complete the form, so they should stand out to the user.

• Cancel
• Reset form
• Save and Continue
• Save and Complete

2. Identify Required Fields

Have you ever tried entering the minimum information into a form, only to be told that you have left some blank? Phone numbers are a good example - why should a company require a phone number as well as an email address?!

Identify which fields are required to complete the form. If these fields are left empty when the form is submitted, then a validation message should be displayed. The usual technique is to place a red asterisk next to the field label if the field will prevent the form being submitted if left blank.

Top 10 Tips for Designing Great Web Applications

3. Completion Steps for Multi-tabbed Forms

If your form has a large number of fields, try to break them down into groups which can be shown on separate tabs.

For example, a form for completing customer details on an eCommerce site might include these tabs:-

• Personal details
• Delivery details
• Payment information

Tabs make the form clearer as well as showing users which fields should be completed before others. The payment tab could be locked until a user has provided their name, address and delivery details.

4. Gradual Disclosure of Information

Don't give users too much information overload on their first visit to your web site. This can be achieved by showing only minimal information on the home or landing page. Provide links to visit if they require more information. This puts the user in control of their own exploration of your web site, rather forcing them to see a clutter of graphics which is only served to confuse them.

Only showing areas of a web site which are relevant to the experience/access rights of the user.

5. Lazy Registration.

Relax the need to force new visitors to register. This will allow them time to try out some features before signing up and revealing their identity. Even when no payment is required, surrendering your anonymity is sometimes considered as a non-monetary form of payment.

6. Forgiving Form Validation.

Don't penalise users for entering, or not entering, data. Don't blank all fields for the sake of one omitted field. It can be very frustrating to have to re-enter fields for the sake of ticking a Terms & Conditions box! Forms should remember what a user has already filled in.

7. Breadcrumbs and Navigation.

Don't make navigating your web site like walking through a maze without a ribbon. Provide a breadcrumb trail to show the pages a user visited before the current page. This will also prevent users from feeling lost or disoriented by your web site.

Similarly, once you have read a few pages, followed a few links, the easiest way to re-orient yourself is by clicking on the Home button. Sometimes this is easily achieved by clicking on the title or logo in the banner. Back page and Next page buttons should also be added on the page, since you cannot always rely on the web browser's back and forward buttons.

8. Account Registration.

Don't force users to register for an account merely to obtain their email address and demographics. The primary reason for registering for an account should be to improve user experience by giving the user some control over their use of your application.

Some examples include:-

• Save items in shopping baskets
• Regional and/or language settings
• Re-use of archived or incomplete form data.

Each time a user revisits the application, they will recognise it as their own. This will also help them to identify whether their account has been hacked, since a hacker may have changed the appearance of their view of the application.

9. Clear Subscription Plans.

Make any subscription / signup plans clear and easy to understand. A good plan would tie in to the overall branding of the web site.

• A financial investments site may use Saver, Casual Dealer or Stockmarket Trader.
• A travel site may use Individual, Family, Group or Business.

Web hosting plans usually use one of the following plans:-

• Bronze, Silver and Gold
• Starter, Intermediate, Advanced.

Each plan should be colour-coded with features clearly listed and comparable with other plans.

10. Reduce Clutter on Small Screens.

When viewed on a phone with a small screen, a responsive application will be optimised to make best use of the reduced size. Whilst it is important not to remove any features available, it is equally important not to let the screen become too cluttered.

A good trick is to hide buttons or text behind a dropdown section which can be revealed by dragging a bar down the screen. If a mouse cursor is available, then links may be displayed only if the cursor is hovering above them.