Elegant Group Blog
News, aggiornamenti ed analisi su marketing e tecnologie web

Anatomia di una perfetta pagina web

da | Lug 11, 2016 | Sviluppo Web | 0 commenti

Questo articolo è stato pensato per fornire una panoramica, una sorta di introduzione a quelli che sono gli elementi fondamentali che compongono una perfetta pagina web. Oggi più che mai è necessario che design web, esperienza utente, ottimizzazione del contenuto per i motori di ricerca (SEO) ed ottimizzazione delle conversioni così come altre discipline da principio isolate cooperino a sempre più stretto contatto fra loro per armonizzarsi.
Questa necessità ha portato, nel corso del tempo, a definire una sorta di “norme di buona condotta” nella costruzione di un sito web, tanto radicate che non soltanto il linguaggio web si è modificato per incorporarle ma anche i motori di ricerca sono sempre più orientati a premiare i siti web costruiti secondo queste regole. Se un’azienda chiede un sito web è perché vuole che il suo prodotto o servizio siano ben compresi e facili da trovare.
L’idea è fornire gli strumenti per comprendere l’anatomia di un sito web con parole semplici; per questo motivo non entrerò troppo in dettaglio. Vediamo quali sono le componenti che fanno di un sito web un ottimo strumento di mercato.

Logo ben visibile

Esempio di logo in una perfetta pagina web

Esempio di logo: centrato e ben visibile su tutti i dispositivi

Il logo identifica l’azienda e gli fornisce carattere. Deve essere sempre posizionato nella parte alta della pagina e ben proporzionato e visibile; deve apparire sia nella pagina sia nella barra degli indirizzi sia sulla scheda del browser accanto al titolo; non dev’essere sgranato o deteriorato in alcun modo. In genere è bene iniziare la progettazione di un sito web, principalmente nella scelta dei colori da abbinare, studiando prima il logo. Poiché questo sarà sempre presente in tutte le nostre pagine sarebbe buona pratica mantenerlo ben riconoscibile ed eventualmente ricrearlo in formato vettoriale.

Menu semplice ed intuitivo

Esempio di menu in una perfetta pagina web

Esempio di menu

Il menu può essere posizionato sia sopra che lateralmente ma deve avere una struttura chiara e lineare. È un’ottima pratica quella di limitare il numero di sotto-voci poiché una struttura molto articolata riduce il punteggio di usabilità di un sito a livello SEO. L’Information Architecture (IA) si occupa appunto dell’organizzazione della struttura di un sito e mira a renderla più facilmente comprensibile all’utente. Il miglior modo per farlo è organizzare le voci di menu secondo raggruppamenti logici e studiarne il titolo, soprattutto se ci si riferisce a siti molto grandi.

Fondamentalmente la navigazione deve essere quanto più facile e comprensibile possibile per l’utente che, in questo modo, raggiunge facilmente la sua pagina di destinazione. Un inizio potrebbe essere quello di porsi alcune domande tipo:

  • Cosa l’utente sta cercando sul tuo sito?
  • Quale problematica sta cercando di risolvere?

La soluzione iniziale di arrangiamento delle voci di menu non può in seguito prescindere dalla costante comunicazione e monitoraggio dei propri utenti per verificare che il messaggio sia chiaro e da tutti fruibile.

Information Architecture

Durante un progetto di Information Architecture bisogna tenere in considerazione alcuni aspetti:

  • Menu principale. Quali saranno le voci da inserire nel menu principale? Quante dovrà essere il totale delle voci nel menu principale? Quale sarà l’ordine in cui le voci di menu verranno presentate? Dove verrà posizionato il menu?
  • Menu secondario. Ci sarà un menu secondario per ogni voce del menu principale? Quali saranno queste voci ed in che ordine saranno presentate? Dove verrà posizionato il menu secondario? Come dev’essere il layout di una pagina nel caso in questa non fosse presente un menu secondario?
  • Navigazione contestuale. Si tratta di link inseriti nel contenuto della pagina senza andare necessariamente a formare un menu. Ci si deve chiedere quale tipi di navigazione contestuale dev’essere utilizzata per le differenti tipologie di pagine (form, prodotto, help, servizio)? Bisogna anche considerare che link contestuali come prodotti alternativi, correlati, o link agli articoli più popolari sono elementi critici fondamentali per la fruibilità del contenuto

Technical Architecture

Tutto questo sforzo organizzativo, però, restituisce un sito web logicamente organizzato ma non garantisce l’indicizzazione da parte degli spider dei motori di ricerca. Come fare allora? La soluzione è affiancare l’Information Architecture con la Technical Architecture ossia unire alla logica di organizzazione anche il più corretto supporto che valorizzi tale logica sui motori di ricerca. In questo ambito tecnologico bisogna considerare:

  • Server
  • Sistema di gestione dei contenuti (CMS)
  • Tipologie di navigazione (link testuali, link grafici, menu)
  • Parte codicistica e script
  • Problematiche di ogni singola pagina

Abbiamo la struttura logica, abbiamo la struttura tecnica…non ci resta che rendere tutto fruibile dai motori di ricerca ottimizzando i link con gli attributi che restituiscono logica anche ai motori di ricerca (SEO e SEF) opera dello staff di web marketing.

Headline chiara e comunicativa

Heading contruction di una perfetta pagina web

Una heading chiara richiede un’attenta progettazione

La headline non è altro che la zona in cui tutto il contenuto della pagina viene rappresentato e chiarito al visitatore. Qui sostanzialmente viene presentato il bene o servizio fornendo le caratteristiche più rilevanti che possano catturare l’attenzione del visitatore e spingerlo a continuare la navigazione per saperne di più. Inutile dire che quest’area può essere considerata come una delle più importanti della pagina poiché non solo riassume a colpo d’occhio ciò che è più importante ma si deve legare anche all’ottica SEO per fare in modo che anche i motori di ricerca trovino rapidamente quale sia il contenuto di tutta la pagina, ecco perché è buona prassi inserire in quest’area la parola chiave principale.
Se questa è una pagina di prodotto, per esempio, è perfettamente ragionevole utilizzare semplicemente il nome del prodotto. Con più contenuto sociale, come articoli di blog, è necessario considerare un titolo “accattivante”, dal momento che in genere questo tipo di contenuto fa affidamento non solo sui SERP (risultati dei motori di ricerca), ma anche sui social network.

Leggibilità ad ogni costo

Scelata dei font per una perfetta pagina web

Le web font sono una risorsa per rendere il contenuto leggibile e di design

Il contenuto di una pagina per funzionare bene ed essere portato in cima dai motori di ricerca è necessario che sia univoco ed originale. Ora…una volta che il contenuto c’è, è necessario che sia anche leggibile altrimenti non avrà sortito alcun risultato. A questo punto è importante che il font usato sia facilmente comprensibile, ci sia abbastanza spazio tra le righe e la formattazione del testo con grassetto e liste rendano il contenuto più importante fruibile anche a colpo d’occhio.

Immagini e valore aggiunto

Immagini per una perfetta pagina web

Scegliere le immagini per comunicare

Le immagini sono molto più facili da ricordare di un testo scritto per cui lo studio sulla loro posizione, sui colori e sulla tipologia di immagini ha valore sia dal punto di vista dell’estetica che dal punto di vista della fruizione del contenuto. A tutto questo si aggiunge il lavoro di rendere tali immagini fruibili e comprensibili anche dai motori di ricerca.

Footer efficace

footer di una perfetta pagina web

Sfruttare le opportunità

Una delle parti di un sito divenute importanti è proprio il footer. Questa è la parte a fondo pagina che deve raccogliere tutte informazioni rapide e i contatti. Viene utilizzata dagli utenti per trovare velocemente numeri di telefono, mail, indirizzo, politiche di vendita e privacy. È, inoltre, lecito aspettarsi che un utente che sia arrivato in fondo alla pagina sia seriamente interessato all’argomento o al prodotto; è buona pratica sfruttare tale interesse per aggiungere in questa zona delle cosiddette “call-to-action” ossia si richiede al lettore di compiere un’azione che può essere l’iscrizione alle newsletter oppure la condivisione tramite social e simili.

Conclusioni

Un sito web è come un palazzo, per costruirlo è necessario disporre di uno staff variegato con competenze multidisciplinari che sappia lavorare in armonia. Quando questo accade il risultato non può che essere spettacolare, quando invece non succede rimane un cantiere aperto. Imparare a valutare un sito web è molto utile per chi lo commissiona ma lo è forse ancor di più per chi lo crea. Quando il cliente, infatti, è in grado di stimare la qualità di un lavoro gli ideatori non possono che esserne lusingati.

Immagini fornite da: freepik

Vincenzo

Webmaster, designer e grafico; dal 2001 studio, disegno e progetto siti web. Co-fondatore di elegant group mi occupo di fondere an modo armonico design ed esigenze di marketing.

Latest posts by Vincenzo (see all)

Pin It on Pinterest

Condividi

Se questo articolo ti è piaciuto e pensi possa essere utile a qualche tuo amico o conoscente aiutaci a raggiungerlo!