08_HCI_designschermo_1

HCI: Design Schermo
(parte I)
Che cos’è la progettazione?
raggiungimento degli obiettivi rispettando
i vincoli definiti
!
• obiettivi - scopo
– per chi è il progetto, perché lo vogliono
• limiti
– materiale, piattaforme
• compromessi
Per l’interazione uomo-macchina
capire i materiali
!
• capire i computer
– limiti, capacità, strumenti, piattaforme
• capire le persone
– aspetti sociali, psicologici
– errore umano
• e la loro interazione …
Il processo di progettazione
quello che
si desidera
interviste
etnografia
!
scenari
analisi dei compiti
analisi
linee guida
principi
quello che c’è
notazioni
rispetto a
di dialogo
quello che si desidera
valutazione
prototipo
euristiche
specifica precisa
design
implementazione
e attivazione
architetture
documentazione
guida
… ma come posso farlo! !
• tempo limitato ⇒ compromesso di
progettazione
!
• usabilità?
– individuare i problemi e risolverli?
– decidere cosa correggere?
!
• un sistema perfetto è mal progettato
– troppo perfetto ⇒ troppe risorse nella progettazione
anche simulazioni …
• dispositivo modello
• fingete di eseguire un compito
• coltellino svizzero connesso a Internet…
!
ma dov’è il dito?
usate uno stuzzicadenti come stilo
Progettazione della Navigazione
• sapere dove siete
• sapere cosa potete fare
• sapere dove state andando
– o che cosa accadrà
• sapere dove siete stati
– o che cosa avete fatto
Sapere dove siete – “briciole di
Pollicino”
!
mostra il percorso attraverso la gerarchia del
sito web
sito web
categoria di livello
superiore
collegamenti
attivi a livelli
più alti
sotto-categoria
questa pagina
✓
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
Progetto e layout dello schermo
principi base
raggruppamento, struttura, ordine
allineamento
uso degli spazi bianchi
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
Raggruppamento e struttura
logicamente correlati ⇒ fisicamente correlati
Dettagli della fattura:
Nome
Indirizzo: …
Num. carta di credito:
Dettagli dell’ordine:
Elemento
Dettagli di consegna:
Nome
Indirizzo: …
Tempo di consegna:
Quantità Costo/elemento Costo
Viti 10 mm (scatole)
7
3.71
25.97
……
…
…
…
L’ordine dei gruppi e dei prodotti
• pensate! - qual è l’ordine naturale
!
• dovrebbe corrispondere all’ordine sullo
schermo!
– usate riquadri, spazio ecc.
– impostate le tabulazioni correttamente!
Abbellimento
• usate dei riquadri per raggruppare gli
elementi logici
• usate i font per dare enfasi, intestazioni
• ma non troppi!!
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
L’allineamento - testo
• gli utenti leggono da sinistra a destra
(Inglesi ed Europei)
⇒ allineamento a sinistra
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
perfetto per effetti
speciali ma difficile da
leggere
noioso ma
leggibile!
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
L’allineamento - nomi
• Di solito si esegue la ricerca per
cognome ⇒ rende facile l’operazione!
✗
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Alan
Janet
Gregory
Russell
✓
Dix
Finlay
Abowd
Beale
✓
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
L’allineamento - numeri
!
pensate allo scopo!
!
qual è il principale?
532,56
179,3
256,317
15
73,948
1035
3,142
497,6256
L’allineamento - numeri
!
visivamente:
numero lungo = numero grande
!
allineamento in corrispondenza
della virgola decimale o a destra
per numeri interi
627,865
1,005763
382,583
2502,56
432,935
2,0175
652,87
56,34
Colonne multiple
• la lettura è più difficile in precisione di
spazi:
(spesso difficile da evitare con grandi campi base di dati)
sorbetto
caramelle
cioccolato
gomme alla frutta
delizie al cocco
75
120
35
27
85
Colonne multiple - 2
• uso di caratteri di riempimento
sorbetto
caramelle
cioccolato
gomme alla frutta
delizie al cocco
75
120
35
27
85
Colonne multiple - 3
• o uso di grigi
sorbetto
caramelle
cioccolato
gomme alla frutta
delizie al cocco
(anche verticale)
75
120
35
27
85
Colonne multiple - 4
• o anche allineando (con attenzione!) gli
elementi a destra
sorbetto
caramelle
cioccolato
gomme alla frutta
delizie al cocco
75
120
35
27
85
spazio per separare
spazio per strutturare
spazio per evidenziare
I controlli fisici
• raggruppamento degli
elementi
– impostazioni di
scongelamento
– tipo di cibo
– tempo di cottura
I controlli fisici
• raggruppamento degli
elementi
• ordine degli elementi
1) tipo di riscaldamento
1
2) temperatura
3) tempo di cottura
4) start
2
3
4
I controlli fisici
• raggruppamento degli
elementi
• ordine degli elementi
• abbellimento
– colori differenti
per funzioni diverse
– linee attorno ai pulsanti
correlati
I controlli fisici
• raggruppamento degli
elementi
• ordine degli elementi
• abbellimento
• allineamento
– testo centrato nei pulsanti
? facile da scandire ?
I controlli fisici
• raggruppamento degli
elementi
• ordine degli elementi
• abbellimento
• allineamento
• spazio bianco
– spazi per agevolare
il raggruppamento