corso di interazione uomo-macchinaium1/presentazioni/lezione14progettodi… · corso di interazione...
TRANSCRIPT
![Page 1: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/1.jpg)
Corso di Interazione Uomo-Macchina
Paolo Bottoni
Lezione 14: Notazioni e progetto del dialogo
Lucidi tradotti e adattati dal materiale presente sul sito http://www.hcibook.com/e3/resources/
![Page 2: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/2.jpg)
2
Notazioni e progetto del dialogo
• Notazioni per dialogo – Diagrammatiche
• Reti di transizioni di stato, diagrammi di flusso – Testuali
• Grammatiche formali, regole di produzione, CSP
• Dialogo connesso a: – Semantica sistema – cosa fa – Presentazione sistema – come appare
• Descrizioni formali possono essere analizzate per trovare – Azioni incoerenti – Azioni difficili da invertire – Azioni mancanti – Potenziali errori di battitura
Lezione 14 Progetto Dialogo IUM
![Page 3: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/3.jpg)
3
Stili di interazione
Dialogo … calcolatore e utente
Diversi stili di interazione
Lezione 14 Progetto Dialogo IUM
![Page 4: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/4.jpg)
4
Cos’è il dialogo?
• Conversazione tra due o più parti
– Solitamente cooperativa
• In interfacce utente
– Si riferisce a struttura interazione
– Livello sintattico “conversazione” umano-calcolatore
• Livelli
– Lessicale – forme icone, tasti effettivamente premuti
– Sintattico – ordine di ingressi e uscite
– Semantico – effetto su dati interni applicazione
Lezione 14 Progetto Dialogo IUM
![Page 5: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/5.jpg)
5
Dialogo umano strutturato
• Dialogo umano-calcolatore molto vincolato
• Alcuni dialoghi umano-umano pure formali
Minister: do you man’s name take this woman …
Man: I do
Minister: do you woman’s name take this man …
Woman: I do
Man: With this ring I thee wed
(places ring on womans finger)
Woman: With this ring I thee wed (places ring ..)
Minister: I now pronounce you man and wife
Lezione 14 Progetto Dialogo IUM
![Page 6: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/6.jpg)
6
Lezioni sul dialogo
• Cerimonia di matrimonio
– Tipo di copione per tre partecipanti
– Specifica di ordine
– Alcuni contributi fissi – “I do”
– Altri variabili - “do you man’s name …”
– Istruzioni per anello concorrenti con pronunciare parole
“with this ring …”
• Se si dicono queste parole si è sposati?
– Solo se posto giusto, con licenza di matrimonio
– Sintassi non semantica
Lezione 14 Progetto Dialogo IUM
![Page 7: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/7.jpg)
7
… e inoltre
• Cosa succede se qualcuno dice “I don’t”?
• Dialoghi reali spesso hanno alternative:
– Svolgimento processo dipende da risposta imputato
• Fuoco su risposte normative:
– Non considera fuoruscite da schema
– Nel caso di GUI, azioni fisiche utente irrilevanti • Ma non per interazione multimodale!
Judge: How do you plead guilty or not guilty?
Defendant: either Guilty or Not guilty
Lezione 14 Progetto Dialogo IUM
![Page 8: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/8.jpg)
8
Notazioni per progetto del dialogo
• Dialogo sepolto in programma
• In grande sistema è possibile?
– Analizzare dialogo
• Può utente controllare sempre proprio cestino acquisti?
– Cambiare piattaforma
• (es. Windows/Mac)
– Notazioni di dialogo aiutano a:
• Analizzare sistemi
• Separare aspetti lessicali da semantici
• … e prima che sistema sia costruito
– Notazioni aiutano a comprendere progetti proposti
Lezione 14 Progetto Dialogo IUM
![Page 9: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/9.jpg)
Notazioni grafiche
Reti di transizioni di stato (STN)
Reti di Petri, diagrammi di stato
Diagrammi di flusso
Lezione 14 Progetto Dialogo IUM
![Page 10: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/10.jpg)
10
Reti di transizioni di stato (STN)
• Cerchi – stati
• Archi - azioni/eventi
Start Menu
Circle 1 Circle 2 Finish
Line 1 Line 2 Finish
select 'circle'
select 'line'
click on centreclick on
circumference
draw circlerubber band
rubber band draw last line
click on first point double click
click on point
draw a line
Lezione 14 Progetto Dialogo IUM
![Page 11: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/11.jpg)
11
Reti di transizioni di stato - eventi
• Etichette su archi un po’ compresse:
– Notazione è “pesante su stato”
– Eventi richiedono più dettaglio
Start Menu
Circle 1 Circle 2 Finish
Line 1 Line 2 Finish
select 'circle'
select 'line'
click on centreclick on
circumference
draw circlerubber band
rubber band draw last line
click on first point double click
click on point
draw a line
Lezione 14 Progetto Dialogo IUM
![Page 12: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/12.jpg)
12
Star t Men u
Circle 1 Circle 2 Finish
select 'circle'
select 'line'
click on centreclick on
circumference
draw circlerubber band
... ... ...
Reti di transizioni di stato - stati
• Etichette su stati poco informative:
– Stati difficili da nominare
– Ma facili da visualizzare
Lezione 14 Progetto Dialogo IUM
![Page 13: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/13.jpg)
13
STN gerarchiche
• Gestione di dialoghi complessi
• Sotto-dialoghi identificati e nominati Graphics Submenu
Text Submenu
Paint Submenu
Main
Menu
select ‘graphics’
select ‘paint’
select ‘text’
Lezione 14 Progetto Dialogo IUM
![Page 14: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/14.jpg)
14
Dialoghi concorrenti - I semplice scatola di dialogo
Text Style
bold
italic
underline
example
Lezione 14 Progetto Dialogo IUM
![Page 15: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/15.jpg)
15
Dialoghi concorrenti – II tre interruttori - STN individuali
bold
italic
underline
NO bold
bold click on ‘bold’
NO italic
italic click on ‘italic’
NO u’line
u’line click on ‘underline’
Lezione 14 Progetto Dialogo IUM
![Page 16: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/16.jpg)
16
Dialoghi concorrenti – III grassetto e corsivo combinati
Text Style
bold
italic
underline
example
NO style
bold only
click on ‘bold’
click
on
‘italic’
italic only
bold
italic
click on ‘bold’
click
on
‘italic’
Lezione 14 Progetto Dialogo IUM
![Page 17: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/17.jpg)
17
Dialoghi concorrenti – IV tutti insieme - esplosione combinatoria
‘italic’
NO style
bold only
‘bold’
italic only
bold
italic
‘bold’
‘italic’
u’line only
bold
u’line
‘bold’
italic
u’line
bold
italic
u’line
‘bold’
‘italic’ ‘italic’
‘underline’ ‘underline’
‘underline’ ‘underline’
Text Style
bold
italic
underline
example
Lezione 14 Progetto Dialogo IUM
![Page 18: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/18.jpg)
18
Fughe
• ‘back’ su Web, chiavi di fuga o cancellazione
– Comportamento simile ovunque
– Si finisce con spaghetti di comportamenti identici
• Per evitare
es. su diagramma ad alto livello
Uscita ‘normale’ per ogni menu
Più arco di fuga separato
attivo ‘ovunque’ nei sottomenu
Graphics Submenu
Text Submenu
Paint Submenu
Main
Menu
select ‘graphics’
select ‘paint’
select ‘text’
normal
finish
ESC
normal
finish
ESC
normal
finish
ESC
Lezione 14 Progetto Dialogo IUM
![Page 19: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/19.jpg)
19
Menu di aiuto
• Problemi simili
– Quasi stesso ovunque
– Ma deve ritornare a punto diverso in dialogo
– Si potrebbe specificare su STN … ma crea disordine
– Solitamente meglio aggiunto a livello “meta”
Finish
Help Subsystem
Circle 1 click on circumference
Circle 2 from
Menu
press HELP
button
draw circle rubber band
click on centre
Help Subsystem
press HELP
button
Lezione 14 Progetto Dialogo IUM
![Page 20: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/20.jpg)
20
Reti di Petri
• Fra più vecchie notazioni in computazione
• Grafi di flusso:
– Posti – simili a stati STN
– Transizioni – simili a archi STN
– Contatori – su posti (stato corrente)
• Possibili contatori diversi
– Stati di dialogo concorrenti
• Usati per specifica UI
– Supporto a strumenti
Lezione 14 Progetto Dialogo IUM
![Page 21: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/21.jpg)
21
Esempio di rete di Petri
Bold On Italic On
Bold Off Italic Off
Utente preme
‘Italic’ Utente preme
‘Bold’
T1 T2 T3 T4
Azioni utente rappresentate
come nuovo contatore
Transizione ‘scatta’ quando tutti posti
di ingresso hanno contatori
Conflitto
Lezione 14 Progetto Dialogo IUM
![Page 22: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/22.jpg)
22
State charts
• Usate in UML
• Estensione a STN
– Gerarchie
– Sotto-reti concorrenti
– Fughe
• OFF sempre attivo
– Storia
• Collegamento marcato H
• Va a ultimo stato
quando si rientra in
sottodialogo
On
Off
1
2
3
4
Sound Channel
H SEL
SEL
SEL
SEL
MUTE
Standby
OFF ON
RESET
Lezione 14 Progetto Dialogo IUM
![Page 23: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/23.jpg)
23
Diagrammi di flusso
• Familiari a
programmatori
• Scatole
- Processi/eventi
- Non stati
• Uso per dialogo (non algoritmi interni)
Delete D1
Please enter
employee no.: ____
Delete D3
Name: Alan Dix
Dept: Computing
delete? (Y/N): _
Please enter Y or N
Delete D2
Name: Alan Dix
Dept: Computing
delete? (Y/N): _
answer?
C2
Finish
Finish
read record
C1
delete record
C3
other
N Y
Lezione 14 Progetto Dialogo IUM
![Page 24: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/24.jpg)
24
Funziona!
• Notazioni formali – troppo lavoro?
• Elaborazione transizioni COBOL
– Guidate da eventi – come interfacce
– Struttura programma
≠ struttura dialogo
• Usa diagrammi di flusso del dialogo
– Discutere con clienti
– Trasformazione codice
– Test sistematici
– Guadagno di produttività 1000%
• Formalismo salva tempo!!
Delete D1
Please enter
employee no.: ____
Delete D3
delete? (Y/N): _
Please enter Y or N
Delete D2
Name: Alan Dix
Dept: Computing
delete? (Y/N): _
answer?
C2
Finish
Finish
read record
C1
other
N Y
delete record
C3
Lezione 14 Progetto Dialogo IUM
![Page 25: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/25.jpg)
Notazioni testuali
Grammatiche
Regole di produzione
CSP e algebre di eventi
Lezione 14 Progetto Dialogo IUM
![Page 26: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/26.jpg)
26
Grammatiche testuali
• Espressioni regolari sel-line click click* dble-click
• BNF mulSelect::= select
| select mulSelect
• Più potenti di espressioni regolari o STN
• Ma SENZA dialogo concorrente
• Linguaggio eventi basso livello per azioni alto livello
Lezione 14 Progetto Dialogo IUM
![Page 27: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/27.jpg)
27
Regole di produzione
• Insieme di regole non ordinate:
if condition then action
– Condizione basata su stato o eventi da servire
– Ogni regola sempre potenzialmente attiva
• Buono per concorrenza
• Cattivo per sequenza
Lezione 14 Progetto Dialogo IUM
![Page 28: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/28.jpg)
28
Regole di produzione basate su eventi
Sel-line first
C-point first rest
C-point rest rest
D-point rest < draw line >
• Nota:
– eventi aggiunti a lista di eventi pendenti
– ‘first’ e ‘rest’ sono eventi generati internamente
• Cattivo per descrivere stato!
Lezione 14 Progetto Dialogo IUM
![Page 29: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/29.jpg)
29
Sistema di produzione proposizionale
• Basato su stato
• Attributi:
Mouse: { mouse-off, select-line, click-point, double-click }
Line-state: { menu, first, rest }
• Regole (senza indicazione risposta):
select-line mouse-off first
click-point first mouse-off rest
click-point rest mouse-off
double-click rest mouse-off menu
• Cattivo per eventi!
Lezione 14 Progetto Dialogo IUM
![Page 30: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/30.jpg)
30
CSP e algebre di processo
• Buono per dialoghi sequenziali Bold-tog = select-bold? bold-on select-bold?
bold-off Bold-
tog
Italic-tog = . . .
Under-tog = . . .
• e dialogo concorrente Dialogue-box = Bold-tog || Italic-tog || Under-tog
• Ma causalità non chiara
Lezione 14 Progetto Dialogo IUM
![Page 31: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/31.jpg)
31
Notazioni per dialogo - Sommario
• Diagrammatiche • STN, Flow charts
• Testuali • grammatiche, regole di produzione, CSP
• Problemi • Basate su eventi vs. basate su stato
• Potenza vs. chiarezza
• Modello vs. notazione
• Sequenziale vs. concorrente
Lezione 14 Progetto Dialogo IUM
![Page 32: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/32.jpg)
32
Semantica - Alexander SPI (Specifying
and Prototyping Interaction) (i)
• Specifica in due parti:
• EventCSP – puro ordine del dialogo
• EventISL – semantica dipendente da bersaglio
(Interaction specification language)
• Descrizione dialogo – centralizzata
• Compromesso sintassi/semantica - tolleraible
Lezione 14 Progetto Dialogo IUM
![Page 33: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/33.jpg)
33
Semantica - Alexander SPI (ii)
• EventCSP Login = login-mess -> get-name -> Passwd
Passwd = passwd-mess -> (invalid -> Login [] valid -> Session)
• EventISL event: login-mess
prompt: true
out: “Login:” event: get-name
uses: input
set: user-id = input
event: valid
uses: input, user-id, passwd-db
wgen: passwd-id = passwd-db(user-id)
event: invalid
uses: input, user-id, passwd-db
wgen: passwd-id != passwd-db(user-id)
Lezione 14 Progetto Dialogo IUM
![Page 34: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/34.jpg)
34
Semantica – codice puro
• Ciclo di eventi per elaboratore testi
• Descrizione dialogo
- molto distribuita
• Compromesso sintassi/semantica
- terribile!
switch ( ev.type ) {
case button_down:
if ( in_text ( ev.pos ) ) {
mode = selecting;
mark_selection_start(ev.pos);
}
...
case button_up:
if ( in_text ( ev.pos )
&& mode == selecting ) {
mode = normal;
mark_selection_end(ev.pos);
}
...
case mouse_move:
if (mode == selecting ) {
extend_selection(ev.pos);
}
...
} /* end of switch */
Lezione 14 Progetto Dialogo IUM
![Page 35: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/35.jpg)
35
Proprietà delle azioni
• Completezza • Archi mancanti
• Circostanze impreviste
• Determinismo • Più archi per azione
• Deliberato: decisione di applicazioni
• Casualità: regole di produzione
• Fughe annidate
• Coerenza • Stessa azione, stesso effetto?
• Modi e visibilità
Lezione 14 Progetto Dialogo IUM
![Page 36: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/36.jpg)
36
Start Menu
Circle 1 Circle 2 Finish
Line 1 Line 2 Finish
select 'circle'
select 'line'
click on centreclick on
circumference
draw circlerubber band
rubber band draw last line
click on first point double click
click on point
draw a line
Controllo delle proprietà (i)
• Completezza – Doppio click in stati evidenziati? double
click
?
Lezione 14 Progetto Dialogo IUM
![Page 37: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/37.jpg)
37
Controllo delle proprietà (ii)
• Reversibilità:
– Per invertire “select-line”
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last line
click on first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...Main
Menu
Graphics Sub-menu
... ... ...
Lezione 14 Progetto Dialogo IUM
![Page 38: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/38.jpg)
38
Controllo delle proprietà (ii)
• Reversibilità:
– Per invertire “select-line”
– click
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last line
click on first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...Main
Menu
Graphics Sub-menu
... ... ...
Lezione 14 Progetto Dialogo IUM
![Page 39: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/39.jpg)
39
Controllo delle proprietà(ii)
• Reversibilità:
– Per invertire “select-line”
– click - doppio click
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last line
click on first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...Main
Menu
Graphics Sub-menu
... ... ...
Lezione 14 Progetto Dialogo IUM
![Page 40: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/40.jpg)
40
Controllo delle proprietà (ii)
• Reversibilità:
– Per invertire “select-line”
– click - doppio click - seleziona `graphics'
– (3 actions)
• N.B. non undo
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last line
click on first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...Main
Menu
Graphics Sub-menu
... ... ...
Lezione 14 Progetto Dialogo IUM
![Page 41: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/41.jpg)
41
Proprietà degli stati
• Raggiungibilità
• Si può raggiungere qualsiasi punto da qualsiasi punto?
• E quanto facilmente?
• Reversibilità
• Si può raggiungere stato precedente?
• Ma NON con UNDO?
• Stati pericolosi
• Stati in cui non si vuole arrivare
Lezione 14 Progetto Dialogo IUM
![Page 42: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/42.jpg)
42
Stati pericolosi
• Elaboratori di testi: due modi e uscita F1 - cambia modo
F2 - esce (e salva)
Esc - nessun cambiamento di modo
ma ... Esc riazzera autosave
edit exit menu F1 F2
Esc
Lezione 14 Progetto Dialogo IUM
![Page 43: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/43.jpg)
43
Stati pericolosi (ii)
• Esce con/senza salvataggio stati pericolosi
• Stati duplicati – distinzione semantica
F1-F2 - esce con salvataggio
F1-Esc-F2 – esce senza salvataggio
edit exit menu F1 F2
Esc
edit exit menu F1 F2
Esc
any
update
Lezione 14 Progetto Dialogo IUM
![Page 44: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/44.jpg)
44
Aspetti lessicali
• Visibilità • Differenziare modi e stati
• Annotazioni a dialogo
• Stile • Comando – verbo nome
• Basata su mouse – nome verbo
• Disposizione • Non solo apparenza ...
Lezione 14 Progetto Dialogo IUM
![Page 45: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/45.jpg)
45
Aspetti di disposizione
• Elaboratore di testi – stati pericolosi
• Vecchia tastiera - OK
Esc
F1 F2
F3
...
F4
...
1
tab
...
...
edit exit menu F1 F2
Esc
edit exit menu F1 F2
Esc
any
update
Lezione 14 Progetto Dialogo IUM
![Page 46: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/46.jpg)
46
Aspetti di disposizione
• Nuova disposizione di tastiera
Intende F1-F2 (sicuro)
Dito incontra Esc
F1-Esc-F2 – disastro!
Esc F1 F2 F3 ...
edit exit menu F1 F2
Esc
edit exit menu F1 F2
Esc
any
update
Lezione 14 Progetto Dialogo IUM
![Page 47: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/47.jpg)
47
Analisi del dialogo – Sommario
• Semantica e dialogo • Attaccare semantica
• Descrizione dialogo distribuita / centralizzata
• Massimizzare descrizione sintattica
• Proprietà del dialogo • Proprietà azioni: completezza, determinismo, coerenza
• Proprietà stato: raggiungibilità, reversibilità, stati pericolosi
• Aspetti di presentazione e stile • Visibilità, stile, disposizione
• N.B. non indipendente da dialogo
Lezione 14 Progetto Dialogo IUM
![Page 48: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/48.jpg)
48
Orologio digitale – Istruzioni utente
• Due modalità
• Interfaccia limitata
- 3 pulsanti
• Pulsante A
cambia modalità
S M T W T F S S M T W T F S
STP
S M T W T F S
SET
A
Time display Stop watch
Time setting Alarm setting
A
AA
Depress button A for 2 seconds
S M T W T F S
ALM
AM
Lezione 14 Progetto Dialogo IUM
![Page 49: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/49.jpg)
49
Orologio digitale – Istruzioni utente
• Stati pericolosi
• controllati
… pressione di
due secondi
• Completezza
• Distingue premi A
e rilascia A
• Cosa fanno nei
vari modi?
S M T W T F S S M T W T F S
STP
S M T W T F S
SET
A
Time display Stop watch
Time setting Alarm setting
A
AA
Depress button A for 2 seconds
S M T W T F S
ALM
AM
Lezione 14 Progetto Dialogo IUM
![Page 50: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/50.jpg)
50
Orologio digitale – Istruzioni progettista
Per pulsante A S M T W T F S S M T W T F S
STP
S M T W T F S
SET
Time display Stop watch
Time setting Alarm setting
Depress A
2 seconds
S M T W T F S
ALM
AM
S M T W T F S S M T W T F S
STP
Release A Release A
Depress A
Depress A2 seconds
Release A Release A
Lezione 14 Progetto Dialogo IUM
![Page 51: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/51.jpg)
Fondamenti logici del progetto I
Informazione che spiega perché sistema fatto in certo modo.
Benefici fondamento logico – Comunicazione attraverso ciclo di vita
– Riuso di conoscenza di progetto fra prodotti
– Costringe a disciplina di progetto
– Presenta argomenti per compromessi di progetto
– Organizza spazio di progetto potenzialmente grande
– Cattura informazione di contesto
51 Lezione 14 Progetto Dialogo IUM
![Page 52: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/52.jpg)
Fondamenti logici del progetto II
Tipi di fondamento
• Orientato a processo – Mantiene ordine di scelta e formazione decisioni
• Orientato a struttura – Enfatizza strutturazione a posteriori alternative considerate
• Due esempi: – Sistema informativo basato sui problemi (IBIS)
– Analisi spazio di progetto
52 Lezione 14 Progetto Dialogo IUM
![Page 53: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/53.jpg)
Issue-based information system (IBIS)
• Base per gran parte ricerca su fondamenti logici
• Orientato a processo
• Elementi principali:
Questioni
– Struttura gerarchica con una questione "radice"
Posizioni
– Soluzioni potenziali per questione
Argomenti
– Modifica relazione tra posizioni e questioni
• gIBIS versione grafica
53 Lezione 14 Progetto Dialogo IUM
![Page 54: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/54.jpg)
Struttura di gIBIS
Sub-issue
Issue
Sub-issue
Sub-issue
Position
Position
Argument
Argument
responds to
responds to
objects to
supports
questions
generalizes
specializes
54 Lezione 14 Progetto Dialogo IUM
![Page 55: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/55.jpg)
Analisi dello spazio di progetto
• Orientato a struttura
• QOC – struttura gerarchica: Q: Domande (e sotto-domande)
– rappresentano questioni principali di un progetto
O: Opzioni
– forniscono soluzioni alternative alle domande
C: Criteri
– mezzi per valutare le opzioni per fare una scelta
• DRL – simile a QOC con linguaggio più ampio e semantica più formalizzata – Decision representation language
55 Lezione 14 Progetto Dialogo IUM
![Page 56: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/56.jpg)
Notazione QOC
Question
Option
Option
Option
Criterion
Criterion
Criterion
Question … Consequent
Question …
56 Lezione 14 Progetto Dialogo IUM
![Page 57: Corso di Interazione Uomo-Macchinaium1/Presentazioni/Lezione14ProgettoDi… · Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 14: Notazioni e progetto del dialogo ... –Si](https://reader034.vdocumenti.com/reader034/viewer/2022042811/5fa1dcfe7540bd1fc31c52ab/html5/thumbnails/57.jpg)
Decision Representation Language
Da: Janet E. Burge, David C. Brown, Software Engineering Using
RATionale, Journal of Systems and Software, 81(3):395-413.
57 Lezione 14 Progetto Dialogo IUM