Don't make me think

Non siamo forse tutti UX co-designer quando lavoriamo in team per creare un sito, un'app o anche una semplice landing page?

Nessun prototipo, da solo, potrà mai portare ad un'esperienza leggera ed appagante, ad un percorso emotivo che stimola senza appesantire e tiene alti coinvolgimento e soddisfazione. Solo integrando progettazione e sviluppo si può creare quell'insieme di sensazioni, fatte di mille particolari, che chiamiamo good User Experience: un insieme di contesto d'uso, caratteristiche del sistema, aspettative e condizioni dell'utente.

Transcript

1. Un approccio di buon senso alla web usability e al design intelligente luisavalente.com valentinatarasco.com USER EXPERIENCE DON’T MAKE ME THINK
2. Web Cash Machine + UX per tutti (Luisa Valente) Design value (Valentina Tarasco) Parliamo di...
3. WEB CASH MACHINE Davvero non ci hai mai pensato?
4. Un business web di successo - Una buona idea - Non commercialmente sfruttata - I mezzi per realizzarla - Un’implementazione conforme alle specifiche E’ tutto? 4
5. E’ tutto? SEAT Pagine Gialle Annunci: - Idea: annunci gratuiti online. Negli USA Craiglist aveva già milioni di utenti Ha funzionato in Italia? Subito.it, Ebay annunci, Bakeca.it dimostrano di sì - Competitor: Nel 2005 in Italia non c’erano siti significativi di annunci gratuiti - Mezzi: SEAT PG aveva la forza economica e commerciale necessaria - Implementazione: un’intera azienda di tecnici svegli e capaci, acquisita per sviluppare il business online 5
6. In pratica Realizzazione: corretta, come richiesto dal management Risultato: business che non decolla 2005: Bakeca, Ebay annunci (Kijiji), Vivastreet 2007: Seat PG, Subito.it Che cosa non ha funzionato? 6
7. USER EXPERIENCE The willingness to be wrong
8. User Experience “User experience is a process of discovery, vision definition, strategy, planning, execution, measurement and iteration. It requires flexibility, and a willingness to be wrong until you are right.” Robert Hoekman jr 8
9. Questioning assumptions “Before we ran the experiment, the campaign staff heavily favored “Sam’s Video” (...). That would have been a huge mistake since it turns out that all of the videos did worse than all of the images.” Dan Siroker Director of Analytics for the Obama 2008 campaign 9
11. User Experience Ciò che una persona prova quando utilizza un prodotto, un sistema o un servizio. (...) concerne gli aspetti esperienziali, affettivi, l’attribuzione di senso e di valore collegati al possesso di un prodotto e all’interazione con esso, ma include anche le percezioni personali su aspetti quali l’utilità, la semplicità d’utilizzo e l’efficienza del sistema. wikipedia.org 11
12. 12 Contesto d’uso
13. 13 Usabilità
14. CUSTOMER JOURNEY Mapping the experience
15. Design thinking 15 Jeanne Liedtka
16. What works? 16 Jeanne Liedtka
17. Customer journey map 17 Rail Europe Experience Map adaptivepath.com
19. NAMING Mist & Gift
20. Naming & payoff 20 Piccola utilitaria innovativa per il mercato Europeo nomen.it
21. Toyota Yaris y - richiama la casa madre Toyota; evoca ricercatezza (fonetica); ia - (suono aperto → spazialità) contrapposizione di sillabe: ris - (più chiusa → eleganza, raffinatezza) (fonetica). Facilmente pronunciabile in tutte le lingue d'Europa (linguistica). Neologismo: no problemi tutela e registrabilità marchio (legale). Percorso creativo: 'tuareg' → 'miareg' → 'lareg' → 'iareg' → 'iaris' 21
22. Renaming Country Mist - Estee Lauder In inglese “Nebbiolina di campagna”. In tedesco mist → letame Perlana, Ariosto, Menthos Non solo per lana, arrosto e alla menta Federal Express → FedEx Più breve, incisivo, facilmente memorizzabile 22
23. Naming audace 23
24. LEg GOdt - Gioca bene 24
25. Ciro’s Häagen-Dazs 25 Inventato a tavolino dal proprietario per dare un'immagine di qualità nord-europea al prodotto. Prima si chiamava Ciro’s. nomixprofessional.it
26. LOGO & BRAND IMAGE Tutto in un simbolo
27. Logo 27
28. Font 28
29. Trustability 29
30. CONTENT & COPY Evocare mondi con le parole
31. Content & copy Il 98% di chi compra vino on-line non acquista direttamente sui portali delle cantine (winenews.it) 31
32. 32 Copy emotions Se vuoi costruire una nave, non radunare gli uomini per raccogliere il legno e distribuire i compiti ma, insegna loro la nostalgia del mare ampio e infinito. Antoine de Saint-Exupèry Il Piccolo Principe
33. In bocca è un’esplosione di morbidezza ed eleganza. Gusto asciutto e ben bilanciato. Gradevoli cenni di pietra focaia e grafite sul finale. Il frutto è compatto e rigoroso. In bocca è verticale, sapido, pieno, un abbraccio raro di potenza ed eleganza. Finale eterno. Shygeru Hayashi 33 Il vino che non c’è
34. MARKETING Let me think!
36. INFORMATION ARCHITECTURE Building the knowledge
37. Categories 37
38. Mustelidi 38 4 livelli di categorie Orologi subacquei: Sport > Accessori vs Orologi > Orologi sportivi
39. SEO & SEMANTIC What do you really mean?
40. SEO classica 40
41. SEO classica 41 SEO classica: metatag semi- nascosti: metadescription, title, keyword + testi (per spider) + h1
42. Semantica 42 Mentre nella SEO classica si potevano utilizzare contenuti ad hoc (non visibili o mantenuti in secondo piano rispetto all'utente), nella semantica → tutto ciò che ha il markup semantico è visibile per l'utente. → la pagina deve avere un'organizzazione dei dati compatibile con la struttura definita nell'ontologia. Quindi serve la collaborazione di diverse professionalità: - copy (forma dei contenuti) - esperto di semantica (ontologia) - sviluppatore (struttura dei dati nel DB) - ux & graphic designer (visione di pagina e interazioni)
43. 43 Semantica: markup del contenuto visibile strutturato semanticamente
44. INTERACTION DESIGN Seamless
45. 45 Multi-step booking (1/3)
46. 46 Multi-step booking (2/3)
47. 47 Multi-step booking (3/3)
48. 48 Mono-step booking
50. DEVELOPERS’ UX Frontend
51. Details matter 51
52. Standard checkout 52
53. Do you ♥ CF? 53
54. Form 54
55. Validazione 55
56. MegaForm 56 Per la pubblicazione di annunci gratuiti, Seat (che non era monopolista) chiedeva agli utenti il Codice Fiscale e un mega-form di dati: → muro di gomma per gli utenti Regola empirica: La quantità (megaform) e la qualità (CF) dei dati ottenibili da un utenze senza farlo rimbalzare è direttamente proporzionale alla motivazione dello stesso e inversamente proporzionale alle alternative (altri siti che offrono lo stesso servizio) disponibili per ottenere quello che vuole.
57. Validazione UGC 57 Inoltre Seat, per la propria posizione commerciale nel cartaceo, doveva garantire la propria immagine → validando gli annunci prima della pubblicazione I competitor erano imprese nuove senza business collegati da tutelare. Seat poteva creare un sottobrand, se avesse dato peso al problema. Pubblicare gli UCG con controllo a valle (team di qualità e sistemi automatici) è più rischioso, ma spesso si fa per maggiore soddisfazione dell’ utente.
58. Validazione indirizzo 58 Si fa con le API di Gmaps per la geolocalizzazione, ma attualmente non tutti gli indirizzi "validi" sono geolocalizzati. Opzioni: ° non farla → possibili dati fake nel DB ° farla in modo restrittivo → solo indirizzi validati in DB: gli utenti rimbalzano ° farla in modo opzionale → possibili indirizzi fake in DB, ma meno errori (autocomplete). Il sistema può supportare gli editor segnalando i dati validati
59. Validazione campi 59 La validazione dei dati di un form è legata ai domini dei dati stessi, definiti dallo sviluppatore in fase di progettazione e realizzazione delle tabelle del DB. Solo lo sviluppatore conosce i dettagli di questi limiti e può definire correttamente le procedure di validazione dei dati stessi. → Validazione password: assistere l’utente senza opprimerlo → Validazione email: fatta con espressioni regolari (buon compromesso tra ux e correzione dati, ma se fatta "troppo bene"... → nuovi domini)
60. DEVELOPERS’ UX Backend
61. Backend 61 Di solito il backend non è prototipato per: - mancanza di tempo - mancanza di risorse - sottovalutazione del problema La responsabilità della sua creazione è lasciata completamente allo sviluppatore: → admin di default con poche customizzazioni indispensabili Risultato: backend ostico per l’utilizzatore finale
62. User & backend 62 Chi usa il backend si aspetta che suoi contenuti riflettano il frontend. Ad esempio: → homepage con news in evidenza, ciascuna con abstract e thumbnail. → Backend: gestione della homepage che include la scelta della thumbnail delle news in evidenza
64. Developer & backend 64 Il backend effettivamente realizzato tende a riflettere → l’organizzazione dei dati all’interno del DB (entità e relazioni), cioè, in un certo senso, un phpMyAdmin evoluto.
66. Soluzione (devel) 66 - Prendere coscienza della situazione - Adottare le contromisure disponibili: ° coltivare lo spirito UX che è nello sviluppatore ° mettere (almeno) degli shortcut ° includere la gestione di elementi dipendenti negli elementi principali (es. un commento è relativo ad un solo post? Sarà gestito all’interno di quel post)
67. Soluzione (user) 67 Spiegare a chi utilizza il backend che: → non è logicamente possibile creare un backend con la stessa navigazione e le stesse funzionalità del backend Nel backend si fanno scelte e navigazioni più approfondite rispetto al frontend. (es. se selezioni una thumb da un elenco di immagini della news, sei già in un contesto che non corrisponde esattamente al frontend) Si può sempre pensare di creare dei widget all’interno dell’elemento in pagina, ma un backend frontend-izzato (o viceversa) diventa molto pesante.
68. Backend di Wordpress 68 Plugin e temi di WP sono realizzati da sviluppatori e rivolti a diversi tipi di utilizzatori: - dal puro editor (post, elementi di portfolio) - all’utente smart che fa selezioni di customizzazione del tema (colori, font, etc) e installazione di plugin - a sviluppatori
69. Rintracciabilità 69 In WP lo sviluppatore non può inserire i propri elementi nei punti in cui l’utente si aspetterebbe di trovarli. → Problemi di rintracciabilità di elementi nella complessità della piattaforma Spesso per l’utente è più complicato scoprire dove è previsto che si faccia una data operazione che realizzarla. Nei limiti imposti dalla struttura della piattaforma, si tenta, in varia misura, di favorire l’utente (es. link Modifica nel frontend dei temi, widget gestiti drag&drop, ect)
70. UX SURVIVAL KIT
71. UX Survival kit 71 - Un buon team: affiatato, curioso, collaborativo - La capacità di guardare le cose con gli occhi degli altri - Dosi omeopatiche di buonsenso* web quotidiano *capacità naturale dell'individuo di valutare e distinguere il logico dall'illogico, l'opportuno dall'inopportuno, e di comportarsi in modo giusto, saggio ed equilibrato, in funzione dei risultati pratici da conseguire - wikipedia.org - Momenti di scarso buonsenso & outside the box thinking (UX boost) - Ma soprattutto...
72. 73 A button to nowhere against marketing pressure
73. DESIGN VALUE Com’è cambiato il mondo del web design
74. designer developer Situazione attuale 1 74
75. Situazione attuale 2 DESIGN: diamo valore al valore Due modelli aziendali: quelli che cambiano e quelli che non cambiano. Il web design non è più visto come l’ultimo tassello della comunicazione. Oggi il web è il primo contatto con un potenziale cliente. 75
76. 76 Gli investitori che hanno investito in aziende DESIGN INDEX 10.000 $, in 10 anni hanno avuto un ritorno del 228% più alto rispetto alla stessa cifra investita in aziende tradizionali.
77. Cosa significa? Quando si fa parte di un team qualsiasi persona è responsabile della qualità del design del prodotto finale. Il design è un’ opportunità di business e, come tale, deve essere parte della strategia globale dell’ azienda. Il design assume un ruolo centrale per ottenere dei vantaggi 77 sketchin.ch
78. COSA DETERMINA UN BUON DESIGN?
79. Organizzazione Contenuto Colori Font Leggibilità Coerenza Chiarezza Distinguibilità
80. 1.Coerenza e personalità Ogni brand ha una propria personalità creata dall’ immagine che trasmette, quest’ultima deve essere mantenuta in tutte le pagine. 80
81. Cos’è la personalità di un brand? É il carattere del Brand che serve a creare differenziazione, unicità e riconoscibilità durevoli nel mercato. 81
88. La grafica ha il compito di valorizzare l’organizzazione dei contenuti. 2.Organizzazione dei contenuti 88
91. L’insieme dei due elementi deve creare armonia e aiutare l’utente nell’interazione. Più colori e font utilizzo e meno sarò di aiuto. 3.Uso dei colori e dei font 91
95. Confronto
96. Look inside yourself. Then look outside. luisavalente.com valentinatarasco.com