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-

INFOGRAFICHE

http://www.paznow.com/ucd/

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/

http://mentine.net/contatti :)

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/

http://mentine.net/contatti :)

LESS IS MORE

even less is even more :)

posterous.com

TENETEVISEMPREIN FORM

grazie!

Nicola Bonora