Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si...

38
l’interfaccia tra uomo e computer

Transcript of Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si...

Page 1: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

l’interfaccia tra uomo e computer

Page 2: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-2

Il desktop

• L’immagine visualizzata sul monitor quando si accende il PC – è colorata o dotata di sfondo

– l’informazione è visualizzata lungo i bordi esterni del desktop, sotto forma di icone

– ci sono tre tipi base di icone:• applicazioni (programmi)

• cartelle (directory)

• file (documenti)

Page 3: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-3

Il desktop (cont.)

• Il "desktop" è una metafora• lavorare al PC è come stare a una scrivania

– si possono archiviare lavori

– organizzare gli archivi in raccoglitori

– usare applicazioni (un programma o la calcolatrice)

Page 4: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-4

Ascoltare la musica

• Esempio di metafora per l’interfaccia utente

– il software che riproduce i CD sul computer sfrutta un’interfaccia grafica (GUI)

– la GUI somiglia a un comune lettore musicale

• i pulsanti somigliano a quelli di un comune lettore CD

• l’utente può applicare alla GUI la conoscenza del lettore CD fisico senza istruzioni ulteriori perché la metafora gli è familiare

Page 5: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-5

Page 6: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-6

Interfacce coerenti

• Quando vediamo un’icona o una metafora che conosciamo, sappiamo come funziona

• Metafore standard sono presenti in tutte le GUI

Page 7: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-7

Pulsanti

• Possono avere una varietà di forme, come un rettangolo in 3D o un cerchio: la loro funzione è illustrata da un’icona o un breve testo

• Noi clicchiamo il mouse per "premere" il pulsante; così il comando è invocato– si dice al software di eseguire l’operazione

• Riceviamo un feedback che conferma che il pulsante è stato premuto – cambiano il colore, l’ombra; il pulsante viene

evidenziato e/o si sente un click

Page 8: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-8

Controlli a scorrimento

• Serve a impostare un valore all’interno di un intervallo "continuo", ad es. il volume del sonoro

• Per muovere lo slider si deve porre il puntatore del mouse su di esso e trascinare nella direzione desiderata– le barre di scorrimento delle finestre sono

un tipo comune di slider

Page 9: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-9

Page 10: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-10

Puntatori triangolari

• Indicano la presenza di informazioni nascoste o di una modalità alternativa di visualizzazione

• Per accedervi basta cliccarci sopra

• Gli utenti esperti riconoscono le metafore familiari e ne imparano sempre di nuove

Page 11: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-11

Anatomia di un’interfaccia

• Menu

– lista di operazioni che il software può eseguire

– operazioni simili sono raggruppate

– prendono la forma di una barra dei menu

– tutte le operazioni che un programma può eseguire sono elencate nei menu

Page 12: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-12

Page 13: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-13

Funzionamento dei menu

• I menu che si aprono “scendendo giù” dalla barra si chiamano menu a tendina

• Quando si clicca il pulsante destro del mouse sono visualizzati i cosiddetti menu pop-up

• Con un click del mouse si apre il menu, che rivela un elenco di operazioni

• Scorrendo il mouse lungo la lista, il comando prescelto viene evidenziato

• Cliccare o rilasciare il pulsante sul comando evidenziato fa sì che il computer esegua l’operazione

Page 14: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-14

Leggere un menu

• I menu forniscono informazioni circa:

– la lista delle operazioni

– quali operazioni sono disponibili

– quando è necessario fornire informazioni aggiuntive

– scorciatoie da tastiera

Page 15: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-15

Quali operazioni sono disponibili?

• I menu dell’interfaccia grafica sono ricreati ex novo ogni volta che vengono aperti

• Specificano quali operazioni sono disponibili – ad es., il comando Copia non è disponibile se

non è stato selezionato niente da copiare

• Le operazioni non disponibili non cambiano colore quando il mouse ci passa sopra e non possono essere selezionate

Page 16: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-16

Serve altro input?

• Le operazioni che richiedono più informazioni da parte dell’utente sono marcate da un triangolo che punta a destra

• Quando si seleziona una di queste opzioni compare un secondo menu con le scelte disponibili

• Il programma continua a chiedere informazioni aggiuntive finché non ne ha a sufficienza; a questo punto esegue l’operazione prescelta e chiude i menu e le finestre

Page 17: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-17

C’è una scorciatoia?

• Le operazioni dei menu possono avere una scorciatoia da tastiera

– la scorciatoia è riportata accanto all’elemento nel menu

– consiste nella combinazione di un carattere speciale e una lettera

• per Mac: il carattere speciale è Command (quadrifoglio)

• per Windows: il carattere speciale è Control (CTRL)

– le scorciatoie sono in generale utili per chi utilizza intensamente alcune applicazioni

Page 18: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-18

Page 19: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-19

Funzionalità standard dell’interfaccia

• Le operazioni che sono presenti in tutti i programmi sono necessarie al processo di ogni tipo di informazione– salva

– apri

– stampa

• Le operazioni standard sono generalmente raggruppate in due menu chiamati File e Modifica

Page 20: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-20

Operazioni sui file

• In generale sono applicate a intere istanze dell’informazione

– Word Processor: l’istanza è un documento– MP3 Player: l’istanza è una canzone

– Photo Editor: l’istanza è una fotografia

Page 21: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-21

Operazioni sui file (cont.)

• Nuovo: crea una nuova istanza vuota

• Apri: localizza un file sul disco e lo apre

• Chiudi: termina l’elaborazione dell’istanza corrente dell’informazione e chiude la finestra, ma tiene il programma aperto per elaborare altre istanze

• Salva: scrive l’istanza corrente sul disco, usando lo stesso nome e la

stessa posizione

• Salva come: scrive l’istanza corrente sul disco con un nuovo nome e/o

una posizione differente

Page 22: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-22

Operazioni sui file (cont.)

• Imposta pagina: specifica il formato deldocumento stampato

su carta

• Stampa: stampa una copia dell’informazione

corrente

• Anteprima di stampa: mostra l’informazione con l’esatto aspetto che avrà

una volta stampata

• Esci o Quit: termina l’applicazione

Page 23: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-23

Nuove istanze

• Il comando Nuovo crea un’istanza "vuota"

• Cos’è un’“informazione vuota”?– l’informazione è suddivisa in tipi basati su

caratteristiche • le fotografie digitali sono un tipo di informazione; la

lunghezza e la larghezza sono due delle sue proprietà

• i documenti di testo sono un altro tipo di informazione; la lunghezza del documento in caratteri è una proprietà

– Un’istanza vuota è una struttura vuota, senza alcuna caratteristica

Page 24: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-24

Operazioni di editing o modifica

• Permettono di operare cambiamenti all’interno di un’istanza

• Spesso richiedono di operare una selezione o posizionare il cursore in un punto preciso

• Sono eseguite in una sequenza prestabilita:

– Selezione, Taglia/Copia, Posizionamento, Incolla, Verifica

Page 25: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-25

Operazioni di editing o modifica (cont.)

• Undo: annulla la modifica più recente, ripristinando la forma

precedente dell’istanza.

• Redo: annulla l’Undo; ovvero applica nuovamente la modifica

più recente.

• Copia: copia l’informazione selezionata in un’area di memoria temporanea,

pronta per essere incollata, ma senza rimuoverla dalla posizione corrente.

Page 26: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-26

Operazioni di editing o modifica (cont.)

• Taglia: rimuove l’informazione selezionata e la registra in un’area di memoria temporanea, pronta per essere incollata.

• Incolla: inserisce nell’istanza l’informazione precedentemente salvata nella memoria temporanea per mezzo di Taglia o Incolla; tipicamente l’informazione viene inserita in

corrispondenza della posizione corrente del cursore.

• Seleziona tutto: seleziona l’intera istanza.

Page 27: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-27

Sfruttare il feedback del programma

• Si chiama feedback qualsiasi indicazione circa il lavoro appena svolto o in fase di svolgimento da parte di un computer– nel caso di una modifica, la prova è

rappresentata dalla modifica stessa – quando cliccate su un pulsante, il

software lo indica con una sottolineatura, ombreggiatura, coloratura in grigio, altri cambiamenti di colore o effetti sonori

Page 28: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-28

Sfruttare il feedback del programma (cont.)

• La forma più comune di feedback: l’indicazione che il computer sta ancora eseguendo una lunga operazione

– il cursore è sostituito da un’icona a clessidra (Windows) o un disco colorato rotante (Mac)

Page 29: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-29

Come imparare ad utilizzare un’interfaccia uomo/macchina

• Esplorare i dispositivi virtuali dell’ interfaccia

• Provare a svolgere un’attività prefissata

• Osservare e chiedere agli altri

• Leggere i manuali (stampati o on-line)

Page 30: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-30

Applicazioni simili hanno caratteristiche simili

• Tutte le applicazioni nell’elaborazione di testi:– usano un cursore per marcare il punto di

inserimento dei caratteri

– includono le operazioni per digitare parole, cancellarle, selezionarle, copiarle, cercarle, sostituirle, ecc.

– queste operazioni funzionano tutte in modo simile

• ad es., il tasto di backspace cancella il carattere subito a sinistra del cursore

Page 31: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-31

Sfruttare le somiglianze

• Il principio della forma che segue la funzione è importante perché:

– La nuova versione di un programma già familiare condividerà le funzioni base e molte caratteristiche e peculiarità delle versioni precedenti

– Quando dobbiamo svolgere un compito familiare con un programma che non conosciamo, sappiamo già usare le sue caratteristiche di base

– Quando non riusciamo a lavorare con un programma, possiamo facilmente impararne un altro

Page 32: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-32

Eseguire ricerche in un testo

• Una dimostrazione del principio che la forma segue la funzione

• La ricerca in un testo, con il comando Trova (Find), è usata in molte applicazioni, nei word processor, nei browser, nei programmi di posta elettronica e nei sistemi operativi

• Si trova nel menu Modifica o File

• I token sono gli elementi che si possono cercare – caratteri singoli come lettere, numeri, simboli speciali

– elementi composti come le date

Page 33: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-33

Page 34: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-34

Come si fa una ricerca

• La ricerca comincia all’inizio del documento o nella posizione dove si trova il cursore

1. Una “finestra mobile” di token scorre percorrendo tutto il testo

2. In ogni posizione i token vengono confrontati

3. Se c’è una corrispondenza, il processo si ferma e viene visualizzata l’istanza trovata

4. Se non c’è corrispondenza si scorre la finestra di una posizione più avanti

5. Se se arriva alla fine del testo senza aver trovato nulla, la ricerca termina senza successo

Page 35: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-35

Complicazioni della ricerca

• Maiuscole e minuscole:

– i computer memorizzano il maiuscolo e il minuscolo come caratteri diversi

– gli utenti hanno l’opzione di dire al programma di ignorare la differenza tra lettere maiuscole e minuscole

Page 36: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-36

Complicazioni della ricerca (cont.)

• Testo nascosto:

– ci sono due tipi di caratteri: a quelli scritti dall’utente con la tastiera si aggiunge la formattazione speciale utilizzata dal software

– durante una ricerca in generale i tag sono ignorati

– alcuni sistemi permettono all’utente di cercare specificando che il testo cercato dev’essere (per esempio) corsivo.

Page 37: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-37

Complicazioni della ricerca (cont.)

• Sottostringhe– l’utente potrebbe cercare parole intere, sebbene i

token siano costituiti dai singoli caratteri

– la ricerca potrebbe confondere le parole che costituiscono la stringa cercata con quelle che la contengono (trovando "your" per "you")

– i word processor generalmente hanno la capacità di cercare parole intere

• Stringhe composte da più parole– le parole sono separate da spazi. Se il numero

degli spazi nella stringa cercata e il testo è diverso, non si troverà alcuna corrispondenza

Page 38: Linterfaccia tra uomo e computer. 2-2 Il desktop Limmagine visualizzata sul monitor quando si accende il PC –è colorata o dotata di sfondo –linformazione.

2-38

Modificare il testo con le sostituzioni

• La sostituzione (search and replace) è una combinazione di ricerca e modifica nei documenti

• La potenza della sostituzione sta nel fatto che è possibile applicarla a tutte le occorrenze della stringa cercata nel testo– cambiare "west coast" con "West Coast"

– eliminare gli spazi indesiderati

– formattare il testo