12. Il disegno delle interfacce utente...

12. Il disegno delle interfacce utente (GUI)

Ing.Alessandro Musumeci

12.-2

Obiettivi

• Fornire una panoramica sui principali tipi di interfacceuomo-macchina

• Presentare i collegamenti tra interfacce grafiche edazienda

• Approfondire il rapporto esistente tra GUI e Client/Server• Enfatizzare il concetto secondo cui la realizzazione delle

interfacce grafiche non prevede solo conoscenzetecnologiche ma anche ergonomiche e comportamentali

12.-3

Introduzione• Gerghi• Interazione uomo/macchina• Interfacce per agire• Paradigmi di interazione: la storia

GUI ed Organizzazioni• GUI Design: fattori determinanti• Riconoscere piuttosto che ricordare• Tipologie d’interfacce al confronto• GUI e progetti

Linee guida• Una regola d’oro• Un metodo

12.-4

Comunicazione visiva nelle GUI• Ergonomia• Affordance• Metafore• Colori• Icone• Usabilità

12.-5

• Gerghi• Interazione

uomo/macchina• Interfacce per agire• Paradigmi di

interazione: la storia

12.-6

Interfaccia ?

Gerghi

• generale: undialogo tra due entità (partners)

• specifico (elettronica): dispositivoche consente il transito di energia e/oinformazione

12.-7

Interazione

Trigger Effettore

“Individuo Tecnico” “Individuo Umano”

Interfaccia

RicettoreAzione

12.-8

Interazione uomo - PC

AzioneRicettore

Effetore Trigger

Interfaccia

12.-9

Progettazione interfacce

Valutare• il lato fisico Tecnologia• il lato cognitivo Ergonomia cognitiva

“L’ergonomia cognitiva non è riconducibile al buon senso”S. Bagnara

12.-10

Paradigmi d’interazione: la storia...

Paradigmi d’interazione

Tecnologia d’interazione

12.-11

Paradigmi d’interazione: la storia

Terminale scrivente.....: scrivi e leggiTerminale video ..........: scegli e riempiPersonal Computer......: what ifWorkstation..................: non dirlo ma falloSistemi multimediali.....: parla ed ascoltaRealtà virtuale..............: entra ed agisci

12.-12

GUI ed organizzazioni

12.-13

• GUI Design: fattori determinanti

• Riconoscere piuttosto cheRicordare

• Tipologie d’interfacce al confronto

• GUI e progetti


12.-14

La storia di un successo

User Interface Design: una piccola parte del processo diRe-Engineering

01 02 03 04 05 06 07 08 09 0

1 00

L a voro s volto Q u a lità P rod u ttività S od d is faz ion eu ten te

Character-basedGUI

Tample, Baker, Sloan, Inc


12.-15

GUI design: fattori determinanti

GUIObiettivi

Persone

Tecnologia


12.-16

L’uomo: il riferimento

Le GUI esaltano le potenzialità del cervello umano:• Riconoscere ed Associare• Generalizzare e Dedurre

Come...• molte informazioni contemporaneamente

• metafore• colore


12.-17

Riconoscere piuttosto che Ricordare...

1° parte

Lista di codici registrazione ordinazioni al ristorante;facili da ricordare e raggruppati per significato

① Leggerli per 30 secondi

② Chiudere il manuale e cercare di riscriverli correttamente anchese in un qualunque ordine


12.-18


FISS SPAG BRAC ACQUCART RISO POLL VINO

SELF BROD PESC LASA BOLL CONI

Punteggio


12.-19


2° parte

Nella pagina successiva viene presentato un insieme diicone d’aspetto familiare raggruppate per significato

① Osservarle per 30 secondi② Chiudere il manuale e cercare di riscriverne i nomi

(secodo la propria interpretazione) in un qualunqueordine


12.-20


Punteggio


12.-21


3° parte

Nella pagina successiva viene presentata un insieme diicone che associano oggetti del mondo reale alle più diffusefunzioni computerizzate

① Osservarle per 30 secondi② Voltare pagina e cercare di riscrivere il nome di

ciascuna funzione accanto all’immagine dell’iconacorrispondente


12.-22


Visto

Avanti

Seleziona

Indietro

Zoom

Password

Agendaelettronica

Videoscrittura

Postaelettronica

Aggiungi

Taglia

Incolla

Stampa

Salva


12.-23


Punteggio


12.-24

Tipi d’interfacce uomo-macchina

Diversi tipi d’interfaccia in relazione al grado d’integrazionetra l’uomo e la tecnologia

Schedeperforate

Code-based

SpecialGUI

StandardGUI

PseudoGUI

3270 Realtàvirtuale

Riflette il modo dicomunicare delle

persone

Riflette il modo dicomunicare delle

macchine


12.-25

GUI: non sempre l’interfaccia migliore...

“un’ interfaccia per ogni occasione...”

Criteri di scelta:

• Obiettivi

• Persone


12.-26

...in funzione degli obiettivi aziendali

• Rapidità o efficacia

• Che cosa è la qualità e quanto è importante

• Change management

• Utilizzo di strumenti di produttività individuale

• Strategie a lungo o a breve termine (elevato o modestoinvestimento)


12.-27

... in funzione dell’utilizzatore

• Numero d’utenti

• Esperienza nell’utilizzo della tecnologia

• Età media

• Motivazione o scetticismo

• Eterogeneità dei gruppi d’appartenenza

• Turnover

• Utilizzatori assidui o saltuari

• Versioni standard o ad hoc


12.-28

Interfacce al confronto

Indifferente Inadatta Adatta ed abilitante/. -

InterfacceMole di lavoroda svolgere Qualità

Facilità diapprendimento

Riutilizzoconoscenza Soddisfazione

Code-based

3270

Pseudo GUI

Standard GUI

Special GUI

-

.

/

-

-

-

.

-

-

-

-

-

-

- -

-

/

/

/

/

/

.

.

.

.


12.-29

Code-based

• Interazione attraverso comandi (codici)

• Ottimale per moli di lavoro elevate che richiedono attenzione inpunti lontani dal video (es. Check-In)

• Mantenere basso il numero di codici utilizzabili

• Assenza di riusabilità delle conoscenze acquisite

Mole di lavoroda svolgere Qualità



- /. //


12.-30

Interfaccia 3270

• Interfaccia a caratteri

• Ottimale per data-entry ed editing di dati altamente strutturati

• Workflow fortemente predefinito (bassa flessibilità)

• Navigazione e tasti funzionali complicano apprendimento eriusabilità delle conoscenze acquisite




- - / /.


12.-31

Pseudo-GUI

• interfaccia grafica che richiama la strutturazione di un’interfacciaa caratteri

• Ottimale per applicazioni che debbano gestire dati fortementestrutturati garantendo una buona flessibilità

• Se standard consente riusabilità delle conoscenze acquisite




- - -. .


12.-32

Pseudo-GUI: un esempio...


12.-33

Standard GUI

• Progettata e sviluppata per un ambiente grafico

• Esaltate le potenzialità di manipolazione diretta (cut & paste, drag& drop, etc.)

• Ottimale per user-driven applications (flessibilità)




- - - -.


12.-34

Standard GUI: un esempio...


12.-35

Special GUI

• Enfasi massima alla presentazione grafica

• Obiettivo prioritario è l’autoesplicazione (EIS,videogames)

• Il cliente “si serve” da solo...

• L’utente target potrebbe non avere esperienza sull’utilizzo deicomputer




. -- -/


12.-36

Special GUI: un esempio...GUI ed organizzazioni

12.-37

GUI nei progetti d’automazione

Utente ed interfaccia sono elementi fondamentali perl’accettazione/approvazione di un sistema informatico.

Applicazione

Utente ed Interfaccia

Approvato


12.-38

GUI nei progetti di automazioneUna nuova figura professionale: User Interface ArchitectCaratteristiche

• Familiarità rispetto ad azienda, persone e tecnologia

• Capacità comunicative• Capacità d’analisi delle situazioni e dei comportamenti• Conoscenza di tecniche di modellazione

• Esperienza nella realizzazione/utilizzo delle GUI


12.-39

GUI nei progetti d’automazione

• modellazione concettuale un passo irrinunciabile

• una “mappa mentale” delle parti principali del sistema

• l’utente identifica funzionalmente il sistema attraverso il modellomentale acquisito

Tecniche di modellazione:• rappresentazione grafica semplificata

• DFD


12.-40

GUI nei progetti d’automazioneModello grafico Data Flow Diagram

Magazzino

FornitoreMaterialeelettronico

Stesurabolla

d’entrata

Magazzino

Merce

Stesura bollad’entrata


12.-41

GUI nei progetti d’automazioneUsability Test

• per produrre e non per valutare la qualità

• non con l’utente atipico (esperto di computer)• Informal usability test

Modelli grafici (disegni)Simulazioni, dimostrazioni e prototipi

• Formal usability test

Il sistema in via di sviluppoOsservazione, registrazione, valutazione utente sutask predefinitiAttività correttive


12.-42

Linee guida per il disegno dell’interfacciautente

12.-43

• Una regola d’oro

• Un metodo

Linee guida per il disegno dell’interfaccia

12.-44

La regola d’oro...

• CHI lo userà?

• PER COSA verrà usato?


12.-45

La regola d’oro... un esempio...• Executive Information System per una grande azienda

• Design della interfaccia di presentazione dei costi amministrativiper ciascun dipartimento

• Qualità espressa, implicita, attraente

Domanda Qualità espressa Qualità attraentePer CHI ? Dirigenti Decisori e reponsabili

di gestione e direzione

Per COSA ? Per vedere i costi Per vedere i costi amministrativi amministrativi annui

annui di ciascun in relazione ai costi globalidipartimento del dipartimento e per poter

intraprendere eventuali azioni correttive


12.-46

...interfaccia per qualità espressa

Senza aiuto visivo... Con aiuto visivo...

Dipartimento Costi amministrativi

Magazzino 12.700.000Personale 23.700.000Contabilità 54.800.000Vendite 19.000.000

C osti Am m inis trativ i in M il ioni d i l ire

12 ,723 ,7

54 ,8

19

0102030405060

Magazzin

o

P erson ale

Con tab ilità

V end ite


12.-47

...interfaccia per qualità attraentePercentuale costi am m inistrativ i rispetto ai costi totali (in M ilioni di lire)

12,723,7

54,8 19

32198,4

178,6 78,3

0%

20%

40%

60%

80%

100%

M agazzin o P erson ale C on tab ilità V en d ite

Altri costi

Costi Am m in istrativi


12.-48

Il metodo

Prima del termine dello studio di fattibilità1. definire le attività legate alla realizzazione dell’interfaccia

2. definire i parametri di riferimento ed i criteri di usabilità

3. pianificare le attività di valutazione dell’usabilità

4. realizzare il modello concettuale dell’interfaccia

Precocemente nella fase di analisi e progettazione5. Definire e realizzare le strutture base (dialogo, look & feel)

6. Stabilire gli standard di progetto per l’interfaccia

7. Prototyping delle parti ritenute critiche

8. Verificare l’allineamento con modello concettuale e standard

Nella fase di sviluppo9. Ultimare l’interfaccia in dettaglio legandola alla logica applicativa


12.-49

GUI e Project Management• le attività di User Interface Design devono rientrare nel budget e

nei piani di schedulazione del progetto

• le persone che se ne occupano fanno parte del project team

• pianificare le attività di testing dell’interfaccia con gli utenti diriferimento


12.-50

I sei criteri dell’usabilità

Speedveloce da usare

Learnabilityfacile daimparare

Prevents errorsridurre gli

errori

Navigationrigida o flessibile

Subjectivesatisfactionpiacevole da

utilzzare

Memorabilityfacile da

memorizzare


12.-51

Usabilità ... frasi ad effetto

Usability engineer: guardare, ascoltare ed imparare da ciòche si osserva

La definizione esatta non è “Utente” ma “Cliente”Se l’utente sta commetendo un errore probabilmente è

l’interfaccia che non è all’altezzaL’usabilità verrà comunque testata anche se non sarà il

progettista a farlo (Jakob Nielsen)

Si può spendere subito si può spendere più tardi ... macomunque si dovrà spendere


12.-52

Conceptual model: i motiviIl modello concettuale è probabilmente il fattore

determinante per l’usabilità di una interfaccia utente

Modello Concettuale

60%

Struttura del dialogo

30%

Presentazione10%


12.-53

Strutturare le GUI

Work Flowsequenza di attività svolte per produrre un risultato di

business Gartner Group

• guida il dialogo

• esplicitamente visibile nelle GUI (menu, bottoni, icone, palette... ocombinazioni di questi elementi)

• una struttura “bassa e larga”


12.-54

una struttura “bassa e larga”

Alta e Stretta Bassa e Larga

• fornisce all’utente una visione migliore delle possibilità offerte

• facilita la navigazione


12.-55

Strutture di riferimento

Multi-Window Multi-Document (MDI) Multi-Paned


12.-56

Multi-Window model

Una applicazione• molte main-window (ciascuna con un menù)

• rapporto 1:1 tra main-window e business object• molte child-windows (senza menù) possibili per ciascuna main-

window• più main-window attivabili contemporaneamente: estrema

flessibilità• navigazione complessa


12.-57

Multi-Window model: esempio


12.-58

Multi-Document model

Una applicazione• una sola top window con menù• la top window guida una serie di document windows• flessibilità inferiore a quella del multi-windows model

• la top window deve sempre rimanere aperta• vi sarà sempre un solo menù attivabile• ottimale anche per utenti inesperti


12.-59

Multi-Document model: esempio


12.-60

Multi-Paned model

• una “window” alla volta

• con o senza menù

• eventuale suddivisioni in aree (pane) monofunzionali emonoposizionali

• assenza di flessibilità

• per special GUI in applicazioni self-service


12.-61

Multi-Paned model: esempio


12.-62

Project standards

Obiettivo prioritario: agevolare l’utilizzo da parte dell’utente• consistenza esterna• i tools già utilizzati in azienda (standard de facto)• consistenza interna subordinata all’usabilità

Definizione degli standards per:• terminologia

• metafore, icone• caratteristiche delle windows (menù, bottoni, dimensioni,

posizione, etc.)


12.-63

Project standardsCommisurati alle esigenze dell’utilizzatore finale...

Standard di progetto Situazione contingente

Soluzioni possibili...

Stampa bolla accompagnamento merce


12.-64

Project standard

Allargare tutti i bottoni della window

Allargare solo il bottone “incriminato”

Ridisegnare la window ed inserire la scelta nel menù

Un simbolo al posto del testo

Testo più corto compreso ed approvato dall’utente

Abbreviazione compresa ed approvata dall’utente

Che priorità attribuireste alle soluzioni prospettate?

Stampa bolla XAB

Stampa B.A.M.

Stampa bolla accompagnamento merce

Bollaaccompagnamentomerce


12.-65

Project standard

Priorità consigliate

1. Testo più corto compreso ed approvato dall’utente

2. Abbreviazione compresa ed approvata dall’utente

3. Allargare tutti i bottoni della window/gruppo

4. Allargare solo il bottone “incriminato”

5. Un simbolo al posto del testo

6. Ridisegnare la window ed inserire la scelta nel menù


12.-66

Prototyping

• Simulatore (l’utente è passivo)

• Dimostratore (l’utente agisce sulle parti critiche)

• Prototipo (l’utente agisce sull’intero sistema beta-release)

Carey 1983


12.-67

Revisione dell’interfaccia progettataElementi da controllare

• Il modello concettuale è sufficientemente rappresentato (visibilità più che memorizzazione)?

• Rispetto al progetto l’interfaccia è adatta e gli standard sonorispettati?

• Adeguato bilanciamento tra flusso predefinito e flessibilità

• Possibilità d’utilizzo alternativo tra mouse e tastiera?• Livello d’integrazione dell’utente con l’interfaccia (usabilità, testing

effettuato con l’utente ”vero”)• E’ utilizzata la terminologia utente?


12.-68

Comunicazione visiva nelle GUI

12.-69

• Ergonomia

• Affordance

• Metafore

• Colori

• Icone

• Usabilità


12.-70

ErgonomiaL’interfaccia è la sfera in cui avviene l’accoppiamento

strutturale tra il corpo dell’utente (componente fisica ecomponente mentale) e l’utensile (programma)

Gui Bonsiepe

Ergonomia (cognitiva) : lo studio del costo delle operazionimentali per un utilizzo adeguato dell’interfaccia

Sebastiano Bagnara


12.-71

Ergonomia

L’ergonomia cognitiva non è portatrice di un repertorio disoluzioni valide per tutte le interfacce e per ogni contesto...

Gui Bonsiepe

Si spruzza Si schiaccia Si versa


12.-72

Affordance

“Annegare” la conoscenza nel mondo reale significa ridurrelo sforzo di memorizzazione

Donald Norman

Affordance (induttività, invito)enfatizza gli aspetti di un oggetto che invitano a manipolarlo

in un certo modo


12.-73

Affordance nelle GUI

• Tridimensionalità

• Ombreggiatura

• Puntamento

In the same way... object oriented?!


12.-74

Metafore

Una parola, una frase o una figura che dipinge un oggetto oun concetto attraverso una somiglianza o un’analogia conun altro oggetto o concetto del mondo reale.

Simbolo di divieto

Evocazione del “fumo”


12.-75

Metafore

Il termine adatto:• Allegoria : (dal greco) argomentare con immagini diverse• Metafora: (dal greco) trasferimento; sostituzione di un termine

proprio con uno figurato

Difficoltà


12.-76

Metafore

• La prima fra le scelte progettuali

• Interfaccia: un problema di messa in scena...

Teatro HCI scenografia metafore luci colori, look, etc. tempi e ritmi feel, modello, di recitazione dialogo


12.-77

Metafore nelle GUI

Metafore (le più comuni) Corrispondenze tecnologicheDocumento FileCartelletta DirectorySchedario Storage SystemScheda RecordLettera E-mailTaglia e cuci Scrivi e leggi da un bufferPattumiera, cestino carta CancellaBottone Comando + eseguiGomma Undo


12.-78

Scegliere una metafora...

• isolare le funzionalità essenziali e più difficili dacapire per l’utente

• proporre diverse alternative

• valutare

–concretezza

–familiarità per l’utente

–bilanciamento tra aspettative e funzionalità fornite

–semplicità di rappresentazione grafica

• testare la metafora prescelta e una fra le alternative


12.-79

The Human Metaphor

Realtà virtuale


12.-80

Definizione del LayoutIl layout è determinato dalla posizione del testo dei disegni e

dei controlli all’interno di un’area considerata (window)• La posizione degli elementi è un importante strumento di

comunicazione

Leading text:

Text:

Text:

Text:

Leading text:

Leading text:

Text:

Text:

Text:

Leading text:

Command Command CommandCommand Command Command


12.-81

Layout guidelines

Le distanze devono essere scelte in relazione al grado di

associazione tra gli elementiFra gli standards di progetto...

• distanza tra campi correlati• distanza tra i gruppi

• distanza (superiore, laterale, inferiore) tra riquadro ed elementicontenuti

• distanza (superiore, laterale, inferiore) tra margine dell’areaprincipale (window) ed elementi contenuti

1 2 3 4 5 6 7


12.-82

Layout: esempi

Xxxx xxx xxxxxxxx xxxxxxx


Xxxxxxx

Xxxxxxxxxxx


Xxxxxxx

XxxxxxxxxxxXxxx xxxxxxxxxxx xxxxxxx


12.-83

L’uso dei Colori

Dimenticatevi l’estetica... il colore è comunicazione!

Jan B. White


12.-84

La semantica dei Colori

Culture

USA

Francia

Egitto

India

Giappone

Cina

Italia

Rosso

Pericolo

Aristocrazia

Morte

VitaCreatività

RabbiaPericolo

Felicità

Blu

Mascolinità

LibertàPace

VirtùFedeVerità

Malvagità

ParadisoNuvole

Verde

Sicuro

Criminalità

FertilitàForza

ProsperitàFertilità

FuturoGiovinezzaEnergia

Dinastia MingParadisoNuvola

Bianco

Purezza

Neutralità

Gioia

MortePurezza

Morte

MortePurezza

Giallo

Codardia

Temporaneità

FelicitàProsperità

Successo

GraziaNobiltà

NascitaRicchezzaPotere


12.-85

Colori e GUINell’ambito delle pseudo/standard GUI:

decorazione codifica “parsimonia” de-facto standard

Diario

Ricorrenze

Da Fare

Planner

Rubrica

Note

Diario

Ricorrenze

Da Fare

Planner

Rubrica

Note


12.-86

Colori e stanchezza visiva

Colori brillanti• sconsigliabili per applicazioni gestionali• ottimali nelle applicazioni Self-service/CBT

applicazione più “invitante”

... è come un gioco!


12.-87

Colori e tecnologia

• 16 o 256 colori?

A b c


12.-88

Colors guidelines

• Non abusare dei colori in un “ambiente” monocromatico: il risalto èeccessivo

• Per focalizzare l’attenzione o per creare associazione

• Se colore come codice: solo 3-5 colori, ricordarsi la semantica

• Colori vivaci per aree piccole e neutri per aree grandi

• Ricercare un contrasto efficace tra testo e sfondo

• Sfondo chiaro (bianco, grigio, giallo) è ottimale per testi scuri

• Evitare colori troppo brillanti: sui tempi lunghi causano alterazionevisiva


12.-89

L’icona: “la regina”Icona: disegno piccolo, semplice e metaforico.Struttura

• immagine• sfondo• testo (facoltativo)

Caratteristiche• Facilmente distinguibili• Elevato valore informativo• Presentazione esplicita della metafora• Incrementano la velocità e la correttezza della selezione• Autoesplicative anche se prive di testo

Piscina

Traghetti

ServizioElicotteri


12.-90

Tipi di icone

Icone Obiettivi Esempi

Desktop icon Partenza

Riapertura

Menu icon

Palette icon

Come menu(sempre visibile)

Buttom icon In aggiunta deltesto di un bottone


12.-91

Desktop icon

• Applicazioni collegate per l’utente, icone simili graficamente• Se minimize

- icone similari per finestre diverse della stessa applicazione- il testo è fondamentale per icone similari

rappresentanti finestre diverse- testo = window title


12.-92

Menu icon

Un vero aiuto per l’utente• overview di funzioni sempre attivabili• un modo veloce di selezionare• per comandi esprimibili più facilmente con disegni che con parole

• invito alla sperimentazione


12.-93

Button icon

• Rafforza graficamente la funzione del bottone


12.-94

Icone: linee guida

• Disegni semplici e schematici

• Colori differenti in icone differenti

• Il testo è il titolo della finestra collegata

• Evitare i puzzle!

Un simbolo, un’idea, una funzione!


12.-95

Icone: evitare i puzzle...

Amministrazione comunale: gestione della piscina...

• Piscina• Acqua potabile• Patrimonio idrico

• Piscina • Piscina• Spazi ricreativi


12.-96

“Il carattere delle GUI”

• Leggibilità: anche in relazione al tipo ed alle caratteristichedel carattere scelto

Font

Font

Font Font

Font

Font

Font


12.-97

Fonts guidelines

• Sans Serif per singole righe• Serif per testi articolati su molte

righe

• Non solo maiuscolo

• Spaziatura proporzionale(tranne che nelle tabelle) L’ora esatta è. 12345

L’ora esatta è. 12345

Palatino è un font con grazie

Arial è senza grazie

SOFTWARE DESIGN

software design


12.-98

Usabilità

Facilità d’uso: l’efficacia , l’efficienza e la soddisfazionecon cui determinati utenti eseguono determinati compiti inparticolari ambienti

ISO CD 9241, Part 11 (guidance on the specification and measures)

• Efficacia: misura in cui i compiti previsti dal funzionamento vengono eseguiti

• Efficienza: risorse da impegnare per eseguire i compiti previsti

• Soddisfazione: misura dell’accettabilità del funzionamento da parte dell’utente


12.-99

Usabilità

Usabilità

HCI Usability

UsabilitàComprensibilitàApprendibilitàOperabilità

ISO/IEC DIS 9126


12.-100

HCI UsabilityI sei criteri dell’usabilità

Incremento Produttività

Speedveloce da usare

Learnabilityfacile daimparare

Prevents errorsridurre gli

errori

Navigationrigida o flessibile

Subjectivesatisfactionpiacevole da

utilzzare

Memorabilityfacile da

memorizzare


12.-101

HCI Usability: Apprendibilità

Obiettivo Quando...

80% dei nuovi utenti ingrado di svolgerecompiutamente unasingola attivitàdell’applicazione in 30minuti

• Turn-over alto

• Utenti saltuari

• Riduzione del training

• Sistemi solitamentesottoutilizzati permancanza di training

• Breve ciclo di vita deiprodotti


12.-102

HCI Usability: Velocità

Obiettivo Quando...

10 inserimenti ogni 2minuti

• Utilizzo giornaliero edintensivo

• Attività ripetitiva


12.-103

HCI Usability: Facilità di navigazione

Obiettivo Quando...

Possibilità di innescare6 diverse attività su unsingolo oggetto senzaritornare al menuprincipale

• Il cliente “guida il gioco”• Richiami notevoli tra attività• Si attende una decisione...

(ristorante)• Elevato turn-over• L’importante non è

prendere decisioni maseguire una procedura(mensa)

Flessibilità Rigidità


12.-104

HCI Usability: Memorabilità

Obiettivo Quando...

Riutilizzo, senzaulteriore training, diuna applicazioneinattiva da 12 mesi

• Utenti saltuari

• Applicazioni percircostanze “eccezionali”

• Applicazioni di utilizzosecondario

• Applicazioni attivate indate precise (scadenze)


12.-105

HCI Usability: Prevenzione errori

Obiettivo Quando...

Riduzione dellapercentuale degli erroriinincorregibili(catastrofici)

• Risultati/prodotti ottenuti“faticosamente”

• Risultati correlati a fattoridi sicurezza

• Risultati immediatamentevisibili al cliente esterno


12.-106

HCI Usability: Soddisfazione

Obiettivo Quando...

9 su 10 dichiarano cheè “bello da usare”

• Sistema self-service

• BPR incentrato sul nuovosistema


12.-107

HCI Usability Framework

...Progettare l’usabilità

HCI ScopeDefinition

HCIDefinition and

Planning

User interfaceConceptual

Design

DetailedPrototyping

User interfaceEvaluation


12.-108

Bibliografia

• Il progetto delle interfacce - oggetti colloquiali e protesi virtuali a curadi Giovanni Anceschi da Domus Accademy Edizioni, 1993

• Designing the User InterfaceBen SchniedermanAddison - Wesley, 1987

• The Psicology of Everyday ThingsDonald NormanBasic Books, 1988

• Ergonomia del SoftwareSebastiano BagnaraClups, Milano 1987

12. Il disegno delle interfacce utente...

Documents

Transcript of 12. Il disegno delle interfacce utente...