stop the mobile journey ending on the desktop
TRANSCRIPT
![Page 1: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/1.jpg)
Stop the Mobile Journey Ending on the Desktop
Heidi Kawai-SmithNUX Liverpool 7th Dec 2015
![Page 2: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/2.jpg)
• 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?
![Page 3: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/3.jpg)
Why Mobile form?
![Page 4: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/4.jpg)
“I need to go to the desktop to do it”
Why mobile form?
![Page 5: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/5.jpg)
“85% of people say that mobile devices are a central part of everyday life”
2014 Mobile Behaviour Report - Salesforce
![Page 6: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/6.jpg)
http://www.bronco.co.uk/our-ideas/the-mobile-effect/
![Page 7: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/7.jpg)
“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”
![Page 8: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/8.jpg)
![Page 9: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/9.jpg)
Strategy
![Page 10: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/10.jpg)
“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
![Page 11: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/11.jpg)
Native Apps vs Hybrid Apps vs Mobile Web
Origin: uTest essential guide to mobile app test
![Page 12: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/12.jpg)
• 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
![Page 13: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/13.jpg)
Structure your form
![Page 14: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/14.jpg)
How would you start a conversation with a stranger?
![Page 15: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/15.jpg)
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
![Page 16: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/16.jpg)
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
![Page 17: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/17.jpg)
Plan your journey
![Page 18: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/18.jpg)
Plan your journey
![Page 19: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/19.jpg)
Plan your journey
![Page 20: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/20.jpg)
Appropriate tone of voice
![Page 21: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/21.jpg)
Confirmation
![Page 22: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/22.jpg)
Form fields
![Page 23: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/23.jpg)
Name
![Page 24: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/24.jpg)
Name
![Page 25: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/25.jpg)
Email address
![Page 26: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/26.jpg)
Email address
![Page 27: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/27.jpg)
Design better form - Sjors Timmer
![Page 28: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/28.jpg)
Design better form - Sjors Timmer
![Page 29: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/29.jpg)
Password
![Page 30: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/30.jpg)
Password
![Page 31: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/31.jpg)
Password
![Page 32: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/32.jpg)
Address
![Page 33: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/33.jpg)
![Page 34: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/34.jpg)
Date
![Page 35: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/35.jpg)
British Airway Web
![Page 36: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/36.jpg)
To App or not to app?
![Page 37: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/37.jpg)
British Airway Web
![Page 38: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/38.jpg)
British Airway App
![Page 39: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/39.jpg)
Error message
![Page 40: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/40.jpg)
Error message
![Page 41: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/41.jpg)
Error message
![Page 42: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/42.jpg)
Error message
![Page 43: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/43.jpg)
Error message
![Page 44: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/44.jpg)
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
![Page 45: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/45.jpg)
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
![Page 46: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/46.jpg)
Optional vs required field
![Page 47: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/47.jpg)
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
![Page 48: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/48.jpg)
Exercise
![Page 49: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/49.jpg)
Exercise
![Page 50: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/50.jpg)
Form fields cont.
![Page 51: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/51.jpg)
Credit card
![Page 52: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/52.jpg)
Credit card
![Page 53: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/53.jpg)
Credit card
![Page 54: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/54.jpg)
Credit card
![Page 55: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/55.jpg)
Faceted search
https://bradfrost.github.io/this-is-responsive/patterns.html http://codepen.io/chriscoyier/full/egHJh
![Page 56: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/56.jpg)
Faceted search
![Page 57: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/57.jpg)
Faceted search
http://www.nngroup.com/articles/mobile-faceted-search/
![Page 58: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/58.jpg)
Anything else?
![Page 59: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/59.jpg)
Don’t design the form
![Page 60: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/60.jpg)
Native login
![Page 61: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/61.jpg)
![Page 62: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/62.jpg)
Native login
![Page 63: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/63.jpg)
Minimal sign up - then request information
![Page 64: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/64.jpg)
![Page 65: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/65.jpg)
![Page 66: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/66.jpg)
![Page 67: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/67.jpg)
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
![Page 68: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/68.jpg)
Exercise
![Page 69: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/69.jpg)
![Page 70: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/70.jpg)
Reference
![Page 71: Stop the Mobile Journey Ending on the Desktop](https://reader031.vdocuments.site/reader031/viewer/2022022200/58abbcff1a28ab04618b6065/html5/thumbnails/71.jpg)
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