Aiuto Registrati

Principi base di web design

Iniziare a creare un sito web è un momento cruciale, in cui diventa evidente quanto è importante avere un piano strutturato rispetto a quali contenuti sono rilevanti per il proprio target e come il design deve supportare il marchio e il messaggio.

 

La giungla di opzioni di stile, pagine e widget, può sabotare l’intero progetto. Per questo è importante avere le idee chiare e un piano a cui far riferimento nel momento in cui si deve prendere una decisione, evitando di farsi prendere dal piace a me = piace a tutti, che mette in secondo piano quello che invece serve al vostro progetto per essere efficace.

 

La verità è che i siti che hanno successo, seguono dei principi semplicità e familiarità agli occhi del visitatore e facilità di navigazione. La ricerca di Google - Users love simple and familiar designs -  conferma che i visitatori preferiscono siti in cui la decisione è possibile a colpo d’occhio.


La semplicità è la vera sfida nella realizzazione del vostro sito web - tweet this! :)  - in questo articolo vi presentiamo i principi chiave su cui basare le vostre decisioni di design, senza perdervi nella giungla.


Paradosso della scelta

L’espressione “l’imbarazzo della scelta” esiste in diverse lingue e ciò non sorprende: più la scelta sia ampia, più alta è la propensione a non prendere una decisione. E quando la decisione viene presa, la propensione a sentirsi insoddisfatti, rispetto alla scelta è maggiore. Questo è Paradosso della Scelta.

 

Questo fenomeno è ben noto a chi opera nel settore commerciale, ed è strategico anche per la struttura e lo stile del vostro sito. L’ampia scelta di pagine di navigazione, come di prodotti o articoli del blog, potrebbe scoraggiare i vostri visitatori, piuttosto che invitarli a restare sul vostro sito.

Ecco un esempio di sito web che ha un numero ideale di scelte rispetto al passo successivo sul sito: l’impaginazione dei contenuti mostra cosa leggere prima e dove andare dopo.

 

Come il paradosso della scelta influisce sul vostro sito?

  • Quale azione volete che i vostri visitatori facciano sul vostro sito? Definite la vostra Call to Action: la registrazione alla newsletter, l’acquisto di prodotti, la partecipazione a un sondaggio, all’offerta stagionale, la condivisione di contenuti. Focus sul vostro obiettivo per ogni decisione di design.
  • Mantenete la navigazione breve e chiara. Una regola di massima è quella dei 7 link di navigazione, evitate di usare frasi o nomi composti per le pagine.
  • Impaginate le vostre Call to Action secondo l’obiettivo. Meglio se una per pagina, quando non è possibile, rendetele identificabili separatamente e per importanza, lavorando su posizione e le opzioni di stile: dimensioni titoli, colori.
  • Se il vostro è un sito e-commerce, valutate se è il caso di usare tag di prodotto per suddividere in categorie la vostra offerta. L’uso del catalogo per categorie si rivela strategico per favorire la navigazione sul vostro sito e facilitare la scelta.

Gerarchia visiva

Dopo aver ridotto al minimo necessario la scelta, il passo successivo è la priorizzazione delle informazioni sulle pagine del vostro sito. A tal proposito si parla di gerarchia visiva, ovvero segnalare l’importanza dei contenuti sulla pagina, usando titoli, colori e posizione.

I contenuti più importanti sul vostro sito avranno maggiore visibilità sulle vostre pagine.

 

L’importanza è naturalmente connessa al vostro obiettivo, volete vendere? Il link al negozio dovrà essere in pole position in navigazione, se lo rendete accessibile anche con una call to action, dovrà avere un titolo ben visibile, una didascalia esaustiva e un’immagine che rappresenta il vostro brand.

 

Guardate la pagina di esempio, 6 bottoni, 6 azioni diverse, sensazione di disordine. Molto probabilmente i visitatori di questo sito passeranno al link successivo nei risultati di Google.

Come definire la gerarchia dei contenuti?

Dimensioni
Più grande = più importante. Più piccolo = meno importante.


Colore
Il colore è un importante elemento del vostro brand, è anche uno strumento per evidenziare parti di un testo, metterlo quindi in evidenza rispetto agli altri.


Posizione
Considerando la classica impaginazione a F e Z, le informazioni più importanti sono generalmente in alto sulla pagina, più si scrolla verso il basso per cercare informazioni, meno si legge. Le informazioni a sinistra hanno tradizionalmente più importanza rispetto a quelle posizionate a destra. 

Per applicare queste dritte nel vostro sito considerate:

  • Lo strumento fondamentale per creare gerarchia dei contenuti è il Titolo. Con le impostazioni dell’editor di stile definite dimensioni, carattere e colore dei titoli 1-2 e 3. Userete in alto sulla pagina il Titolo 1 e a seguire gli altri due.  
È molto importante usare i titoli nell’ordine anche per motivi di SEO, faciliterete infatti l’indicizzazione dei vostri contenuti da parte dei robots di Google. Naturalmente potete anche ingrandire contenti di testo con la formattazione, ma non puntate solo su questa opzione.
  • Iniziate con un modello di impaginazione.

Quando create una nuova pagina del vostro sito, iniziate con uno dei modelli predefiniti di impaginazione. Vi aiuteranno a non perdere di vista l’usabilità e l’equilibrio, una volta selezionato a seconda della destinazione d’uso della pagina, basterà sostituire i contenuti di esempio con i vostri.

 

La definizione spazio bianco si riferisce allo spazio vuoto attorno ai vostri contenuti. Non deve essere necessariamente bianco, ma vuoto. La funzione e l’importanza dello spazio bianco, sta nel dare respiro ai contenuti, facilitandone la messa a fuoco e influendo inevitabilmente sulla gerarchizzazione degli stessi.

 

Ecco il nostro sito di esempio con il contenuto intervallo e senza i bottoni di call to action. Notate la differenza?

Come creare più spazio bianco sul vostro sito

  • Il contenuto intervallo è indispensabile
  • anche il contenuto colonna è un valido supporto per centrare o posizionare lateralmente, lasciando due colonne vuote

Per creare uno spazio fra 2 contenuti, potete anche inserire i contenuti in colonne e usare una colonna vuota centrale per separarli. Cliccando e trascinando i bordi potrete aggiustare le dimensioni.  

 

  • Linea di separazione per dividere le aree della pagina
  • Anche i testi devono respirare strutturandoli in paragrafi distinti, usando sottotitoli e intervallo, facilitate la lettura e favorite la permanenza sul sito dei vostri visitatori.

 

L’esempio che segue mostra la gerarchia visiva e lo spazio bianco in azione. L’effetto è riposante ed le informazioni importanti sono in evidenza, come anche l’azione principale che si invita a fare con la call to action.

Nel dubbio, optare per la semplicità è la mossa giusta

L’insegnamento più importante è certamente che nella creazione di un sito, decidete quali contenuti mettere, quali lasciare fuori dal progetto. Quando il vostro obiettivo e priorità sono chiari, creare il design del vostro sito, sarà un percorso di scelte naturali e che trovano riscontro nelle statistiche del vostro sito.

 

Se vi troverete davanti alla giungla, fermatevi, guardate il vostro piano iniziale, è lì che troverete l’itinerario senza trappole, quello delle semplicità.

 

Ci sono altri aspetti del design  che trovate stimolanti, o particolarmente impegnativi? Vi aspettiamo in Academy su Facebook per confrontarsi sul tema con la community.

Monica Dametto

Jimdo Team

 

Articoli che potresti trovare interessanti:

Principi base di web design
>> leggi di più

Come scegliere il template per il vostro sito
>> leggi di più

NEW! Jimdo è responsive- Il vostro sito unico e inconfondibile su tutti i dispositivi mobili
>> leggi di più


Scrivi commento

Commenti: 0