User Experience per prodotti e servizi digitali. Elisabetta Schiatti

  • 26,414 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
26,414
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. USER EXPERIENCE PER PRODOTTI E SERVIZI DIGITALI
  • 2. COPYRIGHT GAIA SRL 2013 ELISABETTA SCHIATTI 3 HEAD OF EXPERIENCE DESIGN IN GAIA Progetto interfacce digitali e esperienze da oltre 10 anni. Adesso aiuto i clienti a superare i silos e realizzare servizi di valore per i loro utenti.
  • 3. COPYRIGHT GAIA SRL 2013 LA STORIA INIZIA CON... 4 CLIENT BRIEF il suo é un detergente di qualità, specialistico per la pulizia della casa, costoso. In Italia è in vendita da qualche anno, ma il mercato non sta reagendo come aspettato. Le vendite non vanno così bene. Il Cliente ci chiede di trovare un’idea che possa sfruttare al meglio il mondo digital e che possa avere effetti positivi, direttamente o indirettamente, sulle vendite.
  • 4. COPYRIGHT GAIA SRL 2013 QUALE ESPERIENZA? a chi ci rivolgiamo? che esigenze hanno le persone interessate? quali sono le conversazioni in atto? quali sono i motivi di scelta? com’è il confronto con i competitor? come coesiste con il brand? come si immerge nella realtà delle persone? qual è la percezione? quali altri punti di contatto esistono già? 5
  • 5. COPYRIGHT GAIA SRL 2013 L'esperienza è il vissuto personale che si fonda sugli stimoli prodotti da un fenomeno. È tipicamente ottenuta tramite il coinvolgimento (l'esposizione, l’utilizzo, l'osservazione). Wikipedia ESPERIENZA 6
  • 6. COPYRIGHT GAIA SRL 2013 7 Quotidianamente noi VIVIAMO ESPERIENZE CON I BRAND, CON I PRODOTTI E SERVIZI DIGITALI
  • 7. COPYRIGHT GAIA SRL 2013 VIVIAMO ESPERIENZE D’USO OGNI GIORNO 8
  • 8. “ COPYRIGHT GAIA SRL 2013 L’ESPERIENZA D’USO L’esperienza d’uso - User experience (UX) - è la qualità dell’esperienza fatta da una persona nell’interagire con un determinato artefatto. Questo può variare da un singolo oggetto, un giocattolo, una tazza, un sito web, a un sistema integrato di esperienze come un museo o un aeroporto. User Experience Network http://www.uxnet.org 9
  • 9. “ COPYRIGHT GAIA SRL 2013 USER EXPERIENCE •TO MEET THE EXACT NEEDS OF THE CUSTOMER •SIMPLICITY AND ELEGANCE THAT PRODUCE PRODUCTS THAT ARE A JOY TO OWN, A JOY TO USE •BE A SEAMLESS MERGING OF THE SERVICES OF MULTIPLE DISCIPLINES Nielsen Norman Group http://www.nngroup.com/about/userexperience.html 10
  • 10. UXHAPPENS THEIMPORTANCEOF USEREXPERIENCE www.experiencedynamics.com
  • 11. COPYRIGHT GAIA SRL 2013 ANEDDOTO ? $ 12
  • 12. COPYRIGHT GAIA SRL 2013 LA UX VA PROGETTATA L’ESPERIENZA D’USO AVVIENE SEMPRE 13
  • 13. COPYRIGHT GAIA SRL 2013 LA UX VA PROGETTATA È necessario impostare e coordinare le azioni per determinare una buona esperienza: la strategia UX. Il successo di una strategia UX è direttamente proporzionale all’abilità di un’azienda di coordinare business development, comunicazione e marketing, prodotto, contenuti, produzione, IT, vendite e customer care. 14 Una strategia UX di successo è il risultato del lavoro COORDINATO di tutta l’azienda, orientato al SERVIZIO e alla PERSONA.
  • 14. COPYRIGHT GAIA SRL 2013 PROGETTARE LA UX SIGNIFICA… Offrire prodotti e servizi che facilitino l’esperienza d’utilizzo sotto molteplici aspetti, in modo da attribuire valore all’esperienza stessa e a chi ce l’ha fornita. Desiderabile Crea una connessione emozionale profonda Piacevole È percepito positivamente Soddisfa un bisogno importante Lo comprendo e lo posso usare Mi piace e me lo godo Non posso vivere senza Usabile Funziona in maniera comprensibile Utile Risponde ad una specifica esigenza 15
  • 15. COPYRIGHT GAIA SRL 2013 PROGETTARE LA UX SIGNIFICA… 16 Non funziona!! OK, fatto Lo adorooooo U S A B I L I T Y PLEASURE
  • 16. COPYRIGHT GAIA SRL 2013 17 ...E UX NON È UI L’esperienza non è (solo) l’interfaccia. Una infografica di cereali per il confronto tra user experience e user interface. By @ED_LEA, www.usabilitycounts.com PRODUCT UX UI SERVER DATACENTER
  • 17. COPYRIGHT GAIA SRL 2013 Esperienze grandiose – musica LA MAGIA MUSICALE DI SHAZAM 18
  • 18. COPYRIGHT GAIA SRL 2013 Esperienze grandiose – intrattenimento ITUNES ECOSYSTEM 19
  • 19. COPYRIGHT GAIA SRL 2013 Esperienze grandiose – correre NIKE+ 20
  • 20. Esperienze grandiose – leggere FLIPBOARD SU IPAD 21COPYRIGHT GAIA SRL 2013
  • 21. COPYRIGHT GAIA SRL 2013 Esperienze grandiose – mobile shopping TESCO HOMEPLUS 22
  • 22. COPYRIGHT GAIA SRL 2013 LA UX DI SUCCESSO 23 curare l’esperienzacomplessiva, superandola dicotomia digitale/offline offrire prodotti e servizi semplici e naturali assicurarsi che i prodotti ei servizi si inseriscano nell’esperienza quotidiana aumentandone il valore far si che prodotti e servizi si integrino nella vita reale I fattori che contraddistinguono una buona progettazione
  • 23. LA PRIMA IMPRESSIONE CONTA Ux di successo – consigli pratici 24COPYRIGHT GAIA SRL 2013
  • 24. COPYRIGHT GAIA SRL 2013 LA PRIMA IMPRESSIONE CONTA Ux di successo – consigli pratici 25
  • 25. Ux di successo – consigli pratici SERVIZIO ATTENTO 26COPYRIGHT GAIA SRL 2013
  • 26. Ux di successo – consigli pratici PERSONALIZZAZIONE 27COPYRIGHT GAIA SRL 2013
  • 27. COPYRIGHT GAIA SRL 2013 Ux di successo – consigli pratici ATTENZIONE AI DETTAGLI 28
  • 28. Ux di successo – consigli pratici FEEDBACK 29COPYRIGHT GAIA SRL 2013
  • 29. Ux di successo – consigli pratici FUN 30COPYRIGHT GAIA SRL 2013
  • 30. COPYRIGHT GAIA SRL 2013 FARE UX È 31 •CREARE ESPERIENZE •COINVOLGERE GLI UTENTI •SEMPLIFICARE LE INTERFACCE •USARE LA TECNOLOGIA COME FATTORE ABILITANTE •RENDERE NATURALE •COMUNICARE E INFLUENZARE
  • 31. COPYRIGHT GAIA SRL 2013 COME CREARE L’ESPERIENZA D’USO? PROGETTANDO PER LE PERSONE 32
  • 32. COPYRIGHT GAIA SRL 2013 LA PERSONA AL CENTRO Lo User Centered Design è una metodologia progettuale che mette la persona al centro del progetto, coinvolgendolo e indagandone le motivazioni, gli interessi, gli obiettivi e le esigenze. 33 Basato su 3 principi: • reale focalizzazione sulle persone, coinvolgimento continuo degli utenti in tutte le fasi (analisi e ricerca, ideazione, prototipazione, testing, monitoraggio) • processo iterativo del design, cicli successivi di prototipi-test-refinement • team multidisciplinari
  • 33. COPYRIGHT GAIA SRL 2013 IL PROCESSO I 5 PASSAGGI CHIAVE PER LO UX DESIGN 34
  • 34. Studiare gli utenti e il business COMPRENDERE 35COPYRIGHT GAIA SRL 2013
  • 35. COPYRIGHT GAIA SRL 2013 Esplorare e generare soluzioni progettuali adeguate SCOPRIRE E IDEARE 36
  • 36. COPYRIGHT GAIA SRL 2013 Definire con l’utente il dettaglio progettuale del prodotto o servizio PROGETTARE 37
  • 37. COPYRIGHT GAIA SRL 2013 Trasformare il progetto in una soluzione reale REALIZZARE 38
  • 38. Monitorare la qualità dell’esperienza e migliorarla costantemente EVOLVERE 39COPYRIGHT GAIA SRL 2013
  • 39. COPYRIGHT GAIA SRL 2013 IN POCHE MOSSE I PUNTI CRUCIALI DEL PROCESSO 40
  • 40. COPYRIGHT GAIA SRL 2013 1. FARE RICERCA 41
  • 41. COPYRIGHT GAIA SRL 2013 COMPRENDERE LE PERSONE QUALI SONO GLI OBIETTIVI E LE ESIGENZE DEL BUSINESS? QUALI SONO I REALI BISOGNI DEGLI UTENTI? QUALI SONO LE LORO MOTIVAZIONI? Attività: Analisi dei business requirements e degli user needs 42
  • 42. COPYRIGHT GAIA SRL 2013 COMPRENDERE GLI STRUMENTI QUALI SONO GLI ATTUALI STRUMENTI A DISPOSIZIONE? COME VENGONO UTILIZZATI? Attività: Valutazioni esperte e analisi dell’as-is 43
  • 43. COPYRIGHT GAIA SRL 2013 COMPRENDERE IL PANORAMA COMPETITIVO QUALI SONO LE STRATEGIE ED I SERVIZI DI ALTRI SOGGETTI? COSA SI PUO’ IMPARARE DALLE ESPERIENZE POSITIVE? Attività: Benchmark e analisi letteratura 44
  • 44. COPYRIGHT GAIA SRL 2013 COME? FACENDO USER RESEARCH E SINTETIZZANDO GLI INSIGHT 45 La ricerca serve per individuare le necessità esplicite e inconsapevoli delle persone, per creare empatia verso le loro vite e comprendere le motivazioni e le attività nei vari contesti. Infografica by Jonathan Lupo “A start guide to UX Design”
  • 45. COPYRIGHT GAIA SRL 2013 LA SINTESI I dati collezionati con i vari strumenti di ricerca devono essere elaborati, organizzati, raggruppati e sintetizzati. La ricerca è un lavoro di gruppo! • Scrivere tutti gli insight su post-it • Raggruppare per affinità • Identificare pattern 46 Infografica by Jonathan Lupo “A start guide to UX Design”
  • 46. COPYRIGHT GAIA SRL 2013 Le Personas sono archetipi dell’utente, costruite a partire dai dati raccolti durante la ricerca PERSONAS 47
  • 47. COPYRIGHT GAIA SRL 2013 Illustra i bisogni, le azioni intraprese e gli stati emozionali dell’utente o della personas CUSTOMER JOURNEY 48
  • 48. COPYRIGHT GAIA SRL 2013 È il modello che rappresenta l’esperienza completa, nel tempo e cross canale EXPERINCE MAP 49
  • 49. COPYRIGHT GAIA SRL 2013 PERSONAS 50
  • 50. COPYRIGHT GAIA SRL 2013 QUALI INFO Le personas ci dicono: • chi sono gli utenti • quali sono le attività che vorrebbero fare • le motivazioni (perchè userebbero/ comprerebbero il nostro prodotto) • come il nostro servizio/prodotto si colloca nelle loro vite quotidiane 51 Le personas contengono:• IMMAGINE • NOME • CITAZIONE • INFORMAZIONI DI BACKGROUND• ATTRIBUTI • ATTIVITÀ • ESIGENZE E DESIDERI • OBIETTIVI (GOAL)
  • 51. COPYRIGHT GAIA SRL 2013 LE PERSONAS creano il focus di progetto, graziealla comprensione deglu utenticondivisa da tutti i team FOCUS aiutano ad identificare priorità e funzioni irrilevanti PRIORITÀ COMMON GROUND sono comprensibili da tutti efunzionano come strumento diriferimento dalla strategia allosviluppo È IMPEGNATIVO CREARE LE PERSONAS MA SERVONO DAVVERO? non sono la media degli utenti 52
  • 52. COPYRIGHT GAIA SRL 2013 PERSONAS 53
  • 53. Experience Map for Rail Europe | August 2011 STAGES DOING FEELING Research & Planning Shopping Booking Post-Booking, Pre-Travel Travel Post Travel People choose rail travel because it is convenient, easy, and flexible. Rail booking is only one part of people’s larger travel process. People build their travel plans over time. People value service that is respectful, effective and personable. EXPERIENCE Rail Europe Experience Map Kayak, compare airfare Google searches Research hotels Talk with friends Relevance of Rail Europe Enjoyability Helpfulness of Rail Europe Paper tickets arrive in mail • I’m excited to go to Europe! • Will I be able to see everything I can? • What if I can’t afford this? • I don’t want to make the wrong choice. • It’s hard to trust Trip Advisor. Everyone is so negative. • Keeping track of all the different products is confusing. • Am I sure this is the trip I want to take? • Website experience is easy and friendly! • Frustrated to not know sooner about which tickets are eTickets and which are paper tickets. Not sure my tickets will arrive in time. • Stressed that I’m about to leave the country and Rail Europe won’t answer the phone. • Frustrated that Rail Europe won’t ship tickets to Europe. • Happy to receive my tickets in the mail! • I am feeling vulnerable to be in an unknown place in the middle of the night. • Stressed that the train won’t arrive on time for my connection. • Meeting people who want to show us around is fun, serendipitous, and special. • Excited to share my vacation story with my friends. • A bit annoyed to be dealing with ticket refund issues when I just got home. View maps Arrange travel Blogs & Travel sites Plan with interactive map Review fares Select pass(es) Enter trips Confirm itinerary Delivery options Payment options Review & confirm Map itinerary (finding pass) Destination pages May call if difficulties occur E-ticket Print at Station Web raileurope.com Wait for paper tickets to arriveResearch destinations, routes and products Live chat for questions Activities, unexpected changes Change plans Check ticket status Print e-tickets at home web/ apps Look up timetables Plan/ confirm activities Web Share photos Share experience (reviews) Request refunds Follow-up on refunds for booking changes Share experience Buy additional tickets Look up time tables Stakeholder interviews Cognitive walkthroughs Customer Experience Survey Existing Rail Europe Documentation Opportunities Guiding Principles Customer Journey Information sources RAIL EUROPE THINKING • What is the easiest way to get around Europe? • Where do I want to go? • How much time should I/we spend in each place for site seeing and activities? • I want to get the best price, but I’m willing to pay a little more for first class. • How much will my whole trip cost me? What are my trade-offs? • Are there other activities I can add to my plan? • Do I have all the tickets, passes and reservations I need in this booking so I don’t pay more shipping? • Rail Europe is not answering the phone. How else can I get my question answered? • Do I have everything I need? • Rail Europe website was easy and friendly, but when an issue came up, I couldn’t get help. • What will I do if my tickets don’t arrive in time? • I just figured we could grab a train but there are not more trains. What can we do now? • Am I on the right train? If not, what next? • I want to make more travel plans. How do I do that? • Trying to return ticket I was not able to use. Not sure if I’ll get a refund or not. • People are going to love these photos! • Next time, we will explore routes and availability more carefully. Ongoing, non-linear Linear process Non-linear, but time based Communicate a clear value proposition. STAGE: Initial visit Connect planning, shopping and booking on the web. STAGES: Planning, Shopping, Booking Arm customers with information for making decisions. STAGES: Shopping, Booking Improve the paper ticket experience. STAGES: Post-Booking, Travel, Post-Travel Make your customers into better, more savvy travelers. STAGES: Global Proactively help people deal with change. STAGES: Post-Booking, Traveling Support people in creating their own solutions. STAGES: Global Visualize the trip for planning and booking. STAGES: Planning, Shopping Enable people to plan over time. STAGES: Planning, Shopping Engage in social media with explicit purposes. STAGES: Global Communicate status clearly at all times. STAGES: Post-Booking, Post Travel Accommodate planning and booking in Europe too. STAGE: Traveling Aggregate shipping with a reasonable timeline. STAGE: Booking Help people get the help they need. STAGES: Global GLOBAL PLANNING, SHOPPING, BOOKING POST-BOOK, TRAVEL, POST-TRAVEL Relevance of Rail Europe Enjoyability Helpfulness of Rail Europe Relevance of Rail Europe Enjoyability Helpfulness of Rail Europe Relevance of Rail Europe Enjoyability Helpfulness of Rail Europe Relevance of Rail Europe Enjoyability Helpfulness of Rail Europe Relevance of Rail Europe Enjoyability Helpfulness of Rail Europe Mail tickets for refund Get stamp for refund COPYRIGHT GAIA SRL 2013 MAPPE E PERSONAS La mappe possono rappresentare l’esperienza come modello generale oppure essere collegate alle personas, per distinguere i differenti journeys. 54
  • 54. COPYRIGHT GAIA SRL 2013 2. ESPLORARE SOLUZIONI 55
  • 55. COPYRIGHT GAIA SRL 2013 È una prima rappresentazione veloce dell’idea SKETCH 56
  • 56. COPYRIGHT GAIA SRL 2013 57 CARATTERISTICHE DELLO SKETCH Creare sketch è un modo per: pensare comunicare persuadere Gli sketch sono: versatili espressivi indicativi
  • 57. Il paper prototyping per comunicare le idee e condurre i primi test TEST EARLY, TEST OFTEN! 58COPYRIGHT GAIA SRL 2013
  • 58. COPYRIGHT GAIA SRL 2013 L’esperienza raccontata tramite una sequenza di punti chiave SCENARI E STORYBOARD 59
  • 59. COPYRIGHT GAIA SRL 2013 60 LE FORME TESTUALE STORYBOARD 1 2 3 VIDEO- SCENARIO http://www.youtube.com/watch?v=9c6W4CCU9M4
  • 60. COPYRIGHT GAIA SRL 2013 61 LA STORIA CHE RACCONTA La struttura di uno storyboard è sempre costituita da situazioni, azioni e contesto che illustrano: PROBLEMA 1 3 4SOLUZIONE 2 BENEFIT 3
  • 61. COPYRIGHT GAIA SRL 2013 62 COSA POSSIAMO RAPPRESENTARE gestures esperienze soluzioni ambienti interazioni device generici situazioni d’uso
  • 62. COPYRIGHT GAIA SRL 2013 63 ESEMPI STORYBOARD
  • 63. COPYRIGHT GAIA SRL 2013 64 ESEMPI STORYBOARD
  • 64. COPYRIGHT GAIA SRL 2013 65 ESEMPI STORYBOARD
  • 65. COPYRIGHT GAIA SRL 2013 66 ESEMPI STORYBOARD
  • 66. COPYRIGHT GAIA SRL 2013 3. PROGETTARE E TESTARE 67
  • 67. COPYRIGHT GAIA SRL 2013 PROGETTARE IL DETTAGLIO PROGETTARE CONTENUTI, INTERAZIONE E VISUAL DI QUALITA’ E COERENTI CON LA USER EXPERIENCE IDENTIFICATA Attività: Information Architecture, Interaction Design, Visual Design, Content Design 68
  • 68. COPYRIGHT GAIA SRL 2013 PROGETTARE VERIFICARE LE SOLUZIONI COINVOLGERE GLI UTENTI PER ACCERTARSI CHE LA SOLUZIONE IDENTIFICATA SIA DI REALE VALORE PER CHI LA USERÀ Attività: Prototyping e User test 69
  • 69. COPYRIGHT GAIA SRL 2013 Illustra la struttura di pagina e i comportamenti degli elementi WIREFRAME 70
  • 70. COPYRIGHT GAIA SRL 2013 I WIREFRAME Possono essere low-fi o ad alta definizione Contengono dettagli e annotazioni sul comportamento degli oggetti e sulle interazioni Dovrebbero essere sempre elaborati tenendo a mente i reali contenuti che la pagina ospiterà NON presentano la grafica 71
  • 71. COPYRIGHT GAIA SRL 2013 WIREFRAME: ESEMPI 72
  • 72. COPYRIGHT GAIA SRL 2013 WIREFRAME: ESEMPI 73
  • 73. Subito.it Ricerca Elementi principali 1. Intestazione 1.1 Nome e cognome dell'utente loggato. 2. Attività 2.1 Per questo elemento fare riferimento alla relativa documentazione. 3. Allarmi comportamentali 3.1 Titolo area 3.2 Periodo di riferimento 3.3 Indicatori di allarmi comportamentali e relativa numerosità. Il numero e la tipologia di indicatori è dinamico e potrà variare nel tempo. Ne vengono qui rappresentati alcuni a titolo esemplificativo: - numero clienti con profittabilità in discesa - numero clienti con disdetta addebito stipendio - numero clienti che hanno ricevuto impagati - numero clienti con bonifici ricorrenti verso altra banca - numero clienti che hanno effettuato reclamo 4. Andamenti Questa area ha lo scopo principale di offrire una rapida overview sull'andamento delle unità della rete, consentendone un rapito confronto. 4.1 Il titolo è dinamico e parte dal livello più alto visibile all'utente. Ad esempio un capo distretto vede gli andamenti delle succursali, un capo territorio vede gli andamenti dei distretti, gli uffici direzionali vedranno gli andamenti dei territori. Selezionando un elemento del grafico si apre un pannello di dettaglio in cui lo stesso grafico viene mostrato per il livello inferiore (se si seleziona un territorio, il pannello di dettaglio mostra lo stesso grafico per i distretti del territorio selezionato). 4.2 Filtro della tipologia di indicatore da visualizzare. Il numero e la tipologia di indicatori è dinamico e potrà variare nel tempo. 4.3 Riferimento temporale dei dati. In base alla tipologia di indicatore potrà proporre diverse tipologie di archi temporali. 4.4 Etichetta sintetica dell'elemento. A rollover compare la descrizione completa e il dato. 4.5 Indicatore del livello medio. Questo indicatore potrebbe variare in base alla tipologia di indicatore selezionato ed indicare il livello medio, il livello di tolleranza, l'obiettivo per il periodo di riferimento, etc... 5. Dati andamentali 5.1 Titolo 5.2 Filtro/i. Il numero e la tipologia di filtri disponibili dipende dalle abilitazioni a disposizione dell'utente loggato. Il numero e la tipologia di indicatori può essere dinamico e variare nel tempo. Al momento se ne prevede un numero che può variare da zero a cinque (nel caso di un unico portafoglio disponibile, questi verrà indicato tra parentesi di fianco al titolo e nessun filtro sarà visualizzato): - Portafoglio - Segmento - Succursale - Distretto - Territorio Esempi: Nel caso l'utente ricopra più ruoli, avendo in carico più portafogli, è visibile il filtro "Portafoglio", in cui è possibile selezionare il portafoglio desiderato. Alla selezione, i grafici sottostanti si aggiornano, visualizzando i dati relativi al portafoglio selezionato . Nel caso in cui l'utente abbia un portafoglio trasversale su più succursali, sono visibili sia il filtro "Succursale" che "Segmento", consentendogli quindi di poter vedere i dati relativi ad un dato portafoglio, sia a complessivo che a livello di singola succursale. Nota Quando si effettua la selezione di un valore relativo ad un filtro, i valori degli altri filtri possono essere aggiornati di conseguenza, visualizzando esclusivamente i valori disponibili. Ad esempio selezionando un dato segmento, i portafogli disponibili verranno aggiornati, così come le succursali nel caso di selezione di un distretto. Alla selezione, i grafici sottostanti si aggiornano, visualizzando i dati relativi al portafoglio selezionato . 5.3 Grafici:Il numero e la tipologia di grafici è dinamico e potrà variare nel tempo. Ne vengono qui rappresentati alcuni a titolo esemplificativo: - Volumi - Volumi impieghi - Volumi raccolta - Clienti: - variazione 8 cifre clienti persi; variazione 8 cifre assoluto; variazione clienti obiettivo; - Economici: - valore marg. d'interm del portafoglio con andamento - ricavi da servizi netti - Indicatori: - cross selling totale - Rischio: - % sconfini rate scadute Negli esempi riportati, per ogni indicatore è possibile selezionare il riferimento temporale. Alcuni potrebbero avere come periodo di riferimento il mese, altri il trimestre. Nel caso di alcuni indicatori potrebbe essere possibile visualizzare i dati per archi temporali diversi, come ad esempio: ieri, ultimi 7gg, ultimi 30gg. Questo può essere il caso di indicatori come conti aperti/chiusi, clienti persi/nuovi. 1.1 2.1 3.1 3.2 3.3 5.1 5.2 5.3 1.01 1.02 1.03 1.05 1.04 4.1 4.2 4.3 4.5 4.4 COPYRIGHT GAIA SRL 2013 WIREFRAME: ESEMPI 74 Diretta Tv / Rai 2 Ballarò 0 social <utente> 16.00 0 19.00 esci il tuo commento username testo del commento testo del commento testo del commento testo 7m username testo del commento testo del commento testo del commento testo 7m username testo del commento testo del commento testo del commento testo 8m username testo del commento testo del commento testo del commento testo 9m username testo del commento testo del commento testo del commento testo 10m extra cambia canale Rai 1 Rai 2 Rai 1 Rai 1 Rai 1 Rai 1 Rai 1 Rai 1 Rai 1 titolo del contenuto sync 2 altri correlati titolo suggerito 1 brevissima descrizione del contenuto titolo suggerito 2 brevissima descrizione del contenuto titolo suggerito 3 brevissima descrizione del contenuto titolo del contenuto sync 1 testo domanda del sondaggio f SONDAGGIO <img dei risultati> Gradimento in tempo reale HOT Si parla di keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, keyword, Vota 6 1 tag cloud semantica 1 3 Bottone per fare il refresh del feed. Non so se il refresh deve andare qui o se sta nella app bar in basso 3 5 5 l'immagine è una live tile dei risultati. Al click/tap si va nella pagina del sondaggio per votare 6 il colore del box dipende dal livello del gradimento in tempo reale. Parte da freddo=blu e arriva a caldissimo=rosso Scala a 5 2 2 scrittura del commento. Al tap su icona (o invio da tastiera) il post va nel feed dei commenti. 4 4 Feed dei commenti. Per ora include sia post interni MyRai sia esterni (da FB e Twitter). Se dovessero eliminare i post esterni, qui sarebbero elencati solo i feed da MyRai. Per ora ciascun post è visualizzato con: - img thumb dell'utente - username utente - numero di minuti passati dal post di quel commento - testo del commento - simbolo che identifica la provenienza esterna (FB o Twitter) Il feed è scrollabile (infinite scrolling) fino ai commenti di inizio programma. Il caricamento avviene a blocchi.
  • 74. COPYRIGHT GAIA SRL 2013 Simula il prodotto finale e permette di verificare la bontà della soluzione ideata PROTOTIPO 75
  • 75. COPYRIGHT GAIA SRL 2013 PROGETTAZIONE IN SEQUENZA 76 sketch wireframe prototipo Aiuto Cuoco (Marzo 2013) Part-time per orari serali nel week end. Zona Bovisa, Milano. Path Job Modifica Home Località corrente Aggiorna Modifica località (CON OPZIONE DISEGNA RAGGIO) visualizzazione cerco/offro +filtro temporale Profilo Personale Inserisci annuncio Segnala offerta Cerco Lavoro Annunci di lavoro Apprendista Elettricista (Aprile 2013) Cercasi Apprendista Elettricista. Via Tortona, Milano. Cameriere (Marzo 2013) Cameriere con esperienza. Orario serale. Milano. Cuoco (Marzo 2013) Salsiere e rosticciere. Non richiesta esperienza prolungata. P.zza del Carmine, Milano. Aiuto Cuoco (Marzo 2013) Part-time per orari serali nel week end. Zona Bovisa, Milano. Trova l'annuncio o Segnala annuncio Inserisci profilo Offro Lavoro Inserisci Annuncio Cerca il candidato Scegli il candidato Visualizza Profilo Completo Gaia Cameriere Visualizza Profilo Completo Gaia Cameriere Visualizza Profilo Completo Gaia Cameriere
  • 76. COPYRIGHT GAIA SRL 2013 ...INCLUSI I CONTENUTI 77
  • 77. COPYRIGHT GAIA SRL 2013 FRANK LLOYD WRIGHT ONCE SAID “YOU CAN FIX IT ON THE BOARD WITH AN ERASER, OR ON THE CONSTRUCTION SITE WITH A SLEDGE HAMMER.” PROTOTYPING IS THE ERASER. 78 Fonte: “Prototyping, a practitioners guide” di T. Warfel
  • 78. COPYRIGHT GAIA SRL 2013 Verificare le ipotesi di design con il coinvolgimento degli utenti USER TEST 79
  • 79. COPYRIGHT GAIA SRL 2013 GLI USER TEST Consistono nel testare un prototipo in una sessione individuale con l’utente, dove dovrà portare a termine una serie di task prefissati. I test possono essere condotti: •live in laboratorio o contestuali (user test) •in modalità remota (remote test) •in modalità non moderata (unmoderated usability test) 80
  • 80. COPYRIGHT GAIA SRL 2013 81 PERCHÈ IL TEST? • Per verificare la qualità dell’interazione tra l’utente e il prodotto • Per capire se ci sono problemi nell’esperienza d’uso di un prodotto prima che arrivi sul mercato • Per comprendere come creare prodotti che siano vicini alle esigenze degli utenti e ai loro modelli mentali
  • 81. COPYRIGHT GAIA SRL 2013 82 GLI UTENTI Gli utenti che testeranno il prototipo devono essere rappresentativi della popolazione che userà/acquisterà il servizio o prodotto. Prima del test deve essere preparato il panel, con le caratteristiche del campione da testare. É più facile trovare le giuste persone affidandosi a società di recruiting. GUERRILLA USER TESTING è meglio testare con utenti GENERICI (amici, colleghi, parenti, studenti) che non testare affatto!
  • 82. COPYRIGHT GAIA SRL 2013 I PRINCIPI GENERALI GLI STRUMENTI PER LA PROGETTAZIONE 83
  • 83. COPYRIGHT GAIA SRL 2013 84 LA BUONA PROGETTAZIONE l’esperienza è la stessa in tutti i punti del prodotto CONSISTENZA l’utente è sicuro che privacy eintegrità saranno garantite per tuttele informazioni, i task e le attivitàeseguite SICUREZZA il prodotto è semplice da usare efacile da comprendere CHIAREZZA l’esperienza e i compiti sono svolticon rapidità (in linea con leaspettative sulla tecnologia) VELOCITÀ gli utenti si sentono invogliatiall’utilizzo e le CTA li invitanoall’azione COINVOLGIMENTO il prodotto funziona nella manieraattesa dall’utente INTUITIVITÀ l’utente può raggiungere il propriogoal con il numero minimo dipassaggi EFFICIENZA dei contenuti RILEVANZA
  • 84. COPYRIGHT GAIA SRL 2013 85 I PRINCIPI GENERALI • Modello concettuale • Visibilità/Manipolazione diretta • Mapping • Affordances e vincoli • Feedback • Coerenza e standard • Presentazione appropriata • Errori
  • 85. COPYRIGHT GAIA SRL 2013 IL MODELLO CONCETTUALE FORNIRE UN BUON MODELLO CONCETTUALE Fare in modo che l’immagine del sistema fornisca le informazioni essenziali per capire la struttura ed il funzionamento. Esistono alcuni accorgimenti che aiutano nella costruzione del corretto modello mentale dell’artefatto: • sfruttare i vincoli naturali e artificiali • sfruttare gli inviti d’uso (le affordance) • sfruttare il mapping naturale • migliorare la visibilità delle attività possibili • aiutare la comprensione e la valutazione delle azioni affettuate 86
  • 86. COPYRIGHT GAIA SRL 2013 87 I PRINCIPI PER I CONTENUTI facilmente identificabile FINDABLE l’utente riesce a percepire un valore,migliora la soddisfazione e eccellenel soddisfare le aspettative anchetra i vari canali VALUABLE (rilevanza) per disabilità, per varietà di canali edevice ACCESSIBILITÀ inaspettato, straordinario, superiorealle aspettative DESIDERABILITÀ produce i risultati desiderati oaspettati UTILITÀ facile da memorizzare, dasintetizzare LEARNABLE personalizzato, flessibile FLUIDITÀ facilmente comprensibile CHIAREZZA è affidabile e appropriato CREDIBILITÀ
  • 87. COPYRIGHT GAIA SRL 2013 IL CONTESTO E IL DEVICE GLI STRUMENTI PER LA PROGETTAZIONE 88
  • 88. Attività brevi e a raffica MICROTASKING 89COPYRIGHT GAIA SRL 2013
  • 89. Scoprire cosa c’è intorno LOCAL 90COPYRIGHT GAIA SRL 2013
  • 90. Come strumento per abbattere la noia INTRATTENIMENTO 91COPYRIGHT GAIA SRL 2013
  • 91. Come strumento per abbattere la noia INTRATTENIMENTO 92COPYRIGHT GAIA SRL 2013
  • 92. Effettuare attività complesse PRIMO ACCESSO 93COPYRIGHT GAIA SRL 2013
  • 93. COPYRIGHT GAIA SRL 2013 94 PRINCIPI AGGIUNTIVI progettare per il touch (eschermi piccoli) semplificare la navigazione progettare per unaconnettività intermittente definire le priorità deicontenuti minimizzare gli inputdegli utenti offrire un’integrazionecoerente con gli altricanali
  • 94. COPYRIGHT GAIA SRL 2013 I PATTERN GLI STRUMENTI PER LA PROGETTAZIONE 95
  • 95. COPYRIGHT GAIA SRL 2013 I PATTERN I pattern sono soluzioni a sfide progettuali comuni, come la navigazione, la visualizzazione dei dati o il feedback all’utente. Ad oggi esistono numerose gallery che forniscono ispirazione per la progettazione di dettaglio, sia per il desktop sia dedicate esclusivamente al mondo mobile. 96
  • 96. COPYRIGHT GAIA SRL 2013 UI PATTERN GALLERY UI PATTERNS http://ui-patterns.com/ PATTERN TAP http://patterntap.com/ 97
  • 97. COPYRIGHT GAIA SRL 2013 MOBILE PATTERN GALLERY 98 MOBILE UI PATTERNS http://www.mobile-patterns.com/ INSPIRED UI http://inspired-ui.com/ PTTRNS http://pttrns.com/ LOVELYUI http://www.lovelyui.com/ ANDROID PTTRNS http://androidpttrns.com/ UI PARADE http://www.uiparade.com/ WINDOWS PHONE PATTERNS windowsphonepatterns.net/
  • 98. COPYRIGHT GAIA SRL 2013 LE LINEE GUIDA GLI STRUMENTI PER LA PROGETTAZIONE 99
  • 99. COPYRIGHT GAIA SRL 2013 GUIDELINES UFFICIALI I costruttori mettono a disposizione la documentazione ufficiale relativa ai propri OS e alla creazione di applicazioni sui loro sistemi. La documentazione si rivolge sia agli sviluppatori sia a chi intende ideare nuove applicazioni. Al loro interno si trovano i principi guida da seguire, i pattern e le regole generali per mantenere una user experience coerente. 100 IOS ANDROID WINDOWS 8 IOS HUMAN INTERFACE GUIDELINES http://developer.apple.com/library/ios/ #documentation/UserExperience/ Conceptual/MobileHIG/Introduction/ Introduction.html ANDROID DESIGN GUIDELINES http://developer.android.com/ design/get-started/principles.html WINDOWS 8 DESIGN GUIDELINES http://msdn.microsoft.com/library/ windows/apps/hh779072
  • 100. COPYRIGHT GAIA SRL 2013 LA STORIA FINISCE CON... 101
  • 101. 102 By Whitney Hess “10 most common misconceptions about user experience design”, 2009 By Whitney Hess “10 most common misconceptions about user experience design”, 2009
  • 102. CONTATTI. RIFERIMENTI PER IL PROGETTO Marco Giglio mail: marco.giglio@gaia.is.it Daniele Restelli mail: daniele.restelli@gaia.is.it COPYRIGHT GAIA SRL 2013 :-) GRAZIE 103