Web Site Architecture e Design: Questo settore non è da confondere con un corso di web design o tutorial su web editor visuali e java script. Se desiderate corsi e tutorial su questi concetti visitate digitaly.net oppure webmasterpoint.biz.
Questa parte del sito contiene idee e strategie che pottrebbero 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. L'architettura web prende in considerazione molti fattori che vanno ben oltre il bel aspetto di un sito e qui ne acceniamo ad alcuni. Questo settore non intende smontare il vostro concetto personale su come costruire siti e le informazioni qui sono una miscela di farina del nostro sacco e concetti studiati ed analizzati dalle risorse più professionali esistenti sull'argomento in Internet. Abbiamo messo insieme molti di questi concetti logici e di buon senso e non sono da intendere come soluzioni finali ed 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.
Architettura di un sito
La velocità
Una cosa avete sicuramente già capito, il sito deve schizzare come un razzo e questo sopratutto per la prima pagina.
Come si fa ?
Si fa essendo spartani.
Niente Flash, niente 5 gif animati, niente imagini giganteschi... praticamente niente di niente.
Nessuno vi sta dicendo che dovete disegnare un sito orrendo ma se usate il buon senso e fantasia, 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. La prima pagina potrebbe essere la index.html, una gateway, una back door o una pagina ponte.
Citando dal settore "Strategie per Web Manager":
"La homepage media carica in 20/30 secondi (e c'è di molto peggio in giro) - ma il navigatore medio è disposto a pazientare solo per 10 - 15 secondi ed oltre il 80% degli visitatori di siti web visitano solo la home page."Avere pagine snelle ma ospistate 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. Vedere webmasterpoint.biz per altri concetti di questo genere.
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. Scommettiamo che avrete qualche brutta sorpresa.
Oltre ad essere veloce, la prima pagina deve essere accativante al punto di far soffermare il visitatore. Questo non neccessariamente si ottiene solo con banner/immagini grafiche ma anche con una headline accativante di testo che suscita immediatamente l'interesse del vostro utente.
Per cui:
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 decide 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:
Cosa???!
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 (anche 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 dei principianti.)
Il fatto che la maggior parte dei portali Italiani 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 riccordatevi 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
.
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 riccordano 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 professionalita se non addiritura 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 - riccordandovi di notare il colore del testo e dello sfondo che loro usano.Per cui:
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 - 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 seguente o quella del link associato, allora assicuratevi che sulla nuova 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 la Helvetica usando fogli css.Per cui:
No, Nein, Niet, Ne, Nic, Nada, ....nun sha dha fà!
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 cui come si fa ?
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 da altri siti fatti in questo modo qualche utente si lamenta del fatto che poi ha troppe finestre aperte, ma in ogni modo è proprio cosi che noi navighiamo.
E Voi ?
Ovvero... se voi andate su un motore di ricerche e ottenete una lista lunga dei risultati dalla vostra ricerca ovvero diverse pagine di 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'
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 tre 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.
Tornando alla navigazione, 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 paginaPer cui:
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 differnziare 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:
Sappiamo che tra di voi ci sono i svariati Leonardo, Dalì, Gieger, 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 carello per indicare che quello è il carello, allora usate un'immagine di un carello anche voi e non ri-inventate la ruota (o il simbolo del carello).Per cui:
La home page che oggi nessuno intitola 'home page' (se lo fate andate QUI ) è la prima 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 sattelitari 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.Per cui:
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 comminucargli.
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). Ottimizazzione 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 sopratutto i bot, crawler e spider dei motori incontrano.
Create un'altro indice primario.
Ovvero:
la prima pagina serve per achiappare si 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) sopratutto per i motori di ricerche CON ESTREMA CURA, ed è un lavoro più arduoso che molti di voi credono ... (vedere corso "Web Manager nr. 1- ottimizzare siti per i motori")
Per cui una volta passato giorni nell'ottenere una indexPERFECT.html (vedere il nostro corso), 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:
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/o 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)
Questo potrebbe essere anche una strategia commerciale del tipo
Domanda: "Perchè le vostre banane costano più del tripplo che altrove ?
Risposta: "Perchè sono prodotte senza i gas minerali (nocivi alla salute) che molti produttori usano per velocizzare il loro sviluppo"
oppure
Domanda: "Perche 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 tripplo e l'utente dopo tre giorni non riccorda 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)
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.
Almeno nella pagina della navigazione principale evitate di intasare l'utente con troppa roba decorata 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:
Ripetendo per l'ennesima volta che 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 vi invitiamo di non fare la pagina iniziale del vostro sito come abbiamo fatto noi su questo sito.
Noi abbiamo adoperato una strategia esagerata per l'ottimizazzione per i motori di ricerche sia per i bot che per i recensori umani nella prima pagina che serve anche come esempio e viene analizzata pezzo per pezzo nel corso "Web Manger nr. 1 - ottimizzare siti per i motori".
La norma, ... e lo è anche sui nostri altri siti webmasterpoint.biz, dreamweaveritalia.com, flashitalia.com, digitaly.net, digitaly.com, e tanti altri, la norma riconosciuta è che almeno nella prima pagina 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 consigliano 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'.
Sui siti dei nostri altri corsi noi questo non l'abbiamo fatto nei settori dove c'è il contenuto dei corsi e la descrizione e altre informazioni sul lato sinistro.
Questo perchè volevamo che si legesse tutto in un fiato (e che fiato) e ci siamo sforzati di rendere la lettura anche 'colorata' più che potevamo per trattenete l'utente.
Non suggeriamo che voi fate altretanto ed infatti su altri nostri siti stiamo adoperando il concetto di una pagina quanto una schermata.
Valutate questo aspetto e guardatevi in giro.Per cui:
Una delle cose più importanti che potete mettere sul vostro sito, o una delle pggiori 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 apppartenenti a società megagalattiche.Per cui:
Un sito piacevole è un insieme di fattori che non sono facili da azzeccare ma sono:
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
Tutto qua.
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 Manger 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.Alla fine dei conti il web architect o chiunque sia che deve provedere all'appetibilità del sito deve considerare un bilanciamento di vari fattori ma con la focalizazzione unica di creare un sito che piace all'utente ed anche ai motori di ricerche.
test per webmanager ottimizzare siti web promuovere siti web strategie di webmarketing
inserire siti nei motori chi è il web architect chi è il web manager warmware-offrite/cercate un'esperto?
iscrivetevi alla nostra newsletter - senza spam e che PER ORA è gratis
Lavorando per voi:
Concetto, progetto, ideazione
by Pete da Beat...
...e digitaly.com
People with ideas for people with ideas
