Visual design interfacce - Interface Design

13
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

Transcript of Visual design interfacce - Interface Design

Page 1: Visual design interfacce - Interface Design

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

Page 2: Visual design interfacce - Interface Design

Stesso Task interfacce diverse

Home pagehttp://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

Page 3: Visual design interfacce - Interface Design

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

Page 4: Visual design interfacce - Interface Design

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

Page 5: Visual design interfacce - Interface Design

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

Page 6: Visual design interfacce - Interface Design

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.

Page 7: Visual design interfacce - Interface Design

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’”

Page 8: Visual design interfacce - Interface Design

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.

Page 9: Visual design interfacce - Interface Design

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.

Page 10: Visual design interfacce - Interface Design

Stesso Task interfacce diverse

Home pagehttp://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à.

Page 11: Visual design interfacce - Interface Design

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

Page 12: Visual design interfacce - Interface Design

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

Page 13: Visual design interfacce - Interface Design

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.