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

264 views
183 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
264
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 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. 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. 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. 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. 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. 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. 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.
  8. 8. 3.0 Dipendenze tra task eseguiti su piattaforme diverse Fig.13
  9. 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. 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. 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. 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.

×