How to design & code a user-friendly form
Designer, Code Monkey,
Cyclist, Gamer, Coffee Addict
at Love Creative UK
p {
color: DarkGoldenRod;
font-size: 50px;
font-weight: bold;
text-align: center;
}
<p>Hello Bristol!</p>
Making a habit of flouting convention will garner you attention, spark controversy and earnest debate — even earn you awards. But it will also confound and alienate your readers and users — the people your work is really meant for. That is abject failure.
— Heydon Pickering
First name
Last name
Email address
Password
Must be at least 8 characters long
Let's Go
*
*
*
<form>
<label for="firstName">First name</label>
<input type="text" id="firstName" name="firstName">
<label for="lastName">Last name</label>
<input type="text" id="lastName" name="lastName">
<label for="email">Email address</label>
<input type="email" id="email" name="email">
<label for="password">Create password</label>
<input type="password" id="password" name="password"
placeholder="Must be at least 8 characters">
<input type="submit" value="Let's Go">
</form>
First name
*
https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/
First name
*
First name
*
Before
After
1. Visual: make it easy to see.
2. Auditory: make it easy to hear.
3. Motor: make it easy to interact with.
4. Cognitive: make it easy to understand.
<label for="firstName">First name</label>
<input type="text" id="firstName" name="firstName">
To connect an input to a label, the input’s id
and the label’s for attribute should match and
be unique to the page.
The placeholder attribute is intended
to store a hint to guide us
Password
Must be at least 8 characters
First name
Enter your first name
They disappear when the user types
Password
Must be at least 8 characters
Password
* * *
Users often mistake placeholder text for a value, causing the field to be skipped
Location
Bristol
Gray-on-white text often lacks good contrast, making it hard-to-read
Password
Must be at least 8 characters
Longer text hints may get cut off
Password
Must be at least 8 characters long and include at least one num...
And to top it off, some browsers don’t support placeholders and some screen readers don’t announce them.
Password
Must be at least 8 characters long and include at least 1 number,
1 lowercase letter and 1 uppercase letter
<div class="field">
<label for="password">
<span class="field__label">Password</span>
<span class="field__hint">Must contain...</span>
</label>
<input type="password" id="password" name="password">
</div>
* I just copy what Google does
Email address
Email address
Above
To the side
Placing a label right over its input field permitted users to capture both elements
with a single eye movement.
https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Email address
Email address
Password
Must be at least 8 characters long
1 lowercase letter and 1 uppercase letter
Password
Must be at least 8 characters long and include at least 1 number,
1 lowercase letter and 1 uppercase letter
and include at least 1 number,
First name
First name
Last name
Empty space should be boxed in
First name
Last name
Email address
Password
Empty boxes signify “fill me in”
*
*
*
First name
Last name
Email address
The label should be closest to its form element
*
*
First name
Last name
Email address
*
*
Before
After
input:focus {
outline: 4px solid #ffbf47;
}
Email address
Email Address
EMAIL ADDRESS
Email address
<div class="field">
<label for="email">
<span class="field__label">Email address</span>
</label>
<input type="email" id="email" name="email">
</div>
Password
Must be at least 8 characters long and include at least 1 number,
1 lowercase letter and 1 uppercase letter
Choose password
Must be at least 8 characters long and include at least 1 number,
1 lowercase letter and 1 uppercase letter
Let's go
Let's go
Let's go
Let's go
“One material should not be used as a substitute for another. Otherwise the end result is deceptive.” Making a link look like a button is materially dishonest. It tells users that links and buttons are the same when they’re not.
Jeremy Keith
Let's go
Let's go
Let's go
Let's go
Let's go
Let's go
Let's go
Let's go
First name
Last name
Email address
Let's go
Choose password
Must be at least 8 characters long and include at least 1 number,
1 lowercase letter and 1 uppercase letter
*
*
*
Email address
Let's go
Choose password
Must be at least 8 characters long and include at least 1 number,
1 lowercase letter and 1 uppercase letter
Let's go
Let's go
First name
Last name
Email address
Let's go
Choose password
Must be at least 8 characters long and include at least 1 number,
1 lowercase letter and 1 uppercase letter
*
*
*
Submit
Register
Let's go
First name
Last name
Email address
*
*
“[…] including the phrase 'optional' after a label is much clearer than any visual symbol you could use to mean the same thing. Someone may always wonder ‘what does this asterisk mean?’ and have to go hunting for a legend that explains things.
Luke Wroblewski
First name
Last name (optional)
Email address
Register
Choose password
Must be at least 8 characters long
Email address
Please include an '@' in the email address
Register
Choose password
Must be at least 8 characters long
Email address
Please enter a password
Please include an '@' in the email address
Register
Choose password
Must be at least 8 characters long
Email address
Please enter a password
Include an '@' in the email address
Register
Choose password
Must be at least 8 characters long
Email address
Enter a password
Avoid pleasantries
First name
Last name
Email address
Password
Must be at least 8 characters long
Let's Go
*
*
*
First name
Last name (optional)
Email address
Register
Choose password
Must be at least 8 characters long
https://codepen.io/Sweetums66/pen/PLGPea?editors=1100
Using colours without enough contrast.
Using the placeholder attribute as a mechanism for storing label and hint text.
Using incorrect input types.
Styling buttons and links the same.
https://abookapart.com/products/accessibility-for-everyone
https://mrjoe.uk/forms-are-boring/
https://www.smashingmagazine.com/printed-books/form-design-patterns/