Grafica ed interfacce per la comunicazione Scienze della Comunicazione

Transcript

1 Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 19- Linee Guida Lucidi tradotti e adattati da materiale presente su e

2 Scopo di questa lezione Discutere, con esempi, le indicazioni che possono essere fornite al progettista per guidarlo nella progettazione di sistemi usabili. Grafica ed interfacce per la comunicazione A.A. 2013/14 2

3 bassa alta Indicazioni per il design: tipologia generalità Principi Standard Linee guida Regole di progetto bassa alta coercitività Grafica ed interfacce per la comunicazione A.A. 2013/14 3

4 Terminologia Principi o Principi generali per la progettazione di interfacce utente usabili, basati su evidenza scientifica o sul generale consenso. Derivano dalla conoscenza degli aspetti psicologici, computazionali e sociali e sono indipendenti dalla tecnologia. Sono espressi spesso in forma molto generale. Linee guida o Insieme di raccomandazioni per il progetto dell interfaccia utente per una particolare classe di sistemi, espresse in modo generale ma meno astratte degli standard, con esempi e motivazioni. Non sono vincolanti, sta al progettista decidere sulla opportunità di applicarle caso per caso Standards o Insieme di regole da applicare nel progetto di una classe di sistemi. Sono vincolanti: i progettisti devono applicarli. Sono di norma emesse da un Ente di standardizzazione. La conformità allo standard deve essere valutabile in modo preciso. Regole di progetto o Insieme di regole da applicare nel progetto di un particolare sistema. Sono vincolanti Grafica ed interfacce per la comunicazione A.A. 2013/14 4

5 Indicazioni per il design: autorevolezza 4 livelli: A: Completamente supportate da risultati di ricerca e dati empirici B: Basate su pratica generalmente accettata (in modo documentato) C: Non ben documentate, ma supportate dall opinione di professionisti D: Opinione individuale Standard: solo livelli A e B Grafica ed interfacce per la comunicazione A.A. 2013/14 5

6 bassa alta Indicazioni per il design: tipologia generalità Principi Standard Linee guida Design patterns bassa Regole di progetto alta coercitività Grafica ed interfacce per la comunicazione A.A. 2013/14 6

7 Gli standard per la usabilità Situazione complessa: gli standard sono in continua evoluzione ( Il processo è molto lento, e passa attraverso diverse fasi Ci sono standard di prodotto e standard di processo Grafica ed interfacce per la comunicazione A.A. 2013/14 7

8 ISO 9241: Ergonomics of human System interaction E uno standard composto dalle seguenti serie, ciascuna delle quali composta da diversi documenti), in diverso stadio di evoluzione (attualmente, una ventina di documenti) appartenenti alle seguenti serie: 100 series: Software ergonomics 200 series: Human system interaction processes 300 series: Displays and display related hardware 400 series: Physical input devices ergonomics principles 500 series: Workplace ergonomics 600 series: Environment ergonomics 700 series: Application domains - Control rooms 900 series: Tactile and haptic interactions Grafica ed interfacce per la comunicazione A.A. 2013/14 8

9 bassa alta Indicazioni per il design: tipologia generalità Principi Standard Linee guida Design patterns Regole di progetto bassa alta coercitività Grafica ed interfacce per la comunicazione A.A. 2013/14 9

10 User Interface Design Guidelines Android: ml ios: /userexperience/conceptual/mobilehig/index.htm Grafica ed interfacce per la comunicazione A.A. 2013/14 10

11 7 giornata Inter-Lazio Milan-Atalanta Juventus-Parma Bari-lecce Udinese-Roma Indietro Ok Grafica ed interfacce per la comunicazione A.A. 2013/14 11

12 Design patterns Un design pattern è una soluzione generale a un problema di progettazione che si ripropone in molte situazioni, anche diverse Non una soluzione finita, ma piuttosto un modello, un template da adattare alla specifica situazione Il concetto è nato in architettura alla fine degli anni 70 (Christopher Alexander), e applicato all ingegneria del software dalla fine degli anni 80 Grafica ed interfacce per la comunicazione A.A. 2013/14 12

13 Design pattern in architettura Colloca la scala principale in una posizione chiave, centrale e visibile. Tratta l intera scala come una stanza (o, se all esterno, come un cortile). Disponila in modo che la scala e la stanza siano una cosa sola, con la scala che scende attorno a una o due pareti della stanza. Allarga il fondo della scala con finestre aperte o balaustre, e con ampi gradini, in modo che le persone che scendono lungo la scala diventino parte dell azione della stanza mentre sono ancora sulla scala, e che le persone in basso usino naturalmente i gradini per sedersi. Grafica ed interfacce per la comunicazione A.A. 2013/14 13

14 I pattern di interazione uomo macchina: esempio Design pattern per le funzioni di ricerca in un sito web (van Welie) Advanced search Autocomplete FAQ Help Wizard Search Box Search Area Search Results Search Tips Site Index Site Map Footer Sitemap Tag Cloud Topic Pages 14 Grafica ed interfacce per la comunicazione A.A. 2013/14 14

15 Design pattern: vantaggi Raccolgono lo stato della pratica Suggeriscono soluzioni ai progettisti Formazione di un linguaggio comune Diffondono gli «standard di fatto» Evitano di «reinventare la ruota» 15 Grafica ed interfacce per la comunicazione A.A. 2013/14 15

16 bassa alta Indicazioni per il design: tipologia generalità principi standard Linee guida Design patterns bassa Regole di progetto alta coercitività 16 Grafica ed interfacce per la comunicazione A.A. 2013/14 16

17 Principi I «principi morali» sono principi che guidano il «buon» comportamento umano Nella progettazione dei sistemi, possiamo ricercare quei «principi morali» che dovrebbero guidarci, in particolare quando dobbiamo scegliere fra soluzioni alternative Sono tanto più validi quanto più la pratica mostri che derogare da questi principi genera, prima o poi, delle difficoltà 17 Grafica ed interfacce per la comunicazione A.A. 2013/14 17

18 Le euristiche di Nielsen 1. Visibilità dello stato del sistema 2. Corrispondenza fra il mondo reale e il sistema 3. Libertà e controllo da parte degli utenti 4. Consistenza e standard 5. Prevenzione degli errori 6. Riconoscere piuttosto che ricordare 7. Flessibilità ed efficienza d uso 8. Design minimalista ed estetico 9. Aiutare gli utenti a riconoscere gli errori, diagnosticarli e correggerli 10. Guida e documentazione (Vedi J.Nielsen, How to conduct a Heuristi Evaluation, in tml ) Grafica ed interfacce per la comunicazione A.A. 2013/14 18

19 ISO : Dialogue principles Enuncia 7 principi del dialogo uomo macchina: 1.Adeguatezza al compito 2.Autodescrizione 3.Conformità alle aspettative dell utente 4.Adeguatezza all apprendimento 5.Controllabilità 6.Tolleranza verso gli errori 7.Adeguatezza alla individualizzazione 19 Grafica ed interfacce per la comunicazione A.A. 2013/14 19

20 I 7 principi del dialogo secondo la ISO : Adeguatezza al compito 2. Autodescrizione 3. Conformità alle aspettative dell utente 4. Adeguatezza all apprendimento 5. Controllabilità 6. Tolleranza verso gli errori 7. Adeguatezza alla individualizzazione La funzionalità del sistema e il dialogo sono basati sulle caratteristiche del compito, piuttosto che sulla tecnologia scelta per effettuarlo 20 Grafica ed interfacce per la comunicazione A.A. 2013/14 20

21 Adeguatezza al compito: esempio 21 Grafica ed interfacce per la comunicazione A.A. 2013/14 21

22 Adeguatezza al compito, in pratica Nel progetto vien applicato in pratica questo principio nell attenzione «spasmodica» alla individuazione dei casi d uso, e alla definizione del diagramma dei casi d uso, a livello del documento dei requisiti, per orientare la progettazione; inoltre la definizione di scenari d uso tipici ci ha aiutato a perfezionare l analisi 22 Grafica ed interfacce per la comunicazione A.A. 2013/14 22

23 Adeguatezza al compito: aspetti Fasi dell interazione adeguate al compito Informazioni e formati adeguati al compito Dispositivi di I/O adeguati al compito Tecniche di interazione adeguate al compito Default tipici Ma. Dialogo essenziale (no ridondanze non necessarie per il compito) 23 Grafica ed interfacce per la comunicazione A.A. 2013/14 23

24 Dialogo essenziale Analizzare accuratamente le ridondanze: servono? a che cosa servono? a chi servono? ci sono degli svantaggi nella loro eliminazione? 24 Grafica ed interfacce per la comunicazione A.A. 2013/14 24

25 Dialogo essenziale 25 Grafica ed interfacce per la comunicazione A.A. 2013/14 25

26 I 7 principi del dialogo secondo la ISO : Adeguatezza al compito 2. Autodescrizione 3. Conformità alle aspettative dell utente 4. Adeguatezza all apprendimento 5. Controllabilità 6. Tolleranza verso gli errori 7. Adeguatezza alla individualizzazione Agli utenti risulta evidente, in ogni momento, in che dialogo si trovano, a che punto si trovano all interno del dialogo, quali azioni possono compiere e come queste possono essere effettuate Grafica ed interfacce per la comunicazione A.A. 2013/14 26

27 Autodescrizione, in pratica In un progetto si applica in pratica questo principio.. nell attenzione spasmodica alla comunicazione del contesto corrente, nel primo prototipo cliccabile a bassa fedeltà (POP): tipicamente, i titoli delle varie schermate Grafica ed interfacce per la comunicazione A.A. 2013/14 27

28 Autodescrizione: aspetti Indicazione di che cosa l utente può fare Visibilità del contesto corrente Visibilità dello stato del sistema Descrizione dell input atteso e del suo formato Feedback evidente Ma. Manualistica ridotta al minimo, meglio se sostituita da un help online Grafica ed interfacce per la comunicazione A.A. 2013/14 28

29 Esempio: guida all utente 29 Grafica ed interfacce per la comunicazione A.A. 2013/14 29

30 Guida all utente: che cosa non fare Pagina web con menu le cui scritte appaiono come roll-over: da evitare! Grafica ed interfacce per la comunicazione A.A. 2013/14 30

31 Grafica ed interfacce per la comunicazione A.A. 2013/14 31

32 Grafica ed interfacce per la comunicazione A.A. 2013/14 32

33 I 7 principi del dialogo secondo la ISO : Adeguatezza al compito 2. Autodescrizione Il dialogo corrisponde alle necessità dell utente, 3. Conformità alle aspettative dell utente prevedibili in base al contesto e a convenzioni 4. Adeguatezza all apprendimento comunemente accettate 5. Controllabilità 6. Tolleranza verso gli errori 7. Adeguatezza alla individualizzazione Grafica ed interfacce per la comunicazione A.A. 2013/14 33

34 Conformità alle aspettative, in pratica Nel progetto si applica in pratica questo principio nell esaminare attentamente termini e frasi utilizzate nell usare lo stesso modello di interazione in tutte le fasi dell applicazione (coerenza) nel seguire le linee guida del particolare device utilizzato nell usare font, forme grafiche e colori in modo coerente in tutta l applicazione Grafica ed interfacce per la comunicazione A.A. 2013/14 34

35 Conformità alle aspettative, in pratica La dicitura «conformità alle aspettative dell utente» è molto generale, e comprende numerosi aspetti particolari, inclusa la «coerenza» fra i vari aspetti dell interazione L aderenza a questo principio di progettazione va analizzata molto, molto accuratamente Grafica ed interfacce per la comunicazione A.A. 2013/14 35

36 Conformità alle aspettative: aspetti Linguaggio familiare Aderenza alle convenzioni Organizzazione abituale Dialogo consistente Tempi di risposta conformi alle aspettative Feedback conforme alle aspettative Messaggi adeguati al contesto Output in posizione appropriata Input in posizione attesa Stile dei messaggi coerente Grafica ed interfacce per la comunicazione A.A. 2013/14 36

37 Coerenza con modalità di interazione diffuse Grafica ed interfacce per la comunicazione A.A. 2013/14 37

38 Aderenza alle convenzioni Grafica ed interfacce per la comunicazione A.A. 2013/14 38

39 Es. di incoerenza: menu che si trasformano Grafica ed interfacce per la comunicazione A.A. 2013/14 39

40 PowerPoint Word Excel 2007 Grafica ed interfacce per la comunicazione A.A. 2013/14 40

41 Tempi di risposta conformi alle aspettative Grafica ed interfacce per la comunicazione A.A. 2013/14 41

42 Messaggi in posizione appropriata Grafica ed interfacce per la comunicazione A.A. 2013/14 42

43 Grafica ed interfacce per la comunicazione A.A. 2013/14 43

44 Input in posizione attesa Da Word 2007 Grafica ed interfacce per la comunicazione A.A. 2013/14 44

45 I 7 principi del dialogo secondo la ISO : Adeguatezza al compito 2. Autodescrizione 3. Conformità alle aspettative dell utente 4. Adeguatezza all apprendimento 5. Controllabilità 6. Tolleranza verso gli errori 7. Adeguatezza alla individualizzazione Il dialogo supporta e guida l utente nell apprendimento del sistema Grafica ed interfacce per la comunicazione A.A. 2013/14 45

46 L evoluzione dell utente Novizio Principiante Competente Esperto Grafica ed interfacce per la comunicazione A.A. 2013/14 46

47 Bassa soglia di apprendimento Grafica ed interfacce per la comunicazione A.A. 2013/14 47

48 Adeguatezza all apprendimento: aspetti Aiuto alla familiarizzazione Bassa soglia di apprendimento Feedback intermedi Sperimentazione sicura Modello concettuale evidente Riapprendimento facilitato Grafica ed interfacce per la comunicazione A.A. 2013/14 48

49 Aiuto alla familiarizzazione Grafica ed interfacce per la comunicazione A.A. 2013/14 49

50 Aiuto alla familiarizzazione Grafica ed interfacce per la comunicazione A.A. 2013/14 50

51 Grafica ed interfacce per la comunicazione A.A. 2013/14 51

52 A C Da PowerPoint 2007 B Grafica ed interfacce per la comunicazione A.A. 2013/14 52

53 Feedback intermedi: esempio Grafica ed interfacce per la comunicazione A.A. 2013/14 53

54 Aiuto online: tipi di help 1. Che cosa è e a che cosa serve questo? 2. Dove si trova questo comando? 3. Spiegami questo argomento? 4. Come faccio per ottenere questo risultato? Grafica ed interfacce per la comunicazione A.A. 2013/14 54

55 Esempio Da PowerPoint 2007 Grafica ed interfacce per la comunicazione A.A. 2013/14 55

56 Modello concettuale evidente Grafica ed interfacce per la comunicazione A.A. 2013/14 56

57 I 7 principi del dialogo secondo la ISO : Adeguatezza al compito 2. Autodescrizione 3. Conformità alle aspettative dell utente 4. Adeguatezza all apprendimento 5. Controllabilità 6. Tolleranza verso gli errori 7. Adeguatezza alla individualizzazione L utente è in grado di iniziare e tenere sotto controllare la direzione e i tempi dell interazione fino al raggiungimento dell obbiettivo Grafica ed interfacce per la comunicazione A.A. 2013/14 57

58 Controllabilità, in pratica Nel progetto dobbiamo applicare in pratica questo principio nell attenzione spasmodica alla fluidità della navigazione (comando back sempre presente, pagina home come porto sicuro ) eliminando fasi del dialogo che si possono svolgere una sola volta, all inizio (!) eliminando Q&A controllate dal sistema Grafica ed interfacce per la comunicazione A.A. 2013/14 58

59 Q&A controllate dal sistema: esempio (1) Patient s name: (first-last) **FRED SMITH (2) Sex: **MALE (3) Age: **55 (4) Have you been able to obtain positive cultures from a site at which Fred Smith has an infection? **YES (5) What is the infection? **PRIMARY-BACTEREMIA (6) Please give the date and approximate time when signs of symptoms first appeared (Mycin) Grafica ed interfacce per la comunicazione A.A. 2013/14 59

60 Controllabilità: aspetti Tempi dell interazione controllati dall utente Proseguimento del dialogo controllato dall utente Punto di ripartenza controllato dall utente Disponibilità di undo Disponibilità dei dati originali Modalità di visualizzazione dei dati controllata dall utente Dispositivo d interazione controllato dall utente Personalizzazione dei valori di default Grafica ed interfacce per la comunicazione A.A. 2013/14 60

61 Punto di ripartenza controllato dall utente Grafica ed interfacce per la comunicazione A.A. 2013/14 61

62 I 7 principi del dialogo secondo la ISO : Adeguatezza al compito 2. Autodescrizione 3. Conformità alle aspettative dell utente 4. Adeguatezza all apprendimento 5. Controllabilità 6. Tolleranza verso gli errori 7. Adeguatezza alla individualizzazione Nonostante evidenti errori negli input, i risultati desiderati possono essere ottenuti senza o con minime azioni correttive Grafica ed interfacce per la comunicazione A.A. 2013/14 62

63 Tolleranza verso gli errori: aspetti Aiuto all utente Prevenzione di azioni non lecite Spiegazione dell errore Recupero dell errore Correzioni automatiche Possibilità di correzione differita Spiegazioni aggiuntive Verifica e convalida dei dati Minimo sforzo di correzione Richieste di conferma Grafica ed interfacce per la comunicazione A.A. 2013/14 63

64 I 7 principi del dialogo secondo la ISO : Adeguatezza al compito L'utente può modificare l interazione e la 2. Autodescrizione presentazione 3. Conformità alle aspettative dell informazione per dell utente adattarle alle proprie 4. Adeguatezza all apprendimento necessità e capacità 5. Controllabilità individuali 6. Tolleranza verso gli errori 7. Adeguatezza alla individualizzazione Grafica ed interfacce per la comunicazione A.A. 2013/14 64

65 Adeguatezza alla individualizzazione: aspetti Adattamento al profilo dell utente Scelta di rappresentazioni alternative Scelta del livello delle spiegazioni Vocabolario personalizzabile Personalizzazione dei tempi di risposta Scelta del metodo di interazione Personalizzazione del dialogo Ripristinabilità dei valori precedenti Grafica ed interfacce per la comunicazione A.A. 2013/14 65

66 Scelta di rappresentazioni alternative MacOS Finder Grafica ed interfacce per la comunicazione A.A. 2013/14 66

67 Scelta di rappresentazioni alternative MacOS Finder 10.6 Grafica ed interfacce per la comunicazione A.A. 2013/14 67

68 Vocabolario personalizzabile Ning, 2009 Grafica ed interfacce per la comunicazione A.A. 2013/14 68

69 Scelta del metodo d interazione Grafica ed interfacce per la comunicazione A.A. 2013/14 69

70 Microsoft Word 2008 per Mac Grafica ed interfacce per la comunicazione A.A. 2013/14 70

71 Personalizzazione dei tempi di risposta MacOS Finder 10.6 Grafica ed interfacce per la comunicazione A.A. 2013/14 71

72 Personalizzazione del dialogo Microsoft Word 2008 per Mac Grafica ed interfacce per la comunicazione A.A. 2013/14 72

73 Un modello di qualità Adeguatezza alla individualizzazione Adeguatezza al compito 4 3,5 3 2,5 2 1,5 1 0,5 0 Auto-descrizione Tolleranza verso gli errori Conformità alle aspettative dell utente Controllabilità Adeguatezza all apprendimento Grafica ed interfacce per la comunicazione A.A. 2013/14 73

74 Confronto Grafica ed interfacce per la comunicazione A.A. 2013/14 74