design better forms – uxbristol

Design better formsSjors Timmer @sjors

Question your questions

Flow

Design details

1.

2.

3.

1. Question your questions

Question protocol• Every question you ask

• Who wants the answer?

• Why do they want it?

• Required to answer?

• What if there’s a mistake?

• Question type

• Can it be removed?

• Comments

http://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php

Question protocol Question Who wants it? Why? Required? What if there's a

mistakeQuestion type Can it be

removed?Comments

First name All organisers Personal tickets Yes Double check viaemail

From memory No Can it be merged with last name?

Last name All organisers Personal tickets Yes Double check viaemail

From memory No

Email address Fullfilment Sendconfirmation/updates

Yes Error messagedisplayed

From memory No

Confirm email Fullfilment Validation of emailaddress


From memory Possibly Can email be validated in a moreefficient way?

Card type Payment provider Validating payment Yes Paymentfails/registration fails

Look up Possibly

Card number

Expiration date (month/year)

CSC

Country

Address 1

Address 2

City

State/province

Postal code

Job title

Company/organization

Twitter handle

Industry

Size of company

Terms and conditions

http://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php

Type of answer

From memory answers• Short simple labels

• No need to tell people upfront

• No need for help text, but you might want to tell why you need an answer

facebook.com

http://wework.com/signup

Look up answers• Mention it in the preparation

section

• Simple and short label

• Information on where you can find the answer

gov.uk/carers-allowance/

http://gov.uk/carers-allowance/how-to-claim

Think and write answers• Where most thinking needs to happen

• In the form of a question or a section

• Talk to the people who will be using these answers

• Add help or even a writing guide

employmenttribunals.service.gov.uk/apply

http://zopa.com/loans

(Re)move optional1. Remove as many optional questions as

possible

2. Label optional fields left with “(optional)”

3. Remove required *

Ironically, more people answered the optional questions when they were asked after they registered! – Luke Wroblewski The redesign of the eBay signup form

Exercise:

Question protocol • Take the two handouts

• Look at the booking form and

• Look at the question protocol

• Fill in as much as you can

• On your own

• 5 minutes

Booking form

Question protocol Question Who wants it? Why? Required? What if there's a

mistakeQuestion type Can it be

removed?Comments

First name All organisers Personal tickets Yes Double check viaemail

From memory No Can it be merged with last name?

Last name All organisers Personal tickets Yes Double check viaemail

From memory No

Email address Fullfilment Sendconfirmation/updates


From memory No

Confirm email Fullfilment Validation of emailaddress


From memory Possibly Can email be validated in a moreefficient way?

Card type Payment provider Validating payment Yes Paymentfails/registration fails

Look up Possibly

Card number

Expiration date (month/year)

CSC

Country

Address 1

Address 2

City

State/province

Postal code

Job title

Company/organization

Twitter handle

Industry

Size of company

Terms and conditions

2. Flow

Think of a form as a conversation

Start End

Start the conversation• Reasons that would disqualify

someone

• Documents or numbers they need

• Bullet points are great

gov.uk/carers-allowance/how-to-claim

http://gov.uk/carers-allowance/how-to-claim

End the conversation• Thank them

• State their actions

• State reference number

• Tell them what will happen next

• Tell them how they can reach you

• And make sure it prints well

Thank you for your order!You successfully ordered 1 copy of Design better forms

Your order number is #12345

You should receive a confirmation email within 5 minutes

Your order should arrive between 25 and 27 September

For any questions, contact us on 020123123 or [email protected]

Print this page

https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/

Register to vote

One thing per page• Low-confidence users find it easier

to use

• Works well on mobile devices

• Works better for handling errors, branches, loops and saving progress



Register to vote

‘One thing’ could be:• one piece of information to

understand

• one decision to make

• one question to answer


Register to vote

I’d rather see users bored than confused

Joe Lanman Attributed

Amazon mobile check out

1234 1234 1234 1234

Exercise:

Draw a form flow• Use your question protocol

• Group questions in one topic per box

• Make it flow like a conversation

• Together with your neighbour

• 5 minutes

3. Design details

Label placementTop labels are the most flexible

• Keeps the text visible whilst typing

• Can easily deal with translations

• Can easily support a lot of help text

• Allows the user to change the text size without breaking the layout

The cardinal principle of industrial design: content always appears on top. – Josh Clark Designing for touch

Help text• Place help text under the label

• Show/hide, help text for minority user group

employmenttribunals.service.gov.uk/apply

http://zopa.com/loans

Form fields• Big enough to touch

• Field size gives a clue to the answer expected

Use 44 pixels on the web

Josh Clark Designing for Touch

Radio button/check box

Use the label tag to increase the hit area

<input id=“nationality-irish“ type="checkbox" name=“is-irish” /> <label for=“nationality-irish”>Irish</label>

Visually increase squares and circles

Drop down (aka select)Find on Youtube:Alice Bartlett: Burn your select tags

Problems users have with them

• Unable to close the select

• Typing into the select

• Confusing focused items with selected items

• Touch screen: trying to pinch zoom select options

Master

Possible solutionsRadio buttons

• Show top choices

• Hide the rest under show more

Possible solutions• Use autocomplete search

• Only works when the user is looking for something they know

baymard.com/labs/country-selector

http://baymard.com/labs/country-selector

Frequently asked questions

Email• Autocomplete email address

• Filter for spelling errors in popular provider’s domains

• Confirm email address on screen

• And/or there are services like neverbounce.com that actively validate email addresses

Acorns

http://neverbounce.com





Kickstarter






petitions.parliament.uk


http://petitions.parliament.uk

AddressPostcode look up

pcapredict.com

http://pcapredict.com

AddressPostcode look up

Date of birth• Default HTML5 date element

doesn’t test well

• 3 fields, looks boring, but tests well (for memorable dates)

https://twitter.com/QuiltingMuriel/status/640378046462099456

https://twitter.com/QuiltingMuriel/status/640378046462099456

Passwords

We have successfully trained everyone to use passwords that are hard to remember, but easy for computers to guess.

XKCD https://xkcd.com/936/

https://xkcd.com/936/

Passwords• Allow users to see their password

• But don’t do it by default

• Encourage length by showing a strength indicator

Google account

Recap• Place the labels on top

• Avoid dropdowns

• Keep your elements simple

• Automate and validate wherever you can

Exercise:

Start sketching the form• Use your question protocol

• Follow your flow

• Sketch for a mobile screen

• It’s ok if you don’t finish it

• Together with your neighbour

• 15 minutes

Reading/watching tipsDesigning for Touch – Josh Clark

Forms that work – Caroline Jarrett and Gerry Gaffney

Mobile Design Essentials Part 1 & 2 – Luke Wroblewski

Gov.uk Design patterns designpatterns.hackpad.com

http://designpatterns.hackpad.com

Thank you!

Sjors Timmer @sjors