Ultimamente mi è capitato di dover ridisegnare l’interfaccia di un sito che doveva prevedere una sidebar molto efficace sulla versione desktop e i miei clienti volevano giustamente mantenerla anche nel nuovo restyling.

In questi tempi di nuove tendenze del design, velocità sempre più elevate dei siti Web e versioni mobili, un elemento di pagina classico è ancora presente, sebbene molti lo trascurano, è la sidebar.

Con molte persone che semplicemente “sbirciano” il contenuto Web non tutti prestano attenzione ad esso, specialmente con il modello di lettura a forma di F che stabilisce che le persone di solito iniziano sul lato sinistro di una pagina Web e scorrono su e giù per la pagina. Aggiungete a ciò la crescente domanda di tempi di caricamento della pagina più rapidi e la barra laterale può essere facilmente ignorata.

È ancora significativa la sidebar nel 2019?

Le barre laterali sono ancora rilevanti nel mondo del design di oggi che è apparentemente dominato dalle ultime tendenze di design. Ci mostra come quando qualcosa è progettato con un approccio Human-Centered Design come la barra laterale, può godere di una buona longevità e rimanere un elemento base del web design per molto tempo.

Gli utenti lo hanno dato per scontato perché si aspettano semplicemente che sia lì, in quanto è un elemento classico presente da decenni sul web.

Senza una barra laterale, qualsiasi sito sarebbe semplicemente più difficile da navigare e utilizzare, il che paralizzerebbe la UX.

Questo pone alcune domande per progettarla al meglio?

  1. Prima domanda fondamentale è quali funzioni deve svolgere? Nel mio caso contiene un format per richiedere informazione, l’iscrizione alla newsletter e per non farsi proprio mancare nulla una preview di un social con la possibilità di mettere “mi piace” e “contattaci”.
  2. Seconda domanda da porsi è: la sidebar deve rimanere fissa allo scroll della pagina?
  3. Come sistemare tutto questo nella versione mobile?

Lo scopo della sidebar

La barra laterale non è mai stata pensata per essere il principale mezzo di navigazione di un sito. La barra di navigazione o il menu in genere si trovano orizzontalmente nella parte superiore della pagina, tradizionalmente lasciando sempre la barra laterale come un ripensamento della navigazione secondaria.

Tuttavia, una barra laterale dovrebbe aiutare gli utenti con la navigazione, principalmente a seconda del tipo di sito. Ad esempio, un blog presenterà un uso molto migliore per una barra laterale in questo senso rispetto, per esempio, a un sito di viaggi.

Le barre laterali vengono generalmente utilizzate per mostrare i contenuti che devono essere evidenziati, come quando desideri che gli utenti intraprendano un’azione specifica che consenta loro di interagire ulteriormente con il tuo sito. Ad esempio la richiesta di rimanere in contatto tramite la newsletter. Questo non solo aiuta gli utenti a navigare nel sito in modo più efficiente, ma spinge anche gli utenti a leggere forse i contenuti che altrimenti avrebbero perso se non fossero stati messi in evidenza nella barra laterale.

Il posizionamento della sidebar

Le barre laterali possono essere posizionate sul lato sinistro o destro della pagina, nonché, in alcuni casi unici, su entrambi i lati della pagina.

La posizione della barra laterale dovrebbe essere dettata dall’esperienza utente, come per tutti gli elementi della pagina.

Sidebar a sinistra

Quando metti la barra laterale a sinistra della tua pagina, sappi che fondamentalmente dovrà funzionare come barra di navigazione principale del tuo sito. Questo perché il classico studio sull’usabilità che ha stabilito il modello di lettura a forma di F su Internet conferma che gli utenti trascorrono la maggior parte del tempo guardando in basso a sinistra e poiché è qui che si trovano i loro bulbi oculari, dovrebbe essere qui la barra per la navigazione primaria e migliorare così l’esperienza utente.

Considera anche che una barra dei menu orizzontale nella parte superiore della pagina potrebbe essere troppo stretta per adattarsi a tutti i titoli o le categorie di navigazione se stai progettando per un grande e-commerce, un sito istituzionale o un magazine una sidebar verticale / menu di navigazione nella parte sinistra della pagina può essere la soluzione.

Sidebar a destra

La barra laterale di destra è decisamente più comune; quando si trova sul lato destro della pagina, non funziona come navigazione principale, ma come navigazione secondaria. Ancora una volta, questo risale al modello di lettura a forma di F e al modo in cui i visitatori del tuo sito leggono la pagina.

Ciò significa che esiste una buona probabilità che i contenuti nella barra laterale destra non vengano visualizzati da tanti utenti quanti quelli che della barra laterale sinistra. Poiché questo contenuto è secondario, non dovresti inserire qui troppe informazioni importanti.

Lo stato secondario della barra laterale di destra spiega perché alcune pagine di siti, come D.repubblica.it, in realtà inseriscono annunci qui, sia che si tratti di annunci correlati o di brand. Qui gli annunci vengono percepiti secondariamente dall’utente non irritanti. Molto importante prestare attenzione alla frequenza e alla posizione di ogni annuncio per non far abbandonare il sito al nostre utente.

Naturalmente, altri siti utilizzano la barra laterale di destra in modo diverso, ad esempio per evidenziare i contenuti popolari e correlati per un lettore del sito. La barra laterale destra di Medium.com presenta i titoli più popolari della giornata e gli ultimi articoli scritti dalle persone che segui.

Sidebars laterali

Alcuni siti utilizzeranno effettivamente due barre laterali, una a sinistra e a destra della pagina. Una preoccupazione di questo approccio è presentare all’utente troppe informazioni sulla pagina, aumentando così il rischio che le informazioni essenziali vengano perse, specialmente se tali informazioni sono presentate nella barra laterale di destra. Un’altra preoccupazione è quella di scambiare le informazioni importanti tra i lati sinistro e destro della pagina senza pensare abbastanza a ciò che dovrebbe essere una priorità.

Tuttavia, c’è un modo per farlo funzionare. Devi mettere i contenuti più importanti nella barra laterale di sinistra perché è lì che i tuoi visitatori guarderanno per primi e a destra gli elementi di navigazione secondari, elementi come gli articoli più popolari, i pulsanti dei social media, una barra di ricerca e così via.

Mobile first

Non c’è bisogno che scrivo i dati percentuali del flusso di utenti che arriva sul nostro sito tramite smartphone, vero? Sono tantissimi e lo sappiamo quanto sia importante progettare per il mobile.

Vediamo come posizionare al meglio la nostra sidebar per i dispositivi mobile:

Se la nostra sidebar si trova a sinistra verrà usata come navigazione primaria la soluzione ottimale sarà inserirla all’interno del burger menù raggruppando in modo gerarchico al meglio le voci di menù.

 
L’empio di GMail è molto chiaro

 

Se invece la nostra sidebar si trova sulla destra e le nostre informazioni secondarie si sposteranno dopo i contenuti primari e il nostro layout risulterà come qui nell’esempio sottostante.

Buone sidebars a tutti!

Discussion

Leave a reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *