Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Microcontent, accessibilità e progettazione

Microcontent, accessibilità e progettazione

di Pietro Izzo, 04 Settembre 2003

Versione Stampabile


Progettare un sito non significa soltanto elaborare una proposta grafica e "tagliarla" in HTML o Flash: tutto ciò che sta a monte di questo processo è altrettanto importante. Più importante ancora, anzi, dato che coinvolge in ugual misura aspetti di content design, di net semiology, di marketing web e di accessibilità.

Nel processo di progettazione di un sito, considerato come un mezzo di comunicazione tra un realizzatore ed un utente che deve essere il più efficace possibile, acquista sempre maggior peso il cosiddetto microcontent. Appoggiandoci ad una facile metafora "organica", potremmo dire che la struttura delle directory e l'albero delle pagine di un sito ne costituiscono lo scheletro, mentre i contenuti sono la carne e i muscoli che su questo scheletro si sviluppano. E se la grafica e i CSS sono il vestito che "copre" il corpo (altrettanto importante, al fine di fare una buona impressione), i microcontent sono un po' come le vene e le arterie che portano il sangue nel corpo dei contenuti. Un sistema di circolazione.

Vediamo in che senso: per microcontent si intendono quegli aspetti prettamente testuali o di codice, come i meta tag, i title, gli alt text, i breadcrumbs, le tagline e i link di navigazione. Non insisto sul suggerimento quasi scontato di usare effettivamente questi strumenti (sono ancora troppi i designer che trascurano questi dettagli apparentemente poco utili). Il trucco per la buona riuscita comunicativa (e commerciale) di un sito è saperli usare bene.

Meta Tag

Si tratta di marcatori HTML che operano, come dice il nome stesso, a livello metalinguistico. Definiscono, cioè, proprietà particolari del documento HTML e non servono per formattare testo, inserire immagini o tabelle, etc. I meta tag sono tanti, e non è il caso di farne un elenco completo in questa sede. Quelli che ci interessano a livello di microcontent sono soprattutto due:

<META NAME="description" CONTENT="Descrizione del documento">
<META NAME="keywords" CONTENT="Parole chiave">

Anche se non è più sempre vero, l'uso accorto di questi meta tag garantisce un migliore posizionamento sui motori di ricerca. Non si insiste mai abbastanza sull'utilità di inserire una descrizione breve, incisiva e pertinente (es. "Surfweb. Un sito di surfisti per surfisti: tavole, spiagge, abbigliamento, raduni e informazioni meteo.") e una serie di parole chiave il più possibile estesa e dettagliata, iniziando con quelle più banali (es. "surf, onda, tavola…") e continuando con quelle più inusuali (es. marchi trattati di attrezzature e abbigliamento sportivo, etc). Va detto anche che è tipica l'abitudine di inserire questi meta tag nella sezione <HEAD> della home page del sito: un uso più raffinato prevede di inserirne di diversi in ogni pagina, differenziando così le possibilità di raggiungimento da parte dei motori di ricerca.

Title e tagline

Il tag <title> è assolutamente fondamentale nel progetto di comunicazione di un sito. Ciò che è contenuto in questo tag appare nella barra del titolo della finestra del browser. Non vogliamo che appaia semplicemente un nome, o peggio ancora nulla, e non vogliamo nemmeno che ogni pagina abbia un title incoerente rispetto al resto del sito. In caso di apertura e successiva riduzione ad icona di più finestre, il title è quello che ci aiuta a riconoscere la finestra di nostro interesse tra molte altre. Di più: se vogliamo avere un maggiore impatto comunicativo, il title dovrebbe essere seguito sempre da una tagline. Una tagline è un po' come uno slogan pubblicitario, la frase in coda al messaggio che fa "ricordare il prodotto". Continuando nel solco degli esempi fatti, un buon abbinamento title/tagline per il nostro sito di surf potrebbe essere "Surfweb - Informazioni sulla cresta dell'onda". Evitare come la peste title come "Benvenuti nel primo sito italiano dedicato al surf" o "Surfweb srl di Marino Maurizio" o "_^^_°°°Surfweb°°°_^^_".

Sarà comunque opportuno inserire una tagline solo nel tag <title> della home page. Nelle pagine interne è molto più utile ricordare, anche tramite il titolo, il percorso compiuto finora (es: "Surfweb - Meteo - Europa - Portogallo - Previsioni costa atlantica").

Alt Text

Il discorso sugli alt text (i brevi testi descrittivi che si devono accompagnare alle immagini inserite in una pagina) risale agli albori del web. Una volta si consigliava di inserirli sempre ad uso e consumo di chi non navigava con un browser grafico. Adesso gli alt text (per immagini, animazioni Flash e quant'altro) sono un'imperativo categorico. Non inserirli equivale a contraddire una delle regole più strette del W3C, la cui iniziativa sulla web accessibility (WAI) è ormai adottata dagli organismi governativi di tutto il mondo.

Realizzare un sito commerciale non ci esime dall'attenzione che va dedicata a questi aspetti del microcontent: è ovvio che ormai la maggior parte degli utenti naviga con browser grafici, ma molti sono i disabili che si fanno aiutare da browser vocali (interpreti del testo contenuto nelle pagine). Per questo motivo, ad una bella immagine di una tavola da surf in catalogo, andrebbe abbinato un alt text che suoni più o meno "Tavola Bic Sport Magnum 8'4'' bianca con motivo decorativo rosso".

La sintassi corretta, in questo caso, sarebbe:

<IMG SRC="bic_magnum_red.jpg" ALT=" Tavola Bic Sport Magnum 8'4'' bianca con motivo decorativo rosso ">

Link di navigazione e breadcrumbs

Può sembrare fuori luogo affermare che i link devono essere chiari e univoci, e che il testo linkato deve indicare correttamente all'utente dove andrà a parare. Ma non è così semplice. Se molti designer hanno smesso di inserire gli orribili "clicca qui", il concetto è stato subdolamente sostituito dai "go" o "vai" che spesso servono da collegamento alle pagine successive. Non è deprecabile in sé l'uso di queste parole, brevi e scattanti, ma il loro essere spesso decontestualizzate dai reali obiettivi della navigazione. E' sempre meglio linkare una frase come "Reportage dalle spiagge dell'Australia sud-orientale" e successivamente, se lo si desidera, insistere con un "vai" diretto alla stessa pagina. Il comunicatore più accorto inserirà sempre una breve descrizione di quello che il navigatore troverà nella pagina successiva, una volta cliccato il link in questione - come nell'esempio mostrato:

Reportage dalle spiagge dell'Australia sud-orientale
Surfweb era presente alla competizione annuale tenuta sulle spiagge di Sydney, Melbourne e della Tasmania - una cornice spettacolare per le evoluzioni dei campioni australiani che sembrano essere nati con la tavola ai piedi. Vai.....

E così arriviamo ai breadcrumbs, una relativa novità introdotta dai sistemi di content management o dai generatori di siti dinamici come PHPNuke o Zope, utilissimi però in qualsiasi caso. Letteralmente "briciole di pane", i breadcrumbs vogliono metaforicamente funzionare come le briciole di Pollicino: fanno sempre capire all'utente a che punto del percorso di navigazione si trova, e gli permettono di tornare indietro a qualsiasi livello senza perdersi. Un esempio tipico di breadcrumb potrebbe essere

Surfweb > Community > Piccoli annunci > Tavole > Vendita

dal quale risalire facilmente al livello

Surfweb > Community > Piccoli annunci

e successivamente rientrare tramite i link inseriti nella pagina ad un sottolivello successivo come

Surfweb > Community > Piccoli annunci > Raduni > Sardegna

Questo tipo di informazione (ridondante finché si vuole) può diventare un ottimo salvagente per chi non è familiare con determinati modelli di comunicazione: i sistemi citati li inseriscono di default in testa a tutte le pagine, ma non è una cattiva idea cercare di usarli anche se si sta lavorando tradizionalmente, compilando il codice a mano o con un editor visuale.

^Top

Dai un voto a questo articolo:   HITS: 1 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 1