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)