Stop the Mobile Journey Ending on the Desktop

Heidi Kawai-SmithNUX Liverpool 7th Dec 2015

• Why mobile form?

• Structure your form

• Name, Email Address, Password, Date, Error Message, Help tips

• Credit card transection, Faceted search

• Anything interesting at the moment?

Why Mobile form?

“I need to go to the desktop to do it”

Why mobile form?

“85% of people say that mobile devices are a central part of everyday life”

2014 Mobile Behaviour Report - Salesforce

http://www.bronco.co.uk/our-ideas/the-mobile-effect/

“I used my phone because I didn’t want to boost up the computer, it’s ok, I can browse on it…I also bid on eBay using the phone, it’s actually easier”

Strategy

“Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city

plan”

Eliel Saarinen, Architect, 1873 - 1950

Origin: Webcredible mobile ux training

Native Apps vs Hybrid Apps vs Mobile Web

Origin: uTest essential guide to mobile app test

• Where are they? • What are they doing? • What device might they be using? Which phases of the journey could be best served by mobile service (website or app)? • What features and functionality could this service offer? • What happens when the users switch between mobile touchpoint and other touchpoint (laptop? check in with sales?)

Origin: Webcredible mobile ux training

Structure your form

How would you start a conversation with a stranger?

Preparing the user• Reason that would

disqualify someone

• Documents or numbers they need

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

• Use bullet points if possible

Design better form - Sjors Timmer

Preparing the user• Reason that would

disqualify someone

• Documents or numbers they need

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

• Use bullet points if possible

Design better form - Sjors Timmer

Plan your journey

Plan your journey

Plan your journey

Appropriate tone of voice

Confirmation

Form fields

Name

Name

Email address

Email address

Design better form - Sjors Timmer

Design better form - Sjors Timmer

Password

Password

Password

Address

Date

British Airway Web

To App or not to app?

British Airway Web

British Airway App

Error message

Error message

Error message

Error message

Error message

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

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

Design better form - Sjors Timmer

Don’t rely on colour alone: http://colororacle.org/ for colour blind people

Help textHelp text• Place help text under the label

• Show/hide, help text for minority user group

employmenttribunals.service.gov.uk/apply

Design better form - Sjors Timmer

• Place help text under the label

• Show/hide, for minority user group

Optional vs required field

Optional vs required field

1. Remove as many optional questions as possible

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

3. Remove required *

Mark optional fields1. Remove as many optional questions as

possible

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

3. Remove required *

Design better form - Sjors Timmer

Exercise

Exercise

Form fields cont.

Credit card

Credit card

Credit card

Credit card

Faceted search

https://bradfrost.github.io/this-is-responsive/patterns.html http://codepen.io/chriscoyier/full/egHJh

Faceted search

Faceted search

http://www.nngroup.com/articles/mobile-faceted-search/

Anything else?

Don’t design the form

Native login

Native login

Minimal sign up - then request information

Re-cap• Always start by planning your journey, think about all the drop off points

• Treat it like a conversation• Try to do one thing at a time• Use Header to create section• Beware of touch point - recommended 44px• Be conscious of native app function

Exercise

Reference

Reference• Web form design - Luke Wroblewski

• ‘Better mobile form’ workshop - Mobile ux 2015, Sjors Timmer http://www.slideshare.net/sjors/design-better-forms-mobile-ux-london

• Form that works - Caroline Jarrett & Gerry Gaffney

• Mobile Is Eating the World (2015) - Benedict Evans

• Conversions@Google 2014 - Luke Wroblewski