Modelli e stili di interazione

Tecnologie per il Web e lo Sviluppo Multimediale
Modelli e stili di interazione
Luca Pulina
Corso di Laurea in Scienze della Comunicazione
Università degli Studi di Sassari
A.A. 2015/2016
Luca Pulina (UNISS)
L’Interazione
1 / 60
Outline
1
I modelli per l’interazione
2
Modelli concettuali di interazione
3
Stili di Interazione
Luca Pulina (UNISS)
L’Interazione
2 / 60
Outline
1
I modelli per l’interazione
2
Modelli concettuali di interazione
3
Stili di Interazione
Luca Pulina (UNISS)
L’Interazione
3 / 60
Interazione
Ingredienti base:
I
I
L’utente
La macchina
Interazione: ogni comunicazione tra utente e computer, diretta o
indiretta.
La comunicazione avviene attraverso l’interfaccia.
Poichè la comunicazione possa avere successo, l’interfaccia deve
tradurre i concetti dell’utente in quelli della sistema (macchina).
Luca Pulina (UNISS)
L’Interazione
4 / 60
Terminologia dell’interazione
L’utente usa il sistema interattivo per raggiungere i suoi obiettivi,
nell’ambito di un certo dominio applicativo.
Obiettivo: quello che l’utente vuole raggiungere
Dominio: area applicativa oggetto dello studio
I
descrive concetti, competenze e conoscenze
Intenzione: sequenza di azioni generiche che portano al
raggiungimento dell’obiettivo
Compito o azione: traduzione dell’intenzione in azioni specifiche
Luca Pulina (UNISS)
L’Interazione
5 / 60
Modello di Norman
In questo modello l’attenzione è incentrata maggiormente sulla
visione che l’utente ha della interazione.
È basato su di un ciclo di esecuzione/valutazione.
Luca Pulina (UNISS)
L’Interazione
6 / 60
Ciclo di esecuzione/valutazione
Esecuzione: l’utente ha un obiettivo, formula un piano d’azione e
lo esegue mediante l’interfaccia.
Valutazione: l’utente osserva l’interfaccia per valutare, rispetto
all’obiettivo, il risultato dell’esecuzione e determina le azioni
successive.
Luca Pulina (UNISS)
L’Interazione
7 / 60
Ciclo di esecuzione/valutazione – Obiettivo
L’utente stabilisce l’obiettivo
Formula l’intenzione
Specifica la sequenza di azioni
Esegue le azioni
Percepisce lo stato del sistema
Interpreta lo stato del sistema
Valuta lo stato del sisterma in relazione all’obiettivo
Luca Pulina (UNISS)
L’Interazione
8 / 60
Ciclo di esecuzione/valutazione – Esecuzione
L’utente stabilisce l’obiettivo
Formula l’intenzione
Specifica la sequenza di azioni
Esegue le azioni
Percepisce lo stato del sistema
Interpreta lo stato del sistema
Valuta lo stato del sisterma in relazione all’obiettivo
Luca Pulina (UNISS)
L’Interazione
9 / 60
Ciclo di esecuzione/valutazione – Valutazione
L’utente stabilisce l’obiettivo
Formula l’intenzione
Specifica la sequenza di azioni
Esegue le azioni
Percepisce lo stato del sistema
Interpreta lo stato del sistema
Valuta lo stato del sisterma in relazione all’obiettivo
Luca Pulina (UNISS)
L’Interazione
10 / 60
Interfaccia come traduttore
L’interfaccia esegue “traduzioni” tra due linguaggi:
Linguaggio dei compiti (task): usato per descrivere l’utente, i
suoi obiettivi, le sue azioni, ...
Linguaggio di base (core): usato per descrivere il sistema, il suo
stato, le sue capacità, ...
Luca Pulina (UNISS)
L’Interazione
11 / 60
Usare il modello di Norman – I Golfi
Golfo dell’esecuzione: differenza tra le azioni formulate dall’
utente per raggiungere l’obiettivo e le azioni permesse dal
sistema.
Golfo della valutazione: differenza tra la presentazione dello
stato del sistema e le aspettative dell’utente.
L’interfaccia è un ponte gettato sul golfo.
Luca Pulina (UNISS)
L’Interazione
12 / 60
Errori: sviste e sbagli
Svista (slip)
I
I
I
Corretta formulazione dell’obiettivo
Corretta formulazione dell’intenzione
Azione sbagliata
Sbaglio (mistake)
I
Obiettivo o intenzione errata
Come rimediare?
I
I
Svista: migliorare interfaccia
Errore: bisogna fornire all’utente una migliore comprensione del
sistema; riprogettazione radicale dell’interfaccia.
Luca Pulina (UNISS)
L’Interazione
13 / 60
Limiti del modello di Norman
Il modello di Norman serve a mettere in evidenza difficoltà di
comunicazione tra utente e sistema+interfaccia.
Non analizza la comunicazione tra sistema e interfaccia.
I
Estensione di Abowd e Beale.
Luca Pulina (UNISS)
L’Interazione
14 / 60
Modello di Abowd e Beale
Interaction Framework
Quattro componenti:
1
Utente (U)
2
Sistema (S)
3
Input (I)
4
Output (O)
Luca Pulina (UNISS)
L’Interazione
15 / 60
Interaction Framework
Ogni componente ha il suo linguaggio
Utente: linguaggio del compito (task)
Sistema: linguaggio di base (core)
Input: linguaggio di input
Output: linguaggio di output
Interazione: traduzione tra linguaggi
Problemi di interazione = problemi di traduzione
Luca Pulina (UNISS)
L’Interazione
16 / 60
Interaction Framework – Utente
L’utente ha un obiettivo che è:
Tradotto in azioni attraverso l’input dell’interfaccia (articolazione).
Tradotto in operazioni sul sistema, che cambia stato
(prestazione).
Tradotto nell’output dell’interfaccia (presentazione).
Interpretato dall’utente (osservazione).
Luca Pulina (UNISS)
L’Interazione
17 / 60
Esempio
Luca Pulina (UNISS)
L’Interazione
18 / 60
Modello di Abowd & Beale
Il modello di Abowd & Beale fornisce una cornice generale per la
comprensione dell’interazione
Non è ristretto ai sistemi computerizzati.
Identifica i maggiori componenti coinvolti nell’interazione
Permette valutazioni comparative dei sistemi
Luca Pulina (UNISS)
L’Interazione
19 / 60
Outline
1
I modelli per l’interazione
2
Modelli concettuali di interazione
3
Stili di Interazione
Luca Pulina (UNISS)
L’Interazione
20 / 60
Interazione
Paradigmi: Particolare filosofia o modo di pensare l’interazione.
Modelli concettuali: Descrizione del sistema in termini di idee e
concetti integrati sul suo funzionamento, comportamento e modo
di presentarsi (es. metafora).
Stili: Modalità concreta attraverso la quali l’utente può
comunicare o interagire con il sistema.
Luca Pulina (UNISS)
L’Interazione
21 / 60
Modello concettuale
Descrizione del sistema in termini di idee e concetti integrati sul
suo funzionamento, comportamento e modo di presentarsi.
L’elenco dei modelli non è esaustivo, nè i modelli sono tra loro
mutuamente esclusivi.
Tre modelli concettuali:
I
I
I
quello del progettista
quello implementato dal sistema
quello che si forma l’utente
I tre modelli devono coincidere!
Luca Pulina (UNISS)
L’Interazione
22 / 60
Modelli basati sull’attività
Fornire istruzioni (comandi)
I
I
Utente fornisce istruzioni al sistema su cosa fare
Es: Videoregistratore, HiFi, computer Unix o DOS
Conversare
I
I
Il sistema si comporta come un interlocutore di una conversazione
Es: Sistemi di prenotazione telefonica
Manipolare e navigare
I
Manipolazione di oggetti virtuali e navigazione in spazi virtuali ⇒
manipolazione diretta
Esplorare e sfogliare
I
L’utente può esplorare e “sfogliare” l’informazione ⇒ ipertesto
Luca Pulina (UNISS)
L’Interazione
23 / 60
Manipolazione diretta (1/2)
Gli oggetti di interesse sono rappresentati nella UI (es. i file) e
l’utente li manipola (compie azioni su di essi) in modo diretto
(trascino con il mouse)
Principi (Schneiderman 1982):
I
I
I
Visibilità dell’oggetto di interesse
Azioni incrementali, reversibili, con feedback immediato
Sostituzione di comandi dalla sintassi complicata con azioni
Luca Pulina (UNISS)
L’Interazione
24 / 60
Manipolazione diretta (2/2)
Vantaggi:
Facile da apprendere
Evita errori
Incoraggia esplorazione
Punta sul riconoscimento (invece che sul ricordo)
Svantaggi:
Gli utenti esperti possono preferire metodi più snelli
Non tutte le operazione si possono rendere in termini di
manipolaione di oggetti
Luca Pulina (UNISS)
L’Interazione
25 / 60
Manipolazione diretta e indiretta – Esempi
Ufficio: manipolazione diretta
I
L’utente interagisce con un mondo artificiale
Industria: manipolazione indiretta
I
I
L’utente interagisce con il mondo reale attraverso l’interfaccia
Problemi: feedback, ritardi
Luca Pulina (UNISS)
L’Interazione
26 / 60
Modelli basati su oggetti
Modulo da riempire
I
L’interfaccia è un modulo che l’utente deve compilare
Agente
I
I
I
L’interfaccia è un agente che esegue compiti stabiliti dall’utente
È l’opposto della manipolazione diretta
Esempi: filtro anti-spam, assistente di Office, ...
Luca Pulina (UNISS)
L’Interazione
27 / 60
Interfaccie basate su agenti
Caratteristiche dei compiti adatti per agenti (Beale & Wood, 1994):
Adattamento: il compito richiede adattabilità, come apprendere
ad evitare errori ed adattarsi alle preferenze dell’utente.
Ricerca: il compito non è ben definito e dunque il software deve
tentare varie opzioni.
Dimostrazione: il compito comporta l’insegnamento su come fare
qualcosa.
Guida: il compito richiede co-operazione tra umano e agente.
Autonomia: il task richiede di essere seguito, ma non richiede
input dall’utente, per cui ha senso delegare.
Asincronia: il compito presenta un ritardo significativo tra il suo
inizio e la fine.
Luca Pulina (UNISS)
L’Interazione
28 / 60
Metafore
L’essenza della metafora è comprendere ed avere esperienza di una
cosa in termini di un’altra.
Producono modelli concettuali (basati sull’attività o sull’oggetto o
altro).
Forniscono all’utente analogie ⇒ aiutano il problem solving.
Rendono l’interfaccia familiare e facilitano l’apprendimento.
Può essere fuorviante: gli utenti potrebbero prendere la metafora
alla lettera e farsi un modello concettuale sbagliato del sistema.
Luca Pulina (UNISS)
L’Interazione
29 / 60
La metafora del Desktop
Il video “è” la scrivania dell’utente
Documenti, cartelle
Disordine!
Luca Pulina (UNISS)
L’Interazione
30 / 60
Critiche all’uso di metafore
Comporta sempre delle forzature (il cestino non è sopra la
scrivania...)
La metafora potrebbe entrare in conflitto con principi di progetto
(v. più avanti).
Incapacità di comprendere il funzionamento del sistema oltre alla
metafora.
Limita l’immaginazione del progettista nell’escogitare nuovi
modelli concettuali.
Luca Pulina (UNISS)
L’Interazione
31 / 60
Outline
1
I modelli per l’interazione
2
Modelli concettuali di interazione
3
Stili di Interazione
Luca Pulina (UNISS)
L’Interazione
32 / 60
Gli Stili (1/2)
Sono le modalità concrete attraverso le quali l’utente può comunicare
o interagire con il sistema
Interfaccia a linea di comando (fornire istruzioni)
Interrogazione (fornire istruzioni)
Selezione in un menu (fornire istruzioni)
Linguaggio naturale
Domanda/risposta (dialogare)
Compilazione di moduli (modulo)
Fogli elettronico (modulo)
Point & click (esplorare e sfogliare)
WIMP (manipolazione diretta)
Luca Pulina (UNISS)
L’Interazione
33 / 60
Gli Stili (2/2)
Gli stili di interazione si possono inquadrare in uno (o più) modelli
concettuali.
Tutti questi stili non sono fra loro mutuamente esclusivi ma
possono essere combinati a seconda delle applicazioni.
Lo stile più adatto dipende anche dal profilo dell’utente e dal
compito.
Luca Pulina (UNISS)
L’Interazione
34 / 60
Interfaccia a linea di comando (1/2)
Comunica istruzioni direttamente al computer.
Parole chiave, combinazioni di tasti.
Adatto per compiti ripetitivi e utenti esperti.
Accesso diretto alle funzionalità del sistema.
Si basa sul ricordo.
Elevato sforzo cognitivo per l’utente.
Luca Pulina (UNISS)
L’Interazione
35 / 60
Interfaccia a linea di comando (2/2)
Vantaggi:
Flessibile
Iniziativa di dialogo all’utente
Piace agli utenti esperti
Supporta la creazione di script o macro
Pemette l’interazione con computer remoti anche con rete lenta
Svantaggi:
Difficile da ricordare
Difficile da imparare
Errori di battitura
Cambiamento di stato non visibile
Inadatto a non esperti
Luca Pulina (UNISS)
L’Interazione
36 / 60
Interfacce di interrogazione (query)
L’utente deve specificare un’interrogazione (query)
Sono usate principalmente nelle basi di dati e nei sistemi di
recupero delle informazioni.
La query viene espressa in un linguaggio di interrogazione (ad
es., SQL).
Richiede la conoscenza della struttura del database e della
sintassi del linguaggio di interrogazione.
Sono adatte per utenti esperti
Luca Pulina (UNISS)
L’Interazione
37 / 60
Menu (1/3)
Luca Pulina (UNISS)
L’Interazione
38 / 60
Menu (2/3)
L’interazione avviene mediante selezione, da parte dell’utente, di
una o più opzioni tra l’elenco di quelle visualizzate.
Le opzioni sono visibili: si basa più sul riconoscimento che sul
ricordo (minor sforzo cognitivo).
Può essere di solo testo oppure grafico.
La scelta può avvenire per mezzo di numeri, lettere, tasti cursore
o del mouse.
Spesso sono organizzati per raggruppamenti gerarchici.
Adatto ad utenti con bassa conoscenza del sistema ed a compiti
strutturati.
Luca Pulina (UNISS)
L’Interazione
39 / 60
Menu (3/3)
Vantaggi:
Ideale per i novizi o utenti occasionali
Incoraggia l’esplorazione
Mostra tutte le funzionalità
Non richiede abilità di battitura
Svantaggi:
Occupa spazio video
Troppi menu fanno confusione, sovraccarico informativo.
Non adatto a compiti ripetitivi
Luca Pulina (UNISS)
L’Interazione
40 / 60
Linguaggio Naturale
Sistemi per il riconoscimento automatico del linguaggio
Vantaggi:
Familiare all’utente
Svantaggi:
Ambiguità
Difficile da realizzare in maniera completa
Luca Pulina (UNISS)
L’Interazione
41 / 60
Domanda/Risposta (1/2)
L’interazione avviene attraverso risposte fornite dall’utente a
domande formulate dal sistema.
Adatto a sistemi con funzionalità ristrette.
Adatto ad utenti con poca esperienza del compito e scarsa del
sistema.
Luca Pulina (UNISS)
L’Interazione
42 / 60
Domanda/Risposta (2/2)
Vantaggi:
Facile da imparare
Semplice da usare
Svantaggi:
Iniziativa di dialogo del sistema
Poca flessibilità
Limitata potenza
Luca Pulina (UNISS)
L’Interazione
43 / 60
Compilazione di moduli (1/3)
Luca Pulina (UNISS)
L’Interazione
44 / 60
Compilazione di moduli (2/3)
L’interazione avviene mediante compilazione, da parte
dell’utente, di moduli simili ai documenti cartacei.
Adatte per compiti d’ufficio
I
I
inseririmento dati
recupero dell’informazione (es. Biblioteca)
Stile familiare anche ad utenti inesperti grazie alla metafora del
modulo cartaceo.
Luca Pulina (UNISS)
L’Interazione
45 / 60
Compilazione di moduli (3/3)
Vantaggi:
Facile da apprendere
Poco carico cognitivo
Facilita l’inserimento dati
Aggiornamento visibile
Svantaggi:
Richiede abilità di battitura
Poco flessibile
Luca Pulina (UNISS)
L’Interazione
46 / 60
Foglio elettronico (1/2)
Luca Pulina (UNISS)
L’Interazione
47 / 60
Foglio elettronico (2/2)
L’interazione avviene tramite inserimento dati, da parte dell’utente,
in una griglia di celle predefinita.
Variante sofisticata della compilazione di moduli.
È programmabile.
Le celle possono contenere valori o formule.
Le formule fanno riferimento a valori contenuti in altre celle.
Quando un dato viene modificato dall’utente, automaticamente si
modificano tutti quelli che dipendono da questo.
Ogni cella può essere un input o un output.
Adatto ad utenti con sufficiente conoscenza sia del compito che
del sistema.
Luca Pulina (UNISS)
L’Interazione
48 / 60
Point & Click (1/2)
Luca Pulina (UNISS)
L’Interazione
49 / 60
Point & Click (2/2)
L’utente deve semplicemente “cliccare” sull’elemento di interesse:
I
I
I
Icona
Hyperlink
Locazione su una mappa
Si può usare in
I
I
Applicazioni multimediali e/o ipertestuali (es: web browser)
Biglietterie automatiche o punti di informazione
La digitazione è ridotta al minimo
Luca Pulina (UNISS)
L’Interazione
50 / 60
Interfaccia WIMP (1/3)
Luca Pulina (UNISS)
L’Interazione
51 / 60
Interfaccia WIMP (2/3)
WIMP = Windows, Icons, Menus, Pointers
È lo stile della maggioranza degli attuali PC (MS Windows, Apple
Mac OS, ...).
L’ interazione avviene mediante operazioni (puntamenti,
trascinamenti, etc...) effettuate dall’utente su oggetti virtuali
(bottoni, icone,etc.).
Adatto ad utenti con scarse conoscenze del sistema e una
discreta conoscenza del compito.
Incarna il modello della manipolazione diretta.
Luca Pulina (UNISS)
L’Interazione
52 / 60
Interfaccia WIMP (3/3)
Vantaggi:
Facile da imparare
Le operazioni sono spesso reversibli
Flessibile
Feedback istantaneo
Intuitivo
Svantaggi:
Può essere inefficiente
Occupazione di spazio video
Più costoso da programmare
Luca Pulina (UNISS)
L’Interazione
53 / 60
Elementi della WIMP
Gli elementi di una GUI si chiamamo widget (window gadget)
Yahoo! widgets
Luca Pulina (UNISS)
L’Interazione
54 / 60
Elementi della WIMP – Finestre
Aree dello schermo che si comportano come se fossero indipendenti
Possono contenere testo o oggetti grafici.
Possono essere spostate o ridimensionate.
Possono affiancarsi o sovrapporsi ed oscurarsi a vicenda.
Barra di scorrimento (scrollbar): permette di muovere il contenuto
della finestra sopra e sotto o da un lato all’altro.
Barra del titolo (title bar): descrive il nome della finestra.
Luca Pulina (UNISS)
L’Interazione
55 / 60
Elementi della WIMP – Icone e Puntatori
Icone (Icons)
Sono piccole immagini o figure usate per rappresentare alcuni
oggetti dell’interfaccia o un’azione.
Le finestre possono essere chiuse (iconificate), ovvero
rappresentate da una icona.
Puntatori (Pointers)
Identifica una corrispondenza spaziale fra lo schermo e la
posizione fisica del mouse.
Tipicamente una piccola freccia, ma può cambiare (es. mano o
clessidra).
Luca Pulina (UNISS)
L’Interazione
56 / 60
Elementi della WIMP – Menu
Scelta (tramite il puntatore) di operazioni elencate sul display.
Alleggeriscono il compito della memoria a breve termine.
Non bisogna mettere troppe voci, meglio usare menu a cascata
(cascading menu)
I
la selezione di un menu apre un altro menu adiacente.
Menu principale visibile sempre come barra dei menu.
Varie tipologie di menu:
I
I
I
Menu a tendina (pull-down)
Menu fall-down: simili ai menu a tendina, ma non serve fare click
Menu a comparsa (pop-up), appaiono dove si clicca
Luca Pulina (UNISS)
L’Interazione
57 / 60
Elementi della WIMP – Pulsanti
Singole regioni di uno schermo che se selezionate invocano
un’azione.
Altri tipo di pulsanti:
I
I
Radio button: se la scelta è mutuamente esclusiva
Check box: se permette scelte non esclusive
Luca Pulina (UNISS)
L’Interazione
58 / 60
Elementi della WIMP – Barra degli strumenti
Serie di piccoli pulsanti, simile alla barra dei menu
Contiene funzionalità usate di frequente, o raggruppate per
categoria
Personalizzabili
Luca Pulina (UNISS)
L’Interazione
59 / 60
Elementi della WIMP – Finestre di dialogo
Finestre di informazione che appaiono per segnalare eventi
importanti o per richiedere alcuni dati.
Esempio: quando si sta salvando un file, appare una finestra di
dialogo che richiede all’utente di specificare il nome del file e la
locazione. Quando il file è stato salvato la finestra sparisce.
Modali: bloccano l’applicazione finchè non vengono chiuse
I
Serve per garantire che gli errori vengano corretti al momento
giusto o che tutte le informazione per completare un compito
essenziale siano disponibili.
Luca Pulina (UNISS)
L’Interazione
60 / 60