Nux liverpool 7 Dec 2015

1. Stop the Mobile Journey
Ending on the Desktop
Heidi Kawai-Smith
NUX Liverpool 7th Dec 2015

2. • 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?

3. Why Mobile form?

4. “I need to go to the
desktop to do it”
Why mobile form?

5. “85% of people say that mobile devices are a
central part of everyday life”
2014 Mobile Behaviour Report - Salesforce

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

7. “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”

9. Strategy

10. “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

11. Native Apps vs Hybrid Apps
vs Mobile Web
Origin: uTest essential guide to mobile app test

12. • 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

13. Structure your form

14. How would you start a conversation with a stranger?

15. 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

16. 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

17. Plan your
journey

18. Plan your
journey

19. Plan your
journey

20. Appropriate
tone of voice

21. Confirmation

22. Form fields

23. Name

24. Name

25. Email address

26. Email address

27. Design better form - Sjors Timmer

28. Design better form - Sjors Timmer

29. Password

30. Password

31. Password

32. Address

34. Date

35. British Airway Web

36. To App or not to app?

37. British Airway Web

38. British Airway App

39. Error message

40. Error message

41. Error message

42. Error message

43. Error message

44. xt
onal clarification
sage on the top
do multiple things wrong, think
multiple error messages for each
allow people to deal with errors
lour alone:
acle.org/ for colour blind people
Design better form - Sjors Timmer
Don’t rely on colour alone: http://colororacle.org/ for colour blind people

45. Help text
der the label
ext for minority
Design better form - Sjors Timmer
• Place help text under
the label
• Show/hide, for
minority user group

46. Optional vs required field

47. Optional vs required field
1. Remove as many
optional questions
as possible
2. Label optional
fields left with
“(optional)”
3. Remove required *
nal fields
ptional questions as
s left with “(optional)”
Design better form - Sjors Timmer

48. Exercise

49. Exercise

50. Form fields cont.

51. Credit card

52. Credit card

53. Credit card

54. Credit card

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

56. Faceted search

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

58. Anything else?

59. Don’t design the form

60. Native login

62. Native login

63. Minimal sign up - then request information

67. 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

68. Exercise

70. Reference

71. 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