20 CONSIGLI BASE SU COME STRUTTURARE UN SITO WEB

P.Y.G.

20 CONSIGLI BASE SU COME STRUTTURARE UN SITO WEB

L'usabilità è particolarmente importante per il vostro sito web. Non importa quanto è bello  o quanto  incredibile possa sembrare, se i visitatori non possono in modo rapido, semplice e divertente accedere e utilizzare i contenuti. Molti di essi potranno solo rinunciare e guardare altrove.

E allora come si fa e quali sono gli accorgimenti che rendono un sito semplice intuitivo e veloce per intuizione? Beh, siete fortunati, perché questo articolo dispone di 20 consigli di usabilità per il tuo sito. La tecnologia cambiera' sempre, cambiando così i metodi di  usabilità. Quindi assicuratevi di condividere i vostri suggerimenti e trucchi con il resto di noi.

1.STRUTTURARE IL VOSTRO BLOG IN BASE ALLA FREQUENZA DI AGGIORNAMENTO

Se realizzerete un sito con aggiornamenti poco frequenti , allora realizzerete un sito mirato alla grafica e al brand a cui si riferisce. Se invece dovrete realizzare una struttura con alto aggiornamento e mole di contenuti , allora dovrete realizzare una struttura mirata alla facilita' di utilizzo del retrosito da parte del cliente e non stravolgere i layout in base alla grafica ma viceversa.

2.METTERE IL LOGO IN ALTO A SINISTRA, MENUA DESTRA O SOTTO IL LOGO

Perchè questa disposizione? E' la convenzione standard accertata!  è ciò che gli utenti si aspettano dalla maggior parte dei siti Web.

Inserite il vostro logo in alto a sinistra, e mettere il menu sia a destra o sotto di esso -. Assicurarsi che il logo sia cliccabile e che  riporti sempre il visitatore alla tua home page.E' provato che è quello che la maggior parte degli utenti web si aspetta , quindi non c'è bisogno di essere creativi nel decidere dove posizionare questi oggetti, ma piuttosto come rappresentarli graficamente in un insieme grafico. 

3. AVERE LA RICERCA IN ALTO A SINISTRA O A DESTRA

E' importatntissimo , sopprattutto per i blog e siti con grossi contenuti, avere il box della ricerca in alto a destra o nella collonna di destra nella parte alta. Solitamente il visitatore ,quando si trova di fronte ad un sito con molti contenuti, utilizza il "box search" per accelerare la ricerca dei contenuti. Ricordate che agevolare il visitatore nella ricerca e navigazione dei contenuti è il nostro obbiettivo primario. 

4. REALIZZA LE TUE INFORMAZIONI DI CONTATTO O UNA FORM SEPARATA

I contatti sono importantissimi sia per la fiducia che il cliente riporra' nei nostri confronti, sia per farci contattare falcimente in qualsiasi situazione. I contatti possono essere inseriti come voce di menu, in alto nel breadcrumbs, nel footer oppure nella barra laterale.

5. FAI UNA PAGINA D'AIUTO,FAQ ECT...

Le pagine d'aiuto sono l'ultima spiaggia per cercare di riportare fiducia al visitatore nella navigazione e l'interazione del cliente con i contenuti. Quando un utente che visita il nostro sito si trova in difficolta', come in una qualsiasi altra situazione,  il primo istinto è quello di cercare in giro con lo sguardo  una via d'uscita per risolvere un problema. Dobbiamo quindi immedesimarci nel visitatore inesperto e pensare in quali momenti si possa trovare in difficolta' e in quale zona dello schermo cerchera' un'aiuto.... Se non lo trovera' il suo sguardo ricadra' sul tasto close della finestra del browser (cosa che dobbiamo evitare a tutti i costi che succeda). Quindi non date mai per scontato nulla nel vostro sito e fornite sempre un doppia via d'uscita.

6. USARE POCHE VOCI DI MENU O RAGRUPPARLI IN CATEGORIE

Il modo migliore per evitare di provocare una "paralisi" momentanea del visitatore all'ingresso del sito è gestire nel migliore dei modi i menu di navigazione. E' un pò come essere su una strada che non conosci: Se le indicazioni sono visivamente fatte bene e precise troveremo subito la strada verso la nostra meta, se invece i cartelli sono nei posti sbagliati e vengono omesse delle tappe di intermezzo , il raggiungimento della nostra meta sara' caotico e scoraggiante. Dobbiamo crearci assolutamente un "site-map" iniziale diviso in categorie principali e sottocategorie e una volta visualizzato e assimilato ci metteremo nei panni dell'utente che dovra' raggiungere una determinata area del nostro sito. Dovremo capire qual'è la strada migliore per arrivare a questa meta' e se ci sia la necessita' di passare attraverso a categorie principali e direttamente nell'area di interesse.

7. INSERIRE IL "CAMBIAMENTO DI STATO" NEI BOTTONI

Il rollover sui tasti e lo stato "attivo" su un bottone sono accorgimenti grafici di grande importanza non solo per la graficanestetica  in sè ma soprattutto perchè aiutano a capire quando un area è interattiva ( cioè clikkabile), e per capire in che area attualmente ci troviamo. Ricordatevi che fornire riferimenti all'utente di qualsiasi genere aiutano la navigabilità !

8. EVIDENZIARE BENE LA SELEZIONE DEI CAMBI INTERATTIVI

Quando un visitatore fa clic all'interno di un campo di un modulo bisogna evidenziarlo nel modo giusto per far comprendere al visitatore che il modulo si attiva e che lui potra' effettuare  delle azioni dentro ad esso.

9. COLORI DEI LINK IL PIU' VISIBILI POSSIBILE

Fate risaltare i colori dei link in modo che sia evidente che quel pezzo di testo è cliccabile.Questo è particolarmente importante e utile per le persone con problemi di accessibilità. Inoltre link ben visibili eviterano che il cliente si perda delle aree per lui magari fondamentali

10. MANTENERE UNA COERENZA PER TUTTO IL SITO

Eliminare le sorprese per i visitatori, evitando l' incoerenza grafica dei link e contenuti. Tenere il vostro sito quanto più coerente possibile per ( full-larghezza pagine vs sidebar-inclusi pagina): i colori, i colori dei collegamenti, la struttura, interfaccia, e dove gli elementi sono.

11. COSTRUISCI FORM INTUITIVE

Creare form interattive semplici e chiare. Le form da coplilare (che siano login o altre) sono sempre uno scoglio che l'utente non ama particolarmente. L'obbittivo principale in questo frangente è rendere la form veloce da compilare senza complicare la vita all'utente. L'unico modo è rendere piu' standar e comprensibili i campi della form. Ad esempio, il nome e cognome su una sola riga, città e lo stato / provincia su un altro, e così via. Inoltre, rendere chiari i nomi di ogni campo da compilare per non creare dubbi nel visitatore. Ingegnatevi sulla grafica ma cercate di mantenere layout standard per le vostre form per non spiazzare l'utente. Piu' la vostra form sarà simile ai layout comuni (come regitrazioni a domini mail ect...) più l'utente si sentira' sicuro e compilerà in modo veloce e corretto la vostra form.

12. AGGIUNGERE UN  BREADCRUMBS NELLA PARTE SUPERIORE

Aggiungere un "breadcrumbs" nella parte sotto il logo è un passaggio quasi fondamentale per la navigabilità del sito. Grazie a questo strumento l'utente avra' sempre sott'occhio lo storico delle pagine da cui proviene e avere sempre ben chiaro in che area e categoria è in un determinato momento. Solitamente nel lato destro del nostro "breadcrumbs" possiamo aggiungere tasti social, box cerca e molti altri piccoli bottoni utili  interattivi.

13. ESSERE "Window Shopper"- FRIENDLY

Cerchiamo di ottimizzare la visualizzazione per il cliente fornendogli maggiori informazioni possibili in una sola visualizzazione. Ad esempio se avete dei box dove presentate un prodotto non limitatevi nella foto e descrizione. Così facendo obbligherete il cliente ad entrare nell'oggetto e quindi cambiare pagina per visualizzare prezzo colori disponibili ect...

Includendo nel box anteprima tiotlo,descrizione, foto, prezzo  e disponibilita' è un buon modo per fornire già dall'anteprima tutte le informazioni che servono al cliente per capire se è quello l'oggetto che cerca e se vale la pena entrare nel dettaglio della descrizione.

Non date per scontati questi piccoli passaggi perchè non si integrano bene con la vostra grafica ma piuttosto trovate una soluzione per integrare graficamente queste specifiche!

I Siti sul web sono molti e la gente tende a scegliere quei siti che sono ben organizzati e di veloce consultazione , se in aggiunta riusciamo a farcire tutto con una buona grafica 80% del lavoro è fatto...

14. METTERE SEMPRE LOGO,NOME SOCIAL E SLOGAN IN HOMEPAGE

Ci sono delle "leggi" base da rispettare per non sbagliare subito dall'home l'accoglienza del cliente sul nostro sito. All'arrivo di un utente sul nostro sito è fondamentale che possa individuare all'istante dov'è arrivato (Logo principale ben visibile e chiaro), cosa si puo' aspettare( slogan che rappresentano la nostra filosofia lavorativa), e quanto siamo gia' presenti sul web come reputazione (icone social, Facebook ect... ). La homepage è una delle parti più importati proprio come le testate giornalistiche. Un utente tornerà spesso a trovarvi se già dalla vostra hompage potra' vedere tutti gli ultimi aggiornamenti senza dover tutte le volte cercare la categoria di suo interesse entrarci e spulciare alla ricerca dei nuovi aggiornamenti.

15. UTILIZZARE LE ANIMAZIONI IN MODO PONDERATO E NON DI INTRALCIO

Non utilizzare animazioni o immagini che ostacolano la navigazione. I visitatori vogliono accedere ai contenuti e informazioni in modo semplice e intuitivo (con un click...). L'animazione deve solo accompagnare l'utente nella transazione tra un'area e l'altra senza sottoporre l'utente a lunghe attese per la visualizzazione dei contenuti. Cercate di fare animazioni brevi e leggere senza "strafare". Cercate di non inserire animazioni tra oggetti di sottocategorie (quindi piu' numerose) , ma solo all'entrata delle categorie che sono in numero minore , cosi' non costringerete l'utente ad spettare ogni qualvolta cambi pagina o argomento. Se costruite un sito che punta a pubblicizzare un brand , quindi molto grafico, le animazioni sono a volte essenziali e quindi dovremmo tenere conto di moltissime cose in fase di realizzazione come : Su che dispositivi verra' visualizzato e come questi dispositivi supportano le  animazioni (attenzione a Mobile e computer datati), volocita' e frequenza per non infastidire la retina del nostro utente (ricordatevi che alcune persone soffrono di molti disturbi alla vista quindi animazioni fluide e non frenetiche sono le piu' consigliate).

16. ATTENZIONE ALL'USO DI SPLASH SCREEN!

Onestamente a meno che l'intero sito sia  essenzialmente una splash page (una singola voce di promozione del sito, come per un film), non infastidire i visitatori a sorpresa con un annuncio a piena pagina, quando si aspettano il tuo sito web. Inserire il contenuto di promozione nella tua home page, invece, sarà comunque visibile da subito e sempre in home page dando ai visitatori la scelta sull'opportunità o meno di agire su di esso. Se un utente arriva sul vostro sito e deve fare una consultazione veloce di qualche area mirata, si troverà a combattere con la chiusura delle splash screen che molte volte rallentano anche in chiusura. Sicuramente questo utente ci penserà 2 volte ,la prossima volta che avra' i minuti contati , ad entrare nel vostro sito e ripetere la stessa battaglia tutte le volte. Molte volte la splash screen viene pagata bene , ma scendere a compromessi solitamente va a discapito di qualcosa....

17. DIVIDERE IL TESTO ALTERNANDO IMMAGINI

Questo contribuisce ad aumentare la leggibilità. C'è un motivo per il quale le riviste  rompono costantemente  il testo con immagini e grafici , riseide nel fatto che porta il lettore ad una pausa "quasi forzata" dalla lunga lettura dell'articolo. In realtà questa "forzatura" è positiva perchè viene inconsciamente recepita  dal lettore in modo positivo , infatti grazie alla fotografica si crea un consolidamento nella memoria che funziona per associazione.

In parole povere quando il lettore parlerà dell'articolo avra' perennemente nella mente l'immagine di "interruzione " e sulla base di quest'ultima riaffioreranno dalla mente tutti gli altri particolari inerenti all'argomento. Ovviamente usando questa strategia abbellirete nello stesso tempo il layout della pagina e nel caso di un'articolo lungo scoraggerete meno l'utente.

18. SPAZIARE IL TESTO ED USARE LISTE E ELENCHI PUNTATI

Come per le foto e grafici utilizzare liste ed elenchi puntati ha un suo scopo psicologico. Se entriamo in una pagina internet formata prevalentemente da testo , il nostro occhio cade di riflesso sulle interruzioni del testo come: Spazi vuoti, liste e elenchi puntati, testi in grassetto ect.. Proprio perchè si crea questa frattura nella linearità visiva  del testo l'occhio viene attratto da questa diversita'. E' un pò come prepararsi alla lettura dando uno sguardo generale in giro nella pagina per vedere cosa ci aspetta. L'occhio cadra' su un'elenco puntato (solitamente i punti chiave dell'argomento trattato) e in pochi secondi l'utente sarà incoraggiato o scoraggiato nella lettura dell'articolo.  Questo per dire che bisogna porre particolare attenzione a quello che scriviamo in questi elenchi perchè molte volte posso influire già dall'apertura della pagina sull'interesse nella lettura, cercate di trarre vantaggio dall'immediata visibilità di questi elenchi per mandare messaggi diretti al lettore su quale sarà il reale "succo del discorso". 

19. AVERE UN PROPRIO DOMINIO

Può essere essenziale per due motivi: per confermare al visitatore che sei professionale e legittimo, e per rassicurarli che sono sul sito giusto, piuttosto che un sottodominio di un servizio gratuito o qualcosa del genere. E dal momento che i domini sono ridicolmente accessibili a circa 20€ l'anno (a seconda del servizio), non c'è assolutamente alcun motivo per non avere un proprio dominio.

20. AVERE I PERMAILINK CHIARI E INERENTI ALL'ARGOMENTO

Avere permalink chiaro e breve sul tuo sito web non solo rende più facile la condivisione per le persone ma le  rassicura anche su cio' che stanno leggendo . Il permailink è la parte terminale dell'url che vedete in alto nella barra indirizzi. Questo tipo di url rimane immutato per lunghi periodi di tempo favorendo la reperibilità del post nel Web . 

Per farvi un esempio il link di questo post è : 

http://abepyg.blogspot.it/2012/05/come-strutturare-un-sito-web.html

Come potete vedere il nome è signifitativo ed è il titolo del post quindi facilmente comprensibile anche a chi lo riceve per email. Tenete presente che il premailink è unico e non può esserci un'altro post nel tuo blog con lo stesso identificativo, infatti se dovessi modificare l'articolo il suffisso non cambierebbe e se dovessi creare un nuovo artico con lo stessa identica terminazione, in automatico verrebbe generato un numero alla fine del suffisso tipo:

http://abepyg.blogspot.it/2012/05/come-strutturare-un-sito-web-5678.html

Dove 5678 è il numero generato in automatico.

Ricordatevi di scrivere permailink inerenti e riassuntivi del post.



CONCLUSIONE


Questa breve "guida" non è altro che un promemoria di alcuni dei concetti base da tener ben presente quando si inizia a progettare un sito web. Prediligendo la parte grafica di ogni lavoro (per mia deformazione professionale) ho sempre commesso l'errore di pensare subito alla parte grafica del sito sito web e successivamente all'implemantazione di aree e widget.
Grosso Errore! Da quando ho iniziato a lavorare con programmatori web e grafici 3d ho capito che come una casa è costruita dalle fondamenta in su , anche un sito web va progettato e realizzato in questo modo! Costruire una base solida ben ragionata è l'unico modo per costruire poi una grafica intelligente fluida ecoerente in ogni area.


Ringrazio anticipatamente chiunque aggiungerà sue idee, accorgimenti e critiche costruttive.


Detto tutto questo Buon Lavoro a tutti!