Here are ten tips for designing a great UI experience:
- Clear Primary Action
- Identify Required Fields
- Steps for Multi-tabbed Forms
- Gradual Disclosure of Information
- Lazy Registration
- Forgiving Form Validation
- Breadcrumbs and Navigation
- Account Registration
- Clear Subscription Plans
- Reduce Clutter on Small Screens
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.
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.
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:-
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.
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.