77
Design better forms Sjors Timmer @sjors

Design better forms – Mobile UX London

Embed Size (px)

Citation preview

Page 1: Design better forms – Mobile UX London

Design better formsSjors Timmer @sjors

Page 2: Design better forms – Mobile UX London

About me• Freelance interaction designer

• Currently working at Farfetch

• Worked at Zopa

• Worked at MoJ Digital Services

Page 3: Design better forms – Mobile UX London

1. Create structure

Page 4: Design better forms – Mobile UX London

Think of a form as a conversation

Page 5: Design better forms – Mobile UX London

1.1 Start with trust

Page 6: Design better forms – Mobile UX London

Provide context• Where am I?

• What am I asked to do?

facebook.com

Page 7: Design better forms – Mobile UX London

A familiar place• Does the form follow good design

practices?

• Does the form match the rest of the site?

facebook.com

Page 8: Design better forms – Mobile UX London

Is it easy to contact the organisation?

zopa.com/loans

Contact details

Page 9: Design better forms – Mobile UX London

1.2 Structure the conversation

Page 10: Design better forms – Mobile UX London

Start End

Page 11: Design better forms – Mobile UX London

Preparing the user• Reasons that would disqualify

someone

• Documents or numbers they need

• Only state how long it will take if it goes against expectations

• Bullet points are great

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

Page 12: Design better forms – Mobile UX London

Headings• Guide users through the text

• Break the form at appropriate points

Page 13: Design better forms – Mobile UX London

1.3 Questions and Answers

Page 14: Design better forms – Mobile UX London

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

Page 15: Design better forms – Mobile UX London

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

Page 16: Design better forms – Mobile UX London

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/

Page 17: Design better forms – Mobile UX London

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

Page 18: Design better forms – Mobile UX London

Appropriate questions• Appropriateness depends on context

• Get it wrong and people provide you with made-up data

Page 19: Design better forms – Mobile UX London

When to use help text• Explain what you will do with the

answer

• Where to find the answer

• Provide context for open answers

• Test when to use help text

Page 20: Design better forms – Mobile UX London

Mark optional fields1. Remove as many optional questions as

possible

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

3. Remove required *

Page 21: Design better forms – Mobile UX London

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

Page 22: Design better forms – Mobile UX London

1.4 Progress indicators

Page 23: Design better forms – Mobile UX London

Progress indicatorsProblem

• Progress indicators are hard to fit on small screens

Solution

• Use numbered steps

• Explain the process upfront

Register to vote

Page 24: Design better forms – Mobile UX London

We removed the progress bar as an experiment. We measured the difference in our completion rates. We found that without a progress bar, completion rates stayed exactly the same

Ben Holiday https://designnotes.blog.gov.uk/2014/07/07/do-less-problems-as-shared-spaces/

Page 25: Design better forms – Mobile UX London

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

Page 26: Design better forms – Mobile UX London

One thing per page

Page 27: Design better forms – Mobile UX London

• Consider building your form in sections

• Approach it like an app

• Login

• Forward and back

• Save progress

• Overview before submitting

Complex progress

Turbotax

Page 28: Design better forms – Mobile UX London

Success page• 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

Page 29: Design better forms – Mobile UX London

Recap• Build trust

• Prepare the users

• Headings

• Questions and answers

• Simple progress indicators

• Success page

Page 30: Design better forms – Mobile UX London

2. Design the form

Page 31: Design better forms – Mobile UX London

Don’t design the form• Use Facebook connect, Twitter connect, Paypal, etc.

Page 32: Design better forms – Mobile UX London

A modular approach• The basics

• Label placement

• Readable text

• The elements

• Fields, radio-buttons, dropdown

• Popular questions

• Name

• Email

• Passwords

Page 33: Design better forms – Mobile UX London

The basics

Page 34: Design better forms – Mobile UX London

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

Page 35: Design better forms – Mobile UX London

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

Page 36: Design better forms – Mobile UX London

Help text• Place help text under the label

• Show/hide, help text for minority user group

employmenttribunals.service.gov.uk/apply

Page 37: Design better forms – Mobile UX London

Help text• Place help text under the label

• Show/hide, help text for minority user group

employmenttribunals.service.gov.uk/apply

Page 38: Design better forms – Mobile UX London

Extended help• Additional context for question

• Detailed guidelines for answers

employmenttribunals.service.gov.uk/apply

Page 39: Design better forms – Mobile UX London

Error text• See it as additional clarification

• Place error message on the top

• Link to sections

• If the user can do multiple things wrong, think about creating multiple error messages for each field

• Shorter pages allow people to deal with errors faster

• Don’t rely on colour alone:

• http://colororacle.org/ for colour blind people

Page 40: Design better forms – Mobile UX London

Error text• See it as additional clarification

• Place error message on the top

• Link to sections

• If the user can do multiple things wrong, think about creating multiple error messages for each field

• Shorter pages allow people to deal with errors faster

• Don’t rely on colour alone:

• http://colororacle.org/ for colour blind people

Page 41: Design better forms – Mobile UX London

Readable textGood combination of

• Font size

• Background colour/font colour

• Font weight

• White space

Page 42: Design better forms – Mobile UX London

Typeface

http://thomasbyttebier.be/blog/the-best-ui-typeface-goes-unnoticed

Helvetica: Illiterate 1iiLl 38rnm

Fira: Illiterate 1iiLl 38rnm

Roboto: Illiterate 1iiLl 38rnm

Page 43: Design better forms – Mobile UX London

Colorsafe.co

Page 44: Design better forms – Mobile UX London

1. Set the brightness of your mobile device to its lowest setting

2. Open up your website on the device and begin browsing around

http://a11yproject.com/

Simple contrast test

Page 45: Design better forms – Mobile UX London

Keyboard access• Don’t break tab index

• Helps users with motor/vision challenges

• Helps power users to tab through

• Highlight focused element

Page 46: Design better forms – Mobile UX London

2.2 Form elements

Page 47: Design better forms – Mobile UX London

Use 44 pixels on the web

Josh Clark Designing for Touch

Page 48: Design better forms – Mobile UX London

Form fields• Big enough to touch

• Field size gives a clue to the answer expected

Page 49: Design better forms – Mobile UX London

HTML 5 typeemail, number, tel, url

<label for=“phone”>

Phone number</label>

<input type="tel" name="phone"/>

Page 50: Design better forms – Mobile UX London

Radio button/check boxUse the label tag

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

Page 51: Design better forms – Mobile UX London

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

Page 52: Design better forms – Mobile UX London

Possible solutionsRadio buttons

• Show top choices

• Hide the rest under show more

Page 53: Design better forms – Mobile UX London

Possible solutionsRadio buttons

• Show top choices

• Hide the rest under show more

Page 54: Design better forms – Mobile UX London

Possible solutions• Use autocomplete search

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

baymard.com/labs/country-selector

Page 55: Design better forms – Mobile UX London

Possible solutions• Use autocomplete search

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

baymard.com/labs/country-selector

Page 56: Design better forms – Mobile UX London

Possible solutions• Use autocomplete search

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

baymard.com/labs/country-selector

Page 57: Design better forms – Mobile UX London

Submit buttons• Align left in line with the fields

• Full width on mobile

• Describe the action

• Don’t display any cancel button

Netflix

Page 58: Design better forms – Mobile UX London

2.3 Popular combinations

Page 59: Design better forms – Mobile UX London

Title• Remove title question

• If not possible, allow for ‘other’

• So Her Majesty doesn’t feel left out

Carer’s allowance

Page 60: Design better forms – Mobile UX London

NameLeave it up to the user to tell you how they would like to be addressed

Page 61: Design better forms – Mobile UX London

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

Page 62: Design better forms – Mobile UX London

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

Page 63: Design better forms – Mobile UX London

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

Kickstarter

Page 64: Design better forms – Mobile UX London

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

petitions.parliament.uk

Page 65: Design better forms – Mobile UX London

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

petitions.parliament.uk

Page 66: Design better forms – Mobile UX London

AddressPostcode look up

pcapredict.com

Page 67: Design better forms – Mobile UX London

AddressPostcode look up

Page 68: Design better forms – Mobile UX London

AddressPostcode look up

Page 69: Design better forms – Mobile UX London

Date of birth• Default HTML5 date element

doesn’t test well

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

Page 70: Design better forms – Mobile UX London

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

Page 71: Design better forms – Mobile UX London

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/

Page 72: Design better forms – Mobile UX London

Passwords• Allow users to see their password

• But don’t do it by default

• Encourage length by showing a strength indicator

Google account

Page 73: Design better forms – Mobile UX London

Passwords• Allow users to see their password

• But don’t do it by default

• Encourage length by showing a strength indicator

Google account

Page 74: Design better forms – Mobile UX London

Recap• Place the labels on top

• Choose a good combination of colour and size of fonts

• Avoid dropdowns

• Keep your elements simple

• Automate and validate wherever you can

Page 75: Design better forms – Mobile UX London

Start End

Help

Validation

A conversation

Page 76: Design better forms – Mobile UX London

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

Page 77: Design better forms – Mobile UX London

Thank you!

Sjors Timmer @sjors