| L'architettura
web
è un concetto un pocchettino più complesso
ed evoluto del semplice design e creazione del sito se
il vostro intento è di offrire un sito web veloce,
appetibile, appiccicabile (sticky) ed ottimizzato sia
verso gli utenti, sia verso i motori e directory che per
i bot e crawler dei search engine.
Questo settore non intende smontare
il vostro attuale e personale concetto su come costruire
siti e le informazioni qui sono una miscela di farina
del nostro sacco basata su quasi 10 anni di esperienza
nel creare siti e concetti saputi e collaudati e studiati
ed analizzati da risorse professionali esistenti sull'argomento
in Internet.
Troverete idee e strategie che potrebbero
servirvi prima, durante ed anche dopo la fase della creazione
del vostro sito web e se il termine Web Site Architecture
(architettura di siti web) vi è nuovo, non spaventatevi.
Probabilmente adoperate già molti concetti di architettura
web senza rendervene conto ma è anche possibile
che non siete alla conoscenza di altri che potreste sfruttare.
Molti di questi concetti sono logici
e di buon senso e non sono da intendere come soluzioni
uniche ma ci auguriamo che troverete nuovi o diversi aspetti
sulla progettazione e creazione dei vostri siti web -
decidendo poi se adoperarne alcuni, molti o ignorarli
del tutto.
Ma non confondete l'architettura web
con il semplice creare siti web dato che chi solo crea
siti mettendo assieme il codice html è un muratore.
Chi invece ci ragiona sopra, analizza ed implementa tutto
quello che 'gira' attorno ad un sito web è un architetto
e non un muratore.
Architettura
di un sito - concetti da considerare ed implementare
La velocità
Il sito deve schizzare come un razzo e questo soprattutto
per la prima pagina.
Come si fa ?
Si fa essendo spartani.
Niente Flash, niente 10 gif animati, niente immagini giganteschi...
praticamente niente di niente.
Nessuno vi sta dicendo che dovete disegnare un sito orrendo
ma se usate il buon senso e la creatività, anche
con solo testo e qualche piccola immagine si possono fare
meraviglie per venire in contro al fattore velocità.
In ogni caso la prima pagina che l'utente vede del vostro
sito deve essere leggera.
Citando da un altro settore su questo sito:
"La homepage media carica
in 20/30 secondi (e c'è di molto peggio in giro)
- ma il navigatore medio è disposto a pazientare
solo per 15 secondi ed oltre il 70% degli visitatori di
siti web visitano solo la home page."
Altrettanto, avere pagine snelle ma
ospitate su un server che va come una lumaca morta non
è la perfetta soluzione per cui assicuratevi che
il vostro provider è in grado di offrirvi un server
veloce e non intasato.
Per cui: La home page,
(prima pagina del sito, il index.html, o altra porta d'ingresso
) deve caricare in meno di 15 secondi ed il server non
deve essere una lumaca morta.
Sul corso 'Web Manager nr. 1 - ottimizzare
siti per i motori' vi mostriamo alcuni strumenti disponibili
in rete gratuiti con i quali si può misurare la
velocità del caricamento delle vostre pagine web.
Possibilmente avrete qualche brutta sorpresa a quanto
il tempo di caricamento della vostra index.html.
Attirare l'attenzione
Oltre ad essere veloce, la prima pagina deve essere accattivante
al punto di far soffermare il visitatore.
Questo non necessariamente si ottiene solo con banner/immagini
grafiche ma anche con una headline accattivante di testo
che suscita immediatamente l'interesse del vostro utente.
Per cui: Captare subito
l'attenzione del navigatore
Captare immediatamente il
navigatore con una intestazione o un titolo
Una delle cose più importanti che potete mettere
sul vostro sito, o una delle peggiori che potreste trascurare
è il titolo o intestazione in cima alla prima pagina
del sito.
Non intendiamo il titolo del tag titolo.
Ma in cima al testo del corpo della pagina.
L'utente sarà pure incuriosito dalla frutta che
svolazza in un banner animato e la banana parlante nell'angolo
sinistro e forse avrà anche notato il titolo del
documento che dice 'Siamo gli unici al mondo' ma se non
gli sbattete in faccia il fatto che vendete banane tipo:
"Unico sito al mondo che vende banane"
è possibile che lui non avrà capito immediatamente
cosa vendete ed andrà altrove in cerca di banane
in rete.
Sembrerà banale ma questo concetto di far capire
al navigatore di cosa tratta il vostro sito e ignorate
anche da alcuni dei siti grandi appartenenti a società
megagalattiche.
Per cui: Il titolo delle
pagine deve descrivere a volo di cosa tratta il vostro
sito o quel settore.
Web Site-Stickyness, ovvero l'incollabilità come
in 'colla'
La stickyness indica quanto appiccicoso sia qualcosa ed
in questo caso si spera che la vostra prima pagina è
'piccicosa' abbastanza a trattenere il navigatore che
poi deciderà di proseguire al resto del sito.
Anche le altre pagine devono essere sticky - piccicose
-abbastanza da non perdere il visitatore per cui evitate
l'errore di molti che nella prima pagina del sito mettono
persino il lavastoviglie ma nelle pagine seguenti nemmeno
un paragrafo con titoletto.
Per cui: La prima ed anche
le altre pagine devono captare e trattenere il visitatore
Bel design, ma veloce e pulito.
No, non stiamo scherzando.
Vi abbiamo appena detto che la parola chiave è
'essere spartani' ed ora pretendiamo pure un bel design
?
Certo che si.
Essere spartani nel senso che il sito non deve essere
riempito per forza con gigantesche grafiche (nemmeno quelle
fatte con lo splicing in Fireworks o Image Ready) con
gif animati e banner a 640x150.
Curate la quantità e grandezza delle immagini e
valutate seriamente il concetto del 'pulito'.
Per pulito intendiamo che le pagine non sono intasate
da link a destra, sinistra, nel centro, sopra e sotto
e che non ci siano finestre per la newsletter destra e
manca, ed immagini da per tutto.
(Se avete più di 2 gif animati su una pagina allora
siete solo dei muratori.)
Il fatto che molti portali o siti 'maggiori' hanno preso
questo concetto di dover per forza riempire zeppo pieno
la prima pagina non vuol dire che lo dovete fare anche
voi.
Prendete google.com come un buon esempio di 'pulito' e
netscape.com come esempio di 'un bel casino' e ricordatevi
che il design di pagine web non è più una
gara di chi riesce meglio ad animare sia la sbarra dello
stato, fornire rollover su ogni centimetro quadrato dello
schermo ed aggiungere pop-up automatici a non finire.
.
Questione di leggibilità e del pulito
Uno dei metodi migliori e di buon senso per ottenere
un buon design è con lo sfondo bianco e testi in
nero, o se preferite lo sfondo chiaro e testi scuri. Svariati
sondaggi citati sui tantissimi siti dove ci siamo documentati
per molte informazioni qui riportate dicono che dai loro
sondaggi risulta ancora che il navigatore si trova meglio
con testo nero su sfondo bianco. Almenochè avete
una ragione particolare evitate sfondi neri e testi gialli,
rossi o bianchi dato che questi ricordano i primi siti
di massa in rete ... quelli porno, che non erano molto
ben disegnati.
Abbinamenti di queste tonalità oggi danno un senso
di poca professionalità se non addirittura di qualcosa
quasi illegale.
Per verificare questo fattore - lasciate stare i sondaggi
o quello che pensiamo noi e navigate un po' sui siti più
conosciuti e maggiori - ricordandovi di notare il colore
del testo e dello sfondo che loro usano.
Per cui: Piacevole aspetto
bilanciato con maggiore 'pulizia'.
Qualità e chiarezza al posto
di pagine zeppe di roba che nessuno andrà mai a
vedere e si sentirà solo confuso dalle 457 scelte
che gli offrite.
Coerenza e scrivere bene o almeno meglio di noi
Come pulizia si intende anche il scrivete bene. (io --Pete
-sono inglese -per cui sebbene riceverò con curiosità
commenti sulla mia pessima grammatica italiana - li apprezzerò
solo dopo che mi fate vedere il vostro sito in versione
inglese fatto da voi - ed anche al top nei motori -- ok?)
Scrivere bene non vuol dire essere Leopardi o Montanelli
sebbene non nuocerebbe, ma significa esporre chiaramente
il vostro messaggio in modo coerente.
Se in prima pagina avete scritto che il resto del primo
paragrafo prosegue sulla pagina 'x' o quella del link
associato, allora assicuratevi che su quella pagina il
paragrafo prosegue coerentemente da dove ha finito in
prima pagina.
Tra altro, di nuovo citando diversi sondaggi, il font
(il carattere) più leggibile sullo schermo è
ancora Arial e Helvetica o altri simili senza i seriffi.
Noi su questo abbiamo qualche dubbio ma in questo caso
abbiamo scelto i san serif usando fogli css.
Per cui: Esporre con chiarezza
e visibilità il vostro messaggio.
Immagine gif di sfondo ?
No, Nein, Niet, Ne, Nic, Nada, ....nun sha dha fà!
Come si naviga e come offrire
una buona navigazione ?
Non basta avere un link da una pagina all'altra e sperare
che l'utente sappia o abbia voglia di usare sempre il
bottone 'indietro'.
E non illudetevi che l'utente sappia aprire i link in
una nuova browser window per conto suo.
Per cui come si fa ad offrire
una buona navigazione ?
Beh come vedete noi abbiamo optato per il concetto che
molti dei nostri link aprono per default una nuova finestra
e questo per svariati ragioni strategici tra i quali il
fatto di non costringere l'utente di dover tornare sempre
indietro.
Tornare sempre 'back' è più lento che far
caricare nuove pagine da un link ed averli sotto mano.
Ma serve anche a non forzare l'interruzione di una lettura
con link nel testo che fanno sparire la pagina che uno
sta leggendo se cliccati.
Non stiamo dicendo che sia la soluzione migliore dato
che ogni tanto qualche utente si lamenta del fatto che
poi ha troppe finestre aperte, ma in ogni modo è
proprio così che noi navighiamo.
E Voi ?
Ovvero... se voi andate su un motore di ricerche ed ottenete
una lista lunga dei risultati dalla vostra ricerca con
diverse link ai siti che cercavate - non vorrete raccontarci
che cliccate uno per uno perdendo la pagina del motore
nel passaggio ?
Poi quando avete finito di navigare quel sito che fate?
Digitate di nuovo il nome del motore ed iniziate la stessa
ricerca da capo ?
Se navigate così - auguri e figli maschi.
Comunque, noi abbiamo fatto questa scelta e probabilmente
voi avete un vostro sistema collaudato per cui usate quello
che va meglio per voi.
STOP!
'Quello che va meglio per voi'?
Nah, questo è un errore tipografico e dovrebbe
leggere:
'QUELLO CHE FA PER I VOSTRI
VISITATORI'
Testare il sito
Sul forum digilist di tanto in tanto i membri si recensiscono
a vicenda i siti web ed oltre ad essere divertente per
alcuni e meno per altri, in genere il parere è
che questo scambio di 'favori' è utile non solo
per verificare concetti di design sui siti recensiti,
ma anche di trovare errori come link errati, pagine che
non caricano ed altro. Per cui fatevei navigare il sito
da qualche amico o meglio da più di due persone
per avere opinioni sinceri sulla navigabilità che
offrite ed alla quale vorrete poi sottoporre l'utente
torturandolo in svariati modi che lo costringono a rinunciare
a visitare tutto il sito.
Quello che dovrebbe apparire essenziale è che
l'utente abbia sempre l'opzione di tornare all'indice
principale, che se questo non viene usato come lancio
delle altre pagine (che rimane in sfondo) anche le altre
pagine dovrebbero contenere tutti i link ai settori principali,
possibilmente sopra che sotto se non avete una sbarra
di navigazione fissa a destra o a sinistra in ogni pagina
Per cui: Per indovinare
un buon sistema di navigazione, ricordatevi PRIMA come
VOI ed i vostri amici navigate e non come VOI CREDETE
che il visitatore al vostro sito DEVE navigare per forza.
Congruità dei link
da per tutto
Congruità del design complessivo del sito dovrebbe
essere ovvia ma pare che per molti non lo è a quanto
riguarda i link del sito.
Questi possono essere in forma grafica tipo bottoni o
link testuali o ancora pop down menu.
Se avete deciso di differenziare tutti i link sul sito
con un particolare colore fatelo per l'intero sito e non
solo su 10 di 25 pagine.
Nel caso che decidete di creare dei link senza la sottolineatura,
che sono collocate al di fuori di un ovvio contesto di
navigazione come un menu o sbarra di navigazione, assicuratevi
che sono ben distinte dal resto del testo.
Peggio di una pessima navigazione è costringere
l'utente a dover fare una caccia al tesoro per cercare
i link.
Idem per le grafiche che fungono come link... assegnate
a queste un'aspetto almeno vagamente simile in tutte le
pagine ed evitate rollover multipli con grafiche che si
animano in tre diversi posti quando l'utente passa su
un bottone.
Per cui: Congruità
dei link = essere simili in aspetto al quale l'utente
si può abituare velocemente.
Congruità generica
Sappiamo che tra di voi ci sono i svariati Leonardo, Dalì,
Gieger, e Picasso ma come spesso questi sono stati miscompresi
dalle masse, rischiate di esserlo anche voi se oltrepassate
troppo i confini tra 'quello per le masse' e 'quello per
la fantascienza'.
Se il resto del mondo si aspetta che il vostro sito sembra
simile ad un sito web come il resto del mondo se lo immagina
-dovreste creare il vostro sito secondo questo ideale
a non un portale della quinta generazione che solo voi
e la vostra cugina sapete navigare.
Se il resto del mondo usa un'immagine di un carrello per
indicare che quello è il carrello, allora usate
un'immagine di un carrello anche voi e non ri-inventate
la ruota (o il simbolo del carrello).
Per cui: Congruità
= la ruota è tonda? Allora fatela tonda o rotonda
ma non triangolare
Il 'Valore' della home page
- o la prima pagina
La home page che oggi nessuno intitola 'home page' è
la prima o seconda pagina del vostro sito che il navigatore
incontra ed è la faccia al mondo della vostra società
o del vostro progetto.
Curando bene questa prima pagina moltiplica l'intero
valore di tutto il sito e seguendo criteri di usabilità
come descritte in questo settore sarebbe molto saggio.
Se ci pensate, la homepage è l'immobile più
costoso sulla terra dato che ogni anno milioni di società
ne investono centinaia se non milioni di Euro, dollari
e Yen in uno spazio che non ha nemmeno la dimensione di
un metro quadrato.
Questo per buon ragione dato che la homepage è
la pagina più visitata del vostro sito ed un sito
web è come una casa con tante finestre e porte
dove si può entrare non solo dalla porta principale
ma anche da back-door, pagine gateway, siti satellitari
o 'ponte' ma in genere la index.html è la pagina
più visitata.
Se i visitatori arrivano al vostro sito tramite le altre
'entrate' allora anche quelle vanno curate come se fossero
la home page principale. Se sono interessanti -probabilmente
il navigatore vorrà vedere anche il resto del sito.
Ma attenzione, per motivi della SEO, la prima pagina
di un sito deve essere ottimizzata e avere alcuni criteri
ma più importante NON avere altri criteri per essere
top nei motori.
Tutto svelato sul corso WM1 ma ci limitiamo a dire che
la index.html è la pagina maggiormente ottimizzata
e solo la seconda pagina del sito dovrebbe fungere come
indice di navigazione.
Il vantaggio è che gli navigatori ormai sanno
questo per cui nella index.html ottimizzata basta metter
dei link ovvi tipo 'ENTRATA PRINCIPALE' e l'utente la
seguirà per arrivare appunto al index bello.
Per cui: La index.html
-o la pagina sottomessa ai motori deve essere ottimizzata
ma la vera indice - da dove i visitatori navigheranno
è la vostra faccia mattiniera al mondo. Vi lavate
la faccia a prima mattina ?
Cosa mettere nella prima pagina
Tra i gurù della usability (vedere useit.com)
c'è la convinzione graduale ma costante che nella
prima pagina del sito dovreste mettere solo le informazioni
più importanti in modo chiaro e pulito senza troppi
ingombri o troppe scelte.
Noi da diversi anni concordiamo assolutamente con questo
concetto per due motivi.
1). Chiarezza
Se l'utente vi ha trovato tramite i motori di ricerche,
(il 85% degli navigatori arrivano al vostro sito così),
è importante che A PRIMO SGUARDO, può vedere
le cose più importanti che voi avete da comunicargli.
Vendete banane a tre colori ? Allora annunciate questo
dettaglio per primo e poi aggiungete qualche strillo di
qualche novità o offerta.
Questo si chiama chiarezza e vi garantiamo che l'utente
l'aprezza.
2). Ottimizzazione
per i motori di ricerche.
Se avete una complessa prima pagina del sito ovvero quella
che contiene l'indice di navigazione principale del vostro
sito, con le novità e possibili cambiamenti fatti
spesso e che magari potrebbe essere costituita anche da
un frame set - fate in modo che non sia la prima pagina
che l'utente, ma soprattutto i bot, crawler e spider dei
motori incontrano.
Create un'altro indice primario.
Ovvero:
la prima pagina serve per acchiappare sia l'utente, con
info precise e pertinenti, ma serve SOPRATUTTO per essere
ottimizzata per i motori.
Allora la pagina con tutta la roba principale, navigazione,
newsletter, banner ecc. diventa la seconda pagina che
l'utente incontra.
Noi (e speriamo anche voi) ottimizziamo la prima pagina
(index.html) soprattutto per i motori di ricerca CON ESTREMA
CURA, ed è un lavoro più arduo che molti
di voi credono ... (vedere corso "Web Manager nr.
1- ottimizzare siti per i motori")
Una volta passato giorni nell'ottenere una indexPERFECT.html,
ci piace non rovinare il lavoro eseguito con qualche aggiornamento
veloce del contenuto dove possibilmente guastiamo qualche
settaggio creato solo per i motori.
Avendo dunque una prima pagina che è ottimizzata
per bene, preferiamo poi avere una seconda pagina principale
il index2.html ( ovviamente avrà un nome diverso)
dove possiamo darci alle pazze gioie con gli aggiornamenti
e javascript vari, persino averla sotto forma di un frameset.
In questo secondo index principale possiamo guastare
poco durante qualche veloce aggiornamento a quanto i settaggi
ed il tuning ai quali è stata invece sottoposta
la prima pagina del sito.
Per cui: Nella prima
pagina mettiamo chiarezza, e tutto quello necessario per
la ottimizzazione per i motori. Il menu principale di
navigazione, box per newsletter e banner pubblicitari
vanno in seconda pagina.
Cosa includere nella index
secondaria ? (a pur di ripeterci)
Con index secondaria non intendiamo la 'homepage' ma la
seconda pagina del sito dal quale l'utente potrà
fare scelte di navigazione e visitare il resto del sito.
Questi seguenti fattori dovrebbero
fare parte delle
offerte di navigazione e del contenuto del sito:
1). Ripetere il titolo
della vostra attività o dello scopo del
sito.
Non necessariamente ripetere la headline dalla homepage
ma di nuovo sbattere in faccia al navigatore di che tratta
il sito o cosa vende. Ovviamente non dimenticare di dare
anche un nome al documento pertinente (title tag)
2). Una mappa del sito
se il sito è più grande di 25 pagine.
Questo non solo aiuta l'utente che si è perso o
si scoccia di navigare per tutte le pagine ma aiuta anche
i bot dei motori di ricerca dato che se promossa bene
questa pagina della mappa del sito che sarà piena
di link alle altre pagine è probabile che il motore
inserirà diverse pagine del vostro sito nei suoi
indici.
3). Una
sezione FAQ (domande chieste spesso) dove elencate
le domande più probabili che i vostri utenti hanno
posto o che voi pensate potrebbero chiedere, con le apposite
risposte.
Questo potrebbe essere anche una strategia commerciale
del tipo
Domanda: "Perchè le vostre banane costano
più del triplo che altrove ?
Risposta: "Perchè sono prodotte senza i gas
minerali (nocivi alla salute) che molti produttori usano
per velocizzare il loro sviluppo"
oppure
Domanda: "Perché i vostri corsi sono molto
costosi ?"
Risposta: "Non sono per nulla costosi se paragonati
a corsi intensivi o privati o presso istituti professionali
sullo stesso argomento che costano il triplo e l'utente
dopo tre giorni non ricorda più nulla - e se vogliamo
essere sinceri - nessun'altro in Italia produce corsi
di qualità e formato come noi (ora potete odiarci
un' po se ci tenete)
4). L'opzione di poter fare
ricerche sul vostro sito, ovvero un search engine
interno. Ci sono molti siti che offrono questo servizio
gratuitamente ma si può anche fare con javascript
o php se avete o siete un discreto programmatore.
Per siti che vanno oltre i 50 pagine è una funzione
che danni non farà.
5). Informazioni sulla vostra
società, dove siete e come contattarvi.
L'utente probabilmente non cercherà per prima queste
informazioni ma è utile fornire accesso ad un settore
dove offrite informazioni sulla vostra società
o sul vostro intento se non siete una società.
Tipo "Info su banane.com" oppure "Chi sono"
o "Perchè questo sito". ecc.
6). Pagine 'stampabili' ,
ovvero pagine che l'utente vorrebbe stampare per le informazioni
contenute per cui se avete un settore interessante e indispensabile
che l'utente vorrebbe stampare, tipo la pagina con le
istruzioni su come ordinare o usare il vostro prodotto,
allora create anche una versione solo testo per semplificare
la vita ai poveracci che poi se li vogliono stampare.
7). Non esagerare con la formattazione.
Almeno nella pagina della navigazione principale evitate
di intasare l'utente con troppa roba decorativa ed elaborata.
L'utente cerca i punti di navigazione quali gli permetteranno
di visitare il vostro sito per cui non rendete questo
più difficile per lui con box decorati, tabelle
multicolorate e un numero 'x' di diversi tipi di link
(bottoni, link standard, rollover, pop down, link ad apparsa
ecc).
Idem per le grafiche ed invece di mettere immagini belli
che credete abbelliscono la pagina mettete immagini che
hanno a che fare col prodotto o il concetto del sito.
Meglio immagini di persone reali fotografate da voi con
la macchina digitale tra i vostri amici e parenti che
immagini di bellissimi modelli e modelle presi dai cataloghi
stock.
Per cui: Rileggete l'intera
sezione appena letta !
Quanto devono essere lunghe
le pagine ?
Il 'nostro' design (di questo sito) è mirato ad
un pubblico particolare per cui ci siamo potuti permettere
di trasgredire alcune regole chiave di architettura web
ma comunque vi invitiamo di non fare pagine lunghe di
5 metri.
La norma riconosciuta è che almeno nella prima
pagina - il index di navigazione - non bisogna costringere
l'utente a scrollare giù.
Per cui tutto dovrebbe stare in una schermata del monitor.
(probabilmente quello di 17 pollici come media ).
Molti sconsiglino anche di creare tutte le pagine in
questo modo e se avete tanti prodotti o sezioni di informazioni
piccoli questo è facile da implementare ma se una
vostra sezione contiene tre metri di testo forse dovreste
valutare di spezzare un po'.
Valutate questo aspetto e guardatevi in giro.
Per cui: In genere, per
pagine che non necessitano molte informazioni, tenete
la loro lunghezza quanto una schermata di un monitor a
17"
Che cosa è un dunque
un sito che è stato architettato ?
Un insieme di fattori che non sono facili da azzeccare.
Per il navigante:
Piacevole di aspetto grafico
Veloce
Facile da navigare
Testi leggibili, chiari e pertinenti
Con contenuto che quel navigatore cercava
Informazioni utili che lo assistono durante la sua permanenza
(acquisto) sul sito
Per i motori di ricerca per
top posizionamento nei loro indici il discorso è
più complesso.
Molto diverso dal sito piacevole per il visitatore ma
le due cose, con un po' di fatica da parte del designer
e del web architect possono convivere.
Vedere corso "Web Manager nr. 1 - ottimizzare siti
per i motori" dove vi spieghiamo le tecniche per
ottimizzare un sito sia per i motori di ricerche (che
mandano i bot e crawler sul vostro sito) ed anche per
i recensori umani dei directory tipo Virgilio e Yahoo.
MA ANCHE PER IL VISITATORE.
Alla fine dei conti il web architect o chiunque sia che
deve provvedere all'appetibilità del sito deve
considerare un bilanciamento di vari fattori ma con la
focalizzazione unica di creare un sito che piace all'utente
ed anche ai motori di ricerche.
|
