Uxcon 2010 - Nicola Bonora - Mentine
71
UX conference 2010 FILF FORMS IʼD LIKE TO FILL Nicola Bonora
description
FILF - Forms I'd Like to Fill, l'intervento di Nicola Bonora alla UX Conference 2010 - Lugano: Usabilità e User Experience delle Form. Come organizzare i dati, come allineare i campi, le azioni e i feedback
Transcript of Uxcon 2010 - Nicola Bonora - Mentine
UX conference 2010
FILFFORMS IʼD LIKE TO FILL
Nicola Bonora
Nicola BonoraMENTINE.NETaka Nicola BonoraBologna
IL SUONODI UNA SOLAMANO
FORM“moduli”
etichettecampi di inputazionimessaggi
WEB FORM DESIGNFilling the blanks
Luke WroblewskiRosenfeld
IL LA
test clinicifriendfeedgoogle
IMPORTAperché
• un sito ha obiettivi...
• vendita
• servizi
• social
• blogging
• ... “conversione”
IMPORTAperché
• le form ci parlano
• le form parlano di noi
• le form vendono
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...
INFOGRAFICHE
http://semanticstudios.com/publications/semantics/000029.php
INFOGRAFICHE
http://semanticstudios.com/publications/semantics/000228.php
INFOGRAFICHE
http://userexperienceproject.blogspot.com/2007/04/user-experience-wheel.html
INFOGRAFICHE
http://www.poetpainter.com/thoughts/article/ia-summit-2009-the-fundamentals-of-experience-design-
COSA MANCA?
la clessidradella UX
se ne sentiva proprio la mancanza
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
E POI?
la piramidedella BX
anche di questa si sentiva la mancanza
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
IMPORTAperché
una form ben progettata può portare ad un aumento delle conversioni tra il 10 e il 40%
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
LE PAROLESONOIMPORTANTI
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?
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
“People before pixel” Caroline Jarret
CHECKPOINT
COMEorganizzo i dati?
1• raggrupparli
• creare pagine multiple
• convenzioni
COMEallineo i campi?
2
• in alto
• a sinistra
• a destra
• dentro
http://www.flickr.com/photos/rosenfeldmedia/2367261378/sizes/o/in/set-72157604272550634/
sinistra (32)
destra (21)
alto (22)
alto bold (14)http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
AZIONIprimarie e secondarie
3
http://www.flickr.com/photos/rosenfeldmedia/2367266922
http://www.flickr.com/photos/rosenfeldmedia/2366430857/sizes/o/in/photostream/
FEED BACKmessaggi di errore
4
• con parsimonia
• possibilmente empatici (conversation...)
• dove?
• come evitarli?(campi chiusi, libertà limitata)
• la form perfetta non ne avrebbe :)
http://www.flickr.com/photos/rosenfeldmedia/2367269446/sizes/o/in/photostream/
FEED BACKmessaggi di successo
5• dare loro un
seguito(“so what?”...)
• opportunità
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
http://www.flickr.com/photos/rosenfeldmedia/2367269044/sizes/o/in/photostream/
LESS IS MORE
even less is even more :)
posterous.com
TENETEVISEMPREIN FORM
