Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

12
Mariagiovanna Scarale Laurea Magistrale Informatica Umanistica 423062 ADATTAMENTO di siti web ai dispositivi mobili EBAY: http://annunci.ebay.it/?annunci=1 GAZZETTA DELLO SPORT: http://www.gazzetta.it / FACEBOOK: http://www.facebook.com/ TRENITALIA: http://www.trenitalia.com / DAILY MOTION: http:// www.dailymotion.com/it PHOTO BUCKET: www.photobucket.com

Transcript of Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

Page 1: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

Mariagiovanna Scarale

Laurea Magistrale Informatica Umanistica

423062

ADATTAMENTO di siti web ai dispositivi mobili

• EBAY:http://annunci.ebay.it/?annunci=1• GAZZETTA DELLO SPORT:http://www.gazzetta.it/• FACEBOOK:http://www.facebook.com/• TRENITALIA:http://www.trenitalia.com/• DAILY MOTION:http://www.dailymotion.com/it• PHOTO BUCKET:www.photobucket.com

Page 2: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

1.0 Stesso task su piattaforme diverse ma con differenti elementi nell’interfaccia utente

Fig.1 Fig.2

Nella versione mobile (Fig.2) il task è semplificato. L’interfaccia è più compatta, per consentire all’utente, mediante tap e double tap, di navigare con disinvoltura.

Page 3: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

1.1 Stesso task su piattaforme diverse ma con differenti elementi nell’interfaccia utente

Fig.3 Fig.4

Nella versione mobile (Fig.4) l’interfaccia si semplifica con delle semplici anteprime. I ‘Summary Thumbnails’ si riducono notevolmente per facilitare la lettura.

Page 4: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

1.2 Stesso task su piattaforme diverse ma con differenti elementi nell’interfaccia utente

Fig.5 Fig.6

Nella versione mobile (Fig.6) l’interfaccia si mostra più compatta. Sono eliminati i sottomenù che nella versione desktop (Fig.5) facilitano la scelta e la gerarchizzazione dei contenuti.

Page 5: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

1.3 Stesso task su piattaforme diverse ma con differenti elementi nell’interfaccia utente

Fig.7 Fig.8

Nella versione mobile (Fig.8) l’interfaccia si mostra più compatta. Sono eliminati i sottomenù che nella versione desktop (Fig.7) facilitano la scelta e la gerarchizzazione dei contenuti (menù sulla destra) ed è usato un colore chiaro (bianco) per non appesantire lo sfondo e non affaticare la lettura.

Page 6: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

1.4 Stesso task su piattaforme diverse ma con differenti elementi nell’interfaccia utente

Fig.9 Fig.10

Nella versione mobile (Fig.10) l’interfaccia si mostra più compatta. Sono eliminate le anteprime delle notizie e i ‘Summary Thumbnails’ sono del tutto inesistenti. Si può visualizzare solo il titolo delle notizie.

Page 7: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

2.0 Stessi task principali ma con differenti task secondari

Fig.11 Fig.12

Nella versione mobile (Fig.11) il menù di selezione delle sottocategorie dei task principali è eliminato ed è possibile accedervi solo con un double tap sulla categoria madre che interessa. In Facebook, invece (Fig.12), la barra di aggiornamento di stato, contiene task secondari –come «registra la tua posizione»- non presenti nella versione desktop.

Page 8: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

3.0 Dipendenze tra task eseguiti su piattaforme diverse

Fig.13

Page 9: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

3.1 Dipendenze tra task eseguiti su piattaforme diverse

Fig.14 Fig.15

Sul sito di trenitalia per desktop (Fig.13) è possibile effettuare una prenotazione, che viene confermata mediante un sms. Inoltre è possibile gestire, modificare e rivedere la propria prenotazione, anche nella versione mobile (Fig.15). L’interfaccia è molto semplificata e i menù per selezionare la data, l’ora e la stazione, sono ridotti.

Page 10: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

4.0 Task significativi solo in un tipo di piattaforma

Fig.16 Fig.17

Sul sito della Gazzetta dello sport per desktop (Fig.16) è possibile visualizzare le anteprime delle notizie e dei video, invece nella versione mobile (Fig.17) questo non è possibile, a causa di una semplificazione (forse eccessiva) dei vari task, che tuttavia, sarebbero stati difficili da utilizzare in una versione più completa.

Page 11: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

4.1 Task significativi solo in un tipo di piattaforma

Fig.18Fig.19

La versione per desktop di Ebay Annunci (Fig.16) prevede un’interazione con l’utente di tipo intuitivo. In effetti, per selezionare l’area di interesse, è sufficiente passare il cursore del mouse sulla carta geografica raffigurante l’italia per ottenere uno zooming che facilità la selezione e la navigazione. Questo input intuitivo non è presente nella versione mobile (Fig.17).

Page 12: Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)

Analisi adattamento• I task per mobile device si sono rivelati più compatti e semplificati

nell’interfaccia;• Sono rimossi dai task per mobile device immagini, summary

thumbnails, anteprime;• L’elevata semplificazione delle interfacce per mobile device rende la

navigazione più fluida e significativa. L’utente, con pochi tap, riesce a raggiungere il suo obiettivo di ricerca.

• I task si rivelano più usabili su device che supportano la tecnologia touch e multitouch, tecnologia che amplifica l’immediatezza e la precisione, sia dell’input che del rapporto utente-task-device, rispetto al cursore del mouse, oppure ai tasti del cellulare che non supporta il touch;

• Solitamente le pagine desktop vengono spezzate, nei mobile device, seguendo una singola colonna centrale, o rimodellate totalmente rispetto alla versione originale per desktop;

• Il testo di base, le informazioni di base e lo sfondo, solitamente restano gli stessi sul mobile device;

• Le immagini, nel mobile device, vengono rimpicciolite e, se non importanti, eliminate. I video, il più delle volte, non presentano delle anteprime.

• Concludendo, i task per mobile device si rivelano fondamentali e usabili per quanto riguarda task che non prevedono lo svago o il gioco (ad esempio per la prenotazione di biglietti, per gestire il proprio conto bancario, per pagare le bollette, per visualizzare le news), ma sono meno usabili per task che riguardano lo svago , il gioco. Per questi ultimi task è preferibile la versione del desktop, che offre una visuale completa e ampia, non stanca la vista e offre una risoluzione maggiore delle immagini/video e un supporto audio sicuramente migliore.