Ecommerce Solutions - Form Design - Emarkable Digital Marketing Experts

Ecommerce Solutions – Form Design

Spend most of your checkout improvement time making your forms work better. Good form design is both an art and a science. It is an art because the visual appearance of a form can make it look simple, intuitive and (almost!) appealing – or messy, cumbersome and difficult. There is also a considerable measure of design judgement involved in the trade-off between having few steps in the process but lots of information in each one, or less information and more steps.

The “science‟ covers several different aspects of form design: knowing how customers perceive and process forms, understanding web conventions and standards, and systematically managing the relationship between data requirements, data entry controls and validation scripts. The first and most obvious rule in form design is to keep them as short as possible and never ask for unnecessary information.

Web Form Standards

There are many features of form design that have become standardised – i.e. used sufficiently widely to make customers expect their forms to be designed in this way and potentially confusing for them if designed differently.

1.Compulsory fields
Compulsory fields are identified with a red asterisk – this may be located before of after the form field label.

2. Drop-down menus
Where forms require customers to select from a list of options they are usually presented as a drop-down list. Title (Mr, Mrsetc), credit card type (Visa, Mastercard etc) and credit card expiry dateare common examples. Drop-down menus should never be used, however, to force a customer to choose the one and only option available. If you only offer one option, tell me about it, don‟t make me select it!

3. Presentation of information
Where two or three options are available, they can be presented more effectively as radio buttons (see the billing address options from VictoriasSecret.com, opposite). Radio buttons have the advantage of showing all options to the customer without them having to click a drop-down box.

4.Checkboxes
Checkboxes are used to ask customers for their confirmation or consent – typically, to confirm that billing and shipping addresses are the same, or to consent to receiving marketing and promotional emails. With email marketing the question arises as to whether customers should be asked to “opt-in‟ or “opt-out‟.

Customers would almost certainly prefer to opt-in, but anecdotal evidence from e-commerce companies suggests that retailers can gain between three and five times as many opt-ins if the default is “opt-in‟ (passive not active). This is the balance that the retailer needs to weigh up: is it better to have as many email addresses as possible (via passive opt-in) or fewer addresses from customers who have deliberately and actively opted in.
For all email marketing in the UK, the Privacy and Electronic Communications (EC Directive) Regulations 200325 demand that organisations cannot send unsolicited marketing communications by email to individual subscribers unless the recipient has given his “prior consent‟ (deemed to include not opting out, as shown in the example from Next, right).
In the US, the CAN-SPAM Act of 200326 has been dubbed the “You-Can-Spam” Act because, while heavily penalising non-compliance, the bill explicitly legalises most e-mail spam and, in particular, does not require retailers to get permission before they send marketing messages, provided they adhere to certain rules, such as providing a return address and a valid physical address, and offering a 1-click unsubscribe feature in all emails.

5. Pop-up controls
Although relatively recent innovations, the use of dynamic pop-up controls is becoming increasingly standardised in checkout. The most common is the pop-up date selector, shown right.

6. Form-field size and affordance
The concept of affordance is used widely in interaction design27 – in essence it means that the design of an interface should indicate to the user how they are expected to interact with it. Affordance in form design simply means that the size of a form field should indicate how much information is expected to be entered into it.

7. Guidance notes and examples
While form-field affordances give some indication of what the customer is expected to enter, it often helps to have guidance or an example adjacent to the field. In some cases, guidance is essential: for example, what is a security number for a credit card.In most cases, however, these notes simply reassure the customer that what they are filling in is what is wanted and is in the right format.

8. Label alignment

The final issue to consider in form design is label alignment. While this might seem quite a minor issue, research has shown that it can make a surprisingly large difference to the ease with which forms can be completed. The key issue is how quickly and easily customers find out which label goes with which form field – essentially the closer the two are together the better and the quicker the form will be completed.This effect has been proven by Luke Wroblewski28 and Matteo Penzo29 using eye-tracking studies.

Find out more about Emarkable’s eCommerce Solutions and how to avoid the loss of of eCommerce Form Design.

You can also sign up to receive one of our eCommerce Tips every week for a whole year, that’s 52 tips!

We are always happy to answer any questions. Contact the team by phone on (01) 808 1301, or email us at info@emarkable.ie

Academy

Content Hub

Case Studies

Ecommerce Solutions – Form Design