Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 121 Strumenti Software per la...

Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 12 1

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


Metodi di SpecificaVaghezza, 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 dell’utente• Nodi per rappresentare gli stati ed archi per le transizioni (grafo e

non albero)• Ampiamente usati come parte di strumenti CASE


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


Dialogue Notations and Design

Dialogue Notations– Diagrammatic

• state transition networks, JSD diagrams, flow charts– Textual

• formal grammars, production rules, CSP

Issues– Dialogue Analysis– Semantics and dialogue– Properties of dialogue– Presentation and lexical issue

Example - Digital watch


State transition networks (STN)

circles - states

arcs - actions/events

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 lastline

click onfirst point double click

click on point

draw a line


State transition networks - events

arc labels a bit cramped because:

– notation is `state heavy‘

– the events require most detail

Start Menu


Line 1 Line 2 Finish

select 'circle'

select 'line'


circumference


rubber band draw lastline

click onfirst point double click

click on point

draw a line


Start Menu


select 'circle'

select 'line'


circumference


... ... ...

State transition networks - states

labels in circles a bit uninformative:

– states are hard to name

– but easier to visualise


Hierarchical STNs

managing complex dialogues

named sub-dialogues Graphics Sub-menu

Text Sub-menu

Paint Sub-menu

MainMenu

select 'graphics'

select 'text'

select 'paint'


Flowcharts

familiar toprogrammers

boxes- process/event- not state

use for dialogue(not internal algorithm)

Delete D1Please enteremployee no.: ____

Delete D3Name: Alan DixDept: Computingdelete? (Y/N): _Please enter Y or N

Delete D2Name: Alan DixDept: Computingdelete? (Y/N): _

answer?C2

Finish

Finish

read recordC1

delete recordC3

other

NY


JSD diagrams

for tree structured dialogues

– less expressive

– greater clarity

transactionlogin

addemployee

record

changeemployee

record

displayemployee

record

logout

PersonnelRecordSystem

deleteemployee

record

*


Concurrent dialogues - Isimple dialogue box

Text Style

bold

italic

underline

example


Textual - Grammars

Regular expressionssel-line click click* dble-click

compare with JSD• same computational model• different notation

BNFexpr ::= empty | atom expr | '(' expr ')' expr

more powerful than regular exp. or STNs Still NO concurrent dialogue


Production rules

Unordered list of rules:

if condition then action

– condition based on state or pending events– every rule always potentially active

Good for concurrency Bad for sequence


Event based production rules

Sel-line firstC-point first restC-point rest restD-point rest < draw line >

Note:– events added to list of pending events– ‘first’ and ‘rest’ are internally generated event


Prepositional Production System

State based

Attributes:• Mouse: { mouse-off, select-line, click-point, double-click }

• Line-state: { menu, first, rest }

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

Bad at events!


Dialogue Notations - Summary

Diagrammatic• STN, JSD, Flow charts

Textual• grammars, production rules

Issues• event base vs. state based• power vs. clarity• model vs. notation• sequential vs. concurrent


Digital watch – User Instructions

• two main modes

• limited interface - 3 buttons

• button A changes mode

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

AADepress button A for 2 seconds

S M T W T F S

ALM

AM


Digital watch – User Instructions

• dangerous states• guarded by two second hold

• completeness• distinguish depress A

and release A

• what do they doin all modes?


STP

S M T W T F S

SET

A



A

AADepress button A for 2 seconds

S M T W T F S

ALM

AM


Digital watch – Designers instructions

and ...

that’s justone button


STP

S M T W T F S

SET



Depress A

2 seconds

S M T W T F S

ALM

AM


STP

Release A Release A

Depress A

Depress A 2 seconds

Release A Release A


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 dell’interfaccia dalla complessità della programmazione• Supporto per l’indipendenza dalla piattaforma

Sviluppo automatico del sistema• Possibilità di sviluppare il sistema completamente• Lentezza, limiti e restrizioni: necessità di strumenti di software engineering


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


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 dell’interfaccia

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


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

Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 121 Strumenti Software per la...

Documents

Transcript of Progettazione dei Sistemi Interattivi (a.a. 2004/05) - Lezione 121 Strumenti Software per la...