![Page 1: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/1.jpg)
HCI: Modelli e Stili
![Page 2: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/2.jpg)
Hardware
Software (sistema operativo, programmi)
interfaccie
Diffusione sistemi informatici → Varietà contesti → Necessità di interfaccie
progettista
programmatore
Web designer, grafico, Psicologo, musicista, Fisioterapista etc...
![Page 3: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/3.jpg)
Modelli d’interazione
terminologia dell’interazione modello di Norman
interaction framework
![Page 4: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/4.jpg)
Alcuni termini dell’interazione
dominio – l’area di lavoro che si sta studiando es. il concetto di quadrato, cerchio etc..
obiettivo – ciò che si desidera ottenere es. creazione di un triangolo rosso
compito – come lo si eseguirà – scomposizione in termini di operazioni es. … selezionare lo strumento Colore
riempimento, fare clic sul triangolo !
![Page 5: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/5.jpg)
Il modello di Donald Norman
• Sette fasi: – l’utente stabilisce l’obiettivo – concepisce l’intenzione – specifica le azioni sull’interfaccia – esegue l’azione – percepisce lo stato del sistema – interpreta lo stato del sistema – valuta lo stato del sistema rispetto all’obiettivo !
• Il modello di Norman si concentra sul punto di vista dell’utente sull’interfaccia
![Page 6: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/6.jpg)
Il ciclo di esecuzione/valutazione
!!
!!!
• l’utente stabilisce l’obiettivo • concepisce l’intenzione • specifica le azioni sull’interfaccia • esegue l’azione • percepisce lo stato del sistema • interpreta lo stato del sistema • valuta lo stato del sistema rispetto all’obiettivo
valutazioneesecuzione
sistema
obiettivo
![Page 7: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/7.jpg)
Il ciclo di esecuzione/valutazione
!!!
!!• l’utente stabilisce l’obiettivo • concepisce l’intenzione • specifica le azioni sull’interfaccia • esegue l’azione • percepisce lo stato del sistema • interpreta lo stato del sistema • valuta lo stato del sistema rispetto all’obiettivo
sistema
valutazioneesecuzione
obiettivo
![Page 8: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/8.jpg)
Il ciclo di esecuzione/valutazione
!!!
!!
• l’utente stabilisce l’obiettivo • concepisce l’intenzione • specifica le azioni sull’interfaccia • esegue l’azione • percepisce lo stato del sistema • interpreta lo stato del sistema • valuta lo stato del sistema rispetto all’obiettivo
valutazione
sistema
esecuzioneobiettivo
![Page 9: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/9.jpg)
Il ciclo di esecuzione/valutazione
!!!
!!
• l’utente stabilisce l’obiettivo • concepisce l’intenzione • specifica le azioni sull’interfaccia • esegue l’azione • percepisce lo stato del sistema • interpreta lo stato del sistema • valuta lo stato del sistema rispetto all’obiettivo
sistema
valutazioneesecuzione
obiettivo
![Page 10: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/10.jpg)
Utilizzo del modello di Norman
Alcuni sistemi sono più difficili da usare di altri. !Golfo dell’esecuzione
formulazione delle azioni dell’utente ≠ azioni consentite dal sistema
!Golfo della valutazione
aspettative dell’utente sul nuovo stato del sistema ≠ presentazione effettiva di questo stato
![Page 11: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/11.jpg)
stato visibile nei pulsanti meccanici
le rotelle mostrano lo stato interno e possono essere controllate sia dall’utente sia dalla macchina
![Page 12: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/12.jpg)
Affordances
Progettare in modo che gli oggetti ci inviino messaggi chiari sul loro possibile uso, sulle loro azioni e sulle loro funzioni
![Page 13: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/13.jpg)
affordance• termine psicologico • per oggetti fisici
– forma e dimensioni suggeriscono azioni • sollevare, girare, gettare
– anche culturale – i pulsanti ‘afford’, cioè invitano a premerli
• per gli oggetti dello schermo – pulsanti–oggetti che ‘invitano’ il clic del mouse – simili a oggetti fisici che suggeriscono l’utilizzo
• cultura dell’uso del computer – le icone ‘invitano’ a fare clic – o anche doppio clic … non sono come veri pulsanti!
il manico della tazza
‘consente’che lo si afferri
![Page 14: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/14.jpg)
Altri buoni esempi…
• Non si possono che usare nel modo giusto
![Page 15: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/15.jpg)
Errate Affordances
• “A door that requires a user manual, even a one-word user manual, is a design failure”
Donald Norman
![Page 16: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/16.jpg)
Errate Affordances• non mettere elementi che sembrano
tasti (ma non lo sono)
![Page 17: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/17.jpg)
Gli errori umani - slip e mistake
slip conoscenza del sistema e dell’obiettivo formulazione corretta dell’azione azione errata !
mistake è possibile che l’obiettivo non sia esatto! !
Correzione degli errori? slip – attraverso un miglior progetto dell’interfaccia mistake – attraverso una maggior conoscenza del sistema
![Page 18: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/18.jpg)
Framework di Abowd e Beale
estensione del modello di Norman… il loro interaction framework ha 4 parti
– utente – input – sistema – output !
ogni parte ha il proprio linguaggio univoco interazione ⇒ traduzione tra linguaggi
!problemi nell’interazione = problemi nella traduzione
S base
U compito
O output
I input
![Page 19: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/19.jpg)
Utilizzo del modello di Abowd & Beale
intenzioni dell’utente → tradotte in azioni sull’interfaccia → tradotte in alterazioni dello stato del sistema → si riflettono nella visualizzazione dell’output → interpretate dall’utente !framework generale per capire l’interazione
– non limitato a sistemi di elaborazione dati elettronici – identifica tutti i componenti principali impliciti
nell’interazione – consente la valutazione comparativa dei sistemi – un’astrazione
![Page 20: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/20.jpg)
Ergonomia
• Studio delle caratteristiche fisiche dell’interazione. !
• Nota anche come fattore umano – ma può essere usata anche per capire meglio HCI! !
• L’ergonomia definisce standard e linee guida per vincolare il modo in cui si progettano certi aspetti dei sistemi.
![Page 21: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/21.jpg)
Ergonomia - esempi
• disposizione dei controlli e degli schermi es. controlli raggruppati secondo la funzione o la frequenza
di uso, o sequenzialmente • ambiente circostante
es. la disposizione dei posti è adattabile alle corporature diverse degli utenti
• problemi di salute es. posizione fisica, condizioni ambientali (temperatura,
umidità), illuminazione, rumore • utilizzo del colore
es. uso del rosso per avvertimento, verde per normale attività,consapevolezza del daltonismo ecc.
![Page 22: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/22.jpg)
Esempi…
![Page 23: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/23.jpg)
Ergonomia (ma non esageriamo)
![Page 24: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/24.jpg)
Manipolazione indiretta
• uffici – manipolazione diretta – l’utente interagisce
con il mondo artificiale
• industriale – manipolazione indiretta – l’utente interagisce
con il mondo realeattraverso l’interfaccia
• problemi .. – feedback – ritardi
sistema
interfaccia impianto
feedback
immediato
strumenti
![Page 25: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/25.jpg)
Manipolazione Diretta
!– Coincidenza dei linguaggi di Input e Output:
es. una icona rappresenta un file (output) ma e’ anche usata per modificare il file (input)
– azione incrementale e feedback veloce – la reversibilità incoraggia l’esplorazione – correttezza sintattica di tutte le azioni
![Page 26: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/26.jpg)
Stili d’interazione
dialogo … computer e utente !
stili distinti d’interazione
![Page 27: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/27.jpg)
Stili comuni d’interazione
• interfaccia a riga di comando • menu • linguaggio naturale • dialogo domanda/risposta e interrogazioni • compilazione di moduli • WIMP • punta e fai clic • interfacce tridimensional
![Page 28: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/28.jpg)
Interfaccia a riga di comando
• strumento per comunicare le istruzioni direttamente al computer
• utile per i compiti ripetitivi • più adatta a utenti esperti che a neofiti • correttezza sintattica non garantita • necessità di conoscere a priori i comandi
ammissibili (uso della memoria dell’utente) !
Esempio tipico: shell Unix (Linux, MacOs) o anche se meno utile, prompt di MS-dos (windows)
![Page 29: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/29.jpg)
Menu
• Insieme di opzioni visualizzato sullo schermo • Opzioni visibili
– meno memoria – più facili da usare – si basano sul riconoscimento, quindi i nomi dovrebbero
essere significativi • Selezioni attraverso:
– numeri, lettere, tasti cursore, mouse – combinazioni (es. mouse più sequenze rapide)
• Spesso le opzioni sono raggruppate gerarchicamente – è necessaria una gerarchia complessa
![Page 30: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/30.jpg)
Interfacce a interrogazione
• Interfacce a domanda e risposta – l’utente è guidato
nell’interazione attraverso una serie di domande
– adatte a utenti neofiti, ma limitate in funzionalità
– spesso usate in sistemi informativi
![Page 31: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/31.jpg)
Compilazione di moduli
• Principalmente per l’immissione o il recupero di dati
• Videata simile a un modulo di carta • Dati immessi nelle posizioni rilevanti • Richiede
– buon design – funzioni di correzione
![Page 32: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/32.jpg)
L’interfaccia WIMP
Window Icon Menu Pointer !
• stile predefinito per la maggior parte dei sistemi di elaborazione dati, specialmente PC e computer da scrivania
![Page 33: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/33.jpg)
Le finestre
• aree dello schermo che si comportano come se fossero indipendenti – possono contenere testo o grafica – possono essere spostate o ridimensionate – possono sovrapporsi e oscurarsi l’un l’altra oppure
essere posizionate l’una vicino all’altra (affiancate) !
• barre di scorrimento – consentono all’utente di spostare il contenuto della
finestra in alto o in basso o lateralmente • barre del titolo
– indicano il nome della finestra
![Page 34: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/34.jpg)
Le icone
• piccole figure • rappresentano un oggetto nell’interfaccia
– spesso una finestra o un’azione
• le finestre possono essere ristrette (ridotte a icona) – la rappresentazione diventa piccola se sono presenti
molte finestre
• possono essere di vario tipo – molto stilizzate – rappresentazioni realistiche.
![Page 35: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/35.jpg)
I puntatori
• componenti importanti – lo stile WIMP si basa sul puntare e selezionare gli
elementi
• usano mouse, trackpad, joystick, trackball, tasti cursore o tasti di scelta rapida
• ampia varietà di immagini grafiche
![Page 36: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/36.jpg)
I menu
• elenco di operazioni o servizi offerti sullo schermo • l’opzione desiderata è selezionata con il puntatore !!!
!!!
!problema – occupano troppo spazio sullo schermo soluzione – pop-up: il menu appare quando serve
File Edit Options Typewriter Screen Times
Font
![Page 37: HCI: Modelli e Stili - Portale del Dipartimento di Scienze ... · Interfaccia a riga di comando • strumento per comunicare le istruzioni direttamente al computer • utile per i](https://reader033.vdocuments.pub/reader033/viewer/2022050222/5f67af27e39ff3658c67c7b4/html5/thumbnails/37.jpg)
Layout fisico
!controlli: rapporto logico
~ raggruppamento spaziale