Web Usability I siti Web devono essere chiari e coerenti, devono permettere una navigazione semplice ed efficace, devono mantenere quello che promettono e non mettere mai in situazioni da cui non si sappia come uscire. Tutte queste cose concorrono a formare il concetto di "Web Usability" o usabilità dei siti Web. Bisogna puntare alla semplicità e concentrarsi sulle esigenze e gli obiettivi degli utenti, invece che sulle cose che fanno colpo. Progettare l’usabilità di un sito internet significa quindi applicare strumenti e tecniche che consentano al navigatore del sito di trovarsi in un ambiente piacevole e utile. L'usabilità può essere misurata valutando la velocità con cui viene raggiunto un obiettivo, il numero di errori, il dispendio di energia e la soddisfazione da parte di chi svolge il compito.Web AccessibilityA tal proposito il W3C ha dato vita al WAI (Web Accessibility Initiative), che espone le linee guida per l’accessibilità, che spiegano come realizzare contenuti per il Web di modo che siano accessibili a persone affette da disabilità. La loro applicazione consente di rendere disponibili i contenuti Web a tutti gli utenti, indipendentemente dal tipo di strumento di navigazione utilizzato. Secondo il W3C, il conformarsi a queste linee guida consentirà agli utenti di reperire sul Web informazioni in maniera più veloce.L’attenzione del web designer a riguardo dei problemi di accessibilitàProgettare e sviluppare siti web accessibili non significa rinunciare a qualcosa ma al contrario arricchire la pagina stessa con componenti che la completino e la rendano più adatta alla consultazione in qualunque circostanza.Per esempio, una pagina accessibile ai non vedenti non deve essere necessariamente di solo testo, può contenere immagini, grafici, tabelle, ecc., occorre però che le sue componenti destinate alla vista siano accompagnate da informazioni alternative.Naturalmente con problemi di accessibilità non ci si riferisce soltanto ai problemi che possono riscontrare i disabili. Un buon web designer nel progettare il suo sito web dovrebbe tenere conto anche di altri fattori, come per esempio il fatto che tutti gli utenti non possiedono lo stesso browser, non tutti dispongono di computer e connessioni di grandi capacità. Per esempio dovrebbe fare attenzione nell’inserire immagini o altri file di grande dimensione nelle sue pagine, in quanto ciò potrebbe rendere la loro visualizzazione abbastanza difficoltosa per utenti che non dispongono di connessioni a banda larga.Inoltre sarebbe buona norma, per un web designer quella di verificare la correttezza del codice delle proprie pagine web, attraverso per esempio dell’html validator messo a disposizione dal W3C, in modo da evitare che i browser non visualizzino elementi della nostra pagina.Come rendere accessibile una tabella:gli attributi summary, captino, col, colgroup, th, thead,tbody, tfootPer quanto riguardo le tabelle vi sono dei particolari attributi dedicato all’accessibilità. Ogni tabella può avere una didascalia associata (si veda l'elemento caption), che fornisce una breve descrizione dello scopo della tabella. Una descrizione più lunga può essere fornita anche (attraverso l'attributo summary ) a beneficio di coloro che usano programmi utente di tipo vocale o basati sul sistema Braille.Le righe di tabelle possono essere raggruppate nelle sezioni intestazione, piede e corpo rispettivamente attraverso gli elementi thead, tfoot, tbody. I raggruppamenti di righe trasmettono informazioni strutturali aggiuntive e possono essere riprodotti dai programmi utente in modi che evidenziano questa struttura. I programmi utente possono sfruttare la suddivisione intestazione/corpo/piede per supportare lo scorrimento delle sezioni del corpo indipendentemente dalle sezioni intestazione e piede.Inoltre è possibile anche raggruppare le colonne per fornire informazioni strutturali aggiuntive che possono essere utilizzate dai programmi utente. Gli autori possono dichiarare le proprietà delle colonne all'inizio della definizione di una tabella per mezzo degli elementi colgroup e co, in modo da consentire ai programmi utente di riprodurre la tabella in maniera incrementale, senza dover aspettare che siano stati ricevuti tutti i dati prima di cominciarne la riproduzione.Le celle di tabella possono contenere sia informazioni di "intestazione" (si veda l'elemento th) sia "dati" (si veda l'elemento td), per mezzo di questi attributi i programmi utente di tipo non visuale possono comunicare più facilmente all'utente le informazioni di intestazione riguardanti la cella.Per quanto detto fin qui le tabelle non dovrebbero essere usate come un semplice strumento per arrangiare visivamente il contenuto di un documento, dal momento che ciò può causare problemi nella riproduzione su media non visuali. Per di più, quando si usano insieme con immagini, queste tabelle possono costringere gli utenti ad usare la barra di scorrimento orizzontale, per riuscire a vedere una tabella progettata su un sistema con un video più grande. Per minimizzare tali problemi, gli autori dovrebbero usare i fogli di stile piuttosto che le tabelle per controllare l'aspetto della pagina. Definizione di browser: browser solo testo, screen-reader e altri web user agentsTanto per cominciare diamo una definizione di browser. Cos’è un browser? Non è altro che il software che utilizzate tutti i giorni per accedere ad Internet e di visualizzare le pagine Web. Tra glia altri sicuramente il più diffuso è Internet Explorer di Microsoft, ma questo non è l’unica ce ne sono altri, per esempio Netscape (che fra l’altro è stato il primo browser commerciale), Opera, Firefox (è un browser open source), ecc.Oltre a questi browser sopra citati, ce ne sono alcuni interamente dedicati agli utenti disabili, fra questi i browser solo testo e gli screen-reader. Gli screen-reader, o lettori di schermo, sono degli applicativi che disolito vengono eseguiti all’avvio del computer per consentire all’operatore non vedente di avere fin da subito il controllo del sistema operativo. Questi programmi trasformano in voce il testo che appare sullo schermo, uno dei più diffusi screen reader è il Jaws. Per quanto riguarda il browser solo-testo non fa altro che visualizzare solo il testo delle pagine web. Utilità dei CSS per l’accessibilità Come succede per le pagine html, anche per i fogli di stile c’è la possibilità di verificarne la correttezza del codice, attraverso il validatore offerto sempre dal W3C. Il validatore CSS oltre una lista di errori, fornisce anche degli warnings (avvertimenti): si tratta di suggerimenti che aiutano a migliorare l'accessibilità dei documenti, dunque consigliamo agli sviluppatori di risolvere anche i problemi segnalati da questi avvisi, non solo gli errori di sintassi veri e propri. L'ideale è ottenere dei CSS che al termine dell'analisi del validatore W3C risultino privi sia di errori sia di avvertimenti.I CSS sono inoltre utili all’accessibilità in quanto rendono le singole pagine web più leggere e meno confusionarie in quanto riducono il codice presente in esse, difatti tutte le informazione di layout e di struttura della pagina sono inserite nei CSS. Ciò cosa comporta? Ciò fa si che le pagine siano visualizzate più velocemente dagli utenti, inoltre risulta più semplice modificarle per un web designer.Creazione di una homepage usabile e la navigazione usabileCi sono modi migliori di costruire un sistema di navigazione usabile che non il semplice aggiungere link uno dopo l'altro al sito. Un sito di successo organizza l'informazione in un formato facile da usare. Per progettare un sito che lavori con e per i visitatori, l'intero schema di navigazione va costruito, partendo dalla loro prospettiva. La chiave di volta sta nell'identificare un critico punto di azione, dei punti di ingresso e dei punti di uscita.Un punto di azione è il luogo in cui vogliamo guidare i nostri utenti. Ci sono zone dell'ambiente web dove i visitatori possono interagire, acquistare qualcosa o ottenere finalmente l'informazione desiderata. Per identificare i punti d’azione bisognerebbe però prima chiedersi che cosa i visitatori vorrebbero fare durante la visita e creare una gerarchia delle priorità.Dal punto di ingresso gli utenti dovrebbero trovare percorsi chiari verso ogni punto di azione del sito. La home page può essere inteso come il primo punto di azione, il punto di azione di grado zero.I punti di uscita hanno molto a che fare con i punti di azione, per diversi motivi: nel migliore dei casi gli utenti escono dal sito perché hanno finito ciò che volevano fare nel punto di azione, o nel peggiore perché non sono riusciti in ciò che volevano. Scoperti i motivi per i quali gli utenti lasciano, si possono creare altri punti di azione dalle pagine di fuga allo scopo di trattenerli sul nostro sito. Un'altra strategia, nel caso che le cose siano andate bene è quella di cercare di instaurare un feeling post navigation (ripetere un invito all'iscrizione alla newsletter). Una della cose più importanti è tenere d'occhio i logs per capire quali sono i punti di uscita. Le Teorie della Gestalt La Gestalt è una teoria di pensiero nata in Germania tra la fine dell’ottocento e gli inizi del Novecento. Ciò che affermano i sostenitori di questa teoria è che la percezione di ciò che ci circonda non è la semplice somma di elementi e sensazioni primarie, bensì un'unità strutturata di esse. Esempio se accendiamo due differenti lampadine di un lampadario, ciò che percepiamo non è l’accensione di due lampadine differenti, ma piuttosto percepiamo una sola luce che apparentemente passa da una posizione all'altra. Dunque la nostra percezione dell'evento risulta essere molto differente dalla semplice somma dei fenomeni che lo compongono presi separatamente, ciò che la Gestalt cerca di comprendere sono proprio le leggi o principi con cui strutturiamo le nostre percezioni. Conoscere questi principi può essere utile per disporre i veri elementi che compongono una pagina web. Ecco i principi della Gestalt:1) Vicinanza: all'interno di una stessa 'scena', gli elementi tra loro vicini vengono percepiti come un tutto. Nel design di una pagina web possiamo tener conto di ciò avvicinando gli elementi che sono concettualmente correlati e allontanando fra loro quelli che non lo sono.2) Similitudine: all'interno di una stessa 'scena' gli elementi tra loro simili per forma, colore e dimesione, vengono percepiti come collegati. Nell'impaginazione questo ha un riscontro molto comune: l'elenco puntato. Riutilizzare elementi, colori o simboli che visivamente collegano un'informazione ad un’altra aiuta a rendere accessibile e facilmente navigabile un sito.3) Chiusura: linee e forme familiari vengono percepite come chiuse e complete, anche se graficamente non lo sono. Questo principio ha molti riscontri nell'impaginazione. Primo fra tutti l'allineamento: organizzare lo spazio secondo linee e rettangoli invisibili aiuta il lettore a capire la strutturazione e l'organizzazione della pagina, per questo motivo, è sconsigliabile l'uso dell'allineamento centrato. Ci si può avvalere di questo principio anche per sfruttare 'virtualmente' lo spazio che realmente non abbiamo a disposizione, possiamo sfruttare anche lo spazio immaginato da chi guarda.4) Figura Sfondo: le figure vengono percepite prima di tutto dal proprio contorno, il resto viene inteso come sfondo. Questo principio si trasforma in grafica nel più famoso principio del contrasto, proprio perchè le figure vengono riconosciute grazie al loro contorno, più la figura sarà in contrasto con lo sfondo, più facile sarà riconoscerla e ricordarla, e maggiore sarà l'importanza che le verrà quindi data.
Post N° 10
Web Usability I siti Web devono essere chiari e coerenti, devono permettere una navigazione semplice ed efficace, devono mantenere quello che promettono e non mettere mai in situazioni da cui non si sappia come uscire. Tutte queste cose concorrono a formare il concetto di "Web Usability" o usabilità dei siti Web. Bisogna puntare alla semplicità e concentrarsi sulle esigenze e gli obiettivi degli utenti, invece che sulle cose che fanno colpo. Progettare l’usabilità di un sito internet significa quindi applicare strumenti e tecniche che consentano al navigatore del sito di trovarsi in un ambiente piacevole e utile. L'usabilità può essere misurata valutando la velocità con cui viene raggiunto un obiettivo, il numero di errori, il dispendio di energia e la soddisfazione da parte di chi svolge il compito.Web AccessibilityA tal proposito il W3C ha dato vita al WAI (Web Accessibility Initiative), che espone le linee guida per l’accessibilità, che spiegano come realizzare contenuti per il Web di modo che siano accessibili a persone affette da disabilità. La loro applicazione consente di rendere disponibili i contenuti Web a tutti gli utenti, indipendentemente dal tipo di strumento di navigazione utilizzato. Secondo il W3C, il conformarsi a queste linee guida consentirà agli utenti di reperire sul Web informazioni in maniera più veloce.L’attenzione del web designer a riguardo dei problemi di accessibilitàProgettare e sviluppare siti web accessibili non significa rinunciare a qualcosa ma al contrario arricchire la pagina stessa con componenti che la completino e la rendano più adatta alla consultazione in qualunque circostanza.Per esempio, una pagina accessibile ai non vedenti non deve essere necessariamente di solo testo, può contenere immagini, grafici, tabelle, ecc., occorre però che le sue componenti destinate alla vista siano accompagnate da informazioni alternative.Naturalmente con problemi di accessibilità non ci si riferisce soltanto ai problemi che possono riscontrare i disabili. Un buon web designer nel progettare il suo sito web dovrebbe tenere conto anche di altri fattori, come per esempio il fatto che tutti gli utenti non possiedono lo stesso browser, non tutti dispongono di computer e connessioni di grandi capacità. Per esempio dovrebbe fare attenzione nell’inserire immagini o altri file di grande dimensione nelle sue pagine, in quanto ciò potrebbe rendere la loro visualizzazione abbastanza difficoltosa per utenti che non dispongono di connessioni a banda larga.Inoltre sarebbe buona norma, per un web designer quella di verificare la correttezza del codice delle proprie pagine web, attraverso per esempio dell’html validator messo a disposizione dal W3C, in modo da evitare che i browser non visualizzino elementi della nostra pagina.Come rendere accessibile una tabella:gli attributi summary, captino, col, colgroup, th, thead,tbody, tfootPer quanto riguardo le tabelle vi sono dei particolari attributi dedicato all’accessibilità. Ogni tabella può avere una didascalia associata (si veda l'elemento caption), che fornisce una breve descrizione dello scopo della tabella. Una descrizione più lunga può essere fornita anche (attraverso l'attributo summary ) a beneficio di coloro che usano programmi utente di tipo vocale o basati sul sistema Braille.Le righe di tabelle possono essere raggruppate nelle sezioni intestazione, piede e corpo rispettivamente attraverso gli elementi thead, tfoot, tbody. I raggruppamenti di righe trasmettono informazioni strutturali aggiuntive e possono essere riprodotti dai programmi utente in modi che evidenziano questa struttura. I programmi utente possono sfruttare la suddivisione intestazione/corpo/piede per supportare lo scorrimento delle sezioni del corpo indipendentemente dalle sezioni intestazione e piede.Inoltre è possibile anche raggruppare le colonne per fornire informazioni strutturali aggiuntive che possono essere utilizzate dai programmi utente. Gli autori possono dichiarare le proprietà delle colonne all'inizio della definizione di una tabella per mezzo degli elementi colgroup e co, in modo da consentire ai programmi utente di riprodurre la tabella in maniera incrementale, senza dover aspettare che siano stati ricevuti tutti i dati prima di cominciarne la riproduzione.Le celle di tabella possono contenere sia informazioni di "intestazione" (si veda l'elemento th) sia "dati" (si veda l'elemento td), per mezzo di questi attributi i programmi utente di tipo non visuale possono comunicare più facilmente all'utente le informazioni di intestazione riguardanti la cella.Per quanto detto fin qui le tabelle non dovrebbero essere usate come un semplice strumento per arrangiare visivamente il contenuto di un documento, dal momento che ciò può causare problemi nella riproduzione su media non visuali. Per di più, quando si usano insieme con immagini, queste tabelle possono costringere gli utenti ad usare la barra di scorrimento orizzontale, per riuscire a vedere una tabella progettata su un sistema con un video più grande. Per minimizzare tali problemi, gli autori dovrebbero usare i fogli di stile piuttosto che le tabelle per controllare l'aspetto della pagina. Definizione di browser: browser solo testo, screen-reader e altri web user agentsTanto per cominciare diamo una definizione di browser. Cos’è un browser? Non è altro che il software che utilizzate tutti i giorni per accedere ad Internet e di visualizzare le pagine Web. Tra glia altri sicuramente il più diffuso è Internet Explorer di Microsoft, ma questo non è l’unica ce ne sono altri, per esempio Netscape (che fra l’altro è stato il primo browser commerciale), Opera, Firefox (è un browser open source), ecc.Oltre a questi browser sopra citati, ce ne sono alcuni interamente dedicati agli utenti disabili, fra questi i browser solo testo e gli screen-reader. Gli screen-reader, o lettori di schermo, sono degli applicativi che disolito vengono eseguiti all’avvio del computer per consentire all’operatore non vedente di avere fin da subito il controllo del sistema operativo. Questi programmi trasformano in voce il testo che appare sullo schermo, uno dei più diffusi screen reader è il Jaws. Per quanto riguarda il browser solo-testo non fa altro che visualizzare solo il testo delle pagine web. Utilità dei CSS per l’accessibilità Come succede per le pagine html, anche per i fogli di stile c’è la possibilità di verificarne la correttezza del codice, attraverso il validatore offerto sempre dal W3C. Il validatore CSS oltre una lista di errori, fornisce anche degli warnings (avvertimenti): si tratta di suggerimenti che aiutano a migliorare l'accessibilità dei documenti, dunque consigliamo agli sviluppatori di risolvere anche i problemi segnalati da questi avvisi, non solo gli errori di sintassi veri e propri. L'ideale è ottenere dei CSS che al termine dell'analisi del validatore W3C risultino privi sia di errori sia di avvertimenti.I CSS sono inoltre utili all’accessibilità in quanto rendono le singole pagine web più leggere e meno confusionarie in quanto riducono il codice presente in esse, difatti tutte le informazione di layout e di struttura della pagina sono inserite nei CSS. Ciò cosa comporta? Ciò fa si che le pagine siano visualizzate più velocemente dagli utenti, inoltre risulta più semplice modificarle per un web designer.Creazione di una homepage usabile e la navigazione usabileCi sono modi migliori di costruire un sistema di navigazione usabile che non il semplice aggiungere link uno dopo l'altro al sito. Un sito di successo organizza l'informazione in un formato facile da usare. Per progettare un sito che lavori con e per i visitatori, l'intero schema di navigazione va costruito, partendo dalla loro prospettiva. La chiave di volta sta nell'identificare un critico punto di azione, dei punti di ingresso e dei punti di uscita.Un punto di azione è il luogo in cui vogliamo guidare i nostri utenti. Ci sono zone dell'ambiente web dove i visitatori possono interagire, acquistare qualcosa o ottenere finalmente l'informazione desiderata. Per identificare i punti d’azione bisognerebbe però prima chiedersi che cosa i visitatori vorrebbero fare durante la visita e creare una gerarchia delle priorità.Dal punto di ingresso gli utenti dovrebbero trovare percorsi chiari verso ogni punto di azione del sito. La home page può essere inteso come il primo punto di azione, il punto di azione di grado zero.I punti di uscita hanno molto a che fare con i punti di azione, per diversi motivi: nel migliore dei casi gli utenti escono dal sito perché hanno finito ciò che volevano fare nel punto di azione, o nel peggiore perché non sono riusciti in ciò che volevano. Scoperti i motivi per i quali gli utenti lasciano, si possono creare altri punti di azione dalle pagine di fuga allo scopo di trattenerli sul nostro sito. Un'altra strategia, nel caso che le cose siano andate bene è quella di cercare di instaurare un feeling post navigation (ripetere un invito all'iscrizione alla newsletter). Una della cose più importanti è tenere d'occhio i logs per capire quali sono i punti di uscita. Le Teorie della Gestalt La Gestalt è una teoria di pensiero nata in Germania tra la fine dell’ottocento e gli inizi del Novecento. Ciò che affermano i sostenitori di questa teoria è che la percezione di ciò che ci circonda non è la semplice somma di elementi e sensazioni primarie, bensì un'unità strutturata di esse. Esempio se accendiamo due differenti lampadine di un lampadario, ciò che percepiamo non è l’accensione di due lampadine differenti, ma piuttosto percepiamo una sola luce che apparentemente passa da una posizione all'altra. Dunque la nostra percezione dell'evento risulta essere molto differente dalla semplice somma dei fenomeni che lo compongono presi separatamente, ciò che la Gestalt cerca di comprendere sono proprio le leggi o principi con cui strutturiamo le nostre percezioni. Conoscere questi principi può essere utile per disporre i veri elementi che compongono una pagina web. Ecco i principi della Gestalt:1) Vicinanza: all'interno di una stessa 'scena', gli elementi tra loro vicini vengono percepiti come un tutto. Nel design di una pagina web possiamo tener conto di ciò avvicinando gli elementi che sono concettualmente correlati e allontanando fra loro quelli che non lo sono.2) Similitudine: all'interno di una stessa 'scena' gli elementi tra loro simili per forma, colore e dimesione, vengono percepiti come collegati. Nell'impaginazione questo ha un riscontro molto comune: l'elenco puntato. Riutilizzare elementi, colori o simboli che visivamente collegano un'informazione ad un’altra aiuta a rendere accessibile e facilmente navigabile un sito.3) Chiusura: linee e forme familiari vengono percepite come chiuse e complete, anche se graficamente non lo sono. Questo principio ha molti riscontri nell'impaginazione. Primo fra tutti l'allineamento: organizzare lo spazio secondo linee e rettangoli invisibili aiuta il lettore a capire la strutturazione e l'organizzazione della pagina, per questo motivo, è sconsigliabile l'uso dell'allineamento centrato. Ci si può avvalere di questo principio anche per sfruttare 'virtualmente' lo spazio che realmente non abbiamo a disposizione, possiamo sfruttare anche lo spazio immaginato da chi guarda.4) Figura Sfondo: le figure vengono percepite prima di tutto dal proprio contorno, il resto viene inteso come sfondo. Questo principio si trasforma in grafica nel più famoso principio del contrasto, proprio perchè le figure vengono riconosciute grazie al loro contorno, più la figura sarà in contrasto con lo sfondo, più facile sarà riconoscerla e ricordarla, e maggiore sarà l'importanza che le verrà quindi data.