Adattamento dispositivo (Progettazione interfacce e valutazione dell'usabilità)
1. 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
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. 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.
9. 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.
10. 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.
11. 4.1 Task significativi solo in un tipo di piattaforma
Fig.18
Fig.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).
12. 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.