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.
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.
Article Source: http://EzineArticles.com/9333798