Osservando singoli elementi di un sito web che contribuiscono positivamente all'esperienza dell'utente, il logo è identificativo del marchio e merita una considerazione speciale. In questo articolo voglio darti alcuni consigli pratici dalla nostra agenzia su come garantire un'alta esperienza utente per i visitatori del tuo sito web.

Il logo del sito web sostituisce il link della homepage

Il logo spesso è posizionato nella barra di navigazione e DEVE essere SEMPRE linkato alla homepage. Gli utenti oggi si aspettano che facendo clic sul logo si ritorni alla homepage. Il logo sostituisce così anche il link del menu "Home", ancora visibile in alcuni siti web, usato per linkare alla homepage. Un collegamento diretto alla homepage come voce separata nel menu di navigazione è superfluo. Questo permette anche di risparmiare spazio prezioso.

La città di Waren (Müritz) nel nord della Germania, dove è situata la nostra azienda, ha deciso di offrire all'utente un'indicazione tramite l'icona di una casa come possibilità di interazione per tornare alla homepage. Probabilmente è stata scelta per due motivi: da un lato, oltre al logo è stata inserito un ulteriore logo, il che potrebbe ridurre il desiderio di cliccare sul logo. Dall'altro lato, si potrebbe presumere che gli utenti di questo sito web siano meno familiari con internet. Onestamente, questa icona della casa incrementa solo in parte l'esperienza utente, poiché il sito web presenta molte carenze evidenti riguardanti l'architettura delle informazioni, l'interfaccia utente e l'accessibilità (in particolare rispetto ai contrasti per la lettura di link e testi). Il sito web della città di Waren (Müritz) rimane pertanto un esempio negativo.

Logo responsivo: Adattamento del logo in base alla risoluzione del dispositivo

Mentre nelle visualizzazioni desktop c'è molto spazio disponibile e quindi è possibile includere il nome dell'azienda o lo slogan nel logo, nella visualizzazione mobile, per questioni di spazio e di attenzione, il logo deve essere posizionato in una forma ridotta.

Per quanto riguarda i loghi, come anche per i siti web, da anni è in atto il trend dell'adattamento alle dimensioni, al mezzo e all'ambiente. Si parla quindi di Responsive Logo, il che significa che il logo tiene conto del contesto circostante e si presenta in modo ottimale anche su dispositivi più piccoli, potendo quindi richiedere anche un'alterazione in alcuni aspetti. A differenza dei loghi rigidi, che appaiono identici su tutti i dispositivi e le diverse dimensioni dello schermo, i loghi responsivi si adattano ai requisiti specifici e offrono un'esperienza utente coerente e ottimizzata su diversi dispositivi. Il logo si riduce unicamente nella forma, ma non nella sua identità di marchio.

Un esempio positivo è dato dall'azienda svizzera Victorinox. All'arrivo sulla pagina, all'utente viene mostrata un'icona di grandi dimensioni. Unico punto negativo: il logo è inserito come file PNG anziché SVG.

Nello scroll viene mostrato solo l'elemento immagine. Sullo sfondo è visibile una montagna, sottolineando l'origine svizzera. Il branding è importante nella prima visualizzazione. L'utente deve capire. Ti trovi nel posto giusto con Victorinox. Se l'utente fa scroll verso il basso, i contenuti diventano importanti. Il logo si riduce visivamente per dare più spazio ai contenuti principali. La navigazione rimane fissata in alto, il che è molto sensato dal punto di vista dell'usabilità.

Un altro approccio è adottato dal sito web di Guinness: il logo è posizionato insieme al nome dell'azienda. Nello scroll, il logo diventa leggermente più piccolo pur rimanendo visibile la navigazione. Appena l'utente inizia a scrollare in alto, il logo e la navigazione tornano più grandi, poiché si presuppone che l'utente desideri visitare altre pagine.

Non ha risolto in modo ottimale il problema la Commerzbank con il suo sito web. Il logo è posizionato insieme al nome dell'azienda come file SVG, il che è un buon approccio. Tuttavia, entra in competizione con i punti di navigazione adiacenti. Nello scroll, la navigazione scompare completamente e l'utente deve scrollare completamente in alto per visualizzarla nuovamente. Sarebbe stato meglio se, appena si inizia a fare scroll verso l'alto, la navigazione apparisse, come ad esempio ha fatto tempo di tedeschi zeit.de.

Da un punto di vista dell'ottimizzazione della conversione, la Commerzbank ha risolto molto bene il problema con una grande immagine di due persone. Stanno guardando verso il pulsante, indirizzando automaticamente anche l'attenzione del visitatore verso di esso. Tali indirizzamenti visivi al call-to-action sono molto efficaci. Ben fatto, Commerzbank!

Sarà interessante quando daremo un'occhiata agli esempi nella variante mobile.

Nella variante mobile, il logo di Victorinox è rappresentato ancora più piccolo e posizionato al centro per strutturare meglio le possibilità di interazione per l'utente. Guiness ha posizionato il testo alla destra del logo anziché sotto di esso. In questo modo, l'arpa ha più spazio e la barra di navigazione superiore non diventa troppo grande. Al contrario, la Commerzbank omette semplicemente il testo nella risoluzione dello smartphone.

Il ruolo dei loghi responsivi nell'esperienza utente è importante perché aiuta a mantenere la coerenza visiva e l'identità del marchio, indipendentemente da come gli utenti accedono al sito web.

Se un logo non risponde affatto alle diverse risoluzioni, potrebbe attirare troppo l'attenzione dell'utente. In un esempio specifico della Hypovereinsbank, il logo molto evidente in competizione con il call-to-action posizionato a destra - soprattutto nella visualizzazione per smartphone. I punti di navigazione in grigio medio sono facilmente trascurati nella visualizzazione desktop. In generale, anche questo sito web presenta alcuni altri errori di UX.

I designer devono pertanto fornire diverse adattamenti del logo per garantire loghi responsivi. Il logo deve funzionare bene anche su sfondi diversi e in diverse dimensioni. Più piccola è la risoluzione, più dettagli verranno ridotti nel logo. Tuttavia, non deve perdere l'essenza del marchio. Questo è il segreto nel utilizzo dei loghi responsivi. Quindi, se stai pianificando un rilancio del marchio, pensa già a questo requisito quando usi il tuo prossimo logo.

Il formato del logo del sito web

L'uso di loghi responsivi ha senso perché la giusta dimensione viene caricata a seconda della risoluzione. Con risoluzioni più basse, ad esempio su uno smartphone, viene caricata solo la grafica più piccola. Questo riduce i tempi di caricamento. Otterrai comunque l'effetto maggiore sulla velocità di caricamento se:

1. incorpori il logo nella risoluzione corretta (anche con indicazioni di altezza e larghezza). Spesso i loghi sono incorporati in una risoluzione troppo alta e vengono quindi ridimensionati per la visualizzazione.
2. incorpori il logo in formato vettoriale SVG anziché PNG o JPG.

Utilizzare il logo del sito web come favicon

Utilizza anche la forma ridotta del tuo logo per utilizzarla come favicon. Evita anche testi o altri elementi piccoli che non sono riconoscibili nella piccola risoluzione del favicon.

Anche se il sito web di Guinness nell'esempio sopra utilizza bene il logo in modo responsivo, non è ottimale come favicon. Il piccolo testo bianco di Guinness non è riconoscibile e riduce complessivamente l'impressione nel contesto del favicon. Il contrasto è basso. L'impressione sarebbe decisamente migliore senza testo e solo ridotta all'arpa del logo. Gli altri esempi di questo articolo hanno risolto meglio la situazione rispetto a Guinness.

Se stai cercando un'agenzia che si concentri sui loghi responsivi, non esitare a contattarci. Noi di 4eck Media siamo professionisti dell'esperienza utente.

Se una posizionamento professionale del marchio è importante, potrebbero interessarti anche i seguenti pacchetti di icone e modelli di design aziendale: