Quindi, in uno scenario in cui tutto è uniforme , è difficile distinguere degli elementi percettivi che possono servire da punti di riferimento.

L’uomo si impadronisce dell’ambiente attraverso delle strutture percettive guida, che vengono meno in uno scenario in cui tutto è uniforme. Per potersi muovere con disinvoltura ha bisogno di identificare dei punti di riferimento all’interno dell’ambiente che lo circonda, anche se magari questi non sono considerati a prima vista come fondamentali.

Vi pongo un altro esempio. Pensiamo a quando ci si mette alla guida di un auto con i vetri ghiacciati, dove abbiamo solo una piccola porzione di visuale a disposizione per vedere ciò che sta davanti a noi.

Sebbene noi vediamo dove stiamo andando, non sono visibili le configurazioni percettive che normalmente guidano i nostri spostamenti: il ciglio della strada, gli specchietti retrovisori, ecc. Questi elementi, che apparentemente in una situazione di normali condizioni riteniamo secondari, ci permettono di muoverci in sicurezza e senza di essi la nostra guida diventa pericolosa.

Voi direte ma che cosa centra questo con un blog che parla di web?

Questo contenuto iniziale è ripreso dal libro di psicologia generale scritto da Sergio Roncato, professore di psicologia generale all’Università di Padova, che mostra dei parallelismi molto stretti tra ciò che viviamo tutti i giorni nel mondo reale e le esperienze di navigazione nei siti web.

Molto spesso il modo in cui l’uomo si orienta nello spazio e negli ambienti del mondo reale è lo stesso in cui attualmente si orienta nel web: è possibile applicare metodi di information architecture per progettare spazi (qui qualche esempio interessante ) o usare i modelli mentali  per progettare interfacce web usabili.

Una strada diritta con tutte le case uguali, può essere comparata ad una pagina web dove non vi sono elementi in risalto. L’utente in questa pagina deve trovare il link che gli permette di soddisfare un suo bisogno: tutto è apparentemente uguale e da un esame veloce dell’interfaccia (ambiente) non si distinguono punti di riferimento in grado di aiutarlo. E’ quindi costretto a leggere tutte le etichette e le informazioni presenti (nomi sui campanelli) per trovare il link corretto (ingresso della casa dell’amico).

Credits: http://www.webalice.it/aekyoungkim/images/Labirinto_pilastro_Duomo Lucca.jpg

Per dare dei punti di riferimento all’utente ci sono diversi piccoli accorgimenti da prendere in considerazione:

• utilizzare font diversi a seconda dell’importanza dell’elemento (titoli, sottotitoli);
• usare sempre una titolazione di pagina;
• utilizzare le breadcrumbs;
• rendere linkabile il logo in alto a sinistra del sito con destinazione homepage;
• dare un menù di navigazione che permetta di vedere a primo acchito quali sono i contenuti del sito;
• ecc.

L’orientamento all’interno dell’interfaccia è fondamentale, ma spesso non viene agevolato da chi sviluppa il sito web: il perché è spiegato nel secondo esempio.

Un uomo alla guida crede che ciò che vede davanti a sé, ovvero la strada, sia l’unica cosa importante per espletare il suo compito, ma solo quando si trova in una situazione di visuale limitata capisce lo smarrimento e l’importanza di elementi secondari.

Allo stesso modo, chi lavora alla costruzione di un sito web può trovarsi involontariamente nella situazione in cui dà fin troppa importanza ad alcuni aspetti particolari del contenuto, a scapito di elementi secondari che sono invece fondamentali per gli utenti, per orientarsi ed avere una user experience soddisfacente.
Si finisce, quindi, per non tenere conto delle breadcrumbs o della coerenza dei font, e di controllare invece in maniera ossessiva e maniacale il copy, oppure l’impatto di colori di due immagini inserite in uno slideshow, ecc.

Sono sicuro che quasi tutti i lavoratori del web che stanno leggendo il post almeno una volta si saranno trovati in una situazione simile. La prossima volta, spero che queste considerazioni potranno essere utili. :-)

Il testo normativo che ha ispirato la progettazione di una nuova amministrazione digitale è il Codice dell’amministrazione digitale che promuove e regola la gestione, l’accesso e la fruibilità dell’informazione in modalità digitale, all’interno della Pubblica Amministrazione e nei rapporti tra amministrazione e privati.
Il documento è interessante per tutti gli utenti, dato che indica una prospettiva strategica con la quale la pubblica amministrazione dovrebbe relazionarsi al cittadino, in modo che venga garantita – cito – “la partecipazione diretta dei cittadini e la massima trasparenza nelle comunicazioni tra pubblica amministrazione e cittadini”.

Il documento prosegue indicando un vero e proprio cambiamento di paradigma: le Amministrazioni Pubbliche, allo scopo di migliorare la qualità dei loro siti web e quindi della loro comunicazione, devono avviare processi di controllo della qualità, per verificare il reale interesse e la comprensione dei cittadini nei confronti dei contenuti pubblicati.

Tornando al documento, non può non colpirmi un’affermazione iniziale che recita: ”Nell’ambito della pubblica amministrazione, la progettazione e la realizzazione di un sito web che intenda raggiungere gli obiettivi di efficacia, efficienza e customer satisfaction, che ogni amministrazione è chiamata a garantire, deve avvalersi di una metodologia che consenta la normalizzazione e la standardizzazione dei processi sulla base di regole condivise, in relazione alle diverse finalità istituzionali.”

Efficacia? Efficienza? Customer satisfaction? Si parla espressamente di usabilità!
Anzi si citano esattamente le metriche della norma ISO relativa all’usabilità. E finalmente direi.
Il documento non si ferma a citare vagamente l’usabilità come un criterio raccomandabile, ma anzi espone alcuni criteri di usabilità da considerare (nell’ambito del capitolo 4.3: Aggiornamento e visibilità dei contenuti) e caldeggia l’utilizzo di test di usabilità con utenti, sia per la razionalizzazione dei siti web, sia come strumento periodico di controllo.
Il documento cita esplicitamente anche la web analytics nel capitolo 4.7, relativo ai dati per il monitoraggio, e il “posizionamento” (cit.) nei motori di ricerca, come strumenti “per acquisire visibilità sulla rete in quanto possono consentire agli utenti di raggiungere direttamente i contenuti ai quali sono interessati.”
Il documento si spinge a ipotizzare una amministrazione 2.0, in cui Internet è la prima interfaccia del rapporto tra il cittadino e la PA..

La prospettiva indicata dal documento ci interessa molto da vicino: TSW da anni investe le proprie risorse in About User, divisione dedicata alla web analytics, all’usabilità e alla progettazione user centered, che ha l’obiettivo di indagare con precisione il rapporto che intercorre tra utente, i siti internet e la Rete più in generale.
Nel prossimo sito web di About User, che sarà online tra poche settimane, dettaglieremo per bene questo nuovo orizzonte di sviluppo.
Per ora posso anticipare che il tema della progettazione centrata sull’utente, che integra usabilità,  web analytics e anche SEO, è la strada che già abbiamo imboccato, ed è la prospettiva di cui evidentemente si sta dotando anche la pubblica amministrazione digitale.
Grazie a questo approccio, l’ente può comprendere:

• in che modo l’utente fruisce il sito,
• quali sono gli argomenti di maggiore interesse
• il grado di soddisfazione e la sicurezza che un utente prova quando si utilizza il sito.

Tuttavia, i rapporti che intercorrono tra utenti e mondo della Pubblica Amministrazione non sempre sono semplici; anzi, facendo riferimento proprio alla sfera legata ad Internet e all’utilizzo della Rete come mezzo di comunicazione, è importante che l’Ente possa contare su una consulenza legale qualificata per tutti i potenziali problemi legati a Internet quali:

• la valutazione in sede legale delle azioni obbligatorie nei confronti delle linee guida indicate, data la fluidità della materia e la vaghezza di taluni punti;
• la scelta di un’assistenza e consulenza sulle azioni da intraprendere nel caso di controversie con cittadini o associazioni in merito a materiali pubblicati nel sito, o piuttosto a commenti eventualmente lesivi o diffamatori verso l’ente.

Essere affiancati da specialisti nella realizzazione e nella a gestione di un sito web è di fondamentale importanza per un ente che voglia intrattenere rapporti positivi e di valore con i propri utenti.
Da parte nostra possiamo dire che siamo pronti!

Nel loro nuovo libro “Eyetracking Web Usability” Jakob Nielsen e Kara Pernice consigliano di prestare attenzione alla posizione che il contenuto occupa nella pagina.

Mappa delle priority areas. Le aree della pagina con sfondo rosa sono dedicate ai link di navigazione: profondamente diverse dagli altri contenuti in pagina, queste aree esulano dalla teoria delle priority areas.

Secondo la teoria delle priority areas è possibile assegnare ad ogni area della pagina una certa priorità o importanza.

L’area in alto a sinistra, immediatamente sotto il menu orizzontale, è la più indicata ad accogliere i contenuti più importanti per l’utente e/o per il business del sito.
Viceversa, in basso a destra andrebbero presentati contenuti a “bassa priorità”.

La regola riflette le aspettative dell’utente che, abituato agli schemi più standard del web, tende a considerare più autorevoli i contenuti posizionati sopra la piega della pagina, facilmente raggiungibili con il mouse e immediatamente visibili.

Astraendo e spostandosi dall’ambito web, è possibile pensare al template della prima pagina di un quotidiano, per la quale vale la stessa regola. L’area in alto a sinistra propone l’editoriale del direttore o un articolo d’opinione di un giornalista di rilievo. Le notizie più importanti sono presentate nell’area superiore della pagina (“taglio alto”).

Utilizzando questa metafora immaginiamo di voler dedicare un breve ritaglio di tempo alla lettura delle news del giorno. Su quali aree della prima pagina si concentrerà la nostra attenzione? Abituati al template standard, ormai entrato di fatto nel nostro modello mentale, osserveremo di sicuro il taglio alto della pagina.

Cosa accadrebbe se il quotidiano decidesse di stravolgere il template standard e di posizionare le news del giorno nel taglio basso, ove solitamente vengono presentate le notizie minori? Probabilmente, dopo aver consultato l’articolo di fondo e il taglio alto della pagina saremmo comunque in grado di trovare le informazioni che cerchiamo. Ma la nostra lettura ne risentirebbe profondamente, sia in termini di efficienza, sia in termini di soddisfazione.

Tornando al web, posizionare in un’area ad alta priorità i contenuti più utili, nuovi o più importanti per il business significa promuoverli e facilitarne l’individuazione. Aumenterà così l’efficienza e la soddisfazione dell’interazione utente-sito.

Viceversa, utilizzare un’area ad alta priorità per un contenuto poco importante o puramente grafico, significa perdere una grande occasione di business: se anche l’utente dovesse decidere di fare scrolling e guardare ciò che viene presentato sotto la piega della pagina, si troverà comunque a consultare un sito che non riflette le sue aspettative. La sua soddisfazione ne risentirà e implicitamente egli considererà meno attendibile ogni contenuto posizionato in un’area a bassa priorità. Approfondirà la navigazione e selezionerà il link solo se riterrà che esso sia l’unico elemento in pagina utile a soddisfare il suo bisogno informativo.

Ho provato a giocare un po’ con il layout di alcuni dei siti su cui abbiamo lavorato in passato per valutare la loro aderenza alla regola delle priority areas.

Ho dunque riprodotto con gli schemi mostrati di seguito il puro layout di alcune pagine dei siti indagati.
L’area della pagina in cui si applica la teoria delle priority areas è quella centrale, con sfondo bianco, distinta dall’area in rosa dedicata a menu e link di navigazione.
I contenuti effettivamente utili all’utente nel reale contesto d’uso indagato sono evidenziate in azzurro.

Come si vede dalle immagini, dall’analisi emerge che spesso l’area a più alta priorità è occupata da immagini, banner emozionali o caroselli promozionali, poco utili all’utente.

Questo effetto si riscontra anche nei siti di grandi aziende, che spesso premiano la creatività a discapito dei contenuti più orientati all’informazione o alla conversione.
Tale scelta non è sempre condivisa dagli utenti, che commentano per esempio: “La prima pagina è troppo lunga. Con 1 solo scorrimento devo poterla vedere tutta”.

Pur non trattandosi di una novità assoluta, questa teoria fissa un punto sempre molto importante: decidere a priori quali contenuti dovrebbe contenere una pagina web rispetto agli obiettivi che si pone, collocando gli elementi più importanti là dove le persone li andranno a cercare.

Oggi parliamo dei feed RSS. Largamente utilizzati nei blog e in molti altri siti, attraverso istruzioni XML permettono la diffusione di contenuti che vengono visualizzati in modo automatico dagli iscritti nei propri aggregatori (ne abbiamo parlato diffusamente in un post introduttivo).

Analizziamo ora gli aspetti più interessanti per l’incremento della visibilità del sito attraverso i feed RSS.

Ottimizzazione del title
Come per le pagine web, è possibile compilare il campo title e il meta description inserendo le chiavi di ricerca che rispecchiano il contenuto e sfruttare così alcuni tra i fattori più importanti per il ranking. Inoltre è possibile utilizzare il tag “language” per agevolare la corretta identificazione della lingua nel caso si abbiano feed RSS multilingua.
Anche per i feed RSS valgono i principi base della corretta ottimizzazione, tra cui evitare il keyword stuffing e la sovraottimizzazione.

Formattazione
I testi è bene siano presentati per intero nel feed, e non troncati, per fornire maggiori informazioni agli spider. E’ bene inoltre visualizzare un massimo di 10 nuovi articoli, per non inflazionare il feed e renderlo poco leggibile per gli utenti.
Per i siti che presentano notizie di diverso genere o si compongono di molte categorie, è consigliato predisporre una gestione multipla dei feed RSS, che permetta ai visitatori di scegliere l’argomento da seguire senza ricevere notizie non di loro interesse. La personalizzazione del logo apporta una diffusione del brand aziendale in modo semplice e poco invasivo.

Contenuti multimediali
Elemento di grande valore è la possibilità di inserire contenuti multimediali all’interno della pagina: file audio e file video chiamati “enclosures”. L’inserimento di questi contenuti apre la possibilità di iscrivere i propri feed in un largo numero di directory e motori di ricerca dedicati. Segnaliamo, inoltre, il formato Media RSS prodotto da Yahoo!

Submission
I siti che dispongono di feed RSS hanno la possibilità di diffonderli su my.Yahoo o my.MSN, per esempio, e permettere ai contenuti di nostro interesse di venire facilmente spiderizzati; inoltre c’è il motore di ricerca per blog Technorati.

Incremento dei link in entrata
L’importanza di avere link in entrata al nostro sito è ormai universalmente nota. In questo i feed ci aiutano: inserire link al nostro sito nei testi dei feed incrementa il numero di inbound link con conseguente potenziamento del PageRank e del traffico. E’ importante compilare i link utilizzando percorsi assoluti, cioè riportando per intero l’indirizzo della pagina web del nostro sito, perché altri siti possono includere i nostri articoli al loro interno, e deve essere garantito il corretto funzionamento dei link.

Avviso ai motori
Facciamo sapere ai motori che il nostro sito dispone di feed! Inserendo in ogni pagina dei nostri feed un codice molto semplice, l’Autodiscovery, si fa in modo di “bussare” alla porta dello spider alla pubblicazione di ogni nuovo articolo, e avvisarlo che può scansionarlo e rendere fruibili agli utenti i contenuti. Inoltre permette uno snellimento delle procedure di iscrizione al feed nel momento in cui si clicca l’apposito bottone.

Promuovere i Feed
Anni fa una semplice ma geniale idea permise a Microsoft di divenire il leader indiscusso per l’invio della posta elettronica: la frase e relativa funzione “Spedisci questo messaggio ad un amico…” ha permesso di far conoscere lo strumento a milioni di persone con un investimento pari a zero. Pertanto è utile inserire il bottone di iscrizione agli RSS nelle e-mail, nelle firme dei forum, ecc. nelle pagine dei profili dei social e media network, ecc.

Monitorare
Infine, ma non ultimo in quanto ad importanza, non dimenticate di monitorare l’iscrizione ai vostri feed RSS attraverso un software di statistiche: permette di capire il grado di interesse nei confronti dei vari feed, il modo in cui sono seguiti nel tempo e i cambiamenti nella frequenza con cui gli spider li visitano.

Nell’immagine gli accessi dei crawler alla sezione feed RSS del nostro blog (fonte dei dati: blog.tsw.it).

Che cos’è dunque il card sorting e quali problemi risolve?

Durante un card sorting, le persone coinvolte sono messe di fronte ad un certo numero di carte, una per ogni contenuto o funzionalità di un sito internet. Viene chiesto loro di ordinarle, raggruppandole nelle categorie più logiche ai loro occhi, e di dare un nome appropriato alle categorie così definite.

Obiettivo del card sorting è la creazione di un’architettura del sito che faciliti la “findability“, ovvero la reperibilità delle informazioni:

• indagando le relazioni esistenti tra i diversi contenuti del sito;
• definendo le diverse categorie di contenuti, e dando loro un nome che profumi d’informazione;
• creando un buon menu di navigazione e proponendo, al momento opportuno, i migliori contenuti correlati.

Un caso concreto di card sorting

Abbiamo condotto e analizzato un card sorting per il nuovo sito della European School of Economics (ESE), di cui TSW sta curando la progettazione e l’ottimizzazione SEO in fase di sviluppo.

ESE è una scuola di Economia che organizza corsi di laurea, post-laurea e Master.

Già dalla prima breve chiacchierata con il cliente, sono emersi i due punti di forza dell’università, da sottolineare nel nuovo sito:

1. La filosofia (già esposta nel libro “La scuola degli Dei” e nelle pubblicazioni su quotidiani nazionali) e gli eventi pensati dalla scuola per i suoi studenti.
   Domanda: come organizzare l’alberatura del sito per dare visibilità ai contenuti originali e meno istituzionali?
2. ESE ha sede in 5 prestigiose città del mondo; ogni studente può organizzare il corso su più moduli, iniziandolo a Milano e terminandolo, per esempio, a New York. I corsi, focalizzati su tutte le discipline connesse a business e management, sono aperti a studenti neodiplomati, neolaureati o lavoratori.
   Domanda: come rendere chiara questa possibile personalizzazione del piano di studi? Come fare sì che gli utenti trovino il corso più adatto a loro? Secondo quali criteri è bene organizzare i corsi sul sito (per sede, per livello di formazione, per materia)?

2 domande, 2 risposte:

1. Abbiamo progettato un card sorting focalizzato sui contenuti di tutto il sito web, per capire come creare un’adeguata alberatura dei contenuti generali.
2. Abbiamo condotto un secondo test, volto all’organizzazione dei soli contenuti relativi ai corsi.

Abbiamo pensato ad un test in remoto: circa 40 utenti italiani ed internazionali hanno completato il test in breve tempo, direttamente a casa loro.

Come è andata?

Il risultato del test sui contenuti generali è stato molto utile a definire un’architettura dell’informazione efficace: poche sono state le differenze di comportamento dei diversi utenti.

Viceversa, focalizzandosi sui corsi, ogni utente ha raggruppato le carte in modo diverso. I tre criteri di raggruppamento più logici, sono stati tutti equamente scelti!

Lato usabilità, non ho avuto alcun problema ad accettare questo risultato. La risposta degli utenti era eloquente: non esiste un criterio di categorizzazione univoco o semplice. Le caratteristiche di personalizzazione che ESE propone non sono sufficienti ad “ingessare” i corsi in un semplice menu di primo livello: serve un modo alternativo per facilitarne la ricerca!

About User, inoltre, collabora fianco a fianco a TSW, incaricata dello sviluppo e della SEO del nuovo sito ESE. E da qui lelotte intestine! Come spiegare ai colleghi che non esiste un criterio assoluto per organizzare i corsi nel menu di primo livello?

Ha sbagliato la letteratura?
Gli utenti non erano abbastanza numerosi (con pochi utenti è naturale ottenere dei risultati discordanti)? Per una controprova abbiamo provato a reclutare nuovi utenti. Procedendo nell’analisi, si confermava lo stesso trend!

Abbiamo quindi pensato di creare una struttura che rispettasse entrambe le esigenze, quelle della SEO e quelle dell’usabilità: un menu di primo livello che organizza i corsi per “formazione” (criterio scelto da appena più di un terzo dei partecipanti), unito alla proposta di uno strumento di ricerca alternativo, una sorta di meccanismo a faccette che guidi lo studente verso il corso per lui più indicato. Dove abiti? Vuoi studiare all’estero? Qual è il tuo titolo di studio? E così via.

E così abbiamo fatto pace :-)

Il risultato che ora aspettiamo è di fare contenti gli utenti del sito, i motori di ricerca e, speriamo, anche il cliente!

Anche perché l’uso di Dot Net è in notevole crescita per lo sviluppo di siti web, e se fino a qualche tempo fa i siti realizzati tramite tale tecnologia erano rari da trovare, ora si può dire che iniziano ad essere un numero rilevante.

Detto questo, vediamo quali sono le tecniche più utilizzate e più conosciute (da me :-) ) per la realizzazione dell’URL rewriting.

Isapi rewrite:
E’ un modulo di terze parti, dal costo di poche decine di euro, che ha bisogno di essere installato nel server dove risiede il sito.
Una volta installato ed abilitato all’interno del web server IIS (come riportato nella figura seguente), permette di lavorare con un file di configurazione da inserire nella root del sito.

La versione 2 del filtro Isapi Rewrite necessita di un file httpd.ini, con una sintassi proprietaria, mentre la versione 3 del filtro ha adottato una sintassi identica a quella del file .htaccess di Apache.
Per maggiori informazioni sul filtro Isapi Rewrite vi consiglio di consultare il sito del produttore, che contiene una documentazione completa ed è ricco di esempi pratici.

UrlRewritingNet.UrlRewrite:
Un altro modulo di terze parti, questa volta gratuito ed open source, è realizzato per Dot Net 2.0, ma testato con successo fino alla versione 3.5 del framework di Microsoft.
Tale modulo consiste in 2 DLL (URLRewrite.dll e UrlRewritingNet.UrlRewriter.dll) da includere nella sottocartella BIN dell’applicazione web, dopodiché all’interno del file web.config si dovranno creare le regole per la riscrittura delle URL.
Per maggiori informazioni consultate il sito ufficiale di questo progetto, dove è presente una ricca documentazione ed alcuni esempi di utilizzo.

HttpModule e gli HttpHandler:
Il framework Dot Net utilizza due moduli che possono essere utilizzati per intercettare le chiamate e conseguentemente gestirle secondo le necessità dettate dalla riscrittura: il modulo HttpModule e l’HttpHandler.
Per maggiori informazioni su questa tecnica vi consiglio di leggere l’articolo di Html.it o la risorsa disponibile all’interno dell’MSDN di Microsoft.

E voi, avete esperienze con queste o altre tecniche?

In questo ultimo periodo sono state davvero molte le novità nel rapporto tra Google e la tecnologia Flash.

Qualche mese fa è arrivata la notizia che ha fatto saltare sulla sedia il mondo dei SEO: Google ha annunciato in pompa magna di aver iniziato ad indicizzare i filmati flash.

In realtà l’indicizzazione di Flash ha dei limiti e l’assorbimento dei contenuti nell’indice di Google dipende molto dalla progettazione del filmato e dalle tecniche di sviluppo utilizzate: Google da solo non ha la bacchetta magica!

Inoltre nella sezione dedicata a Flash delle linee guida per i webmaster di Google sono state recentemente apportate delle modifiche e non appare più menzionata la tecnica SWFObject.

Viste le recenti novità, quindi, ho deciso di tracciare il punto della situazione dal punto di vista tecnico, elencando alcuni possibili approcci di sviluppo e progettazione di siti in Flash Search Engine Friendly, evitando di utilizzare navigazioni alternative o ‘versioni accessibili’ fatte esclusivamente per i motori di ricerca.

1- Le tecniche

Le tecniche principali che vengono utilizzate per rendere indicizzabili dei contenuti Flash sono due:

• SWFObject;
• SWFAddress.

1.1- SWF Object

SWFObject è un metodo di inclusione dei filmati Flash che si serve di una libreria Javascript: è una tecnologia compatibile con i motori di ricerca poiché offre la possibilità di fornire un contenuto alternativo del filmato agli user-agent che non possiedono l’interprete Javascript o non hanno il Plugin Flash installato (come ad esempio gli spider).

E’ bene sottolineare che per contenuto alternativo non si deve assolutamente pensare ad un contenuto appositamente studiato per i motori di ricerca, bensì ad una versione HTML degli stessi contenuti del filmato Flash.

Possibile applicazione di SWFObject

Applicare SWFObject su un sito che si sviluppa su un unico filmato Flash, contenuto in una sola pagina, consente applicazioni SEO piuttosto limitate. Infatti, tutto il contenuto alternativo sarà inserito in una sola pagina HTML.

Una possibile soluzione per un’indicizzazione ed una gestione ottimale del Flash lato SEO è l’utilizzo di SWFObject forzando la navigazione su più file HTML distinti. In sostanza la navigazione avviene su diverse pagine HTML, ciascuna delle quali carica un filmato Flash distinto, a cui corrisponde una versione alternativa accessibile.

Dal punto di vista grafico, però, questa soluzione presenta un problema: per ogni richiesta di un nuovo contenuto viene caricato un nuovo file nel browser, causando una breve transizione ad una pagina bianca. Si va così ad intaccare la resa grafica ed emozionale del sito, che è di solito il motivo principale per cui si opta per l’utilizzo di Flash.

Per ulteriori dettagli tecnici sull’implementazione, vi consiglio di leggere:

• Flash embed cage match di  Bobby van der Sluis – A list apart
• Documentazione tecnica di Bobby Van Der Sluis – Google Code

Pro:

• Ottimo rendimento lato SEO

Contro:

• Bassa resa grafica

• Corrispondenza contenuto alternativo: bisogna prestare attenzione alla perfetta corrispondenza dei contenuti, poiché si rischiano penalizzazioni o ban in caso di difformità.

1.2 SWF Address

È una libreria Javascript/Actionscript che ha il compito di implementare il deep linking all’interno di filmati Flash con URL distinte. Grazie ad essa è possibile linkare sezioni interne di un filmato Flash.

Inoltre, la libreria fornisce la possibilità di avere una doppia gestione dei contenuti, una lato Flash ed una lato HTML, sulla base di una corrispondenza tra URL. Le URL navigate da user-agent con Javascript attivi condividono l’indirizzo di una risorsa e sono distinguibili l’una dall’altra da un segnalibro (#).

www.miosito.net/filmato/#/azienda (fotogramma del filmato che parla dell’azienda)

www.miosito.net/filmato/#/prodotti (fotogramma del filmato di presentazione dei prodotti)

Le URL navigate da user-agent con Javascript non attivi (ad esempio spider) sono identiche, a parte l’assenza del cancelletto.

www.miosito.net/filmato/azienda (contenuto alternativo che parla dell’azienda)

www.miosito.net/filmato/prodotti (contenuto alternativo di presentazione dei prodotti)

Possibile applicazione di SWFAddress:

SWFAddress da solo non garantisce l’ottimizzazione SEO del filmato Flash (vedere ad esempio il sito Nike Lab): questo perché è necessario fornire al motore un contenuto alternativo da indicizzare. Questa tecnica può rendere al meglio se utilizzata in parallelo con SWFObject, in modo da fornire URL distinte e contenuto indicizzabile dai motori.

Questo approccio di sviluppo comporta uno sforzo in termini di progettazione e sviluppo davvero notevole, specie per siti complessi e di grandi dimensioni, ma appare una buona soluzione per ovviare al problema dell’incompatibilità tra motori di ricerca e filmati Flash garantendo un elevato grado di emozionalità.

Una possibile architettura di base si compone dei seguenti elementi:

Per ulteriori dettagli tecnici:

• sull’implementazione, vi consiglio di leggere questo utilissimo post di Roy Tanck: Making Flash Websites Search Engine Friendly, [via Petro];
• sul tracciamento di Flash con Google Analytics questo suggerimento tratto dalla sezione di Help. di Analytics

Pro:

• possibilità di fare SEO su siti Flash ad elevato tasso di emozionalità;
• Esperienza utente

Contro:

• Sforzo di progettazione ed implementazione;
• Link popularity limitata: i link verso contenuti interni, con il “#”,  vengono riferiti dai motori alla radice dell’URL, concentrando il passaggio di Page Rank verso la pagina principale del sito.
• Corrispondenza contenuto alternativo: bisogna prestare attenzione alla perfetta corrispondenza dei contenuti, poiché si rischiano penalizzazioni o ban in caso di difformità.
• Il tracciamento delle visite è reso difficoltoso, soprattutto per la registrazione dei referrer e della navigazione interna al sito, con problematiche diverse nei sistemi a log o a tag.

Schema riassuntivo delle tecniche e delle possibili applicazioni:

Quante volte avete sentito questa frase? Spesso non sono ancora chiare le attività che un buon consulente SEO può seguire durante la progettazione e sviluppo di un nuovo sito e soprattutto quali benefici sia economici che di risultati di visibilità può portare un approccio integrato.

Ma perché parlare di SEO fin dall’ideazione del sito?

Vantaggi

I vantaggi di questo modo di concepire il SEO sono davvero molteplici.

L’attività SEO in fase di progettazione di un sito web evita problemi di incompatibilità tra i motori di ricerca e l’infrastruttura tecnica del sito, scongiurando particolari situazioni critiche in cui un sito web non è visibile ai motori, a causa di approcci implementativi che non tengono conto delle limitate capacità di browsing degli spider e di alcune problematiche tecniche (ad es. Session ids, cookie vincolanti, ecc.).

Progettare un sito in ottica SEF offre la possibilità di curvare e modellare la struttura informativa del sito stesso in base alle potenziali ricerche degli utenti, creando le pagine che l’utente in target si aspetta di trovare quando utilizza il motore di ricerca, con l’obiettivo di soddisfare un suo bisogno di informazioni.

La progettazione di un sito orientata ai motori di ricerca, inoltre, soddisfa i principali requisiti di accessibilità ed è indice di attenzione per la qualità nella creazione dei siti web; permette inoltre di allargare l’audience grazie all’eliminazione di barriere tecnologiche che potrebbero precludere la navigazione a coloro che arrivano al sito.

Nei casi di cambiamento dei nomi delle URL può essere addirittura deleterio un intervento SEO a posteriori poiché senza un vero e proprio “piano di emergenza” potrebbero venir persi eventuali posizionamenti guadagnati nel tempo e quindi traffico in ingresso al sito.

Inoltre è indubbiamente un risparmio di tempo, in quanto è più semplice pensare e progettare un sito web già compatibile con i motori di ricerca, piuttosto di doverci “mettere una pezza” a posteriori, impiegando risorse e denari utili per altre attività di Search marketing, quali ad esempio l’analisi del traffico o l’incremento delle performance delle pagine in termini di conversioni, ecc.

Infine l’approccio a posteriori potrebbe creare rapporti non molto collaborativi con le web agency: se i suggerimenti SEO arrivano alla conclusione dei lavori potrebbero essere recepiti da parte delle agenzie di sviluppo come una ‘seccatura’, un lavoro inutile che occupa le proprie risorse per attività che non sono direttamente il loro core business.

Le fasi di un progetto integrato

Pensare ai motori di ricerca sin dall’inizio della creazione del sito non significa snaturare il flusso di lavoro di un progetto web classico, le fasi progettuali si integrano perfettamente con quelle che sono le esigenze SEO:

a) Condivisione linee guida SEO iniziali
Durante il primo incontro operativo tra agenzia web e cliente, la presenza di un esperto di SEO può servire per condividere fin da subito le linee guida per la costruzione di un sito web che piaccia ai motori e tentando di introdurre all’interno del team di lavoro la consapevolezza dell’importanza dei motori di ricerca per la vita del sito stesso.

b) Scelta di piattaforma e tecnologie di sviluppo (CMS, framework, ecc.)
La scelta di una piattaforma di gestione dei contenuti non dovrebbe prescindere dal SEO: in molti casi, infatti, adottare delle piattaforme di gestione dei contenuti già compatibili per i motori di ricerca permette di alleggerire di molto le fatiche delle fasi di progetto successive. Inoltre, in fase di sviluppo è necessario considerare che il motore di ricerca è un utente a capacità limitate e che alcune scelte implementative potrebbero precludergli l’accesso alle informazioni.

c) Consulenza per la definizione dell’Information Architecture
Pensare ai motori di ricerca durante la definizione dell’architettura delle informazioni può essere utile per creare contenuti dedicati agli utenti in target, ad esempio valorizzando informazioni non considerate core dagli altri player del team. Inoltre, sarà necessario prendere delle decisioni strategiche su quali aree del sito saranno coperte da autenticazione e quali saranno aperte a tutti e quindi anche agli spider dei motori di ricerca.

d) Piano editoriale
La condivisione del piano editoriale con chi si occupa di dell’ottimizzazione del sito è utile per valutare eventuali consigli e accorgimenti per creare contenuti dedicati agli utenti in target che utilizzano i motori di ricerca.

e) Sistemi di navigazione e funzionalità avanzate
Un altro aspetto di grande interesse per il SEO, direttamente connesso all’Information Architecture di un sito web, è la definizione di sistemi di navigazione che permettano una migliore performance in termini di posizionamento organico e di esperienza utente.

g) Design delle pagine
In fase di design delle pagine si devono soddisfare i requisiti minimi di usabilità non solo per chi effettua percorsi di navigazione tradizionali verticali (da Homepage a pagina “foglia”), ma anche per utenti che si muovono in modo trasversale provenendo dal motore di ricerca ed atterrando su pagine interne del sito.

h) Supporto durante l’implementazione del codice
Durante le operazioni di implementazione delle pagine web, è importante dare supporto allo sviluppo attraverso debug SEO continuativi e ripetuti, individuando preventivamente eventuali criticità e fornendo suggerimenti e consigli sui motori di ricerca.

i) Ottimizzazione title e meta description
Durante le operazioni di data-entry per l’agenzia SEM è giunto il fatidico momento…ebbene sì, è il momento delle keywords! :-)

l) Razionalizzazione struttura di in-links
Durante le fasi conclusive della progettazione del sito potrebbero essere necessari alcuni accorgimenti di progettazione per razionalizzare il flusso della spiderizzazione evitando di far indicizzare allo spider contenuti inutili non interessanti per i motori di ricerca.

m) Migrazione di dominio/URL
Nell’eventualità di migrare domini o cambiare la denominazione delle risorse con URL diverse è necessario pianificare un piano di redirezione delle pagine: un intervento tardivo, dopo la messa on line del nuovo sito, potrebbe infatti causare la perdita dei posizionamenti ottenuti in passato…un vero e proprio disastro!

n) Direttive per i motori di ricerca
Oltre agli interventi effettuati direttamente nel sito, è necessario attivare opportune procedure per aver un maggiore controllo della spiderizzazione con la creazione di file e profili dedicati esclusivamente ai motori di ricerca.

o) Debug
In fase di beta test e go-live saranno necessari una serie di master debug per verificare che sia il sito web sia “tirato al lucido” e che l’assorbimento del sito da parte dei motori di ricerca non mostri problemi.

Conclusioni

Visti i vantaggi di una buona visibilità e la crescente consapevolezza dell’importanza dei motori di ricerca nell’economia di un sito web, questa modalità di lavoro sta sempre più prendendo piede, e i primi segnali che il nostro lavoro non è percepito solo come ‘farcitura di keywords’ ci sono!

Il post parla di AJAX e Flash, andando ad esporre quali sono le principali barriere che questo tipo di tecnologie presenta per i motori di ricerca.

Resto tuttavia perplesso da un esempio esposto da Stephan Spencer riguardo la tecnologia a basso costo che propone di utilizzare per rendere spiderizzabile la tecnologia AJAX:

Here, progressive enhancement renders a non-Javascript version of the AJAX application for spiders and Javascript-incapable browsers. A low-tech alternative to progressive enhancement is to place an HTML version of your AJAX application within noscript tags (see TheCleanerMovie.com for an example).

In prima istanza non credo che questo sia un classico esempio di applicazione di tecnologia AJAX, piuttosto una semplice inclusione di un filmato Flash effettuata via Javascript che sfrutta file di testo per la visualizzazione dei contenuti.

Analizzando il sito proposto, noto che in realtà la navigazione è totalmente inclusa nel Flash e che un utente con Javascript attivato e plug-in Flash installata naviga sempre nella stessa URL , ovvero quella della pagina di ingresso al sito.

Inoltre l’inclusione del filmato avviene mediante il tag object e non attraverso la tecnica del SWFObject, che è quella maggiormente consigliata nella letteratura SEO.

In poche parole l’esempio di Stephan Spencer presenta:

• un sito alternativo in HTML pensato per user-agent che non hanno l’interprete Javascript attivo
• frammentato su URL diverse
• con contenuti non “speculari” tra le due versioni

Tecnicamente non mi sembra perfettamente in linea con le policy di Google poiché all’interno delle linee guida per i webmaster si afferma chiaramente:

Assicurati di fornire gli stessi contenuti in entrambi gli elementi (ad esempio, lo stesso testo in Javascript e nel tag noscript). L’inserimento di contenuti sostanzialmente diversi nell’elemento alternativo può provocare un intervento di Google sul sito.

L’utente naviga in una singola URL, mentre nel tag noscript viene presentata ai motori una struttura divisa su più pagine e dei contenuti che in realtà non hanno una stretta corrispondenza con le schermate del filmato Flash.

È vero che non esistono molti casi di siti in Flash o AJAX graditi ai motori ed in linea con le Google-policy (oltre allo stra-citato Amazon Diamond), però l’esempio scelto da Stephan Spencer non sembra particolarmente felice. Voi che cosa ne pensate?

Anche noi, a volte, ci siamo trovati nella situazione di dover rendere spiderizzabili contenuti Flash senza incappare nel rischio di penalizzazioni. Ad esempio, nel minisito di Jacuzzi Young abbiamo scelto, per maggiore semplicità di implementazione, di utilizzare per ogni URL un singolo filmato Flash con il relativo contenuto alternativo HTML. Avete anche voi degli esempi di siti AJAX o Flash SEF?

Ma partiamo dall’inizio…che cosa sono i tag?
I tag sono delle etichette che l’utente assegna a ciascun contenuto in base alla pertinenza o “vicinanza” dell’argomento trattato.
Ad esempio, una recensione di una nuova auto potrebbe avere associati i tag: “automobili”, “auto in uscita”, “novità automobili”, “recensioni”, “marchio dell’auto”, ecc.

I sistemi di navigazione basati sui tag, quindi, permettono all’utente di spostarsi tra i vari contenuti del sito tramite delle etichette che ne descrivono le caratteristiche.

Questi sistemi di navigazione, che hanno visto la loro diffusione con il boom del web 2.0, sono una valida alternativa di navigazione rispetto ai sistemi di navigazione tradizionali basati su una categorizzazione statica.

I modelli di navigazione a tag classici li potete trovare ad esempio:

• nei blog dove un utente sceglie l’argomento-tag di interesse e visualizza un filtro sui post che parlano dell’argomento indicato

• nei portali informativi, dove oltre alla navigazione classica vengono forniti dei percorsi di navigazione visuali basati su tag cloud o simili.

Oltre ad essere utile ed intuitiva per l’utente, la navigazione a tag in un sito può essere utile anche ai fini SEO per incrementare il traffico proveniente da motori. Per ottenere un effetto positivo sul posizionamento organico è necessario, però, prestare attenzione ad alcuni aspetti per far sì che questi sistemi di navigazione non si rivelino un’arma a doppio taglio.

I vantaggi:

Questo sistema di filtri può essere utilissimo ai fini SEO perché:

• una “taggatura” oculata produce pagine di vista che potrebbero ben posizionarsi nei motori di ricerca, e ampliare l’insieme di keyword di accesso al sito
• presenta contenuti interessanti per gli utenti che provengono dai motori di ricerca e offre un flusso di navigazione omogeneo motore-pagina del tag-risorsa di interesse
• incrementa la trama di link presente all’interno del sito web, rendendo le risorse interne più accessibili allo spider
• fornisce più alternative di accesso ai contenuti, aumentando i potenziali percorsi di conversione
• permette una migliore tematizzazione del sito
• permette di avere migliori chance di visibilità su social network basati fortemente sui tag, per es. Technorati

Le insidie:

Per far sì che la navigazione a tag non diventi una fonte “incontrollabile” di contenuti poco rilevanti per gli utenti e i motori di ricerca occorre prestare attenzione ad alcuni aspetti.

Il principale nemico-SEO dei tag è sicuramente il contenuto duplicato: perché una pagina web possa essere considerata rilevante dal motore di ricerca è necessario che essa contenga delle informazioni univoche, non replicate in altre pagine del sito o del Web. In caso contrario il filtro anti-duplicazione considererà la pagina poco rilevante, con un impatto negativo sul suo posizionamento. Se, ad esempio, in un blog due pagine relative a due tag distinti presentano gli stessi post sono considerate di fatto duplicate e poco rilevanti da parte dei motori.

Per l’applicazione di questo sistema di navigazione occorre, quindi, considerare il numero di contenuti presenti: non avrebbe senso introdurlo in un sito web che presenti poche pagine poiché si andrebbero a creare delle viste parziali poco rilevanti sia per gli utenti che per i motori. Bisogna, infatti, che i tag abbiano almeno 3 o 4 contenuti correlati ciascuno.

Anche la cattiva definizione dei tag può essere causa di contenuto duplicato: è bene non inserire sinonimi per poi classificarvi le stesse informazioni. In questo modo si andrebbero a creare delle pagine identiche che non sono ben viste dal motore di ricerca e non mettono a proprio agio l’utente.

Oltre ad una buona definizione dei tag, per scongiurare il rischio di contenuto duplicato è bene inserire del contenuto testuale ed altri elementi che caratterizzino la pagina e la facciano ritenere maggiormente rilevante da parte del motore.

Altro aspetto SEO da tenere in considerazione è la generazione automatica di meta tag e title che dev’essere fatta in modo da poter essere il più adeguata al contenuto della pagina possibile.
Esempio:
Abbiamo due pagine che parlano rispettivamente di padelle e barattoli.
È bene evitare regole che generino description del tipo:
Visita il nostro e-commerce e acquista i migliori padelle sul mercato.
Tutte le offerte di barattoli nel nostro sito.

Inoltre, se si decide di permettere agli utenti di taggare i contenuti, bisogna permettere l’inserimento di un determinato insieme di tag, definito in base ai contenuti del sito. È buona norma guidare sempre l’utente nell’operazione di tagging poiché si corre il rischio di avere termini simili che indicano lo stesso concetto, errori di inserimento e la conseguente generazione di pagine identiche molto frammentarie, che avrebbero un impatto negativo sia lato utente che lato motore.

Ad esempio:
Una pagina che parla di un servizio di piatti potrebbe essere taggata come:
piatti
piati
servizi piatti
servizio piatti
servizi di 24 piatti
servizi completo di piatti
ecc.

Vi siete mai imbattuti in questo tipo di navigazione? La trovate utile sia lato motore di ricerca che lato utente?