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

Transcript

1

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. Questa sintesi è una semplificazione di una realtà molto più articolata, ma ci è utile per comprendere le basi della progettazione di un e-commerce. La verifica (testing).

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 Quali i «design challenge» del progetto? Presenza di due cataloghi: consumer e professional Coesistenza di due modelli di conversione Coerenza dei modelli di navigazione

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

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

22 Sveliamo il design 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.

23 Sveliamo il design 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.

24 Sveliamo il design 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.

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

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 test remoto diversi segmenti di mercati Analisi dei dati Definizione dei compiti

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