Guideline for Form Design

Form Design?

 Whether it is login Window, or a data entry interface,

forms are one of the most important components of
user interface.
 Someone who uses the app or website has a particular
goal. Ofen, the one thing standing between the user
and their goal is a form. Forms remain one of the most
important types of interactions for users on the web
and in apps.

Dr 2
 Component of Form Design

The typical form has the following five components:

 Structure

This includes the order of fields, the form’s

appearance on the page and the logical connections
between multiple fields.
 Input fields

These include text fields, password fields,

checkboxes, radio buttons, sliders and any other
fields designed for user input.
 Field labels

These tell users what the corresponding input fields

mean.

Dr 3
 Component of Form Design

 Action button
When the user presses this button, an action is
performed (such as submission of the data).
 Feedback
The user is made to understand the result of their
input through feedback. Most apps and websites use
plain text as a form of feedback. A message will notify
the user about the result and can be positive
(indicating that the form was submitted successfully)
or negative (“The number you’ve provided is
incorrect”).

Dr 4
 Form Design?

Dr 5
 Form Design?

Dr 6
 Guideline for Form Design
 Forms should be one column

Dr 7
 Guideline for Form Design
 If a form is in a single column, the path to
completion is a straight line down the page.
 If a form has horizontally adjacent fields, then the
user must scan in a Z pattern, slowing the speed
of the path to completion.

Dr 8
 Guideline for Form Design?
 Alignment of Label: Left vs Right vs Top
Matteo Penzo’s 2006 article on label placement
suggests that forms are completed faster if
labels are on top of the fields. Top-aligned labels
are good if you want users to scan the form as
quickly as possible.

Dr 9
 Guideline for Form Design?

Dr 10
 Guideline for Form Design?

Dr 11
 Guideline for Form Design?

Dr 12
 Guideline for Form Design?

Dr 13
 Guideline for Form Design?
 Group Labels with their inputs

 Present the label and input close together, and make sure there is enough height between the fields so users
don’t get confused.

Dr 14
 Guideline for Form Design?
 Avoid all caps

 The form will be difficult to read and much harder to scan quickly, because there will
be no variation in character height.

Dr 15
 Guideline for Form Design?
Avoid all caps: In most digital products
today, there are two ways to capitalize words:
title case: capitalize every word. “This Is Title
Case.”
sentence case: capitalize the first word. “This
is sentence case.”
Sentence case used for labels has one advantage
over title case: It is slightly easier (and, thus,
faster) to read.

Dr 16
 Guideline for Form Design?
 Show all selection options if under 6

 Placing options from drop down Menu requires two clicks, and hided the option.

Dr 17
 Guideline for Form Design?
 Resist using placeholder text as labels

Dr 18
 Guideline for Form Design?

Dr 19
 Guideline for Form Design?
 Place Checkbox (and radio) underneath

 Placing checkbox underneath each other allows easy scanning.

Dr 20
 Guideline for Form Design?
 Specify Error inline

 Show the user where the error occurred and provide a reason.

Dr 21
 Guideline for Form Design?
 Don’t use the inline while user is typing

Dr 22
 Guideline for Form Design?
 Don’t hide basic helper text

 Expose helper text wherever possible.

Dr 23
 Guideline for Form Design?
 Differentiate primary from secondary action

Dr 24
 Guideline for Form Design?

Dr 25
 Guideline for Form Design?
 Make call to action (CTA) descriptive

Dr 26
 Guideline for Form Design?
 Use field length as an affordance

 The length of the field affords the length the answer.

Dr 27
 Guideline for Form Design?
 Required (*) and optional fields

 Users don’t know what is implemented as required field mark.

Dr 28
 Guideline for Form Design?
 Group Related information

Dr 29
 Guideline for Form Design?

Setting Default Value


Avoid setting defaults unless you believe a large portion of
your users (for example, 90% of them) will select that
value. Particularly avoid it for required fields. Why?
Because you’re likely to introduce errors. People scan
online forms quickly, so don’t assume they will take the
time to parse through all of the choices. They might skip
something that already has a value.

But this rule doesn’t apply to smart defaults — that is,
values set based on information available about the user.
Smart defaults can make form completion faster and more
accurate. For example, preselect the user’s country based
on geo-location data. Still, use these with caution, because
users tend to leave preselected fields as they are.

Dr 30
 Guideline for Form Design?

Dr 31
 Guideline for Form Design?
Make Form Keyboard – Efficiently: Users
should be able to focus on and edit every
field using only the keyboard. Power users,
who tend to use the keyboard heavily,
should be able to easily tab through and edit
fields, all without lifting their fingers off the
keyboard. You can find detailed
requirements for keyboard interaction in
the W3C’s guidelines on design patterns.

Dr 32
 Guideline for Form Design?
Make Form Keyboard – Efficiently

Dr 33
 Guideline for Form Design?
Auto-focus for input field: Auto-focusing
a field gives the user an indication and a
starting point to quickly begin filling out a
form. Provide a clear visual signal that focus
has moved there, whether by changing a
color, fading in a box, flashing an arrow,
whatever. Amazon’s registration form has
both auto-focus and visual indicators.

Dr 34
 Guideline for Form Design?

Dr 35
 Guideline for Form Design?
Numbers of Words: Labels are not help
text. Use short, descriptive labels (a word or
two) so that users can quickly scan your
form. Previous versions of Amazon’s
registration form contained a lot of words,
which resulted in slow completion rates.
The current version is much better and has
short labels.

Dr 36
 Guideline for Form Design?

Dr 37
 Guideline for Form Design?
Button Location: Complex forms usually
need a back button. If such a button is
located right below an input field (like in
the first screenshot below), a user could
accidentally click it. Because a back button
is a secondary action, make it less accessible
(the second form below has the right
location for buttons).

Dr 38
 Guideline for Form Design?

Dr 39
 Guideline for Form Design?
 Mobile: Match keyboard to Input

Dr 40
 Guideline for Form Design?
 Phone users appreciate apps that provide the appropriate keyboard
for text being requested. Implement this consistently throughout
the app, rather than merely for certain tasks but not others.

Dr 41
 Guideline for Form Design?
Protecting Data: Jef Raskin once said, “The
system should treat all user input as sacred.”
This is absolutely true for forms. It’s great
when you start filling in a form and then
accidentally refresh the page but the data
remains in the fields. Tools like Garlic.js help
you to persist a form’s values locally until the
form is submitted. This way, users won’t lose
any precious data if they accidentally close
the tab or browser.

Dr 42
 Guideline for Form Design?

Dr 43