Post on 07-Jun-2020
MOBILE APP DESIGN: PRINCIPI DI PROGETTAZIONE E UX
matassa@di.unito.itAssunta Matassa
COSA VEDREMO
1. PRINCIPI DI INTERACTION DESIGN 2. LINEE GUIDA PER IL DESIGN3. TESTING DEL DESIGN (?)
2
INTERACTION DESIGN
• è il campo di studi che si occupa di definire le le modalità di interazioni possibili attraverso i dispositivi con cui interagiamo ogni giorno.
3
INTERFACE DESIGN
• è il campo di studi che si occupa di definire le interface dei dispositivi con cui interagiamo ogni giorno.
4
INTERFACE DESIGN
• Il vocabolario definisce interfaccia l’elemento di contatto o di intermediazione fra entità, sistemi, cose o persone diverse . Si tratta di un insieme di strumenti che consente l’interazione con un ambiente.
• Anche se non ce ne rendiamo conto, nella vita di tutti i giorni utilizziamo un gran numero di interfacce, come per esempio:
rubinetti, interruttori, comandi della lavatrice telecomando TV, sistema di guida dell’automobile (cruscotto + comandi), computer (sistema operativo e
programmi)
5
6
• Progettare l’Interfaccia Utente (abbreviato con UI in inglese) significa comporre in un unico disegno:
• metafore di interazione,
• immagini
• concetti usati per veicolare funzioni
• contenuto informativo sullo schermo.
• Proprio per questo risulta essere di fondamentale importanza un’accurata progettazione che focalizzi l’attenzione sull’Utente e i suoi Compiti, piuttosto che sugli aspetti tecnologici.
7
L’Interazione tra utente e sistema viene detta anche dialogo (ISO 9241) e può essere effettuata
utilizzando diversi dispositivi di input e di output.
8
USER CENTERED DESIGN
L’approccio di design, che pone l’utente, le persone, al centro del processo creativo, coinvolgendolo attivamente in tutte le fasi si design.
UX DESIGN
• User EXperience Design si occupa di progettare l’esperienza utente nell’interagire con un sistema.
• L'esperienza utente è qualsiasi aspetto di un'interazione della persona con un dato sistema IT, includendo l'interfaccia, la grafica, la progettazione industriale, l'interazione fisica e manuale.
9
UX• Il termine UX si è diffuso negli ultimi anni in molti
contesti e ambiti disciplinari; tale rapida adozione non è stata però accompagnata da una precisa definizione del concetto, cui vengono pertanto attribuiti significati parzialmente differenti.
• Le definizioni sono accomunate dall’ambizione di superare il concetto di usabilità e di studiare l’esperienza di interazione con le interfacce mediali nella sua totalità.
10
11
RICORDATE LE EURISTICHE DI NIELSEN PER L’USABILITÀ?
Visibilità dello stato
Riconoscere e non
ricordareCorrispondenza Libertà e
ControlloConsistenza e
standard
Prevenzione errori
Flessibilità e efficienza
d’uso
Design minimaliste ed
estetica
Aiutare a riconoscere gli
errori
Guida e documentazione
12
Telefono cellulare : personal computer = 4 : 1
Per molte persone, il cellulare costituisce il mezzo principale con cui accedere a Internet.
• Spesso la UX non è soddisfacente quando si accede a siti pensati per PC da un device mobile:
A. Difficoltà nel reperire i contenuti più utili in mobilità
B. Difficoltà/impossibilità di visualizzare siti molto ricchi
C. Lentezza, costi elevati
13
• Quali contenuti dovrebbero essere accessibili in mobilità?
• Quali bisogni si soddisfano rendendo i propri contenuti accessibili agli utenti in mobilità?
• Qual è il valore aggiunto di accedere a certi contenuti in mobilità?
14
DA DESKTOP A MOBILE
• Connettività diffusa
• Accesso all’informazione “anytime and anywhere”.
• Uso di caratteristiche specifiche del device (chiamate dirette a numeri telefonici, aggiunta di contatti in rubrica…)
• Servizi basati sulla localizzazione.
15
MOBILE WEB
• Obiettivi precisi (goal-oriented attitude).
• Interesse per informazioni specifiche.
• Scarso interesse per la navigazione piuttosto ‘distrazione’.
• Scarso interesse per i documenti prolissi.
16
UTENTI MOBILE
• Display di dimensioni limitate.
• Possibili difficoltà di input.
• Limitato supporto tecnologico (es. script, plug in).
• Memoria limitata (visualizzazione di pagine incomplete).
17
SVANTAGGI DEL MOBILE
• Personalizzabili
• Portatili
• Connessi
• Multi-funzionali (oltre la comunicazione vocale).
• Geo-localizzazione
• Uso con una mano sola
• Sempre accesi
• Strumenti di “alerting” universalmente riconosciuti
18
VANTAGGI DEL MOBILE
• Quanto più un device è portatile quanto può essere utilizzato in più contesti.
• L’interfaccia di un device non portatile non può essere trasferita su un device portatile mantenendo lo stesso livello di usabilità.
• Un’interfaccia adatta ad un device portatile non può permettere di svolgere tutti i compiti che consente l’interfaccia di un device non portatile.
19
DEVICE, INTERFACCE E CONTESTI
20
LE DIMENSIONI DELL’ USABILITÀ DI NIELSEN
Soddisfazione
Apprendibilità Memorabilità Efficienza ed efficacia
Errori
21
LE DIMENSIONI DELL’ USABILITÀ DI NIELSEN + IDEE PER IL MOBILE
SoddisfazioneApprendibilità Memorabilità Efficienza ed efficacia
Errori AttenzionePortabilità Gestione
• Quale tipo di apprendimento si può richiedere all’utente perché impari ad usare la nuova interfaccia (tecnologico, metaforico, idiomatico)?
• Stationary > qualunque tipo
• Seated > qualunque tipo
• Standing > metaforico o idiomatico
• Moving > idiomatico (tipiche di quel contesto)
22
APPRENDIBILITÀ
• Di quante parti può essere composto un device da utilizzare in uno specifico contesto?
• Stationary > non rilevante• Seated > alcune (purché non troppo grandi e
pesanti da trasportare)• Standing > al massimo due• Moving > una sola
23
PORTABILITÀ
• Qual è il livello di attenzione che si può chiedere all’utente (primario, secondario, minimale)?
• Stationary > qualunque livello
• Seated > qualunque livello
• Standing > al massimo secondario
• Moving > solo minimale
24
ATTENZIONE
• In che modo ci si aspetta che l’utente gestisca l’interazione (con due mani, stabile; con due mani, instabile; una mano, sbilanciato)
• Stationary > qualunque tipo
• Seated > qualunque tipo
• Standing > al massimo con due mani, instabile
• Moving > una mano, sbilanciato
25
GESTIONE
Nel contesto “moving” si hanno il maggior numero di vincoli, ma un device mobile con un’interfaccia
adatta può essere usato in tutti i contesti. 26
PROFILI DI CONTESTO
27
Quali accorgimenti possiamo seguire per progettare un esperienza utente ottimale su mobile?
28
Progettare per il mobile vuol dire superare 4 grandi ostacoli:
1. Small Screen
2. Input difficoltoso > fat fingers
3. Ritardi di download
4. Siti semi-progettati
• Limitare le scelte
• Considerare solo il contenuto rilevante per un utente in mobilità
• Sito “piccolo” e ben focalizzato
• Semplice architettura “verticale”
• Annidamento di sottocategorie ben etichettate
29
STRATEGIE
• Limitare il numero delle categorie e dei livelli (non superare i cinque)
• Limitare il numero di link per pagina.• Non lasciare mai categorie/pagine vuote• Ordinare i link in base alla frequenza di accesso aumenta le
possibilità che l’utente trovi subito ciò che desidera: ma potrebbe essere contro-intuitivo
• Nei menu preferire un ordinamento alfabetico• I contenuti meno popolari sono penalizzati
30
STRATEGIE
Per ottenere la migliore performance utente occorre progettare differenti UX per ogni classe di devices.
31
Più lo schermo è grande più l’usabilità sarà migliore.
Uno schermo più piccolo diminuisce la capacità di vedere e richiede un tempo maggiore.
• l’utente deve avere una buona memoria a breve termine perché ha meno contesto di lettura:
less context > less understanding
• Scrolling continuo nella pagina è problematico perché:
• impegna più tempo
• cambia il focus dell’attenzione da ciò che si sta cercando a dove si trova nella pagina introduce il problema di orientarsi nuovamente nella pagina
32
• Cerca di riprodurre delle metafore quanto più fisiche possibili.
• Ad esempio il voltare pagina è un gesto propriamente derivato dalla carta ed è qui adottato per rendere l’interazione più reale e fisica.
• v. Pattern Gestures.
33
METAFORE
• Chrome è l’insieme di elementi di interfaccia della finestra di applicazione che sono al di fuori dell’area di contenuto della finestra (visual design element):
• Toolbar, barre di menu, progress bar e barre dei titoli sono tutti esempi di elementi che sono tipicamente parte di un chrome.
• Permettono di agire sull’interfaccia o sul contenuto.
34
ELEMENTI CHROME
• Un prima problema degli elementi Chrome è rappresentato dal prendere molto spazio, lasciandone sempre meno per i dati e il contenuto in generale.
• Il secondo problema sono le parti temporaneamente nascoste e che appaiono solo a momento opportuno. Questo incide fortemente sullo sforzo cognitivo richiesto all’utente che dovrà sforzare la sua memoria a breve termine per ricordare tutte le sezioni della pagina.
35
ELEMENTI CHROME
• I vantaggi di usare componenti chrome sono comunque molteplici e sempre validi:
• Forniscono un set di comandi di interazione sempre presenti e visibili
• Offrono un set di comandi che sono sempre validi su ogni tipo di contenuto e di dato;
• Promuovono la consistenza e gli standard, facilitando l’apprendimento e il controllo della UX.
36
ELEMENTI CHROME
• E’ vantaggioso usare componenti chrome con comandi generici utilizzabili in diversi contesti per ottenere gli stessi outputs:
> aiutano l’usabilità perché sono facili da ricordare e imparare
37
ELEMENTI CHROME
38
Un chiaro esempio è l’uso del tasto UNDO perché:
• in alcuni casi vuol dire torna alla pagina precedente
• in alcuni casi vuol dire torna al livello superiore di informazioni
• altre volte significa torna all’azione precedente
• altre volte torna alla pagina precedente, che potrebbe portare anche fuori dalla applicazione che stiamo visitando
• Quando scegliamo di riusare uno stesso comando per diversi propositi dobbiamo chiederci:
• l’utente può capire il suo significato in accordo con il diverso contesto d’uso
• l’outcome che l’utente riceve è sempre lo stesso o cambia?
La scelta migliore è sempre quella di testare direttamente con l’utente!!!
39
• Il mobile, però, abilita una serie di gestures e comportamenti che non sono ammessi da altre tipologie di interazione.
40
• Se usati correttamente, i gesti possono delineare nuove forme di affordance senza essere eccessivi.
MA • I gesti sono poco familiari;
• Input complesso > Fat Fingers;
• Sono difficili da ricordare e da non confondere (approf succ).
41
GESTURES
42
SE BEN PROGETTATI E VICINI ALL’INTERAZIONE NATURALE, SONO LA COSA PIU’ SEMPLICE DA RICORDARE.
Il modo più semplice per apprenderli è semplicemente il metterli in pratica!
• Le Swipe gesture activities si differenziano in base al contesto. La velocità con cui un azione è svolta è la prima distinzione tra Drag, Swipe, and Fling.
• Drag: Gesto delicato, lento e più controllato
• Swipe: Gesto grossolano e più rapido
• Fling: Gesto grossolano
• La velocità della gesture è una componente importante anche se le azioni sono reversibili.
• Uno swipe diventa un fling a seconda della velocità di chiusura e a seconda degli elementi coinvolti in ingresso
• Un drag mantiene contatto con un elemento, se si cambia la direzione del gesto questo riporta l’elemento allo stato iniziale
43
GESTURES
• Lo Scrolling è un movimento in verticale/orizzontale in una singola direzione.
• Usage
• Dipende dalla velocità della gesture: drag (slow) vs. swipe vs. fling (fast).
• Scrollare il contenuto deve muovere il contenuto alla stessa velocità del gesto come se fosse ancorato al dito.
44
SCROLLING
45
PAN
Il Pan è un movimento unidirezionale che si usa per espandere una vista
• Pan si usa per:
• Contenuti sconfinati (maps)
• Contenuti più grandi della larghezza/altezza dello schermo (zoomed in web page or photo)