eCommerce checkout usability: i problemi correlati alla progettazione del processo di checkout. Il caso Trenitalia al KnowCamp (Modena, 8-9 Ottobre 2011).

1. KnowCamp 2011
Ergonomia e commercio:
lʼultimo treno
Nicola Bonora

2. Nicola Bonora
MENTINE.NET
@nicbonora
@mentinet
#kc2011

3. Romagna mia
Romagna in fiore
Tu sei la terra
Del bloggatore
Quanto ti penso
Vorrei ceccare
Ogni tua veniu
Dentro forsquare

4. Ergonomia e commercio

5. Italia 2010
14,357 mld € e-commerce
+43%
fonte: Casaleggio Associati 2011

6. E-commerce checkout usability
Baymard Institute
60% of all e-commerce visitors
abandon their shopping cart. Why?

7. La clessidra della user experience
2010-2011 CC MENTINE
se proprio ne volete parlare,
citate la fonte! :D

8. spread TW
fidelize
satisfy
verify
purchase
decide
choose
explore
2010-2011 CC MENTINE
se proprio ne volete parlare,
citate la fonte! :D

9. La piramide della billing experience
2010-2011 CC MENTINE
se proprio ne volete parlare,
citate la fonte! :D

10. BILLING EXPERIENCE
CUSTOMER EXPERIENCE
PROSPECT EXPERIENCE
USER EXPERIENCE
2010-2011 CC MENTINE
se proprio ne volete parlare,
citate la fonte! :D

11. E-commerce checkout usability
Baymard Institute

12. 10
5 uomini
5 donne
20-58 yrs
UTENTI
E-commerce checkout usability
Baymard Institute

13. 6
Data input
Copywriting
Layout
ASPETTI Navigation
Flow
Focus
E-commerce checkout usability
Baymard Institute

14. 63
Che
compogono
una Checkout
usability
CHECK checklist.
POINT 3 livelli di
gravità (dal
warning al
fatal)
E-commerce checkout usability
Baymard Institute

15. 15
1-800-
Flowers,
AllPosters,
American
Apparel,
SITI WEB Amnesty
Shop, Leviʼs,
Walmart,
Zappos...
E-commerce checkout usability
Baymard Institute

16. 520
Problemi
correlati alla
progettazione
del processo
di checkout
ISSUES
E-commerce checkout usability
Baymard Institute

17. fonte: Casaleggio Associati 2011

19. 14
Riscontrati
con un test a
zero
attendibilità.
ERORI Quale
capitale sta
disperdendo
questo
merchant?

20. snipurl.com/ergonomia

22. Parental control
EXPLICIT LYRICS!

23. Love brand...
http://yfrog.com/z/ny94ggtj

24. Organico.

25. Organico motivato.

26. Responsabilità sociale

27. Ti odio poi ti odio poi ti odio

28. Sodomia binaria

29. Augh.

30. Moretti, fallo per i nostri figli

31. Internescional!

32. Guarda cosa dicono in Giappone

33. Rimango.

34. Inseguire il tuo profilo con un dito.

35. Auguri incondizionati.

38. Identity

41. Primary action
*
**

42. Error messages
no link a home...

43. Layout/
readability
Intermodalità: nel sito di Trenitalia
ci puoi parcheggiare un autobus

44. sinistra (32)
alto (22)
destra (21) alto bold (14)
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

45. Focus

46. Flow

47. The fold
I dati mancanti sono sopra la piega.

48. Flow
e adesso?

50. Feedback
Reinserimento totale

51. Standard

53. Function

54. Sempre meglio il software che i binari.

58. Pain
Lʼansia da click è schiacciante: cosa mi
aspetta se faccio click?
La sindrome dellʼend user: “Sto sbagliando”.
UX fail.

59. spread TW
fidelize
satisfy
verify
purchase
decide
choose
explore
2010-2011 CC MENTINE
se proprio ne volete parlare,
citate la fonte! :D

60. 3 indicate required and optional fields
47 - Your checkout process 7 Validate form fields inline
should be linear
24 Use clear error indications
26 Only use one column for form fields
4 - Preserve all customer
28 Curate the options you present during checkout
input despite errors in the
30 Reinforce all sensitive fields on the payment page
form
31 Use font-sizes to indicate the hierarchy in text
27 - Use a primary button for 32 Have few things surrounding your checkout
the primary action 33 Show a sensible amount of form fields
35 How and where to place the primary button
42 - Process steps should be 36 Hide navigation during checkout
links 43 Clearly show the different steps during checkout
44 Primary action / input should be above the fold
46 Add visual indicators and feedback to all actionable
elements on the page
51 Apply changes immediately and near the input
56 Donʼt require seemingly unnecessary information
57 Only show options that are meaningful to the current

61. 21
Riscontrati
con un test a
zero
attendibilità.
CHKPOINT Quale
capitale sta
disperdendo
questo
NESSUNO. merchant?

62. Communication...
PHICO!

63. 25% delle voci di menu
sbagliate...

64. Learned lessons
(tutte twittabili)

65. Nella Savana del libero
mercato, Trenitalia sarebbe
una gazzella. Zoppa.

66. In regime di monopolio,
lʼutente paga in termini di
qualità del servizio, tempo
speso per ottenerlo, prezzo e
salute mentale.

67. “Come può il Web, come fonte di
informazione e strumento di
partecipazione, renderci più
responsabili e consapevoli nella
creazione e nella diffusione di
notizie ed opinioni?”
(KnowCamp.it)

68. Condivisione.
Informazione.
Conversazione.
Sputtanamento.

69. snipurl.com/trenima

70. Consiglio a trenitalia.com:

73. Se vi è piaciuto,
ditelo ai vostri
amici!
Se non vi è
piaciuto, ditelo a
@mentinet

74. Quando cʼero io, i treni
arrivavano in orario.
Nicola Bonora