Form design

WEB DESIGN NABA 2014 Roberto DADDA 1form design

Witch is the type of WEB page that almost any web site has?

In witch type of WEB page usability is more important?

WEB DESIGN NABA 2014 Roberto DADDA 2

WEB DESIGNMater of Arts in Communication Design

Form design

form design


Witch code should I use for this special offer?

Do you accept AMEX?

Can u deliver by tonight?

WEB DESIGN NABA 2014 Roberto DADDA

On line you do not get a smile, you get a form!

form design 4


Florida 2000 election problem

form design

Pat BuchananAl Gore


The most used Internet page is a form!

form design

What is a form?


What is a form?

•Is a web page that has boxes you can type into

form design


Form design

form design


Good form design…

form design

… increases completion success from 10 to 40% and completion success is business!


How to design good forms?

form design


Outside-in design

form design


Personas

form design



The 3 elements of a good form

• The relationship of a form is the relationship between the organization that is asking the questions and the person who is answering• The conversation of a form comes from the

questions that it asks, any other instructions, and the way the form is arranged into topics• The appearance of a form is the way that it

looks: the arrangement of text, input areas such as fields and graphics, and the use of color.

form design


Relationship

form design

The relationship of a form is the relationship between the organization that is asking the questions and the person who is answering.


Rule:

Establish trust People are more likely to respond to a question if they trust the organization that asks it and agree with the purpose for which the information will be used. If they don’t trust you, they’ll either drop out of the form or lie to you

Reduce social costs Social costs are bad feelings, like being made to feel inferior or being put at a disadvantage

Increase rewards People are more likely to respond if they perceive that they will get some reward by doing so (*)

(*) small reward can be more effective than a delayed, bigger reward

1. Show that the form is published by a real organization. 2. Make it easy to contact the organization that publishes the form3. Ensure that the form has a clear purpose.4. Make sure that the form looks as if it has been designed by a

professional.5. Keep advertising away from the form.6. Check that the form works correctly: no defects, no typographical

errors


The form needs to be long enough to ask the relevant questions, to be short enough to minimize the user’s effort and to ask questions that are appropriate within the context of the overall relationship.

form design


Find out why you need that info… and explain!

form design

Never ask what you already know!


Make the question easy to understand

form design


Consider where the data will come from

form design


Give a good start...

form design


Give a name to the form

form design

• Tell clearly people what is the form and why they are filling it!

• Easy to identify

• Easy to remember

• Avoid uncertainties

Now the LORD God had formed out of the ground all the beasts of the field and all the birds of the air. He brought them to the man to see what he would name them; and whatever the man called each living creature, that was its name.

Genesis 2 18-20


Path to completion

• Primary goal of form!!!• Consider EVERY input carefully• Remove all unnecessary• Enable flexible data input when needed

• Provide a CLEAR path• Enable smart default• Show progress and save• Enable partial save whenever possible

form design


Path to completion

form design


Path to completion

form design


Indicate progress

form design


Progressive disclosure

form design

• Not all users require all options in different situations

• Prioritize user's needs• If possible user initiated• Progressive disclosure provides an

option• Advanced options• Gradual engagement

• Strongly depending on user/situation/action

• BE consistent


Selection dependent inputs

form design

• Show clear relation between options

• Clearly associate trigger with triggered fields

• Manage data loss if trigger is changed after some data input

• Avoid big (out of visible page) uncontrolled jumps



form design



form design

• Show clear relation between options• Clearly associate trigger with

triggered fields• Manage data loss if trigger is

changed after some data input• Avoid big (out of visible page)

uncontrolled jumps


feedback

form design


Inline validation

form design

• Provide DIRECT and CONTESTUAL feedback as data are entered• Validate input and correlations

between inputs• Suggest valid input• Suggest corrections• Help users stay in limits and

possible data sets• Use where errors are more probable• Disambiguate!• Communicate limits if any




Celebrate success!

form design

• After successful form completion confirm success

• Be clear!

• Consistent messages, consistent graphics, consistent colors



Error handling

form design

• Do whatever possible to avoid errors, but "Shit happens"

• Provide clear indication and clear resolutions in fewer possible steps

• Top placement - Visual contrast• Provide remedies• Associate field/fields with

message


• The red area is NOT the error one• The thin red line over the gray

windows is not visible• Poor connection between

error modal windows and error• NO SOLUTION proposed


1

2 3


Conversation & appearance

form design

The conversation of a form comes from the questions that it asks, any other instructions, and the way the form is arranged into topics

The appearance of a form is the way that it looks: the arrangement of text, input areas such as fields and graphics, and the use of color.


"The medium is the message" is a phrase coined by Marshall McLuhan meaning that the form of a medium embeds itself in the message, creating a symbiotic relationship by which the medium influences how the message is perceived.

Herbert M

arshall McLuhan, (July 21, 1911 – D

ecember 31, 1980)


Have a conversation rather then an interrogation!

form design


Choosing form controls

form design

The answer is no good until the user has got it into the form by typing, clicking, or whatever.

• Is it more natural to type rather than select? • Are the answers easily mistyped? • How many options are there? • Is the user allowed to select more than one option? • Are the options visually distinctive? • Does the user need to see the options to understand

the question?




Flexible data input

form design


Smart default

form design


Labels

form design


Choose conversational labels

form design

If instead of using:

“Issuing bank”

you use

“What bank issued you this credit card?”

You will have a quicker answer, always!

“Who gave you this credit card?”

Could be even better!


A fundamental question:

form design

• What user needs to see together for better usage of form?• If needed repeat data

Eg Balance of bank account in the page of payments


When the data being collected by a form is unfamiliar or does not fall into easy to process groups (such as the various parts of an address), left-justifying input field labels makes scanning the information required by the form easier

Users have to “jump” from column to column in order to find the right association of input field and label before inputting data.

Westerns are used to left line reference


An alternative layout, right aligns the input field labels so the association between input field and label is clear.

However, the resulting left rag of the labels reduces the effectives of a quick scan to see what information the form requires.


When the time to complete a form needs to be minimized and the data being collected is mostly familiar to users (for instance, entering a name, address, and payment information in a check-out flow), a vertical alignment of labels and input fields is likely to work best.

Each label and input field is grouped by vertical proximity and the consistent alignment of both input fields and labels reduces eye movement and processing time


Somebody thinks that…

form design

…BOLD label increases visual weight and makes easy to compete with field for user attention


Saccade activities

form design

fast movement of an eye, head or other part of an animal's body or of a device

20° 500°/s 225 ms


Long saccade between label and field (500 ms): hight cognitive load

No fixation over white space, but longer time

Good perception of field/field pair

Drop down field is the first eye catcher for ALL users


The nearest the label, the better is confirmed!

If the label has a familiar content there is no fixation.

If label is fixed fixation is very fast: 50 ms.

Quick form completing and reduced cognitive load.

Bold labels, doubtful effect!


Number of fixation: half!

Half completion time.

Reduce cognitive load.

Good lateral view of labels from field with short saccadic movements (170 ms for expert, 240 ms for expert)

The non-predictable starting position of labels is NOT a problem!

Some recheck, but shorter


Consider translation problems

form design


Consider localization problems

form design


Vertical distance between fields...

form design

…50 to 75 % of field height.


Labels: and so what?

form design

• Label position —Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.

• Alignment of labels —In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.

• Bold labels —Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.

• Drop-down list boxes —Use them with care, because they’re so eye-catching. Either use them for important data or, when using them for less important data, place them well below more important input fields.

• Label placement for drop-down list boxes —To ensure users are immediately aware of what you’re asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappear


Make easy put answers in the box

form design

digg.com

http:

//w

ww

.zaz

zle.

com

/ric

kybu

chan

an


Requited or optional?

form design


• Indication of required is useful when:

• There are a lot of fields, but very few required

• Design to make scanning fopr required fields easier

• Indication of optional is useful when:

• Very few fields are optional

• Neither indication is really useful when:

• All fields are required


Grouping

form design


Logical grouping

form design

LinesBackgroundColors...


Avoid excessive visual noise

form design


More than 15 graphical elements

form design

Information consists only of difference that makes difference


Grouping golden rules

form design

• Use relevant content to organize forms

• Use MINIMUM amount of visual elements necessary to communicate useful relationship


Clearly label section header

form design

• User never must loose orientation

• Identify groups in a meaningful way

• Give information about what has been done and how far we are form the completion of the form


Actions

form design


Not all actions are equal

form design

Visual presentation of actions should match their importance

Stronger design for most important actions!

Reduce the visual weight of the secondary actions (go back, cancel)


Primary vs secondary actions

form design

• Primary actions are actions such as “Submit”, “Continue”, “Finish”, and “Save”. They enable form completion, the most important action on the form.

• Secondary actions are actions such as “Cancel”, “Go back”, or “Reset”. They are less important, alternative actions, which often have negative consequences when used accidentally. For example, hitting “Reset” erases all the data a user has entered.


Manage actions

form design

• Reduce secondary actions to a minimum, consider using side actions only after an action is chosen

• Ensure clear visual distinction between primary and secondary


Help

form design


Helps & Tips

form design

• Useful when:• Asking unfamiliar data• User may have doubts about data• There are different possible

interpretations

• Too few makes user feel abandoned

• Too many may easily destroy form usability


Instruction’s basics needs:

form design

• a good title that says what the form is for

• a list of anything that users might have to gather to answer the questions

• something that tells users how to get help

• a thank-you message at the end that says what will happen next.

• Rewrite them in plain language.

• Cut the ones that aren’t needed

• Move them to where they are needed


Use familiar terms

form design


Use short, affirmative, active sentences• Up to 20 words• Positive never negative

form design


Put choice before actions

form design

Draw a triangle above an upside down T.This will be the picture of a wine glass.

(Dixon, 1987)

This will be a picture of a wine glass.Draw a triangle above an upside down T.


Consider dynamic solutions

form design

• Automatic inline exposure

• User activated inline exposures

• User activated section exposure


Automatic inline

form design


User activated inline

form design


User activated section exposure

form design


Lables INTO fields

form design


… OK, but there may be a problem.

form design


Tootltip, mouseover or click

form design


Back arrow

form design

Consider that some users will use browser back arrow and manage it!|


Tabbing

form design

• Consider that some users will use tab between fields

• Use proper tabindex markup

• Multi-column maybe dangerous and conflict with tabbing behavior


Details

form design

• Decide on one way to deal with each detail and then stick to it. Create a mini-style guide for your team or organization.

• Be flexible: allow changes to the style guide if there is real evidence that the changes will improve things for your users… … but not too flexible; otherwise, you’ll end up with inconsistency between forms and even within forms.

• Users do notice consistency and value it.• Avoid spending valuable design time arguing

about the details.


Test

form design

Nielsen and Landauer (1993)

WEB DESIGN NABA 2014 Roberto DADDAform design 93

Roberto Dadda

[email protected]+39 338 775 22 03Twitter, facebook, linkedin: robertodadda

http://www.dadda.it/

mailto:[email protected]