3 – XHTML Usabilità Accessibilità

Ebook gratis da leggere
Facoltà di Scienze MM.FF.NN.
Università dell’Insubria – Como
Corso di Linguaggi per il Web I
• http://www.ebookgratis.net/ebook.asp?id=495 Servizi
e Programmi indispensabili per WebMaster
3 – XHTML Usabilità Accessibilità
1
2
Tecniche cross browser
CSS RESCALABLE o responsive
• set di commenti condizionali

• http://css.html.it/articoli/leggi/596/i-css-in-internetexplorer-7/3/
• http://www.mrwebmaster.it/css/articoli/usarecommenti-condizionali-fogli-stile_812.html
• PROBLEMA: dimensioni diverse di finestre browser
• SOLUZIONE: Javascript e CSS responsive che si
adatta alla dimensione delle finestra di browser MA
non funziona con tutti i browser
• provare a cambiare dimensioni finestra su:
•
•
•
•
http://www.getskeleton.com/
http://dryan.github.com/css-smart-grid/
http://www.amazium.co.uk/#download
http://css.html.it/articoli/leggi/3773/responsive-image-gallerycon-html5-css3-e-jquery-photoswipe/
• http://www.juliusdesign.net/12988/responsive-web-design-imigliori-tutorial-risorse/
• http://www.fmdesignblog.com/il-concetto-di-responsive-webdesign-progettare-un-sito-web-per-diverse-risoluzioni-conmedia-queries.html
• http://net.tutsplus.com/tutorials/html-css-techniques/responsiveweb-design-a-visual-guide/
• .box {
width: 400px;
[if IE 6] width: 600px;
padding: 100px 0;
}
• http://www.juliusdesign.net/2158/conditional-cssusiamo-il-css-condizionale/
3
Contratti tipo per l’informatica
4
CNIPA
• http://www.to.camcom.it/svilupposoftware
• http://www.contrattitipo.camcom.it/P42A295C89S82/Contratto-tipo-disviluppo-software.htm
• e scaricare il file PDF da usare per evitare litigi con il
committente
• Centro Nazionale per l’Informatica nella Pubblica
Amministrazione
• organo incaricato della gestione degli aspetti regolativi
e applicativi della legge www.pubbliaccesso.it
Associazione IWA
• http://www.iwa.it/
• associazione di settore per essere aggiornati,
conoscere altri webmaster, avere occasioni lavoro
• possibilità di usare il logo per distinguersi come azione
di personal branding
• documenti pubblicati: Linee guida recanti i requisiti
tecnicie i diversi livelli per l’accessibilità e le
metodologie tecnicheper la verifica dell’accessibilità
dei siti Internet
• per chi vuole creare informatica per la PA
Altre risorse per creare sito
http://webpublishingtools.masternewmedia.org/
5
6
1
Personal branding
HTML, CSS
• come procede? cosa serve da spiegare?
•
•
•
•
•
• HTML, CSS definisce come viene visualizzata una
pagina sul monitor curando l’aspetto grafico ma non la
struttura dell’informazione
http://www.gianlucapisano.it/index.php
www.bernardello.it
http://www.mucignat.com/blog/
http://www.dcopelli.it/
http://www.antoniograzioli.it/
• informe.com/personal/personal_branding_template_joomla/
• http://www.bernardello.it/articoli/installare-joomla-in-locale-coneasyphp.htm
• http://www.joomlabay.it/faq-commerciali/come-installarejoomla-in-locale-con-easyphp.html
• http://www.unpodicose.it/joomla.html
• http://www.antoniograzioli.it/joomla/installare-joomla-15-inlocale-con-xampp.html
http://www.youtube.com/watch?v=RmkrsUXzbcY
• http://www.youtube.com/watch?v=VDCVYTbqq3M
7
codificare dato vs informazione
8
Marcatura nei formati di testo
• La codifica di alto livello trasforma il dato testuale
grezzo in fonte esplicita di informazione
• dato: ciò che è immediatamente presente alla
conoscenza, prima di ogni elaborazione; (in
informatica) elementi di informazione costituiti da
simboli che debbono essere elaborati
• informazione: notizia, dato o elemento che consente di
avere conoscenza più o meno esatta di fatti,
situazioni, modi di essere
• La marcatura si usa per descrivere codici aggiunti al
testo digitale per definire
– la struttura logica, indica le parti che compongono
un testo: e.g. introduzione, capitoli, conclusione
– la presentazione, indica come il testo deve apparire
sullo schermo o in stampa in termini di
caratteristiche fisiche: dimensione pagina,
carattere, colori, etc.
• 56100 da solo è un dato, CAP 56100 diventa
informazione in ambito postale
9
Linguaggi di marcatura generici
10
Linguaggi di marcatura specifici
• presentazione e struttura logica NON si possono
separare in un documento cartaceo
• I linguaggi di marcatura specificinon mantengono la
struttura logica separata dal formato di presentazione
• separazione possibile tra presentazione e struttura
logica in un testo digitale con i linguaggi di marcatura
generici perché descrivono la struttura logica di un
testo, ma non il formato di presentazione, il vantaggio
è che lo stesso testo potrà essere presentato in tanti
modi diversi come si preferisce
• Esempi: Word, RTF
• Esempi:
– XML (Extensible Markup Language)
– SGML (Standard Generalized Markup Language)
Linguaggi di descrizione di pagina
• I linguaggi di descrizione di pagina indicano come
mostrare un testo sullo schermo o in stampa
• Esempi: PostScript, PDF
11
12
2
XML
XML
• HTML definisce come viene visualizzata una pagina
sul monitor ma non la struttura dell’informazione
• XML eXtensible Markup Language, meta-linguaggio
ovvero linguaggio che definisce un linguaggio, per
descrivere qualunque classe di documento strutturato
indipendente dalla presentazione del documento
usato per scambiare dati tra piattaforme diverse grazie
alla separazione tra contenuto e forma:
1. le informazioni vengono estratte dalla base dati
2. le informazioni sono strutturate in documento XML
3. il documento XML è passato ad altra piattaforma
4. il documento XML è trasformato nel formato più
adatto per lo utente su altro sistema
• indipendenza dalla piattaforma e dal sistema
operativo
• linguaggio aperto compatibile con il codice ASCII
• semantica creata grazie alla meta-informazione
13
14
XML
XML
<?xml version="1.0"?>
<!DOCTYPE ordine [
<!ELEMENT ordine ( cliente, prodotto+ )>
<!ATTLIST ordine id ID #REQUIRED>
<!ELEMENT cliente EMPTY>
<!ATTLIST cliente db CDATA #REQUIRED>
<!ELEMENT prodotto ( importo )>
<!ATTLIST prodotto db CDATA #REQUIRED>
<!ELEMENT importo ( #PCDATA )>
]>
<ordine id="ord001">
<cliente db="codcli123"/>
<prodotto db="prod345">
<importo>23.45</importo>
</prodotto>
</ordine>
• usa tag di inizio e fine, per esempio <importo> e
</importo>, per marcare i campi informativi
• un campo informativo racchiuso tra due marcatori
viene detto elemento (element) e può essere arricchito
dalla presenza di coppie nome/valore (nell’ esempio,
id="ord001") dette attributi (attribute)
• riferimento http://www.w3c.it/
• XML è dappertutto, anche nei file PDF che create
15
16
XML e internet
struttura di un documento XML
• casi di studio http://xml.coverpages.org/
• metadati e web automation(XHTML,SOAP,SVG)
• commercio elettronico ed online banking
(OFX,XMLDigitalSignature,XML/EDI)
• applicazioni multimediali
(SVG,VoiceXML,SMIL,X3D,podcasting)
• linguaggi di modellizzazione
(XMIUML,XUL,XAML,MXML)
• comunicazione e tecnologie push (e.g. Wireless
Markup LanguageWML, CDF)
• scienza sul Web(e.g.CML,MathML)
• integrazione di database
• e-learning (Moodle, SCORM)
doc XML
prologo
dichiarazione XML
dichiarazione tipo di doc
istanza del documento
testo annotato
elemento radice
elemento
elemento
elemento
17
18
3
struttura di un documento XML
un esempio
• Un documento XML si articola in due parti:
– prologo
• contiene le informazioni che permettono di
interpretare il documento come un documento
XML, ricollegandolo alla corrispondente DTD
(ove esista)
– istanza del documento
• racchiude il dato testuale vero e proprio con la
relativa marcatura
• il prologo è facoltativo ma è sempre consigliabile
inserirlo nei propri documenti per favorire
completezza di informazione e possibilità di
validazione automatica
<?xml versione="1.0" codifica="ISO-8859-1"?>
<messaggio>
<da>Rachele</da>
dichiarazione
<a>Vito</a>
<intestazione>pro memoria</intestazione>
<testo>ricorda di portare il cd!</testo>
</messaggio>
testo
annotato
19
20
il testo annotato
etichetta
XML è solo “informazione”
elemento semplice

<messaggio>
<da>Rachele</da>
<a>Vito</a>
<intestazione>pro memoria</intestazione>
<testo>ricorda di portare il cd!</testo>

</messaggio>
dati
non c’è niente di automatico che XML possa fare al
di là di strutturare l’informazione implicitamente
presente nel testo
è necessario scrivere dei programmi che utilizzino
queste informazioni in modo coerente e conforme
ad uno scopo
la forza di XML sta proprio in questa sua
indipendenza da una particolare applicazione o
piattaforma software
elemento
complesso
21
22
XHTML
• Nel 2000 il W3C ha rilasciato, anziché una nuova
versione, una riformulazione dell’HTML come
applicazione XML, l’XHTML nel 2001 viene rilasciata
una definizione esaustiva, l’XHTML 1.0).
• L’ XHTML eredita la versatilità dell’XML, garantendo
l’accesso al web anche a dispositivi diversi dal
computer, come telefonini, PDA, WebTV.
• L’ XHTML è compatibile con l’HTML 4.0 e quindi con i
browser per la navigazione sul web.
• Le maggiori differenze con l’HTML sono di ordine
sintattico, infatti l’XHTML eredita la rigidità sintattica
dell’XML.
a cosa serve XML?

l’obiettivo primario di XML è quello di convogliare
informazione in un modo che sia indipendente da
una particolare applicazione o piattaforma
software
il suo uso principale è come formato di
interscambio dei dati, o per la creazione di dati
condivisi, o per la loro memorizzazione in una
base di dati
23
24
4
Regole di scrittura XHTML
Vantaggi dell’XHTML
1. Tutti i tag ed i loro attributi devono essere in
minuscolo (case sensitive)
2. Obbligatorio il tag di chiusura; di conseguenza i tag
vuoti come <br> ed <img> diventano <br /><img />
3. I valori degli attributi devono essere specificati fra
doppi apici o singoli apici.
4. Ogni attributo deve avere un valore
5. Si deve utilizzare l’attributo id al posto di name per
identificare gli elementi di un documento
• Codice pulito e ben strutturato: con l’XHTML (versione
strict, XHTML1.1) tutta la formattazione del
documento è affidata ai CSS.
• Portabilità: tutta l'evoluzione dei servizi mobili sarà
fondata sull'integrazione tra XHTML e CSS.
• Estensibilità: ciò significa che è possibile inserire in un
documento parti scritte in uno dei tanti linguaggi della
famiglia XML.
• Accessibilità: una pagina valida, ben definita nella
struttura, è meglio gestibile da browser alternativi
come quelli vocali o testuali.
25
Validazione
26
Intestazione
• Un documento XHTML deve essere convalidato
rispetto ad una delle tre DTD definizione di tipo di
documento
• Un documento XHTML è ben formato quando rispetta
le regole della sintassi XML (presenza di un elemento
radice, dichiarazione doctype, corretto annidamento
dei marcatori, chiusura obbligatoria dei tag vuoti)
• Un documento XHTML è valido se usa correttamente
gli elementi e gli attributi dichiarati nella sua DTD.
• All’indirizzo http://validator.w3.org è possibile
convalidare qualsiasi documento
• In un documento XHTML l'elemento radice deve
essere <html>.
• L'elemento radice <html> deve contenere la
dichiarazione di un namespace XML (spazio dei nomi)
tramite l'attributo xmlns. Il namespace usato deve
essere http://www.w3.org/1999/xhtml
• In un documento XHTML l'elemento radice deve
essere preceduto da un elemento <!DOCTYPE>. DTD
XHTML1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
27
Esempio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
doctype
<html xmlns="http://www.w3.org/1999/xhtml"> elemento
radice
<head>
<title>La mia pagina XHTML</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/> dichiaro la codifica dei caratteri
</head>
<body>
<h2>Il ritorno al futuro del web</h2>
<p>L’XHTML sostituisce l’HTML</p>
</body>
</html>
29
28
La correttezza formale
In XHTML non sono stati introdotti nuovi elementi o
attributi rispetto ad HTML 4.01: la differenza
principale sta nell’applicazione di regole sintattiche
più rigide, derivate da XML. Se tali regole
sintattiche non vengono rispettate (regole che i
browser non segnalano come errore) non si otterrà
un documento XHTML valido.
1. Corretto annidamento dei marcatori
2. I nomi di elementi e attributi devono essere in
minuscolo
3. Ciascun attributo deve essere posto tra virgolette e
avere indicato il valore.
4. Tutti gli elementi devono essere chiusi; per questo
gli elementi vuoti devono terminare con />
5. Per identificare un elemento si deve usare l'attributo
id e non name.
30
5
Riferimenti utili
ERGONOMIA COGNITIVA
•
•
•
•
XHTML Reference di W3Schools
Specifica XHTML1.0 tradotta in italiano
Specifica XHTML 1.1.
Introduzione alla modularizzazione: dal sito del
W3C
• Il concetto di namespace in XML
• Lista di elementi strutturali o di blocco dal sito
HTML.it
• Lista di elementi di presentazione o inline dal
sito HTML.it
• è lo studio e la valutazione dei processi cognitivi
coinvolti nell’interazione tra individuo e tecnologia e
l’attività di progettazione che tenga conto di questi
processi
• ha l’obiettivo di adattare ambienti, strumenti e prodotti
alle capacità cognitive e alle competenze degli utenti,
cioè alla loro mente e al meccanismo di funzionamento
della percezione
• http://xhtml.html.it
31
INTERFACCIA
32
Per disegnare bene l’interfaccia
• qualunque cosa permetta la comunicazione tra due
sistemi differenti
l’interfaccia deve portare alla formazione di una corretta
rappresentazione del funzionamento del sistema nella
mente dell’utilizzatore
mappa del
modello mentale
proposto da
Norman nel 1990
33
Per disegnare bene l’interfaccia
Norman D. A. (1996) La caffettiera
del masochista. Psicopatologia degli
oggetti quotidiani
http://www.youtube.com/watch?v=VNjvZc13Skg
•esiste differenza tra il modo di "funzionare" della nostra
mente e le capacità richieste per usare gli oggetti
•bisogna tenere conto di queste differenze per non
creare oggetti non usabili
•succede così che non tutti gli oggetti vengono progettati
per essere utilizzati
•se usiamo male un oggetto spesso non è colpa nostra
ma del cattivo design, però distrugge nostra autostima 34
Per disegnare bene l’interfaccia
D. Norman : “.. Le cose complesse possono richiedere
spiegazioni, ma quelle semplici non dovrebbero
averne bisogno. Quando una cosa semplice esige
figure, scritte o istruzioni, vuol dire che il design è
sbagliato..”
Fare caso alle dimensioni dei manuali di uso.
Fare caso all’autore dei manuali di uso.
Quante funzioni usate rispetto a quelle dei manuali?
Preferite imparare provando e sbagliando mentre usate
il sistema o leggendo il manuale?
• l’errore frequente che porta a creare una brutta
inferfaccia: la fretta di finire! il time-to-market troppo
stretto!
• quando dovra’ essere pronto? ieri!!!!
• c’è anche la cattiva elasticità mentale secondo cui:
– tutti sono bravi come noi e sanno usare senza
spiegare
– chi se ne importa dell’utente, l’importante è
vendergli qualcosa e fare $$$$$
• c’è anche cattivo gusto e mancanza di estetica
• chi chiede l’oggetto è persona diversa da chi lo usa
35
36
6
Stadi dell’azione tramite interfaccia
Interfaccia in informatica
• ESECUZIONE: problema della relazione tra
intenzione e azioni possibili (affordance), cosa posso
fare con questo oggetto? Come?
1 - formare uno SCOPO
2 - formare un’INTENZIONE
3 - decidere l’AZIONE
4 - compiere l’AZIONE
• l’interazione uomo macchina (HCI) indica la
comunicazione o dialogo tra utente e computer
• la comunicazione avviene attraverso l’interfaccia
utente, chiamata anche interfaccia grafica, che deve
essere progettata per facilitare l’interazione
• il concetto di interfaccia non riguarda solo il computer
ma tutti gli oggetti
• VERIFICA: problema del rapporto tra azioni e stato del
mondo (feedback) l’oggetto ha recepito il mio
comando? Che effetto ha avuto?
5- percepire lo STATO DEL MONDO
6- interpretarlo
7- VALUTARE il risultato
37
38
Human-Computer Interaction
Human-Computer Interaction
• “HCI è una disciplina che si occupa della
progettazione, valutazione e realizzazione di sistemi
interattivi basati su computer destinati all’uso umano e
dello studio dei principali fenomeni che li circondano”
• ACM SIGCHI Curricula for Human Computer
Interaction, 1992 http://www.acm.org/sigchi/cdg/
• “Progettare interfacce utente è un mestiere molto difficile. Esso
mette insieme due discipline complicate: la psicologia e la
programmazione. Queste discipline hanno background culturali
molto diversi: la psicologia si occupa delle persone, la
programmazione dei computer.
• Gli psicologi sono, presumibilmente, empatici e comprensivi; i
programmatori matematici e precisi. Gli psicologi hanno già
abbastanza problemi nel capire le persone anche quando
queste non usano i computer; i programmatori hanno
abbastanza problemi nel far funzionare i programmi anche
quando questi non sono utilizzati da alcuna persona.
• Progettare una buona interfaccia utente richiede che queste
queste due prospettive vengano messe insieme.
• H.Thimbleby, User Interface Design, 1990
39
Stili di interazione
40
Interfacce WIMP
• Lo stile di interazione indica le modalità concrete
attraverso le quali l'utente può comunicare o interagire
con il sistema
• esistono molte classificazioni degli stili di interazione,
come questa per esempio:
– A linea di comando
– Menù
– Dialoghi in languaggio naturale
– InterfacceWIMP (Windows, Icons, Menus, Pointers)
come nello stile di Windows
– Interfacce gestuali comandate tramite webcam
– interfacce 3D
41
• WIMP (Windows, Icons, Menus, Pointers)
• Widget: elementi costitutivi dell’interfaccia che
consentono l’interazione utente sistema
• modello di manipolazione diretta del widget perché
l'interazione avviene mediante operazioni effettuate
dall'utente come puntamenti, trascinamenti ecc.
42
7
Criteri di progettazione
Caratteristiche del widget
Top – down
1. disegno del layout disposizione generale
2. disegno dei singoli elementi
tre aspetti da considerare per creare il widget:
• apparenza-COME appare, es. quelli di Windows in cui
curare:
– icone: disegno che rappresenta la funzione
– testo
– colori di fondo, testo, icone
• interazione-come si COMPORTA
– Mouse fuori area, situazione iniziale
– Mouse over: bottone evidenziato, testo esplicativo
– Mouse click: bottone evidenziato con colore diverso
e compare altra finestra per i dettagli
• semantica-COSA fa, l’effetto sul monitor
Bottom-up
1. disegno dei singoli elementi
2. disegno del layout disposizione generale
43
Procedimento di creazione del widget
44
Affordance nelle interfacce grafiche
• decidere SUBITO cosa si vuole fare con il widget
curando la semantica
• POI come deve apparire per
– mostrare opzioni o stati si usa il checkbox (caselle
quadrate con ali di gabbiano) o radio button (cerchi
che si riempiono con punti) in cui scegliere una sola
opzione esclusiva o più opzioni, form con testo
libero
– definire azioni tramite Menù, bottoni, toolbar
• l’affordance indica proprietà percepite e reali di un
oggetto, proprietà che determinano come si potrebbe
usare l’oggetto come se fosse un invito all’uso
• Il progettista può controllare l'affordance
dell'interfaccia, dei dispositivi di puntamento, dei
bottoni, della tastiera per fornire “inviti” a toccare,
indirizzare/puntare, guardare, cliccare
45
Affordance nelle interfacce grafiche: bottoni
• la rappresentazione come oggetto 3D che emerge e fa
staccare dal fondo è un invito al click
Consigli per la progettazione di bottoni
• evitare caratteri troppo piccoli e illeggibili
• evitare bottoni troppo vicini difficili da centrare col
mouse
• usare icona intuitiva per indicare la funzione
• se non sono attivabili in un certo momento renderli
sbiaditi, con colore più chiaro
• attenzione ai falsi bottoni, forme simili ma non attive
46
Affordance nelle interfacce grafiche: barre per
scorrimento
• queste barre devono creare un invito a scorrere
tramite frecce messe agli estremi
Consigli di progettazione
• attenzione all'uso annidato, ovvero troppe barre
messe in finestre sempre più piccole e difficoltà a
muovere una barra in poco spazio
47
48
8
Affordance nelle interfacce grafiche: campi di
input
Affordance nelle interfacce grafiche: link
• i campi di input servono da invito a inserire testo
Consigli per rendere evidente l’invito al link:
• devono essere riconoscibili con colori, sottolineatura,
piccoli simboli vicino
• devono dare indicazioni sulla destinazione
• devono dare feedback, una reazione al
comportamento eseguito come:
– cambia colore se già visitati in passato
– cambia colore e forma se ci passa il mouse sopra
Consigli per la progettazione di un campo di input:
• rendere chiaro contenuto atteso fornendo un esempio
di cosa inserire, per esempio in un campo in cui
scrivere email metti testo già pronto come “inserire qui
la tua email nel formato nome@indirizzo”
• alcuni esempi su
– www.usabile.it
– www.hcibib.org
– www.uidesign.net
– www.useit.com
49
Affordance nelle interfacce grafiche
50
Concetto di metafora
L'affordance può rendere un'azione facile o difficile in
base a queste caratteristiche dell’utente:
• esperienza, abitudine, novità
• conoscenza
• aspetti culturali es. colore rosso ha significato diverso
• problemi di percezione
• E’ spesso efficace una forma di interfaccia in cui un
aspetto del mondo reale è usato per simboleggiare e
semplificare un aspetto del programma di computer
con cui l’utente sta interagendo
• Un’immagine che letteralmente ha un significato che
viene trasposto figurativamente sul contenuto
– Desktop
– Finestra
– Bottone
– CestinoSoluzioni
51
52
Concetto di metafora
Layout
• una metafora deve essere familiare all’utente
• una metafora oscura confonde
• una metafora non deve lasciare aperte più
interpretazioni
• la metafora deve essere logicamente collegata
all’attività da eseguire col computer
• una metafora deve essere sempre usata per facilitare
e chiarificare l’interfaccia
• layout: distribuzione spaziale degli elementi sullo
schermo
• Principio guida: semplicità, deve essere chiaro e
pulito, lasciando sufficiente spazio bianco e margini
tra i diversi blocchi ed evitando sovraccarico di
informazione
• esempi di organizzazione: i layout di PowerPoint, però
si è esagerato nel loro uso e ora le presentazioni fatte
con Powerpoint sono tutte uguali
– “sindrome di powerpoint”
http://www.gandalf.it/offline/off69.htm
– http://www.edwardtufte.com/tufte/powerpoint Essay:
The Cognitive Style of Powerpoint
• http://www.dcopelli.it/corsi/corso-html.htm?VCAFF1051 consigli per creare layout web
•
•
•
•
La metafora del cestino
A volte usata impropriamente
VA BENE se usata per eliminare file
NON BUONA se usata per espellere dischetti come in
Macintosh
53
54
9
Layout: organizzazione
Psicologia Gestalt utile per fare layout
Principali tecniche ispirate anche alla psicologia della
Gestalt:
1.Raggruppare e Strutturare
2.Ordinare
3.Usare spazi bianchi
4.Decoration (box, caratteri, colori)
5.Allineare
6.Mantenere consistenza
7.Dare senso di contesto
• Legge della Prossimità : Più sono fra loro vicini due o
più elementi maggiore è la probabilità che essi siano
visti come una figura.
Raggruppare elementi semanticamente contigui
attraverso la vicinanza spaziale
55
56
Psicologia Gestalt utile per fare layout
• Legge della Similarità: Elementi visivi tra loro simili
(per forma, colore, dimensione, movimento, etc)
saranno visti collegati.
La similarità è un prerequisito per notare la differenza.
• Graphic Design: Fornire ritmo e consistenza ad
documento per mezzo della ripetizione, che permette
di rafforzare i legami fra parti separate
57
58
Layout: Raggruppare e Strutturare
• http://www.archive.org/
• http://www.disobey.com/ghostsites/
• esempio nell’uso dei vari menu di Windows
Layout: Ordinare
raccolte di vecchi siti ormai scomparsi
usare un criterio naturale per l’utente secondo la sua
cultura:
• ordine cronologico
• ordinamento alfabetico
• dall’alto al basso, da sinistra a destra
59
60
10
Layout: Usare spazi bianchi
Layout: Usare spazi bianchi
• separare
• usare colori, forme, testo in vari stili per dare vita ecc.
• per evitare la monotonia che distrae l’attenzione
• per evitare colori troppo scuri che mettono tristezza
evidenzia il distacco tra due aree
• evidenziare
evidenzia l’area al centro
• raggruppare
due aree separate e la prima area è
formata da oggetti simili perché lo
spazio bianco tra loro ha area
minore rispetto all’area bianca che
separa le due zone
61
Layout: Allineare
62
Layout: mantenere consistenza
• creare ordine in un layout permette al cervello di
risparmiare sforzi per creare un suo ordine
• testo allineato a sinistra, centro, destra
• elenchi di numeri con la virgola sempre nella stessa
posizione verticale
• elenchi di nomi e cognomi dove appare evidente la
posizione di nome staccata dal cognome per poterli
facilmente identificare
• pagine con contenuti simili hanno interfaccia simile
• funzioni simili devono stare sempre nella stessa
posizione per evitare all’utente di perdere tempo nello
andare a cercarli in posti nuovi
63
64
mokup interfaccia grafica
Layout: Dare senso di contesto
• l’utente non deve perdersi, quindi indicare in quale
punto si trova rispetto all’informazione
• sono ideali le mappe e altri strumenti top-down che
mostrano l’informazione locale rispetto al globale
• strumento per creare un'immagine grafica (o bozza)
che rappresenti l'anteprima dell'interfaccia grafica,
senza perdersi nei dettagli realizzativi, per fare la
prototipazione
• dal semplice Paint per disegnare bozze a programmi
per creare siti web come su
http://www.webmasterpoint.org/webdesign/webdesign/
progettare-sito-web/software-servizi-per-crearemockup-wireframe.html oppure su iPhone
http://www.iphoneitalia.com/iphone-mockupprogettare-online-linterfaccia-di-unapplicazione80518.html e
65
66
11
mokup interfaccia grafica
Usabilità di un prodotto
• http://www.youtube.com/watch?v=AOJlQRTbLpM
• http://www.youtube.com/watch?v=XgIckOa9CUU
• http://www.youtube.com/watch?v=sx4Ar04Dgrw
sull’uso di Photoshop
• naturalmente l’immancabile
http://www.masternewmedia.org/it/guida-al-webdesign/# e
http://www.masternewmedia.org/it/wireframing-e-website-prototyping-i-migliori-servizi-sotto-i-150-euro/# e
• http://www.masternewmedia.org/it/2005/04/09/interfac
ce_grafiche_come_progettare_interfacce.htm#
• secondo la norma ISO 9241 “Usabilità” è la efficacia,
efficienza e soddisfazione con cui determinati utenti
possono raggiungere determinati obbiettivi in determinati
ambienti d’uso
• l’efficacia riguarda l’accuratezza e completezza con cui
raggiungo l’obbiettivo
• l’efficienza riguarda le risorse spese per ottenere tale
risultato
• la soddisfazione riguarda il comfort e la accettabilità del
sistema
• la usabilità va progettata dall’inizio, e tenuta sotto
controllo costantemente nel processo di progettazione
e sviluppo
67
68
Usabilità di un sito
Usabilità di un sito web
• La valutazione di usabilità di un sistema non può
prescindere dall’utente
• si esegue un “Test di usabilità” in cui alcuni studenti
usano il sistema eseguendo compiti tipici in un
ambiente controllato, sotto osservazione da parte di
esperti di usabilità che raccolgono dati, li analizzano e
suggeriscono miglioramenti
• http://www.masternewmedia.org/it/usabilita-web-imigliori-articoli-e-report-del-2010-dimasternewmedia/#
• http://webdesign.html.it/guide/leggi/47/guida-usabilitadei-siti-web/
• test di usabilità “Web Site Usability Checklist”
• http://www.dailybits.com/the-essential-websiteusability-checklist/
• http://www.usereffect.com/topic/25-point-websiteusability-checklist
• http://www.webgenesis.com.au/portfolio/pdfs/usabilitychecklist-report-2.pdf
• http://www.usereffect.com/download/checklist.pdf
• http://www.infodesign.com.au/ftp/WebCheck.pdf
69
70
Esercizio
Bibliografia
• prendere una interfaccia e provare a capire se l'utente
riesce a comprendere l'affordance degli oggetti grafici
dell'interfaccia, se sa riconoscere, percepisce se un
oggetto è attivo e intuisce l'azione associata
• R.Polillo, “Il check-up dei siti web”, Edizioni Apogeo
• A.Dix, J.Finlay,G.D.Abowd,R.Beale, Interazione
uomo-macchina, ed. McGraw-Hill, 2004
• Norman D. A. (1996) La caffettiera del masochista.
Psicopatologia degli oggetti quotidiani. Firenze,
Giunti.
• Norman D. A. (1995) Le cose che ci fanno intelligenti.
Milano, Feltrinelli.
Elementi di giudizio
• affordance nelle interfacce grafiche
• qualità del feedback
• come avviene la comunicazione degli errori
71
72
12
Cos’è l’accessibilità
Cos’è l’accessibilità
• Accessibilità al multimediale, Web compreso, significa
che le persone con disabilità o diversamente abili
possono partecipare al Web come tutte le altre
persone senza limiti, soltanto usando una tecnologia
particolare
• sono da considerare anche le persone non disabili,
e.g. anziani, persone dotate di scarsa o nulla
preparazione informatica, persone con vecchi
computer, persone di lingua diversa etc
• progettare per l’accessibilità significa considerare tutte
le disabilità che riguardano l’accesso al Web: visive,
uditive, fisiche, linguistiche, cognitive, neurologiche
• evitare interfacce complesse:
– menu di navigazione poco visibili
– finestre pop-up
– richiesta imprevista di scaricare un plug-in
– gergo troppo tecnico
• una struttura più leggera del sistema che richiede
meno sforzo per le persone e per hardware e software
da usare
• numerose scuole, enti e famiglie economicamente
disagiate possiedono computer vecchi, in molti casi,
computer antiquati sono accoppiati a connessioni
lente
• ci vuole sito normale e link a sito accessibile
73
74
Cos’è l’accessibilità
WCAG 2.0
linee guida per l’accessibilità dei contenuti per il Web, abbreviate
con WCAG 2.0 (Web Content Accessibility Guidelines
per garantire accessibilità occorre:
• progettare pagine indipendenti dalla periferica, dal
sistema operativo
• progettare pagine non vincolate ad una data
dimensione di schermo e leggibili anche da chi non è
in grado di visualizzare i colori
• occorre usare strumenti di valutazione per
determinare se un sito è conforme agli standard di
accessibilità secondo W3C con Web Accessibility
Initiative e una serie di linee guida per l’accessibilità al
Web (WAI guidelines)
• www.w3.org/WAI/
• http://www.w3c.it/wai/
Principle 2. Operable – User interface
components and navigation must be
operable.
-
Guideline 2.1 Keyboard Accessible:
Make all functionality available from a
keyboard.
• 2.1.1 Keyboard: All functionality of the
content is operable through a
keyboard interface without requiring
specific timings for individual
keystrokes, except where the
underlying function requires input that
depends on the path of the user's
movement and not just the endpoints.
(Level A)
PRINCIPLE
GUIDELINE
SUCCESS CRITERION
75
Dichiarazioni usabilità del sito
76
Dichiarazioni usabilità del sito
• il consorzio mondiale per il Web (W3C) nell'ambito
della iniziativa per l'accessibilità del Web (WAI), ha
definito che un sito che rispetta le caratteristiche
espone su ogni pagina questo simbolo:
• se compare uno dei logo a destra il sito è conforme
alle "Linee guida per l'accessibilità ai contenuti del
Web 1.0" del W3C disponibili a
http://www.w3.org/TR/2000/RECATAG10-20000203
• il W3C prescrive di esporre su ogni pagina il bollino
ufficiale del WAI con il livello di conformità raggiunto.
• http://www.uritalia.it/dichiarazione/default.asp
• se sito e' realizzato secondo gli standard del W3C
(raccomandazioni XHTML 1.0 Strict e CSS 2) per
garantire la massima accessibilita' e fruibilita' delle
informazioni a tutte le tipologie di utenti e senza
distinzioni di piattaforma e browser, viene usato
questo logo
77
78
13
Importanza dell’accessibilità
Accessibilità e motori di ricerca
• per senso civile, umano verso la partecipazione
collettiva e non escludere nessuno
• la pubblica amministrazione pretende strumenti dotati
di accessibilità come elemento indispensabile per
partecipare al bando di gara
• Pubblica Amministrazione e gli Enti di Pubblica Utilità
sono soggetti alla Legge 9 gennaio 2004, n. 4 ("Legge
Stanca") "Disposizioni per favorire l'accesso dei
soggetti disabili agli strumenti informatici"
• rendere un sito web accessibile aiuta la navigazione di
un motore di ricerca, tipicamente si usa molto più testo
anche per descrivere immagini e la struttura del sito è
più chiara
• http://www.uninsubria.it/uninsubria/index_acc.html
79
Accessibilità e sistemi di lettura vocale
80
Problemi sul colore molto frequenti
• per aiutare chi non può leggere esistono software che
leggono le pagine del sito web
• creare un sito accessibile aiuta molto i sistemi di
lettura perché le informazioni sono più ordinate e c’è
più testo
Accessibilità e sistemi di visione
• per aiutare chi ha difficoltà a leggere esistono software
che ingrandiscono le pagine del sito web
• creare un sito accessibile aiuta molto i sistemi di
ingrandimento perché le informazioni sono più
ordinate e c’è più testo e i link sono ben evidenti
• i colori dello sfondo e del primo piano (testo) siano
ben contrastati
• test per verificare il contrasto
• http://snook.ca/technical/colour_contrast/colour.html
• http://gmazzocato.altervista.org/colorwheel/wheel.php
?lingua=it
• http://juicystudio.com/services/luminositycontrastratio.
php
• http://www.usabile.it/blog/strumenti-per-il-contrastodel-colore
• evitare di inserire sfondi grafici compositi sotto i testi
• non affidare nessuna informazione esclusivamente
all'uso del colore associato
81
82
Problemi sul colore molto frequenti
Problemi sul colore molto frequenti
• testi e grafica devono essere comprensibili se visti
senza colore, e.g. in base al contesto o alla marcatura
• non pensare che tutti gli utenti possano distinguere
correttamente i vari colori, esistono vari problemi tra
cui il daltonismo è il più diffuso in varie sfumature
– Deuteranopia: cecità più accentuata per il colore
verde, confusione tra rosso e verde e viola e blu,
difficoltà a distinguere rosso, arancione, giallo,
verde
– Protanopia: cecità più accentuata per il colore
rosso, confusione tra rosso e verde
– Tritanopia: confonde giallo e blu
– Acromatopsia: estrema sensibilità alla luce, cecità
ai colori
• http://www.diodati.org/scritti/2004/guida/ele_acc16.asp
• http://www.vischeck.com/examples/
83
84
14
Test controllo sito accessibile
Un sito è accessibile se caratteristiche:
• dare la possibilità di non utilizzare il mouse
• scegliere di ingrandire il testo
• cogliere il significato essenziale dei colori
• riuscire a comprendere linguaggio
• poter utilizzare un software di sintesi vocale
• poter interpretare elementi video, audio attraverso
testo alternativo
85
Riferimenti
•
•
•
•
•
•
•
•
•
•
86
Esercizio
Webaccessibile.org http://www.webaccessibile.org/
http://www.html.it/elevata_accessibilita/index.html
http://www.accessibile.gov.it/
http://webdesign.html.it/guide/leggi/45/guidaaccessibilita-dei-siti-web-pratica/
http://www.leggestanca.it/
http://archivio.cnipa.gov.it/site/_files/Opuscolo%207.pd
f
http://www.cineca.it/stdoc/AccessibilitaLegge42004.pdf
http://www.pubbliaccesso.gov.it/biblioteca/documentaz
ione/studio_lineeguida/index.htm
www.pubbliaccesso.gov.it/biblioteca/manualistica/
http://www.vodafone.it/diac/help/vod_accessibilita.html
87
• visitare un sito, giudicare se è accessibile, provare a
pensare l’interfaccia in versione accessibile
• http://www.uninsubria.it/uninsubria/index_acc.html
• http://www.unipv.eu/site/home.html
• http://www.minervaeurope.org/structure/workinggroup
s/userneeds/prototipo/museoweb.html Kit di
progettazione di un sito di qualità per un museo
medio-piccolo progettato in XHTML 1.0 strict con l'uso
di fogli di stile CSS.
88
15