Post on 15-Feb-2019
transcript
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
GUI ed organizzazioni
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
GUI ed organizzazioni
12.-15
GUI design: fattori determinanti
GUIObiettivi
Persone
Tecnologia
GUI ed organizzazioni
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
GUI ed organizzazioni
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
GUI ed organizzazioni
12.-18
Riconoscere piuttosto che Ricordare...
FISS SPAG BRAC ACQUCART RISO POLL VINO
SELF BROD PESC LASA BOLL CONI
Punteggio
GUI ed organizzazioni
12.-19
Riconoscere piuttosto che Ricordare...
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
GUI ed organizzazioni
12.-20
Riconoscere piuttosto che Ricordare...
Punteggio
GUI ed organizzazioni
12.-21
Riconoscere piuttosto che Ricordare...
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
GUI ed organizzazioni
12.-22
Riconoscere piuttosto che Ricordare...
Visto
Avanti
Seleziona
Indietro
Zoom
Password
Agendaelettronica
Videoscrittura
Postaelettronica
Aggiungi
Taglia
Incolla
Stampa
Salva
GUI ed organizzazioni
12.-23
Riconoscere piuttosto che Ricordare...
Punteggio
GUI ed organizzazioni
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
GUI ed organizzazioni
12.-25
GUI: non sempre l’interfaccia migliore...
“un’ interfaccia per ogni occasione...”
Criteri di scelta:
• Obiettivi
• Persone
GUI ed organizzazioni
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)
GUI ed organizzazioni
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
GUI ed organizzazioni
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
-
.
/
-
-
-
.
-
-
-
-
-
-
- -
-
/
/
/
/
/
.
.
.
.
GUI ed organizzazioni
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à
Facilità diapprendimento
Riutilizzoconoscenza Soddisfazione
- /. //
GUI ed organizzazioni
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
Mole di lavoroda svolgere Qualità
Facilità diapprendimento
Riutilizzoconoscenza Soddisfazione
- - / /.
GUI ed organizzazioni
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
Mole di lavoroda svolgere Qualità
Facilità diapprendimento
Riutilizzoconoscenza Soddisfazione
- - -. .
GUI ed organizzazioni
12.-32
Pseudo-GUI: un esempio...
GUI ed organizzazioni
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à)
Mole di lavoroda svolgere Qualità
Facilità diapprendimento
Riutilizzoconoscenza Soddisfazione
- - - -.
GUI ed organizzazioni
12.-34
Standard GUI: un esempio...
GUI ed organizzazioni
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
Mole di lavoroda svolgere Qualità
Facilità diapprendimento
Riutilizzoconoscenza Soddisfazione
. -- -/
GUI ed organizzazioni
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
GUI ed organizzazioni
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
GUI ed organizzazioni
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
GUI ed organizzazioni
12.-40
GUI nei progetti d’automazioneModello grafico Data Flow Diagram
Magazzino
FornitoreMaterialeelettronico
Stesurabolla
d’entrata
Magazzino
Merce
Stesura bollad’entrata
GUI ed organizzazioni
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
GUI ed organizzazioni
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?
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
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%
Linee guida per il disegno dell’interfaccia
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”
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
12.-55
Strutture di riferimento
Multi-Window Multi-Document (MDI) Multi-Paned
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
12.-57
Multi-Window model: esempio
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
12.-59
Multi-Document model: esempio
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
12.-61
Multi-Paned model: esempio
Linee guida per il disegno dell’interfaccia
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.)
Linee guida per il disegno dell’interfaccia
12.-63
Project standardsCommisurati alle esigenze dell’utilizzatore finale...
Standard di progetto Situazione contingente
Soluzioni possibili...
Stampa bolla accompagnamento merce
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
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ù
Linee guida per il disegno dell’interfaccia
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
Linee guida per il disegno dell’interfaccia
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?
Linee guida per il disegno dell’interfaccia
12.-68
Comunicazione visiva nelle GUI
12.-69
• Ergonomia
• Affordance
• Metafore
• Colori
• Icone
• Usabilità
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
12.-73
Affordance nelle GUI
• Tridimensionalità
• Ombreggiatura
• Puntamento
In the same way... object oriented?!
Comunicazione visiva nelle GUI
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”
Comunicazione visiva nelle GUI
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à
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
12.-79
The Human Metaphor
Realtà virtuale
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
12.-82
Layout: esempi
Xxxx xxx xxxxxxxx xxxxxxx
Xxxx xxx xxxxxxxx xxxxxxx
Xxxxxxx
Xxxxxxxxxxx
Xxxx xxx xxxxxxxx xxxxxxx
Xxxxxxx
XxxxxxxxxxxXxxx xxxxxxxxxxx xxxxxxx
Comunicazione visiva nelle GUI
12.-83
L’uso dei Colori
Dimenticatevi l’estetica... il colore è comunicazione!
Jan B. White
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
12.-86
Colori e stanchezza visiva
Colori brillanti• sconsigliabili per applicazioni gestionali• ottimali nelle applicazioni Self-service/CBT
applicazione più “invitante”
... è come un gioco!
Comunicazione visiva nelle GUI
12.-87
Colori e tecnologia
• 16 o 256 colori?
A b c
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
12.-93
Button icon
• Rafforza graficamente la funzione del bottone
Comunicazione visiva nelle GUI
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!
Comunicazione visiva nelle GUI
12.-95
Icone: evitare i puzzle...
Amministrazione comunale: gestione della piscina...
• Piscina• Acqua potabile• Patrimonio idrico
• Piscina • Piscina• Spazi ricreativi
Comunicazione visiva nelle GUI
12.-96
“Il carattere delle GUI”
• Leggibilità: anche in relazione al tipo ed alle caratteristichedel carattere scelto
Font
Font
Font Font
Font
Font
Font
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
12.-99
Usabilità
Usabilità
HCI Usability
UsabilitàComprensibilitàApprendibilitàOperabilità
ISO/IEC DIS 9126
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
12.-102
HCI Usability: Velocità
Obiettivo Quando...
10 inserimenti ogni 2minuti
• Utilizzo giornaliero edintensivo
• Attività ripetitiva
Comunicazione visiva nelle GUI
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à
Comunicazione visiva nelle GUI
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)
Comunicazione visiva nelle GUI
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
Comunicazione visiva nelle GUI
12.-106
HCI Usability: Soddisfazione
Obiettivo Quando...
9 su 10 dichiarano cheè “bello da usare”
• Sistema self-service
• BPR incentrato sul nuovosistema
Comunicazione visiva nelle GUI
12.-107
HCI Usability Framework
...Progettare l’usabilità
HCI ScopeDefinition
HCIDefinition and
Planning
User interfaceConceptual
Design
DetailedPrototyping
User interfaceEvaluation
Comunicazione visiva nelle GUI
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