Le teorie della Gestalt e Cognitive Web Design

Le teorie della Gestalt e la percezione
Le teorie della gestalt riguardo alla percezione fanno riferimento alla ad una scuola teorica tedesca che studiò appunto la percezione negli anni 20 del secolo scorso.
La scuola di Berlino si inserisce tra le scuole strutturaliste della percezione ed ebbe un grande influsso sullo sviluppo della psicologia.
La psicologia della Gestalt si fa risalire al 1912 anno in cui Wertheimer scrisse un articolo nel quale identificava un processo percettivo unitario per il quale i singoli stimoli verrebbero integrati, nel soggetto che percepisce, in una forma dotata di continuità. Quindi il percepire, fino ad allora considerato un processo passivo, veniva descritto come qualcosa di attivo.
Ciò significava che quello che prima era stato considerato un processo passivo - il percepire - veniva ad essere pensato come qualcosa di gran lunga più attivo. Intuì che non erano gli stimoli elementari ad essere colti bensì diventava significativo per chi stava percependo solo l’insieme. Da qui la legge gestaltica secondo la quale il tutto viene prima delle parti. Questo tutto può essere successivamente scomposto in parti, ma in questo caso queste parti diverrebbero nuove figure intere. La teoria continua dicendo che se la configurazione unitaria è scomposta in parti o frammentata o comunque deficitaria in qualche parte il soggetto tende a vedere un insieme unitario o ad agire con l’intento di completare ciò che manca e se non vi riesce sperimenta una sorta di frustrazione.
Wertheimer elencò una numerosissima serie di leggi sulla percezione gestaltica, la più importante delle quali è la legge della pregnanza:
quello che viene percepito contiene una forma organizzata che è la migliore possibile nella presente circostanza cioè risponde ad un principio di economia dell’organizzazione –massimo dell’informazione nella struttura più semplice-.

L'applicazione delle teorie della Gestalt al Web Design per la creazione di un sito più efficace e usabile a livello cognitivo


Conoscendo le leggi della Gestalt si possono utilizzare nel web design. Questo uso aiuta a rendere chiara la struttura e l’organizzazione delle pagine web in modo intuitivo, in un batter di ciglia.

Conoscendo questi principi è possibile sfruttarli anche per disporre i vari elementi che compongono una pagina web in modo da rendere chiara la struttura e l'organizzazione del proprio lavoro fin dalla prima occhiata.

Ecco alcune leggi e loro riflessi nel web design (per la verità nel graphic design in generale ma questa non è materia della nostra ricerca):

legge della vicinanza
all'interno di una stessa 'scena' gli elementi tra loro vicini vengono percepiti come un tutto.

uso nel webdesing:
possiamo avvicinare graficamente gli elementi che sono concettualmente correlati e allontanare quelli che non lo sono, fornendo una semplice chiave di lettura all'utente.

legge della similitudine
all'interno di una stessa 'scena' gli elementi tra loro simili per forma, colore e dimensione vengono percepiti come collegati.

uso nel webdesign:
la riutilizzazione di elementi, colori, simboli, icone che correlano una informazione all’altra aiuta a rendere accessibile e facilmente navigabile un sito; infatti si possono rafforzare legami tra parti separate di un documento a mezzo delle ripetizioni che evitano all'utente lo sforzo di comprendere le connessioni e lo fanno navigare in modo intuitivo.

legge della chiusura
linee e forme familiari vengono percepite come chiuse e complete, anche se graficamente non lo sono.

uso nel webdesign:
organizzare lo spazio secondo linee e rettangoli invisibili aiuta l’utente a capire la strutturazione della pagina, questo vale anche per gli allineamenti dei testi per esempio. Si può per lo stesso principio sfruttare uno spazio che in realtà non abbiamo, disegnando una parte della figura che vogliamo rendere e lasciando che sia la percezione dell’utente a comprenderne il resto.

legge figura-sfondo
le figure vengono percepite prima di tutto dal proprio contorno, il resto viene inteso come sfondo.

uso nel webdesign:
questa legge diventa nel design la legge del contrasto, infatti visto che le figure vengono distinte per il loro contorno, più forte sarà il contrasto con il loro sfondo più facilmente sarà identificabile una figura, maggiore sarà l’importanza che verrà data alla figura in questione.


fonti:
http://www.gestalt.it/
http://pro.html.it
http://www.idearium.org

diario di bordo, step 2

identità del sito
la mia tesi di laurea “google: come ha cambiato l’approccio e l’uso del www”
penso ad un layout semplice a fondo bianco (facilita la lettura, mi piace, sul bianco si può costruire di tutto)
i brand da usare saranno quelli di google, di Lxweb, quello che creerò per la tesi
google si porta appresso un’idea di colore che mi piace assecondare
marchi in alto compresi nella testa del sito
barra di navigazione principale a sx , barra di navigazione secondaria a dx
piede da usare per info di routine

IA discovery
definizione dell’utenza ed aspetti comunicativi
i professori in prima battuta ma poi –si spera- anche altri individui che potranno trovare interessante consultarla, ma indubbiamente i primi fruitori in questo momento mi interessano di più.
Anche se la grafica si permetterà delle divagazioni anche simpatiche il tono di scrittura sarà ovviamente serio quanto basta. La parte primaria potrà essere scritta in modo meno sintetico di quanto normalmente si concede ad un sito sia perché dovrà contenere la tesi sia perché per la navigazione veloce si userà la guida al sito. Visto che il target è fatto di persone dotate di una elevata cultura, che sicuramente conosce le problematiche di cui parlerò di certo sono avvantaggiata nella scrittura, si tratta inoltre di persone capaci di cercare e dotate della sana curiosità di chi è abituato a ricercare quindi non servirà ragionare ‘a prova di cretino’ come normalmente si fa quando un sito viene dato in pasto ad una molteplicità più variopinta.

gli obiettivi del sito
dimostrare che l’uso di google ha modificato i comportamenti degli utenti della rete, partendo dalle analisi sul medim di mcluan
rendere la cosa interessante


l’attività di benchmarking
mi devo andare a cercare un po’ di tesi, anche per vedere come gli altri hanno presentato loro stessi ed i loro lavori, non nutro grandi speranze di trovare qualcosa sul mio argomento in quanto ho già fatto un bel po’ di ricerche con risultati nulli.

IA analysis& architecture
inventario dei contenuti
breve storia di google
il funzionamento di google
osservazioni della mutazione del comportamento dei fruitori del net dovuto all’uso di google
fonti : chi ha già osservato simili mutamenti e ne ha scritto; autori, citazioni
mie deduzioni personali al riguardo

gerarchia
1. storia
1.1. storia
1.2. i numeri di google
2. funzionamento
2.1. aspetti tecnici del funzionamento
2.2. deontologia
2.3. la pubblicità e google
2.4. classificazione dei risultati
2.5. crawlers
2.6. page rank
3. osservazioni
osservazioni empiriche sul mutamento comportamentale
4. fonti
4.1. studiosi che hanno lavorato su questo argomento
4.1.1. loro deduzioni/pubblicazioni
5. deduzioni
5.1. incrocio tra le osservazioni empiriche e gli studi precedentemente svolti
5.2. mie personali deduzioni
6. credits&contatti
6.1. elenco di persone che hanno reso possibile questa tesi
6.2. contatti
7. bibliografia&sitografia
7.1. elenco di fonti bibliografiche
7.2. elenco di fonti web
8. content map
mappa dei contenuti
9. guida al sito
breve sguardo sul sito per sintesi, utile alla presentazione frontale della tesi

flussi informativi
i flussi informativi principali sono tre:
barra di navigazione primaria (punti da 1 a 5)
barra di navigazione secondaria (punti 6-9)
guida al sito
inoltre ovviamente tutti le citazioni linkeranno sia alla sezione fonti che a quella bibliografia e sitografia
content map (organizzata in ordine alfabetico) sarà un insieme di link dalla content verso il sito per agevolare chi stesse cercando qualcosa di particolare.

aspetti grafici
Come detto sopra layout basato sul bianco e colori vivi usati in contrasto. Le parti di puro testo con un font chiaro e leggibile blu o nero, alternanza di un font bastoncino con uno dotato di grazie. Grafica vettoriale e immagini bmp e pochissime (forse neanche quelle) fotografie.
Grafica con figure geometriche giocate più sui colori che sulle forme.

usabilità ed accessibilità
La cura per l’usabilità sarà posta nella semplicità di navigazione, nell’uso di colori e forme guida, nella omologazione del layout di tutte le sezioni del sito. Di grande aiuto per l’usabilità sarà la content map.Riguardo all’accessibilità il sito verrà sviluppato in area web safe (760x420), farò uso corretto degli attributi alt e title e anche di long description ove necessitassero, inoltre farò uso di tutti gli attributi delle tabelle che le rendono accessibili (e.g. summary, thead, tbody, tfoot ecc ecc). Saranno di ausilio i Css. I caratteri verranno utilizzati in base proporzionale.

Usability and Accessibility

Usabilità
Lo standard ISO definisce così l’usabilità: “la misura in cui un prodotto può essere usato da determinati utenti per raggiungere determinati obiettivi con efficacia, efficienza e soddisfazione in un determinato contesto d'uso”

Però data la giovane età del mezzo a cui ci riferiamo – il web – di fatto non esistono linee guida ben stabilite per creare siti usabili. Sicuramente c’è da distinguere l’usabilità dal buon web design che di per sé non fa di un sito un sito usabile. I siti necessitano di essere progettati perché siano usabili, l’opera di web design viene dopo nel processo di costruzione di un sito. In un sito usabile l’utente naviga bene pur non conoscendolo e trova tutte le informazioni che sta cercando senza dare particolari contributi personali per la comprensione di link e similari.Banalmente la barra di navigazione deve stare sempre al medesimo posto in tutte le pagine, lo stesso dicasi per tutti gli altri tasti funzionali. Le icone utilizzate (i.e. per la stampa, per cambiare pagina ecc ecc) saranno sempre le stesse, i colori di riferimento per ciascuna area del sito saranno anche loro sempre gli stessi. Si deve sviluppare un modello che poi si applica all’intero sito, ovviamente per sviluppare questo modello necessita una ampia riflessione sulle modalità d’uso del target ed è consigliabile una somministrazione in corso d’opera per potere apportare i giusti correttivi cammin facendo.

I padri dell’usabilità
jakob nielsen
donald norman
bruce tognazzini
jeff raskin, il papà del mac

Accessibilità
Il glossario delle Web Content Accessibility Guidelines del W3C definisce così un contenuto accessibile: “Un contenuto è accessibile quando può essere usato da qualcuno con una disabilità”.
I motivi per cui questa area è molto attenzionata al momento sono molteplici: morali, legali e anche ovviamente economici. Infatti se ci pensiamo bene i motori di ricerca sono i primi utenti non vedenti del web. Al riguardo ho trovato una cosa che mi piace citare, scritta da Kartsen M. Self –io l’ho trovata sul sito del w3c-:"The Kiss of the Spiderbot : Google is, for all intents, a blind user. A billionaire blind user with tens of millions of friends, all of whom hang on his every word. I suspect Google will have a stronger impact than [laws] in building accessible websites.". Mi pare renda bene il concetto.
Riguardo all’accessibilità in molti paesi del mondo inizia a nascere una normativa specifica. In genere sono regole a cui si devono attenere gli enti pubblici (o le web agency che lavorano per loro) nella creazione dei loro siti web. La norma più famosa al momento è quella degli States, la Section 508. In Italia c’è qualcosa di simile: Circolare 13 marzo 2001, n. 3/2001: “Linee guida per l'organizzazione, l'usabilità e l'accessibilità dei siti web delle pubbliche amministrazioni”.

I padri dell’accessibilità
david clark
andrew kirkpatrick
joe clark


Usabilità vs. Accessibilità
Creare un sito accessibile non necessariamente significa creare un sito usabile. Infatti quand’anche, per esempio, un sito sia corredato di tutti i testi alternativi necessari e siano stati immessi gli ordini di tabulazione ecc.; se, di partenza, l’impostazione del sito non lo rende usabile –cioè se gli utenti non riescono a trovare le cose che cercano o se la navigazione non è intuitiva- non lo sarà neppure avendo tutti i requisiti di accessibilità.
In sintesi le caratteristiche di usabilità ed accessibilità sono differenti e sono due ‘standard’ a cui ci si deve adeguare quando si progetta e costruisce un sito web; entrambi necessari nessuno dei due sufficiente.

L’attenzione dei webdesigner riguardo ai problemi di accessibilità
Chi fa siti ovviamente deve tenere conto di una serie di variabili che possono dipendere dagli utenti e che possono compromettere l’accessibilità ai siti.
Per citarne alcune:
- versioni diverse di browser
- settaggi diversi dei browser
- monitor a risoluzioni differenti
- velocità di connessione ad internet
- uso di user agent diversi dai browser tradizionali
- uso di devices diversi da un pc per la connessione ad internet

In tutti i casi sopra citati, ed in molti altri ancora, perché tutti gli utenti possano vedere nello ‘stesso’ modo un sito web chi lo progetta deve utilizzare alcuni accorgimenti.

L’annosissimo problema delle versioni diverse di browser è abbastanza al termine, infatti da quando tutti i produttori hanno aderito al web standards project i browser supportano tutti abbastanza bene gli standard dei vari linguaggi di markup e programmazione. Negli anni passati era veramente difficile che un sito che si vedeva bene in IE4 si vedesse altrettanto bene in Netscape 4. Ma questo per fortuna è passato. Soprattutto affidandosi ad Xhtml 1.0 transitional e facendo un corretto uso dei CSS (sia esterni che importati) si riesce a risolvere il problema della visualizzazione su browser diversi visto che i produttori hanno ormai deciso di conformasi appunto agli standard.

Il problema dei settaggi del browser (almeno per ciò che riguarda pulsanti, barre, caratteri) vanno abbastanza a braccetto. Infatti sono due variabili che influenzano la dimensione ‘fruibile’ del video. Il problema si risolve utilizzando quella che si chiama web safe area (la massima area disponibile su un browser, prima che venga aggiunta la scroll bar), che ovviamente va calcolata per ciascuna risoluzione video.
Ecco alcuni esempi:
risoluzione 640 per 480 safe area 600 per 300
risoluzione 800 per 600 safe area 760 per 420
risoluzione 1024 per 768 safe area 955 per 600
Oggi si progetta considerando la risoluzione 800 per 600 come standard inferiore.
Per ciò che riguarda i caratteri all’interno delle pagine web è importante definire sempre un font generico di riserva, nel caso in cui il font utilizzato non sia residente sul pc dell’utente; per ciò che riguarda la dimensione dei caratteri è consigliabile usare le unità em (1 em equivale all'altezza media di un carattere per un dato font), che essendo una unità di misura relativa consente all’utente di vedere in termini relativi le differenze di corpo tra i caratteri stabilite da chi ha scritto la pagina usando come base ciò che da lui è settato.
Riguardo alla velocità di connessione ad internet con la diffusione delle linee adsl a basso costo moltissimi riescono ad accedere ad internet ad una velocità accettabile, tuttavia esistono ancora utenti modem e moltissimi utenti gprs. Quindi bisogna tenere conto della pesantezza (in kb) delle pagine da downloadare; scrivendo un codice pulito certamente si fa molto tuttavia ove necessiti l’uso di immagini (per esempio il sito di un fotografo) alleggerire i siti non è sempre facile. Ci possono essere varie alternative come : dare una preview delle immagini e fare scaricare la versione a più alta definizione (o di dimensione maggiore) dall’utente secondo una sua precisa scelta oppure creare una versione light del sito.
Il problema dell’accessibilità dei siti consultati attraverso user agent diversi (i.e. screen reader, browser testuali, ma anche i crawlers dei motori di ricerca, ecc) o attraverso devices come palmari, telefoni cellulari di nuova generazione ecc, il discorso è più complesso. Innanzitutto i testi alternativi sono imperativi, è altrettanto importante usare i tag tipografici corretti (i.e. strong al posto di bold o emphatize al posto di italic) che possano consentire una lettura appropriata; si deve fare uso di long description per tutte quelle immagini che lo richiedono, bisogna prevedere l’ordine di tabulazione per accedere alle diverse parti delle pagine e per muoversi dentro le barre di navigazione. Ovviamente si deve parlare di layout con CSS puro o misto. Tutti questi ed altri accorgimenti permetteranno di navigare il sito anche in assenza di mouse, permetteranno ai reader di interpretare correttamente il testo e così pure ai browser testuali.

Come rendere accessibile una tabella: gli attributi summary, caption, col, colgroup, th, thead, tbody, tfoot

summary
lo scopo di questo attributo è fornire una descrizione completa della tabella (struttura e contenuto). Il contenuto di summary non viene riprodotto dai browser grafici infatti è destinata a user agent non visuali.

caption
è l’intestazione della tabella o se vogliamo una sua sintetica descrizione

th, thead, tbody, tfoot
sono tutti tag che consento di individuare gruppi di righe di una tabella (rowgroup). Vediamo come:
thead (table header) definisce una cella contenente le informazioni di intestazione, è la parte iniziale della tabella
th definisce le celle che stanno dentro al thead quindi dando informazioni su ciascuna riga e/o colonna della tabella (di default il contenuto di queste celle sarà grassetto e centrato). th dunque aggiunge un contenuto strutturale.
tfoot è il piede, cioè la fine della tabellam ma contrariamente a ciò che si potrebbe pensare non sta fisicamente alla fine della tabella, bensì prima di tbody di modo che il browser facendo il rendering del codice possa tenere conto della parte iniziale e finale della tabella.
tbody è ovviamente il corpo della tabella con il contenuto vero e proprio

colgroup, col
servono per la formattazione delle colonne, colgroup ci permette di formattare un certo numero di colonne insieme mentre useremo col –all’interno di colgroup- quando desideriamo attribuire più esplicitamente lo stile ad una colonna.

Definizione di browser
Differenze tra browser tradizionali, browser solo testo, screen-reader e altri web user agents.
Un web browser è un programma che consente la navigazione del www, esso interpreta il linguaggio di markup e lo visualizza sotto forma di ipertesto. Quando si parla di web browser si intendono i browser visuali. I più diffusi oggi sono: IE della Microsoft, Mozilla (in particolare nella sua variante Firefox), Netscape Navigator e Opera.

Browser solo testo
I browser testuali di solito lavorano sotto Dos o sotto consolle Linux, come si intende sono browser che leggono solo il testo, ci si sposta dentro le pagine con i tasti freccia, con invio e con il tab. Il più famoso browser testuale oggi è Lynx.

Screen reader
I lettori di schermo sono dei programmi –che normalmente si eseguono all’avvio del pc- che consentono agli utenti non vedenti o ipovedenti di avere il controllo del sistema operativo. Questi programmi trasformano in voce il testo che appare sullo schermo consentendo l’interattività. Il più famoso oggi é Jaws.

Altri user agent
possono essere i crawler (o spider) dei motori di ricerca, i bot, che comunque leggono le pagine web come un utente non vedente in quanto si tratta di programmi residenti su internet i quali si interfacciano con il resto del mondo del www leggendo i testi e di certo non vedendo le immagini. Di contro se si desidera che questi programmi non leggano i nostri siti o parti di essi è possibile controllarlo attraverso il “Robot Exclusion Standard” che non altro che un file residente sul sito che indicherà dove non è gradito l’accesso.

Palmari, telefoni cellulari di ultima generazione, ecc.
Questo tipo devices ha delle evidenti difficoltà di visualizzazione delle pagine web. I problemi sono svariati: le ridotte dimensioni dello schermo, il minore numero dei colori, la più bassa velocità di navigazione e sicuramente la minore potenza di calcolo.
Ovviamente hanno altri vantaggi come la tascabilità e di conseguenza l’enorme trasportabilità. In ogni caso sono molto utilizzati e quindi bisogna tenere conto anche delle esigenze di lettura di questi dispositivi (come illustrato in questa stessa ricerca al paragrafo web designer e accessibilità).

Utilità dei CSS per l’accessibilità
I fogli di stile ci vengono molto in aiuto per applicare a media specifici o a gruppi di media formattazioni specifiche ed adatte a loro. E’ possibile definire all’interno di un foglio di stile le categorie generiche di media a cui quel dato foglio di stile è applicabile, a parità di markup possiamo quindi rendere ‘leggibile’ il nostro sito a user agent diversi. Ciò permette agli interpreti di evitare di recuperare fogli di stile inappropriati o di leggere in modo inappropriato una pagina web.

fonti:
http://www.theusabilitycompany.com/
http://www.html.it/
http://www.section508.gov
http://www.governo.it/presidenza/web/
http://www.webaccessibile.org/
http://www.wikipedia.org/
http://www.fucinaweb.com/
http://www.freedomscientific.com/
http://www.webxtutti.it/
http://www.mediamente.biz/