Progettazione per l’utente in mobilità MUI

1

Progettazione per l’utente in mobilità

MUI

Laboratorio di Interazione Uomo-Macchina – a.a. 2010/2011Fabiana Vernero

2

Utenti mobili, device mobili


Lezione 3 -- 3

Perché? - 1

• Telefono cellulare : personal computer = 4 : 1

• Per molte persone, il cellulare costituisce il mezzo principale con cui accedere a Internet.

Laboratorio di Interazione Uomo-Macchina – a.a. 2010/2011 F. Vernero

Lezione 3 -- 4

Perché? - 2

• Spesso la user experience non è soddisfacente quando si accede a siti pensati per PC da un device mobile:

– Difficoltà nel reperire i contenuti più utili in mobilità

– Difficoltà/impossibilità di visualizzare siti molto ricchi

– Lentezza, costi elevati


Lezione 3 -- 5

Da “desktop” a “mobile”

• Quali contenuticontenuti dovrebbero essere accessibili in mobilità?

• Quali bisognibisogni si soddisfano rendendo i propri contenuti accessibili agli utenti in mobilità?

• Qual è il valore aggiuntovalore aggiunto di accedere a certi contenuti in mobilità?


Lezione 3 -- 6

Mobile Web

• 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.


Lezione 3 -- 7

Utenti in mobilità

• Bisogni a breve termine.

• Obiettivi precisi (goal-oriented attitude).

• Interesse per informazioni specifiche.

• Scarso interesse per la navigazione.

• Scarso interesse per i documenti prolissi.


Lezione 3 -- 8

Mobile devices (svantaggi)

• Display di dimensioni limitate.• Possibili difficoltà di input.• Limitato supporto tecnologico (es. script, plug

in).• Limitate capacità computazionali ( lentezza

nella visualizzazione delle pagine, specie se ricche o con errori di markup…)

• Memoria limitata ( visualizzazione di pagine incomplete).


Lezione 3 -- 9

Mobile devices (vantaggi)

• Personali• Personalizzabili• Portatili• Connessi• Multi-funzionali (oltre la comunicazione vocale).• Geo-localizzazione• Uso con una mano sola• Sempre accesi• Strumenti di “alerting” universalmente

riconosciutiLaboratorio di Interazione Uomo-Macchina – a.a. 2010/2011 F. Vernero

Lezione 3 -- 10

Architettura dell’informazione

• L’informazione dovrebbe essere strutturata il più semplicemente possibile:– Differenza tra una buona e una cattiva

esperienza!

• Numero di click necessari per ottenere l’informazione desiderata.– Lentezza nel reperimento dei dati


Lezione 3 -- 11

Strategie

• Limitare le scelte– Considerare solo il contenuto rilevante per un

utente in mobilità– Sito “piccolo” e ben focalizzato

• Semplice architettura “verticale” (drill down)– Annidamento di sottocategorie ben etichettate


Lezione 3 -- 12

Annidamento

• 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• Offrire esempi/preview per i contenuti annidati,

per aiutare gli utenti a scegliere.• Ordinare i link in base alla frequenza di accesso

– Aumentano le possibilità che l’utente trovi subito ciò che desidera

– I contenuti meno popolari sono penalizzati


Lezione 3 -- 13

Schermi di dimensioni diverse

• Le dimensioni dei display e il layout delle tastiere variano molto.

• La larghezza dello schermo è più importante della lunghezza.

• Soluzioni:– Conoscere il proprio target– Personalizzare in base al device


Lezione 3 -- 14

Schermi di dimensioni diverse


Lezione 3 -- 15

Progettare per il device giusto

• Dominare la complessità considerando classi di device:– Voice-only phones– Feature phones– Smartphones (applicazioni, schermo più grande)– PDAs (organizzazione piuttosto che comunicazione,

tastiera QWERTY o stilo, schermo più grande)

• I confini tra le classi non sono ben definiti e si spostano costantemente.


Lezione 3 -- 16

Usable Screen Width: 120 pixels, minimum.Markup Language Support: XHTML Basic 1.1 (delivered with content type application/xhtml+xml)Character Encoding: UTF-8.Image Format Support: JPEG, GIF 89a.Maximum Total Page Weight: 20 kilobytes.Colors: 256 Colors, minimum.Style Sheet Support: CSS Level 1; In addition, CSS Level 2 @media rule together with thehandheld and all media type.HTTP: HTTP/1.0 or more recent.Script: No support for client side scripting.

Default Delivery Context• Il W3C ha definito un contesto tecnologico “di base”, specificando le

caratteristiche che qualunque device mobile dovrebbe avere.• Vantaggio: I servizi accessibili nel DDC sono accessibili da qualunque

device mobile.• Svantaggio: L’esperienza utente e’ molto povera (“baseline experience”; non

vengono sfruttate le possibilità dei device più evoluti, che sono la maggior parte).


Lezione 3 -- 17

Paradigmi di navigazione

• Gli schemi di navigazione tipici del desktop-Web (es tab, menu globali estesi in orizzontale…) non sono molto adatti al contesto mobile.– Navigazione verticale, basata su una lista di opzioni.– Un solo livello di navigazione per volta (per non

occupare troppo spazio e non presentare troppe opzioni agli utenti).

– “Punti di fuga”: Collegamenti alla pagina successiva, alla pagina genitore, alla home (generalmente a fondo pagina, o sia in alto che in basso).

– Layout monolitici con testo giustificato a sinistra.


Lezione 3 -- 18Laboratorio di Interazione Uomo-Macchina – a.a. 2010/2011 F. Vernero

19

Multiple User Interfaces

Tante interfacce per un solo servizio


Lezione 3 -- 20

Definizione

• Un sistema che permette:– Accesso ad un servizio da diverse piattaforme– Viste “differenti” dell’informazione disponibile– Coordinamento delle funzioni offerte

• In breve:– Supporta diversi stili di interazione ed interfaccia– Permette di raggiungere obiettivi correlati usando

mezzi diversi– Caratteristiche e funzioni si comportano in modo

coerente sulle varie piattaforme


Lezione 3 -- 21

Capire i device

• In una MUI, tipi diversi di device si supportano e definiscono insieme un’esperienza coerente.– Desktop…– Mobile…– Situated (es. totem)…– Home (es. Interactive tv)– Special purpose embedded devices…


Lezione 3 -- 22

Personal desktop/laptop computer

• Display ampio, tastiera comoda, buone capacità computazionali, possibilità di leggere dati da memorie terziarie…

• Sistema operativo generico, disponibilità di varie applicazioni…

• Adatto per svolgere un compito in modo approfondito e focalizzato…

http://www.andriastore.it/catalog/images/desktop_computer.jpg


Lezione 3 -- 23

Device mobile• Display, modalità di input e

capacità computazionali limitate…

• Possibilità di interazione vocale, ma..

• Adatto a compiti nell’ambito della comunicazione e/o organizzazione personale

• Sempre con sé, fornisce connettività quasi ovunque…

• Consente di ottenere informazioni “al volo”, permette la geolocalizzazione…

http://ziogeek.com/wp-content/uploads/2009/07/samsung-i7500-android-smartphone.jpg


Lezione 3 -- 24

Situated devices

• Dedicati a specifici servizi (non sono sistemi flessibili)…

• Possono essere interattivi o meno…

• Possono fornire informazioni “a colpo d’occhio”…

• Hanno un legame con il posto in cui si trovano…http://www.wetouch.it/images/totemhome.jpg


Lezione 3 -- 25

Interactive Television

• Ampio display, modalità di input limitate a pochi tasti…

• Fruizione rilassata, in un ambiente rassicurante e familiare…

• Non adatto per compiere delle elaborazioni…

http://bobrien.com/images/img_remote.jpg


Lezione 3 -- 26

Special purpose embedded devices

• Capacità computazionali limitate, non adatti per servizi generici…

• Usano sensori ed attuatori: contatto ed interazione con l’ambiente circostante, modalità di input naturali…

• Possono rendere “intelligente” e “connesso” un oggetto generico, che avrebbe comunque una sua funzione (es. la maglia può essere indossata)

http://faketakemake.posterous.com/?page=2

http://web.media.mit.edu/~leah/images/diy_lilypad/turn_signal/turn_%20-%2044.jpg


Lezione 3 -- 27

Al lavoro!

• Come caratterizzereste ulteriormente ciascuna delle categorie di device proposte?– Suggerimento: concentratevi su situazioni e

bisogni dell’utente


Lezione 3 -- 28

Caratteristiche - 1

• Astrazione– Le informazioni e i servizi dovrebbero essere gli stessi

a partire da qualunque piattaforma.– Le modalità di presentazione possono variare in base

alle caratteristiche della piattaforma stessa.

• Consistenza “cross-platform”– Il comportamento di una MUI deve essere lo stesso

su qualunque piattaforma (es. devono essere mantenute le preferenze dell’utente)

– Il look and feel può variare…


Lezione 3 -- 29

Caratteristiche - 2

• Uniformità– Le funzioni dovrebbero essere le stesse su tutte le

piattaforme e dovrebbero funzionare nello stesso modo (es., essere composte dagli stessi passi…)

• Consapevolezza dei trade-off– E’ possibile progettare delle interfacce semplificate in

cui non siano presenti alcune caratteristiche secondarie, se per l’utente è un valore accedere comunque al servizio da una certa piattaforma


Lezione 3 -- 30

Caratteristiche - 3

• Conformità con gli standard :– Non è necessario che tutte le caratteristiche

siano presenti su tutte le piattaforme. – E’ bene adeguarsi allo standard della

piattaforma per definire quali caratteristiche mantenere e quali no.


31

Usabilità delle MUI


Lezione 3 -- 32

Usabilità delle MUI

• Contesto d’uso: posto + situazione (tipo di task…)

• Consente di valutare una combinazione device + interfaccia

desktop laptop palmtop handheld

The personal computing continuum [Weiss, 2002]

size portability


Lezione 3 -- 33

Contesti d’uso

• StationaryStationary: non è necessario (ma è possibile) che i device siano portatili.

• SeatedSeated: l’utente ha entrambe le mani libere per interagire col device e può dedicare tutta la sua attenzione all’interfaccia.

• StandingStanding: l’utente regge il device con una mano e ci lavora con l’altra.

• MovingMoving: l’utente regge e utilizza il device con la stessa mano (deve averne una libera)


Lezione 3 -- 34

Device, interfacce e contesti

• Quanto più un device è portatile, in tanti più contesti può essere utilizzato.

• 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.


Lezione 3 -- 35

Fattore “portabilità”

• 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


Lezione 3 -- 36

Fattore “attenzione”

• 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 marginale


Lezione 3 -- 37

Fattore “gestione”

• 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


Lezione 3 -- 38

Fattore “apprendibilità”

• 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


Lezione 3 -- 39

Profilo dei contesti

• Nel contesto “moving” ho il maggior numero di vincoli, ma un device mobile con un’interfaccia adatta può essere usato in tutti i contesti.

portabilità attenzione gestione apprendibilità

stationary alcuni primaria due mani, stabile

tecnologica

seated alcuni primaria due mani, stabile

metaforica

standing due secondaria due mani, instabile

metaforica

moving uno minima una mano, sbilanciato

idiomatica


40

Interusabilità


Lezione 3 -- 41

Introduzione

• Quando gli utenti entrano in un nuovo contesto, devono poter applicare le conoscenze già acquisite.

• Queste conoscenze devono poter essere adattate in base alle caratteristiche del device.

• Il servizio deve essere continuo:– Continuità della conoscenza (una conoscenza unitaria

deriva dall’uso dei diversi device)– Continuità del task (memoria delle ultime operazioni

svolte)


Lezione 3 -- 42

Consistenza

• PercettivaPercettiva: l’aspetto e la struttura dell’informazione (es. ordine) deve essere simile sui vari device.

• LessicaleLessicale: uniformità nell’uso delle etichette.

• SintatticaSintattica: uniformità nelle operazioni da svolgere per ottenere un certo obiettivo.

• SemanticaSemantica: tutti i device dovrebbero offrire gli stessi servizi (ridondanza)


Lezione 3 -- 43

Trasparenza

• Gli utenti devono poter capire immediatamente che cosa possono fare, come possono farlo e perché il sistema risponde in un certo modo.

• A seconda che i device che compongono una MUI siano ridondanti, mutuamente esclusivi o complementari, si devono affrontare difficoltà diverse per rendere il sistema trasparente.


Lezione 3 -- 44

Adattamento

• Il sistema dovrebbe sapere:– Quali device l’utente ha già utilizzato;– La quantità e la frequenza d’uso di ogni

device;– L’ultima operazione compiuta con la MUI

• Il sistema può:– Adattare il livello delle spiegazioni offerte.– Contestualizzare le informazioni (es. ricordare

quali operazioni hanno determinato lo stato attuale del sistema)


Lezione 3 -- 45

Bibliografia

• Ahmed Seffah, Homa Javahery (eds.), Multiple User Interfaces, 2004, Wiley.


Lezione 3 -- 46

Al lavoro!

• Progettare (a grandi linee) una MUI:– Per quale dominio?– Quali sono i servizi che la MUI deve offrire?– Da quali device è composta la MUI?– Quali sono i benefici associati a ciascuno dei

device?– Quali funzioni offrono i diversi device?– Quali caratteristiche possono non essere

supportate su alcuni dei device? Perché?


Progettazione per l’utente in mobilità MUI

Documents

Transcript of Progettazione per l’utente in mobilità MUI