SlideShare uma empresa Scribd logo
1 de 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
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.
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.
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.
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.
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.
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.
3.0 Dipendenze tra task eseguiti su piattaforme diverse
Fig.13
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.
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.
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).
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.

Mais conteúdo relacionado

Destaque

RESENHA - A condição humana HANNAH ARENDT
RESENHA - A condição humana HANNAH ARENDTRESENHA - A condição humana HANNAH ARENDT
RESENHA - A condição humana HANNAH ARENDTFILIPE NERI
 
Grafico diario del dax perfomance index para el 09 05-2013
Grafico diario del dax perfomance index para el 09 05-2013Grafico diario del dax perfomance index para el 09 05-2013
Grafico diario del dax perfomance index para el 09 05-2013Experiencia Trading
 
CareerBuilder Rebranding
CareerBuilder RebrandingCareerBuilder Rebranding
CareerBuilder RebrandingAnkur Tandon
 
9 charlas con el loco... par sil
9 charlas con el loco... par sil 9 charlas con el loco... par sil
9 charlas con el loco... par sil rosalinocar
 
Hyper Island Open Masterclass
Hyper Island Open MasterclassHyper Island Open Masterclass
Hyper Island Open MasterclassJohn V Willshire
 
Reunião nº 22 - Rastreio do cancro colo-rectal - dia 25-11-2015
Reunião nº 22 - Rastreio do cancro colo-rectal - dia 25-11-2015Reunião nº 22 - Rastreio do cancro colo-rectal - dia 25-11-2015
Reunião nº 22 - Rastreio do cancro colo-rectal - dia 25-11-2015Rotary Clube Vizela
 

Destaque (12)

2015 Investor Survey Deconstructing Proxy Statements — What Matters to Investors
2015 Investor Survey Deconstructing Proxy Statements — What Matters to Investors2015 Investor Survey Deconstructing Proxy Statements — What Matters to Investors
2015 Investor Survey Deconstructing Proxy Statements — What Matters to Investors
 
Folheto renovação
Folheto renovaçãoFolheto renovação
Folheto renovação
 
Web basic 5
Web basic 5Web basic 5
Web basic 5
 
RESENHA - A condição humana HANNAH ARENDT
RESENHA - A condição humana HANNAH ARENDTRESENHA - A condição humana HANNAH ARENDT
RESENHA - A condição humana HANNAH ARENDT
 
Lekts 5
Lekts  5Lekts  5
Lekts 5
 
Grafico diario del dax perfomance index para el 09 05-2013
Grafico diario del dax perfomance index para el 09 05-2013Grafico diario del dax perfomance index para el 09 05-2013
Grafico diario del dax perfomance index para el 09 05-2013
 
CareerBuilder Rebranding
CareerBuilder RebrandingCareerBuilder Rebranding
CareerBuilder Rebranding
 
E.01: El Clon
E.01: El ClonE.01: El Clon
E.01: El Clon
 
9 charlas con el loco... par sil
9 charlas con el loco... par sil 9 charlas con el loco... par sil
9 charlas con el loco... par sil
 
Hyper Island Open Masterclass
Hyper Island Open MasterclassHyper Island Open Masterclass
Hyper Island Open Masterclass
 
Reunião nº 22 - Rastreio do cancro colo-rectal - dia 25-11-2015
Reunião nº 22 - Rastreio do cancro colo-rectal - dia 25-11-2015Reunião nº 22 - Rastreio do cancro colo-rectal - dia 25-11-2015
Reunião nº 22 - Rastreio do cancro colo-rectal - dia 25-11-2015
 
Why try Hydrotherapy?
Why try Hydrotherapy?Why try Hydrotherapy?
Why try Hydrotherapy?
 

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

Mobile Usability
Mobile UsabilityMobile Usability
Mobile UsabilityKEA s.r.l.
 
L'uso dello smartphone per il lavoro
L'uso dello smartphone per il lavoroL'uso dello smartphone per il lavoro
L'uso dello smartphone per il lavoroVincenzo Bianculli
 
Adattamento dispositivi mobili
Adattamento dispositivi mobiliAdattamento dispositivi mobili
Adattamento dispositivi mobiliFrancesca Pulina
 
Guida al computer - Lezione 61 - Il Sistema Operativo: Il Desktop Parte 3
Guida al computer - Lezione 61 - Il Sistema Operativo: Il Desktop Parte 3Guida al computer - Lezione 61 - Il Sistema Operativo: Il Desktop Parte 3
Guida al computer - Lezione 61 - Il Sistema Operativo: Il Desktop Parte 3caioturtle
 
Progetto e realizzazione di un'applicazione WebGIS per la visualizzazione di ...
Progetto e realizzazione di un'applicazione WebGIS per la visualizzazione di ...Progetto e realizzazione di un'applicazione WebGIS per la visualizzazione di ...
Progetto e realizzazione di un'applicazione WebGIS per la visualizzazione di ...diegohusu
 
.NET Conf 2022 at 1nn0va - .NET MAUI focus on Desktop App
.NET Conf 2022 at 1nn0va - .NET MAUI focus on Desktop App.NET Conf 2022 at 1nn0va - .NET MAUI focus on Desktop App
.NET Conf 2022 at 1nn0va - .NET MAUI focus on Desktop AppMarco Bortolin
 
Presentazione ergonomia
Presentazione ergonomiaPresentazione ergonomia
Presentazione ergonomiaOscar
 
Define & design apps for success
Define & design apps for successDefine & design apps for success
Define & design apps for successAcrmnet s.r.l.
 
Guida shinelco 3500
Guida shinelco 3500Guida shinelco 3500
Guida shinelco 3500Marco NuvoLi
 
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion RomaBest Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion RomaLuca Degli Esposti
 
Best Practices per il Web Mobile by Luca Degli Esposti
Best Practices per il Web Mobile by Luca Degli EspostiBest Practices per il Web Mobile by Luca Degli Esposti
Best Practices per il Web Mobile by Luca Degli EspostiCodemotion
 

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

Il Web per il mobile - soluzioni
Il Web per il mobile - soluzioniIl Web per il mobile - soluzioni
Il Web per il mobile - soluzioni
 
Mobile Usability
Mobile UsabilityMobile Usability
Mobile Usability
 
Le performance
Le performanceLe performance
Le performance
 
L'uso dello smartphone per il lavoro
L'uso dello smartphone per il lavoroL'uso dello smartphone per il lavoro
L'uso dello smartphone per il lavoro
 
Adattamento dispositivi mobili
Adattamento dispositivi mobiliAdattamento dispositivi mobili
Adattamento dispositivi mobili
 
Guida al computer - Lezione 61 - Il Sistema Operativo: Il Desktop Parte 3
Guida al computer - Lezione 61 - Il Sistema Operativo: Il Desktop Parte 3Guida al computer - Lezione 61 - Il Sistema Operativo: Il Desktop Parte 3
Guida al computer - Lezione 61 - Il Sistema Operativo: Il Desktop Parte 3
 
Progetto e realizzazione di un'applicazione WebGIS per la visualizzazione di ...
Progetto e realizzazione di un'applicazione WebGIS per la visualizzazione di ...Progetto e realizzazione di un'applicazione WebGIS per la visualizzazione di ...
Progetto e realizzazione di un'applicazione WebGIS per la visualizzazione di ...
 
.NET Conf 2022 at 1nn0va - .NET MAUI focus on Desktop App
.NET Conf 2022 at 1nn0va - .NET MAUI focus on Desktop App.NET Conf 2022 at 1nn0va - .NET MAUI focus on Desktop App
.NET Conf 2022 at 1nn0va - .NET MAUI focus on Desktop App
 
Presentazione ergonomia
Presentazione ergonomiaPresentazione ergonomia
Presentazione ergonomia
 
Define & design apps for success
Define & design apps for successDefine & design apps for success
Define & design apps for success
 
Guida shinelco 3500
Guida shinelco 3500Guida shinelco 3500
Guida shinelco 3500
 
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion RomaBest Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma
 
Best Practices per il Web Mobile by Luca Degli Esposti
Best Practices per il Web Mobile by Luca Degli EspostiBest Practices per il Web Mobile by Luca Degli Esposti
Best Practices per il Web Mobile by Luca Degli Esposti
 

Mais de Mariagiovanna Scarale

Web Mining e analisi di reti sociali
Web Mining e analisi di reti socialiWeb Mining e analisi di reti sociali
Web Mining e analisi di reti socialiMariagiovanna Scarale
 
Analisi della blogosfera italiana e analisi statistica dei corpora dei blog g...
Analisi della blogosfera italiana e analisi statistica dei corpora dei blog g...Analisi della blogosfera italiana e analisi statistica dei corpora dei blog g...
Analisi della blogosfera italiana e analisi statistica dei corpora dei blog g...Mariagiovanna Scarale
 
L'opera di Flaubert tra Realismo e Romanticismo. Jeunesse et Maturité
L'opera di Flaubert tra Realismo e Romanticismo. Jeunesse et MaturitéL'opera di Flaubert tra Realismo e Romanticismo. Jeunesse et Maturité
L'opera di Flaubert tra Realismo e Romanticismo. Jeunesse et MaturitéMariagiovanna Scarale
 
Adattabilità (Progettazione interfacce e valutazione dell'usabilità)
Adattabilità (Progettazione interfacce e valutazione dell'usabilità)Adattabilità (Progettazione interfacce e valutazione dell'usabilità)
Adattabilità (Progettazione interfacce e valutazione dell'usabilità)Mariagiovanna Scarale
 
Il software MARIE (Progettazione interfacce e valutazione dell'usabilità)
Il software MARIE (Progettazione interfacce e valutazione dell'usabilità)Il software MARIE (Progettazione interfacce e valutazione dell'usabilità)
Il software MARIE (Progettazione interfacce e valutazione dell'usabilità)Mariagiovanna Scarale
 
IL DIRITTO D'AUTORE NELL'ERA DIGITALE
IL DIRITTO D'AUTORE NELL'ERA DIGITALEIL DIRITTO D'AUTORE NELL'ERA DIGITALE
IL DIRITTO D'AUTORE NELL'ERA DIGITALEMariagiovanna Scarale
 
Hanging out, messing around and geeking out. GAMING
Hanging out, messing around and geeking out. GAMINGHanging out, messing around and geeking out. GAMING
Hanging out, messing around and geeking out. GAMINGMariagiovanna Scarale
 
Strumenti statistici per l'analisi della distribuzione dei fatti linguistici
Strumenti statistici per l'analisi della distribuzione dei fatti linguisticiStrumenti statistici per l'analisi della distribuzione dei fatti linguistici
Strumenti statistici per l'analisi della distribuzione dei fatti linguisticiMariagiovanna Scarale
 
VISUAL DESIGN di Mariagiovanna Scarale
VISUAL DESIGN di Mariagiovanna ScaraleVISUAL DESIGN di Mariagiovanna Scarale
VISUAL DESIGN di Mariagiovanna ScaraleMariagiovanna Scarale
 

Mais de Mariagiovanna Scarale (13)

Web Mining e analisi di reti sociali
Web Mining e analisi di reti socialiWeb Mining e analisi di reti sociali
Web Mining e analisi di reti sociali
 
Analisi della blogosfera italiana e analisi statistica dei corpora dei blog g...
Analisi della blogosfera italiana e analisi statistica dei corpora dei blog g...Analisi della blogosfera italiana e analisi statistica dei corpora dei blog g...
Analisi della blogosfera italiana e analisi statistica dei corpora dei blog g...
 
Analisi del fenomeno dei blog
Analisi del fenomeno dei blogAnalisi del fenomeno dei blog
Analisi del fenomeno dei blog
 
L'opera di Flaubert tra Realismo e Romanticismo. Jeunesse et Maturité
L'opera di Flaubert tra Realismo e Romanticismo. Jeunesse et MaturitéL'opera di Flaubert tra Realismo e Romanticismo. Jeunesse et Maturité
L'opera di Flaubert tra Realismo e Romanticismo. Jeunesse et Maturité
 
Valutazione dell'Accessibilità
Valutazione dell'AccessibilitàValutazione dell'Accessibilità
Valutazione dell'Accessibilità
 
Valutazione dell'usabilità
Valutazione dell'usabilità Valutazione dell'usabilità
Valutazione dell'usabilità
 
Adattabilità (Progettazione interfacce e valutazione dell'usabilità)
Adattabilità (Progettazione interfacce e valutazione dell'usabilità)Adattabilità (Progettazione interfacce e valutazione dell'usabilità)
Adattabilità (Progettazione interfacce e valutazione dell'usabilità)
 
Il software MARIE (Progettazione interfacce e valutazione dell'usabilità)
Il software MARIE (Progettazione interfacce e valutazione dell'usabilità)Il software MARIE (Progettazione interfacce e valutazione dell'usabilità)
Il software MARIE (Progettazione interfacce e valutazione dell'usabilità)
 
IL DIRITTO D'AUTORE NELL'ERA DIGITALE
IL DIRITTO D'AUTORE NELL'ERA DIGITALEIL DIRITTO D'AUTORE NELL'ERA DIGITALE
IL DIRITTO D'AUTORE NELL'ERA DIGITALE
 
Hanging out, messing around and geeking out. GAMING
Hanging out, messing around and geeking out. GAMINGHanging out, messing around and geeking out. GAMING
Hanging out, messing around and geeking out. GAMING
 
Tra filologia e programmazione
Tra filologia e programmazioneTra filologia e programmazione
Tra filologia e programmazione
 
Strumenti statistici per l'analisi della distribuzione dei fatti linguistici
Strumenti statistici per l'analisi della distribuzione dei fatti linguisticiStrumenti statistici per l'analisi della distribuzione dei fatti linguistici
Strumenti statistici per l'analisi della distribuzione dei fatti linguistici
 
VISUAL DESIGN di Mariagiovanna Scarale
VISUAL DESIGN di Mariagiovanna ScaraleVISUAL DESIGN di Mariagiovanna Scarale
VISUAL DESIGN di Mariagiovanna Scarale
 

Último

Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Associazione Digital Days
 
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Associazione Digital Days
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Associazione Digital Days
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Associazione Digital Days
 
Programma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoProgramma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoQuotidiano Piemontese
 
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Associazione Digital Days
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Associazione Digital Days
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Associazione Digital Days
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Associazione Digital Days
 

Último (9)

Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
 
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
 
Programma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoProgramma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 Torino
 
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
 

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