Nel nostro workshop dal titolo “Il design svelato: la genesi progettuale di un e-commerce” raccontiamo quanto e come la progettazione User Centered e le attività di test con utenti incidano in modo determinante sulle performance di un sito orientato nativamente alla conversione.

2. Il design
svelato
la genesi progettuale di un
e-commerce

3. Giuseppe Teatino
Information Architect
Luca Rodighiero
Interaction designer

4. Cosa si nasconde dietro ai processi di design
di un e-commerce?

5. Cosa si nasconde dietro ai processi di design
di un e-commerce?
Gli e-commerce sono prodotti digitali
complessi, alla cui realizzazione partecipano
competenze e conoscenze eterogenee.
Lo User Experience Design è una di
queste.
E questa presentazione è solo uno dei
possibili modi di raccontarlo.

6. Semplifichiamo.
Dobbiamo identificare 2 momenti decisivi

7. Semplifichiamo.
Dobbiamo identificare 2 momenti decisivi
Un’esperienza utente che punti ad essere
gratificante e remunerativa ha bisogno di due
momenti.
Il design di architettura e interazione.
La verifica (testing).
Questa sintesi è una semplificazione di una
realtà molto più articolata, ma ci è utile per
comprendere le basi della progettazione di
un e-commerce.

8. Design.
O come rendere realizzabile un progetto

9. Design.
O come rendere realizzabile un progetto
Il primo dei momenti è l’attività di
progettazione vera e propria, nella quale si
cerca di trovare il punto di contatto tra
specifiche di progetto,
obiettivi, vincoli, budget,
aspettative degli utenti/clienti.
Gli oggetti della progettazione di un
e-commerce sono (semplificando):
le architetture informative del catalogo,
dei contenuti di supporto, dei contenuti
istituzionali e la loro gerarchizzazione;
i modelli di interazione ed i flussi di
conversione per tutti gli standard che si
desidera prendere in considerazione.

10. Testing.
O come valutare la qualità dell’esperienza

11. Testing.
O come valutare la qualità dell’esperienza
Un utente frustrato, incapace di trovare quello
che cerca e di convertire il proprio intento di
acquisto in pratica è un danno.
Mancato acquisto, recensioni negative,
nessuna raccomandazione, lamentele sui
canali social.
Nella migliore delle situazioni un utente
diventato ormai diffidente.
Per evitare di incorrere in clamorosi buchi
nell’acqua, l’unica scelta possibile è il testing.
Testare i flussi di acquisto con gli utenti,
i nostri utenti.
Testare varianti.
Testare le soluzioni migliori per i target di
utenti più interessanti.

12. Abbiamo identificato due momenti.
Cosa c’è alla base di ciascuno di essi?

13. Individuare i «design challenge».

14. Individuare i «design challenge».
Quali sono le sfide della nostra progettazione?
Cosa possiamo fare per superarle con successo?
Durante il momento della progettazione è
fondamentale individuare le sfide che
dobbiamo affrontare.
Una sfida non è necessariamente un
problema ma l’elemento chiave della User
Experience, il fattore che trasforma
l’esperienza in conversioni.
Riconoscerle significa definire le priorità
nel design e circoscrivere gli obiettivi.

15. Mettere in discussione le proprie idee.

16. Mettere in discussione le proprie idee.
Chiedersi quanto buone siano le nostre
idee potrebbe rivelarsi l’idea migliore.
Una volta raccolte le sfide e valutate tutte le
possibili strade per superarle, fermiamoci il
tempo necessario per valutarle criticamente
Esistono molti modi di mettere in discussione
le soluzioni di design.
Raccogliere i feedback e apprendere, è lo
strumento più potente per ottenere
esperienze utente migliori.

17. Ora vediamo
i 2 momenti
in pratica

18. Progettazione e realizzazione del nuovo e-
commerce e catalogo B2B di uno dei marchi
storici delle macchine da caffè e del design
italiano.

19. Presenza di due cataloghi: consumer e professional
Coesistenza di due modelli di conversione
Coerenza dei modelli di navigazione
Quali i «design challenge» del progetto?

20. Definizione dei contenuti
e struttura dei menu
Design dei layout e dei
pattern di interazione
Anatomia di un flusso di
User Experience Design

21. Architettura Informativa e layout dei menu devono rapidamente
informare l’utente su quali siano i prodotti e le categorie dell’e-
commerce.
Sveliamo il design

22. Segmentando i contenuti:
• si aumenta la coerenza semantica dell’architettura;
• si aumentano la prevedibilità dell’architettura e la trovabilità
delle informazioni;
• si favorisce la facilità di apprendimento dei percorsi di
navigazione.
Sveliamo il design

23. I menu di categoria devono essere facilmente accessibili da ogni
pagina dell’e-commerce e utilizzati in maniera coerente all’interno delle
varie sezioni.
I layout devono focalizzare l’attenzione dell’utente sul catalogo,
proponendo pattern di interazione facilmente riconoscibili.
Sveliamo il design

24. I contenuti in pagina devono essere gerarchizzati
per guidare l’attenzione dell’utente.
I fattori che incidono sono:
• posizione degli elementi;
• dimensioni (relative e assolute);
• spazi negativi;
• colori e saturazione;
• titolazioni.
Sveliamo il design

25. Per assecondare due flussi di conversione differenti,
sono stati progettati due template di scheda prodotto
e due soluzioni di navigazione distintive.
Sveliamo il design

26. Analisi e testing con utenti delle nuove ipotesi di
Architettura Informativa per un leader di mercato
dell’elettronica di consumo.

27. Che cosa mettere in discussione?
La trovabilità dei contenuti e dei prodotti
Esplorabilità della architettura informativa
Coerenza e comprensibilità del labeling

28. Anatomia di un flusso di
testing sull’IA
Definizione dei
compiti
Analisi dei dati
• test remoto
• diversi segmenti di mercati

29. Task statistics
vista sulle performance
US
UK
MY
Le performance dell’architettura informativa variano
molto a seconda dei segmenti di mercato.

30. Pietree
i path di navigazione

31. Alcune evidenze
La classificazione imposta dal catalogo dei prodotti non
coincide sempre con il modello mentale di ricerca degli utenti.
Quanto più un nome o un form factor sono di conoscenza diffusa tanto
più aumenta l’efficienza della classificazione: meno tempo per trovare il
contenuto e meno errori.
Sistemi di categorizzazione complementari facilitano la ricerca delle
informazioni.
La navigazione orizzontale consente di creare dei ponti tra il modello
mentale di ricerca e la classificazione dei prodotti.

32. Grazie!
venite a trovarci allo stand
D 10
giuseppe.teatino@tsw.it
luca.rodighiero@tsw.it
© illustrazioni di Tang Yau Hoong