Programmazione di interfacce e valutazione dell' usabilità: analisi di applicazioni mobili e desktop a confronto. Analisi delle componenti: grafica accessibilità user experience

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.