Elementi di comunicazione visiva nell'interazione uomo-macchina: le interfacce software dei personal computer Baravalle Andres Lanfranchi Vitaveska E' presente solo il sommario e un estratto del testo da noi preparato, in formato "solo testo" e senza immagini. Lo si puņ considerare una specie di demo non completo. La consultazione puņ essere un po' difficile, visto che non è stato pensato per essere diffuso come documento di testo (non è stato pensato neanche per essere diffuso). E' consigliabile scaricare il file in locale e consultarlo con un'applicazione come notepad. Per avere il testo integrale (in formato doc o rtf) potete contattarci via mail, agli indirizzi andres-b@geocities.com o flappi@geocities.com, e versare un obolo simbolico (a vostra discezione) nelle nostre magre casse. Sommario Introduzione 2 Introduzione alle interfacce software. Accenni di storia. 2 Categorizzazione delle interfacce 3 Psicologia Cognitiva 4 Analogia con la scrivania 5 Icone 8 Sistemi a finestre 11 Componenti di base di una finestra 12 I widgets 14 Tipi di widgets 15 Widgets di input 15 Menù 15 Tabbed windows: configurazione di un'applicazione 17 Atri esempi di tabbed windows 19 Salvataggio dati 21 Widgets di output: 22 Progress bar 22 Widgets di input/output 23 Finestre di dialogo 23 Color pickers 24 Assistente 25 Messaggi di errore 26 Lo stile dell'interfaccia 28 Il colore 28 Scelta dei colori 29 I colori nei background 30 Alcune regole pratiche per l'utilizzo dei colori 30 Esempio di codifica del colore. 31 I font 32 Interfaccia web 35 La struttura generale della pagina HTML 35 Portale 36 Commerciale 37 Informativo 40 Linee guida nella realizazione di un'interfaccia 42 Fonti 43 Bibliografia 43 Immagini 43 Psicologia Cognitiva Per analizzare le caratteristiche necessarie a una buona interfaccia è necessario tenere presenti i principi base della psicologia cognitiva, disciplina che si occupa di capire il comportamento umano e i processi mentali ad esso soggiacenti. Tutto ciņ che è recepito è informazione che la mente processa a diversi livelli. Questa teoria, detta dei livelli di processo, afferma che la percentuale in cui un nuovo materiale puņ essere ricordato dipende dalla quantità di significato che veicola. Infatti è la pofondità di analisi a determinare per quanto tempo venga ricordata la nuova informazione ma allo stesso tempo è il suo contenuto di significato a determinare a che livello viene processato. I fattori che contribuiscono alla Significatività di uno stimolo sono: · Familiarità: frequenza con cui lo stimolo occorre nella vita quotidiana · Imagery: capacità dello stimolo di elicitare un'immagine nella mente. · Il contesto in cui lo stimolo viene percepito E' inoltre utile ricordare le caratteristiche della memoria umana, divisa in: · Memoria sensoriale: tempo di permanenza di qualche decimo di secondo. Es. impulso visivo, tattile · Memoria di breve periodo: tempo di permanenza di qualche secondo; capacità limitata (7+/- 2 oggetti) · Memoria di lungo periodo: capacità quasi illimitata; è detta anche memoria permanente, anche se soggetta a decadimento, errori, interferenze. A ciascuno di questi livelli della memoria corrisponde uno sforzo crescente. Il design dell'interfaccia dovrebbe quindi essere realizzato in modo minimizzare il carico della memoria di breve termine. Il principio che riconoscere è più facile che ricordare ha contribuito in maniera decisiva al passaggio da un'interfaccia a comandi a un'intefaccia grafica. Questo passaggio è perņ stato reso possibile dall'introduzione di metafore e icone. Il disegno dell'interfaccia deve infatti tener conto delle limitazuioni dell'utente. Perché un'interfaccia sia facile da utilizzare e da comprendere deve innanzitutto essre facilemnte percepibile, senza creare problemi di ambiguità o difficoltà. La teoria costruttivista della percezione afferma che la nostra capacità di percepire gli oggetti sullo schermo è il frutto della nostra esperienza precedente e delle aspettative che nutriamo in relazione al riempimento di u detrminato campo. Idealmente è quindi preferibile presentare sullo schermo immagini con caratteristiche simili a quelle degli oggetti naturali. Alcuni principi base per la creazione di una buona interfaccia, basati sulle teorie della percezione, sono: · Non presentare contemporaneamente troppa informazione né troppo poca · Non scrivere troppo piccolo · Raggruppare e ordinare i dati e gli oggetti in modo significativo (ad esempio in base alla somiglianza o utilizzando un colore simile per oggetti simili) · Utilizzare colori e contrasti · Utilizzare indizi spaziali (ad esempio posizionare certe informazioni sempre nello stesso posto o utilizzare spazi tra le informazioni) · Utilizzare indizi temporali che consentano all'utente di tenere sotto controllo i tempi dellle operazioni (ad esempio progress basr o indicatori quali la clessidra) Analogia con la scrivania I sistemi operativi e le interfacce grafiche forniscono all'utente un ambiente in cui si possono eseguire delle operazioni basandosi principalmente sulla selezione invece che sull'inserimento di comandi. La maggior parte di questi sistemi operativi hanno una qualche analogia, molto spinta che negli ultimi sviluppi, con la scrivania. L'obiettivo, finalizzato ad attivare un trasferimento positivo di conoscenza, è riproporre un modello di interazione con cui l'utente sia familiare, tramite la realizzazione di controparti elettroniche degli oggetti fisici solitamente presenti in un ufficio. Lo schermo assume quindi la fisionomia di una scrivania in cui sono posizionati tutti i possibili oggetti utili all'utente; si ha ad esempio la cartella dei documenti, lo schedario in cui vengono archiviate, il cestino per buttare i documenti non più utilizzati o sbagliati. Questa analogia è particolarmente efficace in quanto combina il contesto familiare con il contesto del nuovo sistema in un unico modello facilmente apprendibile e semplice. A questo proposito è utile ricordare la definizione di semplicità data da Arnheim: "la semplicità puņ essere definita come l'esperienza e il giudizio soggettivo di un osservatore che non trova difficoltà a capire ciņ che gli viene presentato". Il limite principale è che l'analogia non si puņ spingere oltre un certo livello, in particolare per l'impostazione 2d delle interfacce grafiche e per l'imposizione di impostazioni standard (spesso ridondanti) in tutti i computer. Non avendo mai visto una scrivania in cui: · se metto un oggetto sopra un altro, non so cosa possa succedere, ma molto probabilmente niente di buono · non tutti gli oggetti si possono spostare · postando un oggetto con un tasto del mouse succede qualcosa di diverso che spostandolo con l'altro · se io butto un oggetto (per es. un software) nel cestino, molto probabilmente questo non viene rimosso interamente La proposizione di una metafora rischia di confondere le idee ad un utente inesperto, piuttosto che non la semplice constatazione di una qualche forma di analogia. La figura 2 rappresenta un esempio classico di desktop in un sistema windows 98. I sistemi windows 95 hanno un'interfaccia del tutto analoga, e normalmente vengono defininti globalmente windows 9.x o più semplicemente win 9x. Una serie di icone sono presenti, e permettono di accedere velocemente alle risorse del computer (il file manager), a quelle di rete e ai programmi maggiormente utilizzati. Sul desktop si possono anche posizionare ritagli di documenti di applicazioni di Microsoft Office (non di altri). Il campo è delimitato solo dai bordi dello schermo, e la determinazione dei ragruppamenti è lasciata alla libertà dell'utente, che sceglie in base alle proprie esigenze. Le icone predefinite del sistema operativo non si possono rimuovere senza agire, più o meno direttamente, sul registro di configurazione del sistema. Il desktop puņ essere customizzato con qualunque immagine nei formati più diffusi (bmp, gif, jpg) o con una pagina html. Allo stesso modo il file manager. (figura 3). Icone In questi "sistemi" l'interazione è fortemente veicolata dal risconoscimento e dalla selezione di icone, un metodo di lavoro che minimizza lo sforzo della memoria e la possibilità di errori. Una icona è una rappresentazione pittorica di un oggetto o di una scelta di selezione. Le icone possono rappresentare oggetti sui quali gli utenti desiderano lavorare o azioni che gli utenti possono realizzare. Le icone, a seconda modo in cui sono rappresentati i concetti soggiacenti, possono essere divise in: · Rassomiglianti: si riferiscono all'oggetto reale tramite un'immagine analoga Es. l'icona della stampante · Esemplari: sono l'esempio tipico del concetto che si vuole rappresentare. Es. l'icona di un programa di posta elettronica · Simboliche: usate per rappresentare un concetto soggiacente a un livello di astrazione più alto dell'immagine stessa Es. l'icona di Acdsee, un programma di visualizzazione immagini. Arbitrarie: non esiate una relazione, se non culturale, tra l'immagine e il concetto rappresentato. Es. l'icona di Microsoft Word 97, che riproduce il logo del programma. Gli oggetti concreti sono maggiormente rappresentabili in quanto si basano su una comprensione intuitiva del loro significato. L'utilizzo delle icone porta con se un problema di contesto. La stessa icona infatti puņ assumere significati diversi in ambiente diversi ( soprattutto per simboli utilizzati nella realtà quotidiana prima dell'avvento del calcolatore) oppure veicolare un significato noto per alcune culture ma sconosciuto per altre. Es. cassetta della posta, diffusa nell'America rurale ma che non esiste in Italia, rappresentata nell'icona di Eudora, un programma di posta elettronica. Le icone per esssere efficaci devono quindi essere: · Rappresentative-descrittive · Visibili · Riconoscibili · Non ambigue Molti comandi del calcolatore sono rappresentati mediante icone arbitrarie: questa è una scelta obbligata in quanto non esiste una rappresentazione visiva di quelle operazioni astratte. Es. l'icona rappresentante l'eseguibile standard. Oggi si unisce all'icona la descrizione del comando corrispondente in sovraimpressione: la combinazione di questi due codici riduce l'ambiguità. Questo artificio (detto Tool tip) è utile soprattutto nel caso in cui il contesto sia vago e i concetti soggiacenti astratti. Un altro esempio è Photoshop (o comunque le barre degli strumenti dei principali programmi) in cui, passando con il mouse sopra le icone degli strumenti viene visualizzato il comando e, nella barra di stato, ulteriori opzioni o aiuti. Un'alternativa, molto usata nel web, è l'utilizzo della sola barra di stato. Le icone animate sono utilizzate sporadicamente perché, a causa dele limitazione di risoluzione e dimensioni, rischiano di confondere più che aiutare l'utente. Le icone animate possono essere considerate un'evoluzione delle icone, presenti ad esempio in Word, costruite mediante rappresentazioni di oggetti concreti e frecce ad indicare il movimento. Esistono tre principali modi per utilizzare le icone nel software: · Icone associate alle applicazioni: appaiono sul desktop e nei file manager; selezionandole lanciano l'applicazione associa. Esempi possono essere le icone di Word e Acdsee. · Icone associate ai bottoni: sono semplici disegni sui bottoni, usualmente raggruppati insieme su una toolbar; selezionando uno di questi bottoni viene invocata una azione dell'applicazione, come ad esempio il salvataggio del file in uso. · Icone associate ai messaggi: sono simboli, usati nei messaggi, che comunicano messaggi importanti ed a carattere generale, ad esempio informazione o pericolo. Un'altra metafora usata nelle più comuni interfacce grafiche sono le stanze per rappresentare gli ambienti di navigazione, soprattutto nei sistemi ipermediali. Le interfacce grafiche si basano soprattutto su sistemi di manipolazione diretta, ossia la possibilità di manipolare il mondo virtuale così come quello reale, avendo un feedback immediato delle proprie azioni. Alcuni esempi sono: · Cancellazione tramite cestino. · Programmi di grafica in cui si utilizzano fogli di carta bianchi che vengono poi "disegnati" e colorati dall'utente. · Drag&drop I meccanismi di manipolazione dirretta veicolano perņ alcuni problemi di selezione (problemi derivanti dal trascinamento sbagliato di un'icona, risolvibili mediante meccanismi di conferma o di undo) e di tolleranza (quando gli oggetti sullo schermo sono troppo vicini, risolvibili mediante l'uso dello zoom).