Ancora più vasto. Il processo di progettazione. I livelli. Design di navigazione: progetto della struttura. Design di interfacce

Transcript

1 Il processo di progettazione requisiti analisi utenza Design di interfacce design iterazione prototipazione implementazione e attivazione Design interfacce Informatica applicata alla Psicologia 2 I livelli design di navigazione nell applicazione ambiente altre applicazioni, sistema operativo design dello schermo Il web design di navigazione vs. architettura del sito altre applicazioni vs. web, browser, link esteni Design interfacce Informatica applicata alla Psicologia 3 design dello schermo vs. design della pagina Design interfacce Informatica applicata alla Psicologia 4 Design di navigazione: progetto della struttura locale guardando fuori da questo schermo generale struttura del sito, spostamento tra schermate ancora più vasto rapporto con altre applicazioni Ancora più vasto problemi di stile: standard della piattaforma, coerenza problemi funzionali taglia e incolla problemi di navigazione applicazioni incorporate collegamenti ad altre applicazioni il web Design interfacce Informatica applicata alla Psicologia 5 Design interfacce Informatica applicata alla Psicologia 6 1

2 Ordine / disordine Design dello schermo Immagini composte da elementi in disordine danno l impressione di complessità Design interfacce Informatica applicata alla Psicologia 8 Legge della vicinanza Le parti di un insieme percettivo vengono raccolte in unità conformi alla minima distanza, a parità di altre condizioni Design interfacce Informatica applicata alla Psicologia 9 Design interfacce Informatica applicata alla Psicologia 10 Spazio per separare Spazio per strutturare Design interfacce Informatica applicata alla Psicologia 11 Design interfacce Informatica applicata alla Psicologia 12 2

3 Spazio per evidenziare Legge della somiglianza Di fronte a una moltitudine di elementi diversi, vengono raccolti in gruppo gli elementi fra loro simili - a parità di altre condizioni Design interfacce Informatica applicata alla Psicologia 13 Design interfacce Informatica applicata alla Psicologia 14 Legge della chiusura Le linee delimitanti una superficie chiusa si percepiscono come unità più facilmente di quelle che non si chiudono, a parità di altre condizioni Design interfacce Informatica applicata alla Psicologia 15 Design interfacce Informatica applicata alla Psicologia 16 logicamente correlati fisicamente correlati Design interfacce Informatica applicata alla Psicologia 17 Design interfacce Informatica applicata alla Psicologia 18 3

4 Legge dell esperienza Design interfacce Informatica applicata alla Psicologia 19 Design interfacce Informatica applicata alla Psicologia 20 Quali font: Tipografia Con grazie o senza grazie? Corsivo o normale? Minuscolo o maiuscolo? Quanti font? Lettura su carta e sul video Il testo a video (72 dpi) è di qualità molto inferiore al testo a stampa ( dpi) Alcuni caratteri vengono resi male sul video Design interfacce Informatica applicata alla Psicologia 21 Leggiamo più lentamente e più faticosamente sul video che sulla carta Design interfacce Informatica applicata alla Psicologia 22 Con o senza grazie? Una prova di leggibilità sul video Alcuni studi hanno mostrato che, sulla carta, i caratteri con le grazie hanno una leggibilità leggermente superiore rispetto a quelli senza grazie. Pertanto, sulla carta, sarebbe meglio usare fonti con le grazie per testi lunghi, che altrimenti potrebbero risultare di lettura faticosa. Fonti senza grazie sono più leggibili in testi brevi o titoli. Ma sul video? Arial 10 Times New Roman 10 Arial 12 (senza grazie) Times New Roman 12 (con grazie) * Alcuni studi hanno mostrato che, sulla carta, i caratteri con le grazie hanno una leggibilità leggermente superiore rispetto a quelli senza grazie. Pertanto, sulla carta, sarebbe meglio usare fonti con le grazie per testi lunghi, che altrimenti potrebbero risultare di lettura faticosa. Fonti Design senza interfacce grazie sono piùinformatica leggibili applicata in alla testi Psicologia brevi o titoli.ma sul 23 video? * Tempo di lettura in sec Design interfacce Informatica applicata alla Psicologia 24 4

5 Le font preferite: risultati di un esperimento Corsivo o normale? Arial Verdana Courier Times 25 Design interfacce (Bernard et al, 2001) Informatica applicata alla Psicologia Design interfacce Informatica applicata alla Psicologia 26 Maiuscole o minuscole? Quanti font? È POSSIBILE VERIFICARE CON ESPERIMENTI CHE LA LEGGIBILITÁ DI UN TESTO SCRITTO ESCLUSIVAMEN- TE IN CARATTERI MAIUSCOLI È MINORE DI QUELLA DI UN TESTO SCRITTO IN CARATTERI MAIUSCOLI E MINUSCOLI È possibile verificare con esperimenti che la leggibilità di un testo scritto esclusivamente in caratteri maiuscoli è minore di quella di un testo scritto in caratteri maiuscoli e minuscoli Usare poche fonti contemporaneamente, e usarle in modo consistente per coinvogliare informazioni Design interfacce Informatica applicata alla Psicologia 27 Design interfacce Informatica applicata alla Psicologia 28 Esplorazione dell immagine Che direzione seguiamo nell esplorare visivamente una immagine? Progettazione delle schermate: sintesi Evidenziare la struttura del messaggio, sfruttando le leggi della gestalt Seguire il senso normale di lettura Evitare informazioni inutili o ridondanti Ridurre in ogni modo il carico cognitivo dell utente Design interfacce Informatica applicata alla Psicologia 29 Design interfacce Informatica applicata alla Psicologia 30 5

6 Il colore: accostamenti Esempio di rosso e blu in uno stesso testo Evitare l uso contemporaneo di colori saturi agli estremi dello spettro (es.: rosso-blu blu; giallo-porpora porpora) Perche : difficoltà di messa a fuoco, affaticamento Usare colori saturi solo per attirare l attenzione Perche : richiesta di maggiore messa a fuoco, affaticamento Design interfacce Informatica applicata alla Psicologia 31 Esempio di rosso e blu in uno stesso testo Esempio di rosso e blu in uno stesso testo Esempio di rosso e blu in uno stesso testo Design interfacce Informatica applicata alla Psicologia 32 Lo spettro visibile Messa a fuoco Difficoltà di messa a fuoco contemporanea di colori diversi agli estremi dello spettro Blu Verde Rosso LUCE BIANCA Blu Verde Rosso LENTE A B C FUOCO SULLA RETINA Design interfacce Informatica applicata alla Psicologia 33 Design interfacce Informatica applicata alla Psicologia 34 Accostamenti di colori L occhio desidera i colori complementari rosso verde blu arancione giallo viola Perche : colori adiacenti possono influenzarsi Design interfacce Informatica applicata alla Psicologia 35 Design interfacce Informatica applicata alla Psicologia 36 6

7 continua La percezione di variazioni è diversa a secondo del colore è difficile individuare cambiamenti nel rosso, viola e verde è più facile individuarla nel giallo e nel verde-blu Evitare rosso e verde in periferia. Usare giallo e blu Perche : in tale zona mancano coni destinati alla percezione di tali lunghezze d'onda. Il colore del testo caratteri scuri su sfondo chiaro tendono ad apparire più sottili caratteri chiari su sfondo scuro tendono ad apparire più grandi Caratteri chiari Caratteri su fondoscuri scuro su fondo chiaro Caratteri chiari Caratteri scuri su su fondo scuro fondo chiaro Caratteri Caratteri scuri chiari su sufondo fondochiaro scuro Design interfacce Informatica applicata alla Psicologia 37 Design interfacce Informatica applicata alla Psicologia 38 Testo chiaro su sfondo scuro Sfondo: colori scuri agli estremi dello spettro; Testo: colori chiari non saturi, al centro dello spettro Testo bianco su sfondo scuro Testo giallo non saturo su sfondo scuro Testo verde chiaro su sfondo scuro Testo azzurro su sfondo scuro Testo bianco su sfondo scuro Testo giallo non saturo su sfondo scuro Testo verde chiaro su sfondo scuro Testo azzurro su sfondo scuro Design interfacce Informatica applicata alla Psicologia 39 Design interfacce Informatica applicata alla Psicologia 40 Testo scuro su sfondo chiaro Sfondo: colori chiari non saturi; Testo: colori scuri, evitando il blu Design interfacce Informatica applicata alla Psicologia 41 Design interfacce Informatica applicata alla Psicologia 42 7

8 Bordi e luminosità Usare bordi per separare meglio zone di diverso colore Per una agevole messa a fuoco, oltre a differenza di colore è necessaria anche una differenza di luminosità Design interfacce Informatica applicata alla Psicologia 43 Design interfacce Informatica applicata alla Psicologia 44 Il blu Evitare il blu per testi, linee sottili, forme piccole; il blu è un ottimo colore di sfondo Evitare di usare colori adiacenti che diffeeriscono solo per la presenza di blu Perche : esistono pochi recettori del blu Design interfacce Informatica applicata alla Psicologia 45 Design interfacce Informatica applicata alla Psicologia 46 Evitare il blu per testi, linee sottili, forme piccole; il blu è un ottimo colore di sfondo Evitare il blu per testi, linee sottili, forme piccole; il blu è un ottimo colore di sfondo Design interfacce Informatica applicata alla Psicologia 47 Design interfacce Informatica applicata alla Psicologia 48 8

9 Problemi di Daltonismo Non usare mai rosso e verde vicini Normalmente il giallo e il blu vengono riconosciuti bene Evitare colori che differiscono di una sola componente Usare colori brillanti Accostare i colori a uno sfondo appropriato: rosso e bianco verde e nero turchese e nero magenta e nero Le linee guida sono complesse, ma oggi esistono strumenti automatici per verificare come una immagine verrebbe vista da un daltonico Design interfacce Informatica applicata alla Psicologia 49 Pagina originale Design interfacce Informatica applicata alla Psicologia 50 Quanti colori usare Pagina elaborata da vischeck.com (deuteranopia) Usare pochi colori contemporaneamente (7 +/- 2) Perche : migliore associazione di significato Design interfacce Informatica applicata alla Psicologia 51 Design interfacce Informatica applicata alla Psicologia 52 Esempi Semantica dei colori Associare i colori ai vari significati in modo consistente Associazione: stesso colore per raggruppare oggetti simili Focus: colori brillanti e saturi per attirare l attenzione Design interfacce Informatica applicata alla Psicologia 53 Design interfacce Informatica applicata alla Psicologia 54 9

10 Colori caldi e freddi Codici familiari: esempio azione, urgenza, richiesta di risposta perche tendono ad avanzare Caldi ROSSO: stop, pericolo, caldo, fuoco GIALLO: attenzione, rallentamento VERDE: avanti, ok, sicurezza, vegetazione GRIGIO, BIANCO: neutralità Freddi tranquillità, informazioni di stato perche tendono a recedere Design interfacce Informatica applicata alla Psicologia 55 Design interfacce Informatica applicata alla Psicologia 56 La legge esponenziale della pratica Il tempo necessario per effettuare un compito diminuisce con la pratica. In particolare, il tempo T n per effettuare un compito all n-esima prova è dato da: T = T n 1 n -α dove α 0.4 [0.2 ~ 0.6] Design interfacce Informatica applicata alla Psicologia 57 Design interfacce Informatica applicata alla Psicologia 58 T (tempo di esecuzione) La legge esponenziale della pratica T n = T 1 n -α T 1 =10; α= Inizialmente si migliora molto rapidamente N (numero tentativi) prove) poi molto lentamente Design interfacce Informatica applicata alla Psicologia 59 La legge di Fitts Il tempo T necessario per muovere la mano su un bersaglio di dimensioni S a distanza D dipende dalla precisione relativa richiesta (rapporto D/S) Design interfacce Informatica applicata alla Psicologia 60 D T = a+b log 2 (D/S + 1) S 10

11 Esempio In molti casi il puntatore del mouse tende a restare nelle vicinanze della scrollbar I bottoni di uso più frequente dovrebbero quindi essere posti sulla destra dello schermo Design interfacce Informatica applicata alla Psicologia 61 Design interfacce Informatica applicata alla Psicologia 62 I menu migliori per la legge di Fitts 1. Pie 2. Pop-up 3. Tendina (nell ordine) Menu a tendina Design interfacce Informatica applicata alla Psicologia 63 MAC OS 8 Design interfacce Informatica applicata alla Psicologia 64 Pop-up menu Design interfacce Informatica applicata alla Psicologia 65 Design interfacce Informatica applicata alla Psicologia 66 11

12 Pie menu Pie menu nidificati Design interfacce Informatica applicata alla Psicologia 67 Design interfacce Informatica applicata alla Psicologia 68 STM: implicazioni sul design evitare di sovraccaricare la STM dell utente, richiedendogli di memorizzare solo elementi significativi o familiari, in numero limitato minimizzare comunque il ricorso alla STM dell utente, in presenza di attività di problem solving/decision making evitare situazioni di stress per l utente Tempo, cambiamento, movimento Tempi di attesa Cambiamenti di contesto Cambiamenti di scena Animazioni Design interfacce Informatica applicata alla Psicologia 69 Design interfacce Informatica applicata alla Psicologia 70 RISPOSTA Tempi di attesa Tempi di attesa L attesa può creare ansia: occorre fornire dei placebo t STIMOLO Design interfacce Informatica applicata alla Psicologia 71 Design interfacce Informatica applicata alla Psicologia 72 12

13 Devo aspettare fino alla fine? Interlacing Cambiamenti di contesto Quando assistiamo a un rapido passaggio da una situazione a un altra, siamo naturalmente portati a porre la nuova situazione in correlazione con la precedente Ciò richiede lavoro cognitivo che può essere complesso se le due situazioni sono molto diverse E quindi preferibile minimizzare i cambiamenti non necessari Design interfacce Informatica applicata alla Psicologia 73 Design interfacce Informatica applicata alla Psicologia 74 Principio del minimo cambiamento Minimizzare i cambiamenti (dell immagine sul video, del contesto, ) se essi non sono imposti dalla natura dell applicazione Esempio Elenco di parole che compaiono in dissolvenza dando una impressione di forte stabilità Design interfacce Informatica applicata alla Psicologia 75 Design interfacce Informatica applicata alla Psicologia 76 Esempio In questo caso la impressione di stabilità del contesto svanisce svanisce; la spettacolarità aumenta, e così il carico cognitivo e percettivo Tecniche utili Uso delle frames nelle pagine web Evidenziazione del contesto precedente Design interfacce Informatica applicata alla Psicologia 77 Design interfacce Informatica applicata alla Psicologia 78 13

14 STABILE Uso delle frames Frame 1 Frame 3 Frame 3 Design interfacce Informatica applicata alla Psicologia 79 Design interfacce Informatica applicata alla Psicologia 80 Design interfacce Informatica applicata alla Psicologia 81 Design interfacce Informatica applicata alla Psicologia 82 Design interfacce Informatica applicata alla Psicologia 83 Design interfacce Informatica applicata alla Psicologia 84 14

15 Evidenziazione del contesto Design interfacce Informatica applicata alla Psicologia 85 Design interfacce Informatica applicata alla Psicologia 86 Design interfacce Informatica applicata alla Psicologia 87 Design interfacce Informatica applicata alla Psicologia 88 Cambiamenti di scena - Principio della facile correlazione - Principio della scorrevolezza Principio della facile correlazione Nella transizione da una scena alla successiva, per l utente deve risultare facile porre le due scene nella correlazione corretta - la posizione degli oggetti nella scena - la posizione e l orientamento relativi degli oggetti - la direzione del movimento Design interfacce Informatica applicata alla Psicologia 89 Design interfacce Informatica applicata alla Psicologia 90 15

16 Principio della scorrevolezza Animazioni La transizione da una scena alla successiva deve risultare per quanto è possibile fluida, cioè senza salti Design interfacce Informatica applicata alla Psicologia 91 scritte lampeggianti: generano stress devono essere utilizzate solo per situazioni di allarme banner, oggetti animati scene animate: l utente deve sempre essere in grado di interromperle, facilmente e immediatamente Il loro scopo è quello di attirare l attenzione dell utente Vanno quindi usate per scopi precisi, sapendo quello che si fa Design interfacce Informatica applicata alla Psicologia 92 16