Programmazione di interfacce e valutazione dell' usabilità: analisi di applicazioni mobili e desktop a confronto.
Analisi delle componenti:
grafica
accessibilità
user experience
Caso studio dI un importante dealer Mercedes-Benz, un progetto web con connotazioni tipiche nell'automotive per un brand nel nuovo fino al multimarca dell'usato. Strategie e soluzioni SEO (analisi, strategia, implementazioni sul CMS), elementi di conversione e tecniche di monitoraggio attraverso vari strumenti.
"“La tua opinione è importante per noi”. Dalla soddisfazione alla comprension...nois3
World Usability Day Roma 2015 - intervento di Maurizio Boscarol
~
Come capire non solo ciò che le persone dicono di volere o di gradire, ma anche ciò che vogliono davvero? E come stabilire cosa, fra ciò che dicono, incide di più sull’esperienza d’uso? Uno sguardo su alcuni semplici strumenti, che poi così semplici non sono.
"Codesign Tools and Techniques” - Alessio Ricconois3
World Usability Day Rome 2015 - intervento di Alessio Ricco
~
Il codesign é una metodologia di progettazione che coinvolge direttamente gli stakeholder rendendoli parte attiva del processo di design per poter realizzare insieme un prodotto usabile e che sia aderente alle loro aspettative. Vedremo alcuni degli strumenti che il facilitatore puó utilizzare per migliorare il processo di collaborazione, di dialogo e ascolto all’interno del team di progettazione.
Conversion Rate Optimization: Caso Studio (Digital Strategies Forum 2016)MOCA Interactive
Presentazione illustrata durante il Digital Strategies Forum 2016 a Milano. Si parla di CRO (Conversion Rate Optimization) introducendo concetti chiave mediante il racconto di un caso studio: processo di CRO per intero, A/B test (singolo e multivariato), ipotesi, analisi euristica, analisi mouse tracking, web analytics e technical analytics, test di usabilità, questionari qualitativi, test, landing page, interviste (online ed offline).
Studio del flayers:
linearità e immediatezza grafica
immagini e colori in "tono" con il messaggio
uso appropriato di metafore grafiche
Mi ispiro al principio:"less is more"
Utilizzo del cliente:
implementazione in social network e sito web
stampa di flayers e brochures
Una di 334 photo realizzate presso Torre della Meloria per la costruzione di un modello 3d realizzato da acquisizione fotografica. Le foto sono poi processate con i software Photosynt e Meshlab.
Programmazione di interfacce e valutazione dell' usabilità: analisi di applicazioni mobili e desktop a confronto.
Analisi delle componenti:
grafica
accessibilità
user experience
Caso studio dI un importante dealer Mercedes-Benz, un progetto web con connotazioni tipiche nell'automotive per un brand nel nuovo fino al multimarca dell'usato. Strategie e soluzioni SEO (analisi, strategia, implementazioni sul CMS), elementi di conversione e tecniche di monitoraggio attraverso vari strumenti.
"“La tua opinione è importante per noi”. Dalla soddisfazione alla comprension...nois3
World Usability Day Roma 2015 - intervento di Maurizio Boscarol
~
Come capire non solo ciò che le persone dicono di volere o di gradire, ma anche ciò che vogliono davvero? E come stabilire cosa, fra ciò che dicono, incide di più sull’esperienza d’uso? Uno sguardo su alcuni semplici strumenti, che poi così semplici non sono.
"Codesign Tools and Techniques” - Alessio Ricconois3
World Usability Day Rome 2015 - intervento di Alessio Ricco
~
Il codesign é una metodologia di progettazione che coinvolge direttamente gli stakeholder rendendoli parte attiva del processo di design per poter realizzare insieme un prodotto usabile e che sia aderente alle loro aspettative. Vedremo alcuni degli strumenti che il facilitatore puó utilizzare per migliorare il processo di collaborazione, di dialogo e ascolto all’interno del team di progettazione.
Conversion Rate Optimization: Caso Studio (Digital Strategies Forum 2016)MOCA Interactive
Presentazione illustrata durante il Digital Strategies Forum 2016 a Milano. Si parla di CRO (Conversion Rate Optimization) introducendo concetti chiave mediante il racconto di un caso studio: processo di CRO per intero, A/B test (singolo e multivariato), ipotesi, analisi euristica, analisi mouse tracking, web analytics e technical analytics, test di usabilità, questionari qualitativi, test, landing page, interviste (online ed offline).
Studio del flayers:
linearità e immediatezza grafica
immagini e colori in "tono" con il messaggio
uso appropriato di metafore grafiche
Mi ispiro al principio:"less is more"
Utilizzo del cliente:
implementazione in social network e sito web
stampa di flayers e brochures
Una di 334 photo realizzate presso Torre della Meloria per la costruzione di un modello 3d realizzato da acquisizione fotografica. Le foto sono poi processate con i software Photosynt e Meshlab.
Studio del logo:
semplicità e immediatezza grafica
scelta di font testo e colori adatti al tipo di attività rappresentata
Mi ispiro al principio:"less is more"
Utilizzo del cliente:
implementazione in social network e sito web
La tutela dei dati personali in Google street view - Irene ChiarolanzaIrene Chiarolanza
Google Street View: itinerari e mappe online, uno studio sugli aspetti di trasparenza, controllo e sulle direttive aziendali che si sono scontrate con la legale modalità di acquisizione fotografica utilizzata da Google per la creazione del servizio Street View in Italia.
Studio di un modello di task: definizione dei compiti che svolge un sistema informatico che interagisce con un ipotetico fruitore di quadri di un museo.
L’obiettivo di questa applicazione è quello di far interagire l’utente con un file immagine del quadro “giocabile” ed editabile attraverso un’interfaccia grafica in stile Photoshop
semplificato.
Web mining: analisi delle reti sociali.
Studio di dati raccolti sulle interazioni tra un gruppo di studenti nella vita reale, in Facebook, in Google Plus e in Twitter.
Il dataset utilizzato è stato creato in questo modo: ID_utente1, ID_utente2, ID_network, ID_week, Strength, Trust.
Studio del logo:
semplicità e immediatezza grafica
scelta di font testo e colori adatti al tipo di attività rappresentata
Mi ispiro al principio:"less is more"
Utilizzo del cliente:
implementazione in social network e sito web
La tutela dei dati personali in Google street view - Irene ChiarolanzaIrene Chiarolanza
Google Street View: itinerari e mappe online, uno studio sugli aspetti di trasparenza, controllo e sulle direttive aziendali che si sono scontrate con la legale modalità di acquisizione fotografica utilizzata da Google per la creazione del servizio Street View in Italia.
Studio di un modello di task: definizione dei compiti che svolge un sistema informatico che interagisce con un ipotetico fruitore di quadri di un museo.
L’obiettivo di questa applicazione è quello di far interagire l’utente con un file immagine del quadro “giocabile” ed editabile attraverso un’interfaccia grafica in stile Photoshop
semplificato.
Web mining: analisi delle reti sociali.
Studio di dati raccolti sulle interazioni tra un gruppo di studenti nella vita reale, in Facebook, in Google Plus e in Twitter.
Il dataset utilizzato è stato creato in questo modo: ID_utente1, ID_utente2, ID_network, ID_week, Strength, Trust.
1. Visual Design
Analisi di applicazioni mobili
Go!Beach VS. Groupon
Irene Chiarolanza
Corso di laurea
magistrale
Informatica
Umanistica
anno 2012/2013Go!Beach
Applicazione mobile
disponibile su
dispositivo iphone
Groupon
Applicazione mobile
disponibile su
dispositivo iphone
venerdì 12 ottobre 2012
2. Analisi del Logo
• Immagine simbolica semplice
essenziale e chiara: pochi elementi
rappresentati e corretto uso della
metafora ciabatte/spiaggia: il tema
trattato è riconoscibile.
• Accurata scelta dei colori: rosso e
verde su fondo neutro. L’ immagine
è garbata ed appropriata.
• Nome applicazione in tema
semantico con il servizio offerto:
“Go! Beach” ci fa subito pensare alla
spiaggia ed al mare.
?✓
• Immagine simbolica che rinuncia alla
rappresentazione di oggetti a favore
di un logo con una sola lettera
alfabetica: il carattere G in bianco su
fondo verde chiaro. Il tema trattato
non è comprensibile e implicito.
• Scelta di colori con buon contrasto:
verde e bianco, tonalità cromatiche
fresche, sobrie, giovanili.
• Nome applicazione non indicativo
del servizio offerto o dell’ argomento
trattato.
✓
✓
✓
?
Il logo è caratterizzato da
buona affordance.
Il logo non soddisfa una buona
affordance, il tema
dell’applicazione non è chiaro.
Affordance - Colore - metafora
venerdì 12 ottobre 2012
3. Layout d’apertura
Go!Beach
La schermata di apertura non è particolarmente
accurata nello studio degli elementi grafici.
Colori neutri sui toni del marrone. Contrasto
sufficiente ma non particolarmente attraente.
Rappresentazione chiara e rapporto equilibrato
tra gli elementi di ricerca: allineati, ordinati,
proporzionati.
Spreco di spazio nella parte dedicata al logo,
potrebbe essere utilizzato per rendere più
accattivante l’interfaccia.
Menù in basso regolarizzato, ben leggibile,
intuitivo.
Uso di font chiaro
Nessun suggerimento grafico e/o dialogo di
navigazione iniziale
✓
?
?
✓
Colore - Contrasto - Utilizzo dello spazio - Uso di Font
✓
?
venerdì 12 ottobre 2012
4. Layout di Ricerca
Go!Beach
Ripetizione inutile e sovraffollata della
parola “cerca” per i campi dedicati.
Accesso oscuro, non efficace e con
errori di leggibilità.
Interferenza tra gli elementi: non si
vede cosa viene digitato nei campi
per iniziare la ricerca.
Il layout appare subito
dilettantistico:
è poco chiaro come iniziare la
navigazione
?
?
Affordance - Accesso -Interferenza tra gli elementi
?
venerdì 12 ottobre 2012
5. Layout d’apertura Groupon
Colori con buon contrasto: layout che
sviluppa il concetto essenziale del
logo.
Rappresentazione chiara e rapporto
equilibrato tra gli elementi di ricerca:
essenziali, allineati, ordinati,
proporzionati.
Font chiari, grafica accattivante e
riempitiva dello spazio grazie
all’inserimento del tipo di offerta
attraverso immagini tematiche-
descrittive.
✓
La schermata di apertura è
chiara e particolarmente
accurata nello studio
degli elementi grafici.
Colore - Contrasto - Utilizzo dello spazio - Uso di Font
✓
✓
venerdì 12 ottobre 2012
6. Layout di Ricerca Groupon
Finestre di dialogo che indirizzano e guidano la navigazione.
Accesso facilitato grazie a suggerimenti ed indicazioni grafiche chiare, semplici, non formali.
✓
La schermata di ricerca ha buona affordance, accesso e
armonia tra gli elementi.
é subito chiaro come procedere nella navigazione.
Affordance - Accesso -Interferenza tra gli elementi
✓
venerdì 12 ottobre 2012
7. Conclusioni
Go! Beach VS. Groupon
L’analisi compiuta su queste due applicazioni,
una di uso diffuso (Groupon) e l’altra di
nicchia (Go! Beach) ne ha messo in evidenza
aspetti compositivi e strutturali che ne
influenzano l’ usabilità degli utenti.
Go!Beach è risultata essere fallace in svariati
aspetti di design visuale. L’aspetto più grave
a mio avviso è dato dall’accesso oscuro e
dall’interferenza degli elementi compositivi tra
di loro che oscurano la ricerca.
Groupon sicuramente gode di un’
impostazione compositiva professionale ed
accurata. Offre una navigazione piacevole,
semplice ed assistita. Il logo nato prima
dell’applicazione può anche permettersi di
non essere esplicito perché già conosciuto
grazie ad una vasta campagna pubblicitaria.
venerdì 12 ottobre 2012
8. Sul mercato: Le recensioni
I giudizi ed il
gradimento sono
per lo più
negativi
(escludendo
come spesso
accade gli auto-
giudizi!)
L’ applicazione non
riscuote successo ed
appare carente a gran
parte degli utenti.
Viene suggerito di
prendere spunto da
altra applicazione simile
23 Valutazioni ne
testimoniano la
pochissima diffusone
venerdì 12 ottobre 2012
9. Sul mercato: Le recensioni
I giudizi ed il
gradimento
sono positivi
L’ applicazione riscuote
successo grazie ad
caratteristiche precise
molto ben evidenziate dagli
utenti
14.743 Valutazioni ne
testimoniano la
grandissima diffusone
ed il successo
venerdì 12 ottobre 2012