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).
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).
Enterprise Spring and Flex applicationsmarcocasario
SpringSource ha recentemente annunciato Spring BlazeDS Integration, un nuovo progetto open source per permettere una facile integrazione tra il framework Spring e Adobe BlazeDS, una tecnologia open source basata su server Java remoting e Web messaging.
Il plugin di SpringSource fornisce un approccio più semplice ed intuitivo agli sviluppatori Spring e Java per creare Enterprise Rich Internet Applications utilizzando il framework Adobe Flex, una pietra miliare della Flash Platform.
In questa sessione ai partecipanti verrà fornita una panoramica del framework Flex e di BlazeDS, illustrando i vantaggi e le modalità di integrazione al framework Spring attraverso il plugin Spring BlazeDS.
Corso WebApp iOS - Lezione 04: iOS UI DesignAndrea Picchi
Presentazione del Paradigma Page Model dell’iPhone e presentazione del Paradigma Block Model dell’iPad.
Approccio per portare un i contenuti da Desktop a Mobile.
Passare dallo Sketch al Prototipo a bassa risoluzione dell’Interfaccia iOS.
In questo talk illustreremo le tecniche più semplici, efficaci e rapide per rendere il vostro sito/portale in Drupal mobile compliant. Applicando principi di responsive design e design su griglie analizzeremo gli elementi più utili da lasciare sulla vostra interfaccia mobile. Capiremo quale migliore strategia di implementazione intraprendere tra l'esportazione di dati in json, rss oppure realizzare direttamente web views per il sito mobile e per essere contenuti in un'app mobile che faccia da contenitore negli ecosistemi iOS e Android, principalmente.
Le mappe sono uno dei punti di forza di Microsoft Windows Phone e dei Nokia Lumia, grazie alla cartografia HERE Maps. Nel corso del webinar impareremo a sfruttare tali mappe all'interno di un'applicazione e ad usarle in combinazione con i servizi di geolocalizzazione offerti dal dispositivo. / Maps are one of the strengths of the Microsoft Windows Phone platform and Nokia Lumia phones, thanks to HERE Maps (formerly Nokia Maps). In this webinar, you’ll learn how to exploit such maps within an application and how to use them in combination with geo-location services offered by the phones.
DB2 Web Query for i – intuitivo, semplice, modulare.
Accesso alle informazioni di business per interrogazioni, rapportistica ed analisi veloci e facili
Tra le varie tappe internazionali, il “RAD Studio XE2 World Tour” ha toccato anche l'Italia, precisamente Milano il 21 settembre e Roma il giorno successivo.
Le novità introdotte in questa versione del tool di sviluppo sono davvero tante, motivo per cui ho pensato di redigere questo reportage per
elencare quelle che – a livello personale e soggettivo – ritengo le innovazioni più interessanti e degne di nota, e magari sciogliere qualche dubbio a coloro che non hanno potuto partecipare, raccontando gli avvenimenti della giornata di presentazione.
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.
More Related Content
Similar to Visual design interfacce - Interface Design
Enterprise Spring and Flex applicationsmarcocasario
SpringSource ha recentemente annunciato Spring BlazeDS Integration, un nuovo progetto open source per permettere una facile integrazione tra il framework Spring e Adobe BlazeDS, una tecnologia open source basata su server Java remoting e Web messaging.
Il plugin di SpringSource fornisce un approccio più semplice ed intuitivo agli sviluppatori Spring e Java per creare Enterprise Rich Internet Applications utilizzando il framework Adobe Flex, una pietra miliare della Flash Platform.
In questa sessione ai partecipanti verrà fornita una panoramica del framework Flex e di BlazeDS, illustrando i vantaggi e le modalità di integrazione al framework Spring attraverso il plugin Spring BlazeDS.
Corso WebApp iOS - Lezione 04: iOS UI DesignAndrea Picchi
Presentazione del Paradigma Page Model dell’iPhone e presentazione del Paradigma Block Model dell’iPad.
Approccio per portare un i contenuti da Desktop a Mobile.
Passare dallo Sketch al Prototipo a bassa risoluzione dell’Interfaccia iOS.
In questo talk illustreremo le tecniche più semplici, efficaci e rapide per rendere il vostro sito/portale in Drupal mobile compliant. Applicando principi di responsive design e design su griglie analizzeremo gli elementi più utili da lasciare sulla vostra interfaccia mobile. Capiremo quale migliore strategia di implementazione intraprendere tra l'esportazione di dati in json, rss oppure realizzare direttamente web views per il sito mobile e per essere contenuti in un'app mobile che faccia da contenitore negli ecosistemi iOS e Android, principalmente.
Le mappe sono uno dei punti di forza di Microsoft Windows Phone e dei Nokia Lumia, grazie alla cartografia HERE Maps. Nel corso del webinar impareremo a sfruttare tali mappe all'interno di un'applicazione e ad usarle in combinazione con i servizi di geolocalizzazione offerti dal dispositivo. / Maps are one of the strengths of the Microsoft Windows Phone platform and Nokia Lumia phones, thanks to HERE Maps (formerly Nokia Maps). In this webinar, you’ll learn how to exploit such maps within an application and how to use them in combination with geo-location services offered by the phones.
DB2 Web Query for i – intuitivo, semplice, modulare.
Accesso alle informazioni di business per interrogazioni, rapportistica ed analisi veloci e facili
Tra le varie tappe internazionali, il “RAD Studio XE2 World Tour” ha toccato anche l'Italia, precisamente Milano il 21 settembre e Roma il giorno successivo.
Le novità introdotte in questa versione del tool di sviluppo sono davvero tante, motivo per cui ho pensato di redigere questo reportage per
elencare quelle che – a livello personale e soggettivo – ritengo le innovazioni più interessanti e degne di nota, e magari sciogliere qualche dubbio a coloro che non hanno potuto partecipare, raccontando gli avvenimenti della giornata di presentazione.
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.
1. Analisi Applicazioni
desktop e mobile
Analisi di interfacce utenti
Pisa Aeroporto
http://www.pisa-airport.com/
Wired
http://www.wired.it/
Dropbox
http://www.dropbox.com/
Irene Chiarolanza
Corso di laurea magistrale
Informatica Umanistica
2. Stesso Task
interfacce diverse
Home page
http://www.pisa-airport.com/
Pisa airport versione desktop Pisa airport versione mobile
Diverse tecniche di Composizione
in desktop: i gruppi master detail sono mostrati in una singola presentazione
in mobile: il master e’ mostrato in una presentazione ed una nuova presentazione e’
mostrata quando i dettagli sono richiesti
Regole di Rimozione:
in mobile: sono rimossi gran parte degli elementi della versione desktop che si
presenta invece come un semplice elenco , le immagini sono completamente eliminate
3. Stesso Task
stesse interfacce
in mobile e desktop restano immutati la navigazione delle destinazioni, gli elementi grafici e i font.
La mappa e’ facilmente fruibile sia da piattaforma desktop che da piattaforma mobile in quanto
rende assolutamente intuitiva ed immediata una navigazione che necessita di geolocalizzazione.
Pisa airport versione desktop
Pisa airport versione mobile
4. Regole di Rimozione
in mobile sono rimossi gran parte degli elementi della versione desktop che si
presenta invece come un semplice elenco da scorrere.
le immagini relative al logo della compagnia aerea in proporzione sono ingrandite
rispetto alla versione desktop
Pisa airport versione desktop
Pisa airport versione mobile
5. Regole di Rimozione
in mobile la navigazione “bagagli smarriti” e’ molto semplificata rispetto alla versione desktop.
i campi di ricerca sono immutati.
Pisa airport versione desktop
Pisa airport versione mobile
6. Regole di Rimozione e
Conversione:
in versione mobile la
navigazione “arrivi” e
“Partenze” e’ molto
semplificata rispetto alla
versione desktop: sono stati
rimossi molti elementi.
in mobile i dettagli del volo
sono mostrati in una nuova
presentazione quando i
dettagli sono richiesti.
Analisi adattamento:
Le immagini sono eliminate dalla versione desktop a quella mobile.
La pagina desktop viene divisa in versione mobile in più pagine molto semplificate e sono
rimossi task secondari relativi ad approfondimenti.
La versione mobile e’ graficamente scarna, poco curata ed accattivante:
non e’ possibile navigare in lingua inglese diversamente dalla versione desktop, le immagini
per lo più eliminate non sono sostituite da una grafica ad hoc, i gruppi sono rappresentati
come un semplice elenco.
7. Stesso Task
interfacce diverse
http://www.wired.it/
Wired versione desktop
Wired versione mobile
Home page
Diverse tecniche di Composizione
in desktop: i gruppi master detail sono mostrati in una singola presentazione
in mobile: il master e’ mostrato in una presentazione ed una nuova presentazione e’ mostrata quando i
dettagli sono richiesti
Regole di Rimozione:
in mobile: sono rimossi “in primo piano, foto, wired now, orologio, abbonati, in edicola, menu’”
8. task significativi solo su piattaforma
desktop e rimozioni
Wired versione desktop
Wired versione mobile
stessi task principali “Gallery, menù, daily” significativi e facilmente fruibili anche da piattaforma
mobile.
task secondari relativi a pubblicita e approfondimenti che nella versione mobile sono completamente
rimossi ”in edicola, abbonati, orologio con ultimo aggiornamento” e sezioni laterali.
9. Analisi adattamento:
Le dimensioni delle immagini sono diminuite dalla versione desktop a quella mobile.
la pagina desktop in versione mobile viene divisa in più pagine.
nella versione mobile sono rimossi task secondari relativi a pubblicita’ e approfondimenti.
nella versione mobile la navigazione è per lo più a scorrimento.
Restano immutati font e colori.
L’interfaccia mobile e’ facilmente navigabile in touch mobile.
10. Stesso Task
interfacce diverse
Home page
http://www.dropbox.com/
Dropbox versione desktop
Dropbox versione mobile
Regole di Rimozione:
in mobile l’interfaccia e’unicamente strutturata come un logo
in desktop l’interfaccia e’ ugualmente semplificata ma fornisce subito
indicazioni di registrazione e video esplicativo sulle funzionalità.
11. Task significativi solo
su alcune piattaforme
Regole di Rimozione e Conversione
in mobile l’interfaccia propone un’immagine esplicativa delle funzionalita’ di Dropbox accompagnata
da testo, mentre in desktop viene proposto un video.
L’elemento video e’ significativo solo sull’interfaccia desktop in quanto più facilmente fruibile su
grande schermo. Allo stesso modo in versione mobile l’immagine e semplice testo sono più adatti ad
un utilizzo “veloce” e su piccolo schermo.
In mobile cliccando su “inizio” si accede ad una nuova presentazione con nuovi dettagli
Dropbox versione desktop
Dropbox versione mobile
12. Regole di Rimozione e Conversione
in mobile l’interfaccia propone di registrarsi o accedere tramite menù a discesa, mentre
in desktop vengono proposti due elementi diversi da cliccare per accedere ad una nuova
presentazione.
Dropbox versione desktop
Dropbox versione mobile
13. Dropbox versione desktop Dropbox versione mobile
Analisi Adattamento:
Task significativi solo su piattaforma desktop sono rimossi o semplificati in versione
mobile e proposti nel menu’ in basso.
L’applicazione mobile e’ trasformata in un’interfaccia molto semplificata che mantiene
stessi font e colori della versione desktop, la semplificazione rende agevole la
navigazione su schermo touch.