Corso di Laurea Magistrale in Informatica UmanisticaProgettazione di interfacce e valutazione dell’usabilità

Esercitazione 5 Adattamento dispositivi mobili

Francesca Pulina e-mail: frampy.p@hotmail.it

SITI ANALIZZATI

● http://www.hoepli.it/ ● https://twitter.com/ ● http://www.anobii.com/● http://www.ilpost.it/

● https://www.apple.com/it/apps/remote/

Piattaforma desktop: browser (Firefox e Chrome) su Windows 8.1Piattaforma mobile: iOS su iPod touch

Stesso task principale con subtask differenti su piattaforme diverse – Hoepli.it

Task: ricerca di un prodotto

Questo task è eseguibile facilmente su entrambe le piattaforme: basta inserire nella textarea di ricerca il prodotto che si sta cercando. Nella versione mobile, per esigenze di semplificazione, manca però la possibilità di porre dei filtri alla ricerca o di effettuare una ricerca avanzata.

ELEMENTI RIMOSSI

Nella versione mobile è rimosso il gruppo centrale che contiene vari box con offerte e proposte di acquisto. Nella versione mobile manca il menu a scomparsa per filtrare la ricerca, e il tasto Ricerca avanzata.

TRASFORMAZIONE

Il gruppo laterale di sinistra (desktop) è inglobato nel bottone LIBRI, il Carrello invece nell'header (così come il logo e il bottone della home). Dei sette bottoni che nella versione desktop orientano l'utente nella navigazione del sito, due scompaiono (Top ten libri e Sconti), i quattro principali sono disposti nel centro della schermata iniziale della versione mobile. Le altre funzioni sono svolte dai tre bottoni situati nella parte inferiore (Help, Info, Accedi).La versione mobile è radicalmente semplificata; scompaiono tutte le immagini, ad eccezione delle icone che caratterizzano i quattro bottoni principali.

ELEMENTI IMMUTATI

Restano quindi immutate la textarea di ricerca e la suddivisione dei prodotti disponibili in quattro sezioni (la cui rilevanza è percepibile soprattutto nella versione mobile).

USABILITA' GENERALE

La versione desktop, molto più ricca in contenuti e articolata, consente di svolgere bene il task principale; l'utente ha anche la possibilità di soffermarsi su altro e avere una panoramica sulle proposte dell'editore. L'interfaccia mobile, molto alleggerita, è ottimale per l'esecuzione del task principale, adatta per una ricerca rapida e mirata.

Stesso task su piattaforme diverse con elementi differenti nell'interfaccia utente

twitter

Task: gestione account

Le due piattaforme hanno interfacce differenti. In entrambe è comunque possibile svolgere i medesimi task principali: scorrere le notizie, scrivere un tweet, scoprire i trends più popolari.

ELEMENTI RIMOSSI Nella versione mobile sono rimossi i due gruppi laterali; di quello centrale viene rimossa la textarea per comporre un nuovo tweet.

TRASFORMAZIONE

L'header della versione desktop viene “suddiviso” in due parti, che nella versione mobile corrispondono all'header vero e proprio (contraddistinto dal caratteristico colore azzurro) e ai quattro bottoni sottostanti (Home, Connetti, Scopri, Account).

ELEMENTI IMMUTATI

Rimane immutata la presenza del riquadro coi tweet, che non subiscono nessuna modifica nell'aspetto.

USABILITA' GENERALE

Con tutte le semplificazioni, la versione mobile è adatta ad una visita veloce e ad un aggiornamento rapido del proprio profilo. Al contrario, la versione desktop è adatta ad una navigazione più duratura, data la presenza nella Home di sezioni che immediatamente suggeriscono all'utente altre aree da esplorare.

Dipendenze tra task eseguiti su piattaforme diverseRemote

Task: gestione e controllo remoto della libreria iTunes

Una volta installato Remote sul dispositivo mobile, l'utente può da questa piattaforma avviare la riproduzione di un brano, mettere in pausa, mandare avanti; alzare/abbassare il volume e scegliere quali speakers attivare; attivare la riproduzione casuale; creare una playlist Genius; con la funzione Successivo sapere quale sarà il brano che segue.Se il Mac è in standby, con Remote si può riattivare, per avere nuovamente accesso alla libreria.

Remote è un'applicazione disponibile per iPod touch, iPad e iPhone che consente

all'utente di gestire la libreria iTunes del proprio Mac.

Task significativi solo su un tipo di piattaformaaNobii

Task: mettere a scaffale un nuovo libro

Nella versione desktop si deve inserire manualmente Titolo/Autore/ISBN nella apposita textarea di ricerca; lo stesso si può fare con un tap sull'icona Cerca dell'applicazione. Solo nella versione mobile però è possibile effettuare direttamente uno scan del codice a barre.

ELEMENTI RIMOSSIIl grouping verticale di sinistra e quello orizzontale in alto sono rimossi nella versione mobile.

TRASFORMAZIONE

● Le funzioni del grouping verticale di sinistra sono demandate al pulsante Ordina che si trova nell'header dell'app;

● Quelle del grouping orizzontale sono (parzialmente) assorbite dalle 5 icone del menu nella parte inferiore dell'app;

● In generale, i cambiamenti sono mirati a dare rilievo alla libreria (che appare automaticamente selezionata all'accesso).

ELEMENTI IMMUTATI

● Vista immediata dello scaffale, con la possibilità di sceglierne il tipo di vista;

● Modalità di inserimento di un nuovo libro, con la possibilità esclusiva nell'applicazione di effettuare uno scan del codice a barre;

● Funzioni base: ordinare i libri (secondo determinati criteri), accedere alla lista dei desideri, gestire l'account.

USABILITA' GENERALE

La versione mobile è abbastanza semplificata: consente all'utente di svolgere immediatamente il task principale senza particolari problemi. Questo vale anche per la versione desktop, dove l'utente può però compiere task secondari come esplorare ulteriori sezioni (Classifiche, Gruppi, etc), rimosse nell'applicazione.

Responsive DesignIl Post

La pagina è aperta nella sua massima estensione; sono visualizzate tutte le sezioni che la compongono.

max-width: 1024px

Al posto della barra orizzontale con gli

argomenti principali (vedi precedente),

compare l'elemento Sezioni; con un click su esso viene visualizzato un elenco che riporta i

medesimi argomenti.Viene rimossa la sezione

“Post-it”; tutte le altre, invece, vengono

compattate nelle due colonne.

max-width: 768px

Sono rimossi il riquadro etichettato “Oggi” e la

textarea di ricerca; quest'ultima è sostituita

dalla semplice icona (lente di ingrandimento).

La trasformazione principale è la

disposizione dei contenuti in una sola colonna (necessità di

scrolling maggiore).

max-width: 600px

Viene rimosso il riquadro coi titoli delle notizie in

evidenza; eccetto questa modifica, la

visualizzazione rimane la medesima, ma sono

rimpicciolite le dimensioni di immagini e

testo.Con risoluzioni ancora

minori rispetto a questa, non sono previste

ulteriori trasformazioni.

max-width: 480px