progettare siti web,  seo spiegato, risorse seo  
Architetto o semplice Muratore ?


Progettare - Architettura Siti Web

Architettura siti web

Indice Principale sito

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.

  ©2000-2020 Digitaly - Pete da Beat  

site map