form design
DESCRIPTION
Form design elements for web designersTRANSCRIPT
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
WEB DESIGN NABA 2014 Roberto DADDA 3form 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
WEB DESIGN NABA 2014 Roberto DADDA 5
Florida 2000 election problem
form design
Pat BuchananAl Gore
WEB DESIGN NABA 2014 Roberto DADDA 6
The most used Internet page is a form!
form design
What is a form?
WEB DESIGN NABA 2014 Roberto DADDA 7
What is a form?
•Is a web page that has boxes you can type into
form design
WEB DESIGN NABA 2014 Roberto DADDA 8
Form design
form design
WEB DESIGN NABA 2014 Roberto DADDA 9
Good form design…
form design
… increases completion success from 10 to 40% and completion success is business!
WEB DESIGN NABA 2014 Roberto DADDA 10
How to design good forms?
form design
WEB DESIGN NABA 2014 Roberto DADDA 11
Outside-in design
form design
WEB DESIGN NABA 2014 Roberto DADDA 12
Personas
form design
WEB DESIGN NABA 2014 Roberto DADDA 13form design
WEB DESIGN NABA 2014 Roberto DADDA 14
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
WEB DESIGN NABA 2014 Roberto DADDA 15
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.
WEB DESIGN NABA 2014 Roberto DADDA 16form design
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
WEB DESIGN NABA 2014 Roberto DADDA 17
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
WEB DESIGN NABA 2014 Roberto DADDA 18
Find out why you need that info… and explain!
form design
Never ask what you already know!
WEB DESIGN NABA 2014 Roberto DADDA 19
Make the question easy to understand
form design
WEB DESIGN NABA 2014 Roberto DADDA 20
Consider where the data will come from
form design
WEB DESIGN NABA 2014 Roberto DADDA 21
Give a good start...
form design
WEB DESIGN NABA 2014 Roberto DADDA 22
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
WEB DESIGN NABA 2014 Roberto DADDA 23
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
WEB DESIGN NABA 2014 Roberto DADDA 24
Path to completion
form design
WEB DESIGN NABA 2014 Roberto DADDA 25
Path to completion
form design
WEB DESIGN NABA 2014 Roberto DADDA 26
Indicate progress
form design
WEB DESIGN NABA 2014 Roberto DADDA 27
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
WEB DESIGN NABA 2014 Roberto DADDA 28
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
WEB DESIGN NABA 2014 Roberto DADDA 29
Selection dependent inputs
form design
WEB DESIGN NABA 2014 Roberto DADDA 30
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
WEB DESIGN NABA 2014 Roberto DADDA 31
feedback
form design
WEB DESIGN NABA 2014 Roberto DADDA 32
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
WEB DESIGN NABA 2014 Roberto DADDA 33form design
WEB DESIGN NABA 2014 Roberto DADDA 34form design
WEB DESIGN NABA 2014 Roberto DADDA 35
Celebrate success!
form design
• After successful form completion confirm success
• Be clear!
• Consistent messages, consistent graphics, consistent colors
WEB DESIGN NABA 2014 Roberto DADDA 36form design
WEB DESIGN NABA 2014 Roberto DADDA 37
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
WEB DESIGN NABA 2014 Roberto DADDA 38form design
• 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
WEB DESIGN NABA 2014 Roberto DADDA 39form design
1
2 3
WEB DESIGN NABA 2014 Roberto DADDA 40
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.
WEB DESIGN NABA 2014 Roberto DADDA 41form design
"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)
WEB DESIGN NABA 2014 Roberto DADDA 42
Have a conversation rather then an interrogation!
form design
WEB DESIGN NABA 2014 Roberto DADDA 43
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?
WEB DESIGN NABA 2014 Roberto DADDA 44form design
WEB DESIGN NABA 2014 Roberto DADDA 45form design
WEB DESIGN NABA 2014 Roberto DADDA 46
Flexible data input
form design
WEB DESIGN NABA 2014 Roberto DADDA 47
Smart default
form design
WEB DESIGN NABA 2014 Roberto DADDA 48
Labels
form design
WEB DESIGN NABA 2014 Roberto DADDA 49
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!
WEB DESIGN NABA 2014 Roberto DADDA 50
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
WEB DESIGN NABA 2014 Roberto DADDA 51form design
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
WEB DESIGN NABA 2014 Roberto DADDA 52form design
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.
WEB DESIGN NABA 2014 Roberto DADDA 53form design
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
WEB DESIGN NABA 2014 Roberto DADDA 54
Somebody thinks that…
form design
…BOLD label increases visual weight and makes easy to compete with field for user attention
WEB DESIGN NABA 2014 Roberto DADDA 55
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
WEB DESIGN NABA 2014 Roberto DADDA 56form design
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
WEB DESIGN NABA 2014 Roberto DADDA 57form design
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!
WEB DESIGN NABA 2014 Roberto DADDA 58form design
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
WEB DESIGN NABA 2014 Roberto DADDA 59
Consider translation problems
form design
WEB DESIGN NABA 2014 Roberto DADDA 60
Consider localization problems
form design
WEB DESIGN NABA 2014 Roberto DADDA 61
Vertical distance between fields...
form design
…50 to 75 % of field height.
WEB DESIGN NABA 2014 Roberto DADDA 62
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
WEB DESIGN NABA 2014 Roberto DADDA 63
Make easy put answers in the box
form design
digg.com
http:
//w
ww
.zaz
zle.
com
/ric
kybu
chan
an
WEB DESIGN NABA 2014 Roberto DADDA 64
Requited or optional?
form design
WEB DESIGN NABA 2014 Roberto DADDA 65form 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
WEB DESIGN NABA 2014 Roberto DADDA 66
Grouping
form design
WEB DESIGN NABA 2014 Roberto DADDA 67
Logical grouping
form design
LinesBackgroundColors...
WEB DESIGN NABA 2014 Roberto DADDA 68
Avoid excessive visual noise
form design
WEB DESIGN NABA 2014 Roberto DADDA 69
More than 15 graphical elements
form design
Information consists only of difference that makes difference
WEB DESIGN NABA 2014 Roberto DADDA 70
Grouping golden rules
form design
• Use relevant content to organize forms
• Use MINIMUM amount of visual elements necessary to communicate useful relationship
WEB DESIGN NABA 2014 Roberto DADDA 71
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
WEB DESIGN NABA 2014 Roberto DADDA 72
Actions
form design
WEB DESIGN NABA 2014 Roberto DADDA 73
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)
WEB DESIGN NABA 2014 Roberto DADDA 74
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.
WEB DESIGN NABA 2014 Roberto DADDA 75
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
WEB DESIGN NABA 2014 Roberto DADDA 76
Help
form design
WEB DESIGN NABA 2014 Roberto DADDA 77
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
WEB DESIGN NABA 2014 Roberto DADDA 78
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
WEB DESIGN NABA 2014 Roberto DADDA 79
Use familiar terms
form design
WEB DESIGN NABA 2014 Roberto DADDA 80
Use short, affirmative, active sentences• Up to 20 words• Positive never negative
form design
WEB DESIGN NABA 2014 Roberto DADDA 81
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.
WEB DESIGN NABA 2014 Roberto DADDA 82
Consider dynamic solutions
form design
• Automatic inline exposure
• User activated inline exposures
• User activated section exposure
WEB DESIGN NABA 2014 Roberto DADDA 83
Automatic inline
form design
WEB DESIGN NABA 2014 Roberto DADDA 84
User activated inline
form design
WEB DESIGN NABA 2014 Roberto DADDA 85
User activated section exposure
form design
WEB DESIGN NABA 2014 Roberto DADDA 86
Lables INTO fields
form design
WEB DESIGN NABA 2014 Roberto DADDA 87
… OK, but there may be a problem.
form design
WEB DESIGN NABA 2014 Roberto DADDA 88
Tootltip, mouseover or click
form design
WEB DESIGN NABA 2014 Roberto DADDA 89
Back arrow
form design
Consider that some users will use browser back arrow and manage it!|
WEB DESIGN NABA 2014 Roberto DADDA 90
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
WEB DESIGN NABA 2014 Roberto DADDA 91
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.
WEB DESIGN NABA 2014 Roberto DADDA 92
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