Creating beautiful graphics on the web is fun, but designers need to do far more to make their websites functional and usable. After all, the most important person to please when designing a website is not the designer, nor the client, but the user.
The most important consideration when designing any website is how it will work in practice, so designers need to think about how they can add the necessary coding and user interaction features to make the page function properly. UX design is essential in this regard and this is particularly so when designers are designing forms for their clients’ sites.
Following a few simple guidelines, when designing forms for websites, will make them easier for page visitors to use and very easy to design.
Designers invest much energy and time in designing websites in such a way as to lead the user to the all important form, to the point when the page’s user must stop passively reading and actively respond to the page.
Whether the form is an enrollment form for a business news letter, a request for the business to contact the user or something else, the form is crucial to the page’s success and function. It is therefore important to spend time and thought in designing the form itself.
Designers and website owners need users to complete those forms if the web site is to elicit the optimum possible revenue. Providing visitors with a good experience when completing the form will ensure that the page’s service reaches the maximum numbers of consumers.
Just as the rest of the page invites them by describing the workings of the service, explaining why they should fill out the form and suggests the benefits to them in doing so, the design of the form should be such that it is supremely simple for users to actively participate.
Designing web forms is difficult. Forms are such a ubiquitous part of daily life that people hate filling them in, nowhere more so than on the internet, where people are more than a little wary about giving their personal information. Designers, therefore, need to design forms so that they are easy to complete in an intuitive and painless way. They can use various techniques and design elements, when designing web forms to persuade users to fill them in.
Before we start, are forms really that important?
The answer to that question is a resounding ‘YES’, e-commerce sellers for example use forms to close sales (checkout forms) the form stands between a prospective customer and the goods or service that s/he wants to buy, and the successful filling out of such a form is how e-commerce sellers make their profit.
Registration forms for community membership allow people to communicate with others, whether that is on a social network or a forum dedicated to a particular art or craft, for example crochet. Forms for data input allow user contribution and information sharing and, thus, simultaneously increase company content.
Designers often fail to give sufficient thought and time to designing web forms and to how they will achieve web forms usability. Forms are so important in a website’s construction and design, whether the form’s aim is to further business aims or sales or to enlarge a social community.
Guidelines for making a better form
Form design affects a site’s completion and error metrics, so how can designers make better forms?
Make it easy for the user
It is very difficult to generalize since what is easy for users will depend greatly on the site’s context, but there are some things that always hold true.
Think about who be using the web site. Will it be web novices, occasional users or domain experts? Designers should write labels using the language that the particular site’s users will understand.
So for web novices and occasional users use plain, clear, direct language and avoid jargon, colloquialisms and slang that may be misunderstood by such people. For experts you can use specialist vocabulary and some jargon, but choose your words very carefully and ensure that all the site’s users will understand your labels easily.
Where you are designing a particularly long form, explain why so much information is necessary and reassure users that their personal and sensitive information is safe and that it will be treated with respect and care. Set out these explanations in titled and descriptive sections.
The aim is to offer the easiest route for users to move easily from filling the form to clicking on the submit option. Increasing user registrations, newsletter registrations, and other similar items means that designers must make that form as simple as possible.
Users really hate unexpected page activity so designers must make pages behave naturally and keep JavaScript extras to the absolute minimum, use pop up guides and Ajax validations as key components. It is poor design technique, for example, to divide forms into many columns and span them across the page.
Make the form clear
Ensuring that a form is clear and accessible makes it available to the greatest possible number of users. The more accessible the form the more usable it is.
Using white space, headers and graphic elements to clearly define form sections makes a form easy for users to scan quickly. Making headings descriptive, but brief and ensuring that they are eye-catching helps users to see quickly what information the form requires them to enter.
It is important for most forms that users have an indication as to how long the form might take to complete and whether they will need any other information. Nothing irritates users more than realizing, once they have begun to fill a form, that they need to go rummaging for a certificate, driving license, invoice or other document because the form requires information that they do not have immediately to hand.
Remove distractions
A web form’s whole function is to gain certain necessary information from the website user. Designers and website owners need users to concentrate on completing the form, therefore, designers need to eliminate any web site elements which distract from a clearly illuminated route to completing the form. Some elements, which make other pages on the web site look attractive, may not be suitable to put on a form.
Critical forms such as check out forms for e-commerce web sites or registration forms for social applications need no distractions from extraneous elements, removing any, which are not absolutely necessary for completing the form, helps users to concentrate on the form itself. It also eliminates the risk that users will abandon the form due to confusion and frustration.
Handle labels properly
When deciding on labels for forms do use names, words and terms that the site’s users will readily recognize and easily understand. As always in web site design, think about form labels from the user’s point of view.
Long rambling labels are difficult to understand, clear, short descriptive form labels are best, any extra information, clarification or context should be put in help text rather than on the label itself.
Research studies show that putting labels next to input fields enables users to easily read and associate those labels with the appropriate fields.
Inputs
Smart defaults make filling forms faster, they set inputs to sensible initial values, whereby many users will not have to do anything at all, so if most site users come from the United States, setting the country select drop down menu to United States as a default might be an idea. However, although smart defaults are very useful, users may submit wrong information because they are unaware that there is a preselected value.
Designers should not be too prescriptive as to the way that users enter information onto forms. Users find forms requiring that information be entered in a specific format, for example, some forms require users to enter hyphens between groups of telephone number digits, frustrating and confusing, so much so that they may abandon the form.
Highlight required fields
Users find it extremely frustrating to submit web forms only to discover that they have omitted to complete required fields. Asterisks beside field labels are the common way to highlight required fields. An explicit statement as whether a field is required or optional is the safest option.
Use real-time data validation
Real time data validation simply means that as a user fills out each field of the form the form checks whether the information entered is in the correct format and informs the user immediately.
It means that users do not reach the end of the form and get error messages telling them that they have entered something wrongly without giving them a clue as quite which field is incorrect. Any error messages should be clear and direct, stating exactly what is wrong and how the user can put the matter right.
Add tips for users where needed
Users, especially in these days when web privacy is such an issue, may question why they are being asked for certain information or have queries about the form itself. Many user queries could be addressed by showing help text when the input is in focus, where users may require help or clarification.
Such help text should be brief and clear, where users might need longer explanations or further help it might be better to either link to more information or include such information in the FAQ section in preference to overloading the form with help text. Help text on a form should always be as brief and comprehensible as possible.
Don’t put placeholders in form fields
I know that most examples in this article break this rule, but so do most forms on the internet. Putting place holder text within form fields confuses users, because it makes remembering which information belongs in a particular field hard. It also makes checking for and amending errors difficult. Doing this gives those users with visual and cognitive difficulties extra burdens.
Hints or descriptions can help to clarify what information goes in each field; commonly designers do this by inserting instructions into the fields. Many designers will be surprised to learn that research testing on users, shows conclusively that this practice far from increasing usability actually harms the user experience.
Labels, telling users which information to enter into a particular form field, usually go outside that form field. Placeholder text is usually an example or description of the information required in a specific field, which generally disappears when the user begins typing into the field.
Some designers use placeholder text as labels, either to simplify the page or shorten the form itself. Research clearly shows that this practice confuses and frustrates users. It also shows that users prefer clearly visible labels put outside empty fields.
Forms are so important that it is vital that designers ensure that users can fill them accurately as quickly as is possible.
Use progress trackers
Progress trackers are often used on internet store sites, for example, when you are ordering signing up for online products or services or booking online for a vacation. They simply guide the user through the necessary steps to complete the progress.
They are best used when guiding users towards a particular goal. Most e-commerce stores use progress trackers, a typical one may list four steps, for example a line with four steps on it for putting your item in the virtual basket, taking it to the virtual checkout, confirming your delivery address and paying for your item. As you complete each process the marker moves along the line.
Ending thoughts
As with anything, designing a form takes forethought and planning, knowing exactly where each element is going to be placed saves a designer time and effort in the long run. It is well worth spending the time to consider how to design your form, a well considered and planned form is an important element of any web site. Users abandon badly planned, ill-considered forms and they really appreciate a well designed and well planned form.
You will definitely like these articles
Source: http://ift.tt/1oKfTHS
No comments:
Post a Comment