Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 121 Strumenti Software per la Progettazione di Interfacce Metodi di Specifica Stabilire.

Presentazione sul tema: "Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 121 Strumenti Software per la Progettazione di Interfacce Metodi di Specifica Stabilire."— Transcript della presentazione:

1 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 121 Strumenti Software per la Progettazione di Interfacce Metodi di Specifica Stabilire le necessità e le preferenze dei clienti in modo preciso Strumenti per Costruire Interfacce Costruire le interfacce in modo rapido ed efficiente per mezzo di componenti standard Strumenti per Valutazione e Critica Procedure per effettuare misurazioni automatiche

2 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 122 Metodi di Specifica Vaghezza, scarsa sinteticità e ambiguità del linguaggio naturale Linguaggi formali e grammatiche BNF ed oltre La natura strutturata ad albero dei menù e della navigazione in una interfaccia non è facilmente rappresentabile con una grammatica Alberi di selezioni da menù e di dialog-box Migliore stile di rappresentazione per specificare in modo esauriente il sistema Diagrammi di transizione Permettono di rappresentare la struttura delle azioni dellutente Nodi per rappresentare gli stati ed archi per le transizioni (grafo e non albero) Ampiamente usati come parte di strumenti CASE

3 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 123 Metodi di Specifica (continua) Statechart Aggiungere modularità ai diagrammi di transizione Concorrenza Specifica del flusso dei dati e dei vincoli, con feedback visuale sui nodi (specifiche eseguibili) Notazione azioni-utente (UAN --- User-Action Notation) Migliore rappresentazione di interfacce a manipolazione diretta Feedback visuale e dipendenza dal contesto Corrispondenza diretta con le azioni utente tipiche: puntare col mouse, dragging, clicking

4 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 124 Dialogue Notations and Design 4 Dialogue Notations –Diagrammatic state transition networks, JSD diagrams, flow charts –Textual formal grammars, production rules, CSP 4 Issues –Dialogue Analysis –Semantics and dialogue –Properties of dialogue –Presentation and lexical issue 4 Example - Digital watch

5 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 125 State transition networks (STN) 4 circles - states 4 arcs - actions/events

6 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 126 State transition networks - events 4 arc labels a bit cramped because: –notation is `state heavy –the events require most detail

7 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 127 State transition networks - states 4 labels in circles a bit uninformative: –states are hard to name –but easier to visualise

8 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 128 Hierarchical STNs 4 managing complex dialogues 4 named sub-dialogues

9 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 129 Flowcharts 4 familiar to programmers 4 boxes - process/event - not state 4 use for dialogue (not internal algorithm) 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 read record C1 delete record C3 other NY

10 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1210 JSD diagrams 4 for tree structured dialogues –less expressive –greater clarity transactionlogin add employee record change employee record display employee record logout Personnel Record System delete employee record *

11 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1211 Concurrent dialogues - I simple dialogue box Text Style bold italic underline example

12 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1212 Textual - Grammars 4 Regular expressions sel-line click click* dble-click 4 compare with JSD same computational model different notation 4 BNF expr ::= empty | atom expr | '(' expr ')' expr 4 more powerful than regular exp. or STNs 4 Still NO concurrent dialogue

13 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1213 Production rules 4 Unordered list of rules: if condition then action –condition based on state or pending events –every rule always potentially active 4 Good for concurrency 4 Bad for sequence

14 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1214 Event based production rules Sel-line first C-point first rest C-point rest rest D-point rest 4 Note : –events added to list of pending events – first and rest are internally generated event

15 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1215 Prepositional Production System 4 State based 4 Attributes: Mouse: { mouse-off, select-line, click-point, double-click } Line-state: { menu, first, rest } 4 Rules (feedback not shown): select-line mouse-off first click-point first mouse-off rest click-point rest mouse-off double-click rest mouse-off menu 4 Bad at events!

16 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1216 Dialogue Notations - Summary 4 Diagrammatic STN, JSD, Flow charts 4 Textual grammars, production rules 4 Issues event base vs. state based power vs. clarity model vs. notation sequential vs. concurrent

17 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1217 Digital watch – User Instructions two main modes limited interface - 3 buttons button A changes mode

18 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1218 Digital watch – User Instructions dangerous states guarded by two second hold completeness distinguish depress A and release A what do they do in all modes?

19 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1219 Digital watch – Designers instructions and... thats just one button

20 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1220 Strumenti per Costruire Interfacce Strumenti per la costruzione rapida di prototipi Editori visuali -- Manipolazione diretta Fissare rapidamente gli aspetti del sistema con facili correzioni Linguaggi di programmazione con toolkit per GUI Maggiore varietà di caratteristiche e flessibilità Maggiore quantità di lavoro e di linee di codice richiesti Indipendenza della interfaccia utente Separare la progettazione dellinterfaccia dalla complessità della programmazione Supporto per lindipendenza dalla piattaforma Sviluppo automatico del sistema Possibilità di sviluppare il sistema completamente Lentezza, limiti e restrizioni: necessità di strumenti di software engineering

21 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1221 Strumenti di Progettazione Fase iniziale: creare velocemente delle bozze del sistema Carta e penna, editori di testo, applicazioni per slide-show Tools che permettono di navigare tra le slide usando bottoni, menù, scrolling, dragging Fase intermedia: aggiungere al prototipo capacità interattive avanzate Linguaggi di scripting per descrivere azioni complesse Strumenti per la programmazione visuale Fase finale: scrivere il codice che implementa le azioni Pacchetti quali Visual Basic o Symantec Cafe forniscono una varietà di widgets, con la possibilità di comporli nella finestra di lavoro, e un linguaggio di programmazione per implementare le azioni

22 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1222 Strumenti di Software Engineering Prodotti specifici per lo sviluppo di GUI Toolkit integrati di widgets accompagnati da un potente linguaggio di programmazione (Windows Development Kit, MacApp, X-Windows Toolkit) Complessità e lungo periodo di apprendimento Grosso lavoro di implementazione e difficoltà della manutenzione Vantaggi: grande flessibilità e esteso controllo nella creazione dellinterfaccia Linguaggi di script corredati da toolkit di widgets Tcl/Tk: rapido sviluppo e indipendenza dalla piattaforma, mancanza di editore visuale Galaxy: ha un editore visuale ed emula varie piattaforme Java: linguaggio di programmazione completo, permette di creare applets Javascript: più semplice linguaggio di script innestato in HTML

23 Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 1223 Strumenti per Valutazione e Critica Metriche semplici: misurare il numero di schermate, di widgets, di collegamenti Procedure di valutazione sofisticate: profondità degli alberi di menù, ridondanza, consistenza Software di registrazione delle attività: frequenza dei messaggi di errore, delle finestre di dialogo, di richieste di aiuto, di accesso a pagine web Catturare dati sulle prestazioni per guidare le scelte e le modifiche future Metriche dipendenti dai task: frequenze delle sequenze di task Metriche indipendenti dai task: numero medio di widgets, densità, bilanciamento, taglia e posizione dei bottoni