Corso di Ingegneria del Software a.a. 2009/2010 La ...infocom.uniroma1.it/.../IngegneriaDelSoftware/InterfacciaUtente1.pdf · Per il progettista l’interfaccia e alla base del successo

Corso di Ingegneria del Software a.a. 2009/2010 La progettazione della interfaccia utente

Corso di Ingegneria del Softwarea.a. 2009/2010

La progettazione della interfaccia utente

Mario Vacca

[email protected]


“Ho sempre desiderato che il mio computer fosse facile da usare quanto ilmio telefono. Finalmente i miei sogni si sono realizzati . . . Non sono piu

capace di utilizzare il mio telefono”. (B. Stroustrup)


Generalita


Sommario

1. Generalita

2. Analisi e design della user interface

3. Content Design: l’esempio del sistema biblioteca

4. Modellazione del dialogo

5. Screen design and layout

6. TOOLS

7. Bibliografia


Generalita

Generalita

Modelli di produzione e tipi di interfaccia

Anni ’60 e ’70

Sistemi gestionali complessi (per elaborazione di dati aziendali).Sistemi di elaborazione batch/bassa interattivitaCiclo di vita lineare (cascata)


Generalita

Generalita

Modelli di produzione e tipi di interfaccia

Anni ’80

Personal computersistemi software interattivi: attraverso le interfacce grafiche mirano asoddisfare le esigenze di utenti che non sono esperti di informatica.Ciclo di vita verso modelli iterativo.


Generalita

Interazione

Tipi di interfaccia

I Uso algoritmicoInput/output

I Uso interattivo


Generalita

Interazione

Tipi di interfaccia

I Prima persona

I Seconda persona

I Terza persona


Generalita

Interazione

Tipi di interfaccia : prima-persona

First-person interface sono sistemi nei quali gli utenti operano sugli oggettidi interesse usando strumenti e comandi.

Esempi: Interfacce desktop: file e cartelle sono rappresentate da icone efinestre sullo schermo; le operazioni sono fatte usando mouse e men˘.

I Utente – Rappresentazione visuale dell’oggetto –Rappresentazione interna

I Utente opera sugli oggetti visuali – sistema opera suglioggetti.


Generalita

Interazione

Tipi di interfaccia : prima-persona


Generalita

Interazione

Tipi di interfaccia : seconda-persona

Gli utenti delegano i compiti al sistema e il sistema ritorna lo stato delprogresso dei compiti stessi.

Esempi: agent-based systems; avatar

Il sistema e visto come un partner e deve avere una buona rappresentazionedell’utente e dei compiti.


Generalita

Generalita

Metafora del mondo reale

Andrea De Lucia, Rita Francese, Ignazio Passero, Genoveffa Tortora “Development and evaluation

of a system enhancing Second Life to support synchronous role-based collaborative learning.” IEEE

international Conference on Advanced Learning Technologies, 2008


Generalita

Interazione

Tipi di interfaccia : terza-persona

Sono sistemi che mediano la comunicazione tra esseri umani: gli utentiinteragiscono con il sistema per comunicare tra di loro.

Esempi: e-mail, instant messaging, video-conferencing, shared editors (gliutenti interagiscono contemporaneamente sugli stesso oggetti).

Sono studiati nel settore del computer-supported cooperative work(CSCW).


Generalita

Generalita

Modelli di produzione e interfaccia

Co–evoluzione di utenti e sistemi

Il sistema in fase di uso e manutenzione puo comportare nuovi requisitie nuove esigenze da parte degli utenti.Usando il sistema, gli utenti evolvono e inventano nuovi compiti e nuoviusi del sistema stesso, richiedendo ai progettisti di evolvere il sistema.


Generalita

Generalita


Necessita “di uno sviluppo iterativo che preveda il continuo coinvolgi-mento degli utenti, attraverso interviste, osservazioni ed esperimenti, al-lo scopo di rendere il sistema finale usabile e facilmente adattabile allenuove esigenze che emergono a tempo di uso. I metodi di sviluppo cheseguono questo tipo di approccio rientrano nella cosiddetta progettazionecentrata sull’utente”D. Fogli “L’ingegneria dell’usabilita nella progettazione delle interfacce utente” Automazione e

Strumentazione, Vol. 2, Febbraio 2009, Fiera Milano Editore, p. 112.


Generalita

Generalita


requisiti utente – requisiti software

modello utente – modello software (del progettista)


Generalita

Generalita

Interfaccia

Meccanismo e punto di accesso ad un sistema o componente software.

Componente di un sistema software che permette l’interazione e lacomunicazione del sistema con l’utente.


Generalita

Generalita

Interazione uomo-macchina


Generalita

Generalita

Interfaccia

Per l’utente

“l’interfaccia utente e il sistema”

(D. A. Norman, “Cognitive Engineering”, User Centered System Design, D. A. Norman and S. W.

Draper (eds), New Jersey, Lawrence Erlbaum, 1986, pp. 31-61.)

Cio che l’utente e in grado di fare con il sistema dipende fortemente dacome gli oggetti di interesse e gli strumenti di lavoro gli vengono presentatinell’interfaccia.

implica

le interfacce utente devono essere progettate e sviluppate tenendo contodei principi di usabilita.


Generalita

Generalita

Interazione uomo-macchina

I usabilita

I efficacia, efficienza e soddisfazione con le quali determinati utentiraggiungono determinati obiettivi in determinati contesti.

I facilita e soddisfazione della interazione uomo-macchina


Generalita

Generalita

Interfaccia

Per il progettista l’interfaccia e alla base del successo del progetto.

Componente fondamentale del progetto software: un sistema puoessere funzionalmente eccellente ma non aver successo a causa di una“cattiva” progettazione dell’interfaccia.


Generalita

Generalita

Interfaccia

Usabilita = “facilita di uso e di apprendimento” di un sistema.Sistemi per svolgere un attivita quotidiane, come

I l’acquisto di un biglietto presso una macchina self-service

I la ricerca di informazioni sul sito web del proprio comune

I ricerca di un canale in un’autoradio

non presentano interfacce sufficientemente usabili per i diversi tipi di utentiche possono dover utilizzare questi sistemi.


Generalita

Generalita

Le regole d’oro

I lasciare il controllo all’utente

I limitare il ricorso alla memoria da parte dell’utente

I usare una user interface uniforme


Generalita

Generalita

Regole d’oro : Lasciare il controllo all’utente

I nascondere all’utente i dettagli tecnici

I (mezzi) interazione flessibiletastiera, mouse, Haptic technology

I (modo)interruzione, ripresa, annullamentopersonalizzazione della interazionelimitazione delle azioni inutili o indesiderateinterazione diretta con gli oggetti che compaiono sullo schermo


Generalita

Generalita

Regole d’oro : Lasciare il controllo all’utente

Limitazione delle azioni inutili o indesiderate


Generalita

Generalita

Regole d’oro : Limitare il ricorso alla memoria

I interfacce self-informative

I impostazioni predefinite generali, ma personalizzabiliEsempio: menu visualizza

I shortcut intuitive

I metafora del mondo reale

I informazioni progressive


Generalita

Generalita

Metafora del mondo reale

De Lucia, A., Francese, R., Passero, I., Tortora, G., (2009). “Development and evaluation of a

virtual campus on Second Life: The case of secondDMI.” COMPUTERS & EDUCATION. Volume

52(1)


Generalita

Generalita

Regole d’oro : User interface uniforme

I standard di progettazione

I input/output uniformi

I meccanismi di navigazione uniformi


Analisi e design della user interface


Sommario

1. Generalita


3. Content design: l’esempio del sistema biblioteca



6. TOOLS

7. Bibliografia




I passi della progettazione

La progettazione dell’interfaccia utente comprende:

I la definizione degli oggetti dell’interfaccia e le relative operazioni(sulla base della specifica dei requisiti)

I la definizione delle azioni degli utenti che modificano lo “stato”dell’interfaccia



Generalita

La progettazione dell’interfaccia utente consiste nel:

I content designcontenuti e funzioni (di massima) da utilizzare nella interfaccia

I dialogue design

I screen/layout design

I elementi estetici (grafici, colori)I elementi strutturali (posizionamento delle informazioni,

input/iutput, meccanismi di navigazione)I elementi tecnici (componenti riutilizzabili)



Generalita

Il risultato della progettazione

La progettazione dell’interfaccia utente produce:

I user interface element

I screen layout

I modello del dialogo




Il processo di progettazione

I Analisi e modellazione

1. degli utenti2. delle operazioni e dei contenuti da visualizzare3. dell’ambiente di lavoro

I Progettazione della UI

I Implementazione della UI

I Validazione della UI




Analisi e modellazione degli utenti

I Interviste

I Input dal reparto vendite

I Input del marketing

I Input del supporto tecnico




Analisi e modellazione delle operazioni

Obiettivi

I Quali sono le operazioni svolte dall’utente

I Quali oggetti del dominio sono interessati da queste operazioni

I Qual e il workflow (la sequenza delle operazioni)

I Qual e la gerarchia delle operazioni




Analisi e modellazione delle operazioni

Obiettivi

I Quali sono le operazioni svolte dall’utente – USE CASE

I Quali oggetti del dominio sono interessati da queste operazioni –CLASSI

I Qual e il workflow (la sequenza delle operazioni) – ACTIVITYDIAGRAM

I Qual e la gerarchia delle operazioni


Content design: esempio il sistema biblioteca


Sommario

1. Generalita




5. Screen/layout design

6. TOOLS

7. Bibliografia



Casi d’uso

Sistema biblioteca

Requisiti

In una biblioteca il bibliotecario ha i seguenti compiti:

I prestito dei libriSolo il bibliotecario puo prestare i libri.

I restituzione dei libri

I gestione i libri (riporre i libri sugli scaffali, segnalare i libridanneggiati, ordinare nuovi libri).

(Esempio tratto da Chris Phillips, Elizabeth A. Kemp, Sai Mei Kek: Extending UML Use Case

Modelling to Support Graphical User Interface Design. Australian Software Engineering Conference

2001: 48-60)



Casi d’uso

Sistema biblioteca

Casi d’uso



Casi d’uso

Sistema bibliotecaDiagramma di attivita per “richiesta libro”



Casi d’uso

Sistema biblioteca

Navigation map

Nel RUP non ci sono regole in quanto UML e considerato non applicabile.

Navigation map

Nel modello RUP l’artefatto della attivita Design the User Interface e laNavigation Map.

Navigation path

La navigation map e costituita de navigation path, sequenze di screen(windows, web pages) attraversati dall’utente.Un navigation path

I mostra come gli utenti navigheranno nel sito web o useranno ilsistema.

I e rappresentato da tree diagrams (“site map”)



Casi d’uso

Sistema biblioteca

Navigation map

Nel RUP non ci sono regole in quanto UML e considerato non applicabile.

Navigation map

Nel modello RUP l’artefatto della attivita Design the User Interface e laNavigation Map.

Navigation path

La navigation map e costituita de navigation path, sequenze di screen(windows, web pages) attraversati dall’utente.Un navigation path

I mostra come gli utenti navigheranno nel sito web o useranno ilsistema.

I e rappresentato da tree diagrams (“site map”)



Casi d’uso

Sistema bibliotecaNavigation map

da http://www.cs.buap.mx/~dpinto/semadoo/bws.pdf

http://www.cs.buap.mx/~dpinto/semadoo/bws.pdf



Casi d’uso

Sistema bibliotecaUser Interface Elements



Casi d’uso

Sistema biblioteca

User Interface Elements



Casi d’uso

Sistema biblioteca

ESERCIZIO PROPOSTO

Completare la determinazione degli UIE.



Casi d’uso


Progettazione della UI

Obiettivi

I definizione degli oggetti della UI e delle operazioni (azioni)

I definizione del comportamento (cambiamento di stato)

I rappresentazione degli stati (graficamente/cosı come sipresenteranno all’utente)

I indicazione del modo con cui l’utente interpreta lo stato del sistemasulla base delle indcazioni della interfaccia



Casi d’uso


Il prototipo


Modellazione del Dialogo


Sommario

1. Generalita





6. TOOLS

7. Bibliografia



Modellazione del dialogo

M. Beaudouin-Lafon “Human-Computer Interaction.” pag. 231.




Dialogo

Conversazione tra due o piu partiCooperativo

Dialogo in UI

si riferisce alla struttura della interazione tra uomo e computerlivello sintattico della conversazione tra uomo e computer

Livelli di dialogo UI

I lessicaleicone, tasti

I sintattico

I semanticoeffetto sui dati e sulle applicazioni




Dialogo uomo–macchina

Il dialogo uomo–macchina e molto strutturato e formaleDialoghi formali




Dialogo : notazioni

I DiagrammaticheState Chart, Petri Net, Flow charts

I Testualigrammatiche, production rules



Sistema biblioteca

Dialogo naturale e dialogo uomo computer

“This is quite unnatural if compared with human behavior: in fact, some-times humans update their knowledge (schemata) after a question they arenot able to answer and they do this through a follow-up questioning processwith the questioner. Analogously, when a query is posed to a system (onan evolved schema), the system could ask for some “explanations” tryingto build a bridge between its schema and that one related to the query.This kind of approach has the advantage of building (partial) mappingsonly if and when they are necessary.”

Giuseppe Polese, Mario Vacca “Towards a Dialogue Based Interface for Query Synchronization”

Design for the Future Experience (CHItaly ’09).”



Sistema biblioteca

ESERCIZIO PROPOSTO

Descrivere il dialogo per il sistema biblioteca


Screen/layout design


Sommario

1. Generalita





6. TOOLS

7. Bibliografia



Screen design/layout

Strumenti

I raggruppamento e strutturazione di items

I ordinamento di items

I decorazioni - (fonti, boxes ecc.)

I allineamento di items

I uso di spazi bianchi tra items

Screen design and layout da Alan Dix, Janet Finlay, Gregory Abowd, Russell Beale “Human

Computer Interaction, 3rd Edition”, Prentice Hall, 2004.



Screen design and layout

Strumenti : raggruppamento e strutturazione

cose che stanno logicamente insieme dovrebbero stare fisicamenteinsieme




Strumenti : raggruppamento e strutturazione

cose che stanno logicamente insieme dovrebbero stare fisicamenteinsieme




Strumenti : ordinare

REGOLA

l’ordine naturale dovebbe essere riportato nell’ordine all’interno delloscreen.




Strumenti : decorare

I usare boxes pre ragggruppare logicamente item

I usare fonti per enfatizzare e per le voci (heading)




Strumenti : decorare

I usare boxes pre ragggruppare logicamente item

I usare fonti per enfatizzare e per le voci (heading)




Strumenti : allineare il testo

Noi leggiamo da sinistra a destra quindi allineiamo da sinistra a destra

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura chela diritta via era smarrita. Ahi quanto a dir qual era e cosa dura esta

selva selvaggia e aspra e forte che nel pensier rinova la paura!

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura chela diritta via era smarrita. Ahi quanto a dir qual era e cosa dura estaselva selvaggia e aspra e forte che nel pensier rinova la paura!




Strumenti : allineare il testo

Noi leggiamo da sinistra a destra quindi allineiamo da sinistra a destra

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura chela diritta via era smarrita. Ahi quanto a dir qual era e cosa dura esta

selva selvaggia e aspra e forte che nel pensier rinova la paura!

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura chela diritta via era smarrita. Ahi quanto a dir qual era e cosa dura estaselva selvaggia e aspra e forte che nel pensier rinova la paura!




Strumenti : allineamento di nomi e cognomi

Mario VaccaGiovanni BianchiRino RossettiUgo GialloMassimiliano Verdino

Mario, VaccaGiovanni, BianchiRino, RossettiUgo, GialloMassimiliano, Verdino

Mario VaccaGiovanni BianchiRino RossettiUgo GialloMassimiliano Verdino




Strumenti : allineamento di numeri

532.56179.3

256.31715

73.9481035

3.142497.6256

532.56179.3256.3171573.94810353.142497.6256




Strumenti : colonne multiple




Strumenti : colonne multiple




Strumenti : spazio tra strutture




Strumenti : spazio tra strutture



Sistema biblioteca

ESERCIZIO PROPOSTO

Effettuare lo screen design per il sistema biblioteca.




Ulteriori problemi di design

I tempi di risposta

I help

I gestione degli errori

I menu a comandi


TOOLS


Sommario

1. Generalita


3. Content Design: l’esempio del sistema biblioteca



6. TOOLS

7. Bibliografia


TOOLS


TOOLS

Come produrre SCREEN LAYOUTS e prototipi GUI?


TOOLS


TOOLS

I Microsoft Visio

I Axure

I iRise

I Pencilhttp://www.evolus.vn/Pencil/Screenshots.html

I Denimhttp://dub.washington.edu:2007/denim/University of Washington

I Napkin Look & Feelhttp://napkinlaf.sourceforge.net/

http://www.evolus.vn/Pencil/Screenshots.html

http://dub.washington.edu:2007/denim/

http://napkinlaf.sourceforge.net/


TOOLS


TOOLS : pencil




TOOLS


TOOLS : pencil

SCREEN LAYOUT “aggiunta di nuovo LOR” nel sistema GESTIONELOR.

Documents

Corso di Ingegneria del Software a.a. 2009/2010 La ...infocom.uniroma1.it/.../IngegneriaDelSoftware/InterfacciaUtente1.pdf · Per il progettista l’interfaccia e alla base del successo