usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento
TRANSCRIPT
![Page 1: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/1.jpg)
UX conference 2010
FILFFORMS IʼD LIKE TO FILL
Nicola Bonora
![Page 2: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/2.jpg)
Nicola BonoraMENTINE.NETaka Nicola BonoraBologna
![Page 3: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/3.jpg)
IL SUONODI UNA SOLAMANO
![Page 4: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/4.jpg)
FORM“moduli”
etichettecampi di inputazionimessaggi
![Page 5: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/5.jpg)
WEB FORM DESIGNFilling the blanks
Luke WroblewskiRosenfeld
![Page 6: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/6.jpg)
IL LA
test clinicifriendfeedgoogle
![Page 7: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/7.jpg)
IMPORTAperché
• un sito ha obiettivi...
• vendita
• servizi
• social
• blogging
• ... “conversione”
![Page 8: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/8.jpg)
IMPORTAperché
• le form ci parlano
• le form parlano di noi
• le form vendono
![Page 9: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/9.jpg)
SCENARIO
punto nevralgico dellʼesperienzautente
esperienza mediata
differenza tra eccellenza e mediocrità
• 500 (ad oggi) milioni di utenti di Facebook
• acquistare un libro su Amazon
• pagare un f24 on line
• commentare un post
• web app: 70% form (fonte: a naso)
• un tweet, un update, un feed...
![Page 10: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/10.jpg)
INFOGRAFICHE
http://semanticstudios.com/publications/semantics/000029.php
![Page 11: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/11.jpg)
INFOGRAFICHE
http://semanticstudios.com/publications/semantics/000228.php
![Page 12: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/12.jpg)
INFOGRAFICHE
http://userexperienceproject.blogspot.com/2007/04/user-experience-wheel.html
![Page 13: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/13.jpg)
INFOGRAFICHE
http://www.poetpainter.com/thoughts/article/ia-summit-2009-the-fundamentals-of-experience-design-
![Page 15: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/15.jpg)
COSA MANCA?
la clessidradella UX
se ne sentiva proprio la mancanza
![Page 16: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/16.jpg)
explore
choosedecide
purchaseverify
spread TW
satisfy
fidelize
information wideness
pain
leve
l
UX HOURGLASS
2010 CC NICOLA BONORAse proprio ne volete parlare,
citate la fonte! :D
![Page 17: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/17.jpg)
E POI?
la piramidedella BX
anche di questa si sentiva la mancanza
![Page 18: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/18.jpg)
USER EXPERIENCE
BILLING EXPERIENCE
PROSPECT EXPERIENCE
CUSTOMER EXPERIENCEUSER
YOU
FORM
HER :)
engage
sell
bill
BX PYRAMID
2010 CC NICOLA BONORAse proprio ne volete parlare,
citate la fonte! :D
![Page 19: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/19.jpg)
IMPORTAperché
una form ben progettata può portare ad un aumento delle conversioni tra il 10 e il 40%
![Page 20: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/20.jpg)
COMEsi progettauna buona form?
dipende...
• considerare il contesto
• comunicare in modo coerente
• minimizzare gli stati dʼansia
• chiarire il percorso che si sta per fare
![Page 21: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/21.jpg)
LE PAROLESONOIMPORTANTI
![Page 22: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/22.jpg)
COSAci metto dentro?
dipende...
iniziare da PERSONE e RELAZIONI
• perché gli utenti compilano questa form?
• qual è il loro rapporto con la vostra azienda?
• cosa è per loro questa form?
![Page 23: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/23.jpg)
COSAci metto dentro?
Bilanciare il vostro punto di vista con il loro:UX is a win-win situation
rimuovere quanto NON strettamente necessario
... ma non dimenticare lʼindispensabile (per lʼutente)
le persone sono sensibili ai dati che vengono loro richiesti
![Page 24: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/24.jpg)
![Page 25: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/25.jpg)
![Page 26: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/26.jpg)
![Page 27: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/27.jpg)
![Page 28: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/28.jpg)
“People before pixel” Caroline Jarret
![Page 29: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/29.jpg)
CHECKPOINT
![Page 30: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/30.jpg)
COMEorganizzo i dati?
1• raggrupparli
• creare pagine multiple
• convenzioni
![Page 31: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/31.jpg)
![Page 32: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/32.jpg)
![Page 33: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/33.jpg)
![Page 34: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/34.jpg)
![Page 35: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/35.jpg)
![Page 36: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/36.jpg)
COMEallineo i campi?
2
• in alto
• a sinistra
• a destra
• dentro
![Page 37: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/37.jpg)
http://www.flickr.com/photos/rosenfeldmedia/2367261378/sizes/o/in/set-72157604272550634/
![Page 38: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/38.jpg)
sinistra (32)
destra (21)
alto (22)
alto bold (14)http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
![Page 39: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/39.jpg)
![Page 40: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/40.jpg)
![Page 41: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/41.jpg)
![Page 42: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/42.jpg)
![Page 43: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/43.jpg)
![Page 44: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/44.jpg)
![Page 45: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/45.jpg)
![Page 46: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/46.jpg)
AZIONIprimarie e secondarie
3
![Page 47: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/47.jpg)
http://www.flickr.com/photos/rosenfeldmedia/2367266922
![Page 48: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/48.jpg)
http://www.flickr.com/photos/rosenfeldmedia/2366430857/sizes/o/in/photostream/
![Page 49: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/49.jpg)
![Page 50: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/50.jpg)
![Page 51: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/51.jpg)
![Page 52: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/52.jpg)
![Page 53: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/53.jpg)
FEED BACKmessaggi di errore
4
• con parsimonia
• possibilmente empatici (conversation...)
• dove?
• come evitarli?(campi chiusi, libertà limitata)
• la form perfetta non ne avrebbe :)
![Page 54: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/54.jpg)
http://www.flickr.com/photos/rosenfeldmedia/2367269446/sizes/o/in/photostream/
![Page 55: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/55.jpg)
![Page 56: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/56.jpg)
![Page 57: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/57.jpg)
![Page 59: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/59.jpg)
![Page 60: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/60.jpg)
FEED BACKmessaggi di successo
5• dare loro un
seguito(“so what?”...)
• opportunità
![Page 61: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/61.jpg)
explore
choosedecide
purchaseverify
spread TW
satisfy
fidelize
information wideness
pain
leve
l
UX HOURGLASS
2010 CC NICOLA BONORAse proprio ne volete parlare,
citate la fonte! :D
![Page 62: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/62.jpg)
http://www.flickr.com/photos/rosenfeldmedia/2367269044/sizes/o/in/photostream/
![Page 63: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/63.jpg)
![Page 64: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/64.jpg)
![Page 66: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/66.jpg)
![Page 67: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/67.jpg)
![Page 68: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/68.jpg)
LESS IS MORE
even less is even more :)
![Page 69: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/69.jpg)
posterous.com
![Page 70: Usabilità e form: un punto cruciale per l’esperienza d’uso e il coinvolgimento](https://reader033.vdocuments.pub/reader033/viewer/2022060108/5550b3a5b4c905fa618b4999/html5/thumbnails/70.jpg)
TENETEVISEMPREIN FORM