Spesso quando navigo tra i siti web mi accorgo di errori grafici, disallineamenti e poca uniformità tra gli elementi. Molti di questi siti appartengono a piccole realtà che probabilmente non hanno interesse a migliorare la user experience del proprio sito web.
Ma cosa succede quando questi errori vengono fatti sui siti di grandi brand? Grandi realtà che puntano tutto, o quasi, sull’immagine? In un mondo in cui il front-end developing è diventato essenziale e imprescindibile in un sito web, prestando attenzione a bilanciare una grafica accattivante ma allo stesso tempo facilmente navigabile, occupandomi di UX/UI non posso fare altro che notare questi errori e… ho deciso di “correggerli” utilizzando delle regole CSS e applicandole tramite Dev Panel per creare una breve guida per voi e mostrarvi quanto sia semplice correggere tali errori.
La navigazione è stata testata su due principali dispositivi, con sistema operativo Android e iOS, e in ottica mobile first abbiamo preferito concentrarci sulla versione smartphone dei siti analizzati.
Partiamo quindi da un brand con un’immagine forte ed irresistibile…
La user experience del sito web di McDonald’s Italia
Il sito mcdonalds.it nella sua versione mobile include un header molto semplice a scomparsa quando si effettua uno scroll verso l’alto. Il primo errore di user experience che notiamo è rappresentato dal fatto che, quando il sito viene caricato, l’header copre parte dei contenuti dello slider con le promozioni del momento. Questo errore di layout impatta negativamente sulla corretta visualizzazione di un contenuto molto importante, pertanto risulterebbe opportuno risolverlo.
Di seguito possiamo vedere graficamente cosa accade:
Uno dei marchi pubblicizzati scompare dietro l’header.
I margini sono fondamentali per garantire equilibrio tra gli elementi.
In questo caso il problema si verifica su dispositivi mobile con una larghezza intorno ai 385 pixel. Alcuni contenuti vengono tagliati e spesso sono loghi di prodotti pubblicizzati o elementi grafici.
Per una buona user experience, sarebbe preferibile che nessun elemento venisse mai coperto o non fosse visibile nella sua interezza, sui principali viewport (aree visibili sul dispositivo) e in ogni ‘scroll step’.
Quindi, le soluzioni sono principalmente 2:
- Modificare le immagini dello slider a monte, ridimensionandole all’interno di un template che consideri un margine fisso che simuli quello dell’header anche su risoluzioni più basse.
- Correggere tramite CSS, magari applicando delle media queries solo su alcune risoluzioni specifiche.
Vediamo insieme la seconda soluzione, quindi come correggere, intervenendo sul codice CSS della pagina, questo errore:
Ispezionando la pagina (CTRL+SHIFT+C su Google Chrome) si può notare che sull’elemento <header> è già presente una media query fino a risoluzioni pari a 991.98 pixel:
@media (max-width: 991.98px) {
#header {
height: 9rem;
border-bottom: 1px solid #e2e2e2;
background: rgba(255,255,255,0.9);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}Una media query definisce una regola CSS solo per specifiche risoluzioni.
In questo caso una sola media query definisce che l’header venga modificato allo stesso modo sia per tablet che per mobile.
Il primo errore sta quindi nel non aver definito un’ulteriore media query specifica per dispositivi mobile.
Il secondo errore è quello di aver definito l’altezza dell’header tramite l’unità ‘rem‘ che viene solitamente utilizzata per definire la grandezza di un elemento di testo piuttosto che di una sezione o un header.
Quindi con questo codice, e simulando un target generico sull’elemento #header, andremo a limitare l’altezza dell’header stesso da 9rem a 22vw, solo per dispositivi con larghezza massima di 480 pixel, risolvendo entrambi gli errori:
@media (max-width: 480px) {
#header {
height: 22vw;
}
}N.B. L’unità ‘vw’ è invece relativa all’1% della larghezza del dispositivo, se il dispositivo è largo 50cm 1vw corrisponde a 0.5cm.
Come si può verificare dai seguenti screenshot, la correzione applicata in CSS ha migliorato di molto la user experience, le immagini presenti in questo slider risultano ora totalmente visibili e nessun elemento risulta coperto dall’header:
Anche i ‘dots’ di navigazione presenti in questo slider causano qualche problema di user experience: i dots sono bianchi e spesso anche le immagini sono bianche o con sfondo chiaro.
Questo comporta una scarsa visibilità e spesso risultano completamente nascosti.
Su dispositivi mobile questo problema non è fortemente impattante in quanto la navigazione del banner avviene tramite slide, ‘gesture’ che su dispositivo mobile siamo istintivamente portati ad eseguire.
Ma se questo elemento di navigazione viene previsto, il suo comportamento corretto è che sia sempre visibile e disponibile per facilitare la navigazione dell’utente; in caso contrario si potrebbe pensare ad una scelta funzionale piuttosto che stilistica e quindi disabilitare completamente i dots per la navigazione mobile in modo da alleggerire il caricamento delle pagine per mobile, evitando l’esecuzione dello script, e beneficiare quindi di maggiore velocità.
Ma in termini UX/UI, i dots di navigazione servono in realtà a dare consapevolezza all’utente di quanti elementi sono presenti nello slider e quale tra tutti gli elementi si sta visualizzando attualmente.
Quindi se volessimo trovare una soluzione a questo problema abbiamo davvero l’imbarazzo della scelta.
Possiamo applicare un box-shadow sui dots stessi, ovvero un’ombra molto leggera e sfumata che aiuterà senz’altro a migliorare la visibilità su qualsiasi tipo di sfondo:
.view-slide-homepage .owl-carousel button.owl-dot:not(.active) {
box-shadow: 2px 0px 15px 1px #000000;
}Il risultato grafico risulterebbe il seguente:
Oppure potremmo aggiungere un colore interno per l’elemento dot, utilizzando la proprietà background-color e l’arancione Mc Donald’s, e aggiungere un bordo bianco, in linea con lo stile attuale, per avere visibilità anche su sfondi di colore arancione:
.view-slide-homepage .owl-carousel button.owl-dot:not(.active) {
background-color: #FFBD0D;
border: 1px solid white;
}
Ottenendo quindi la seguente visualizzazione grafica dell’elemento dot:
Potremmo andare avanti all’infinito e immaginare decine di ulteriori soluzioni grafiche.
La difficoltà, se così vogliamo dire, potrebbe essere solo quella di non eccedere ed essere troppo “invasivi”, per rispettare il design del marchio e non snaturare quindi l’identità del brand oltre a non rendere troppo vistosi elementi di contorno e di navigazione a discapito degli elementi che il brand stesso si propone di pubblicizzare.
Rimanendo in ambito ‘food’, c’è un’altro marchio – stavolta italiano – che fa branding in maniera efficace da ormai oltre 70 anni…
La user experience del sito web di Ferrero
Il sito web ferrero.it è semplice e leggero nella navigazione. In questo caso ciò che riscontriamo è che si verifica un problema importante su tutti i viewports: subito dopo lo slider in homepage è presente un modulo carousel che rimanda alle ultime news, qui più del 50% dei contenuti sono coperti e quindi non visibili all’utente.
Questo accade perchè il div con classe ‘.owl-wrapper’ non ha nessun parametro in altezza specificato.
Per risolvere il problema correttamente ed in tutti i viewports sarebbero necessarie diverse righe di codice e media queries, ma anche solo impostando un parametro in altezza di 370px sul div indicato, i contenuti tornano ad essere visibili e ancora una volta con semplici codici CSS riusciamo a risolvere problemi che possono, come in questo caso, penalizzare gravemente non solo la user experience ma anche il posizionamento SEO:
Come accennato poco fa, gli interventi da fare sono diversi. Si rileva infatti la necessità di riposizionare anche il ‘read more’ ovvero la call to action che rimanda alla pagina relativa all’articolo. Questo elemento è posizionato in pagina con la proprietà position:absolute; ovvero il posizionamento è svincolato da qualsiasi altro elemento; questa proprietà CSS viene utilizzata molto per la sua flessibilità, ma in questo specifico caso sarebbe più indicato utilizzare la proprietà position:relative; e indicare insieme ad essa un valore per la proprietà bottom (esempio: bottom:40px;). In questo modo andiamo a specificare che l’elemento contenente il testo ‘Leggi l’articolo’, non deve essere posizionato in maniera assoluta in pagina, ma che la sua posizione deve essere relativa di 40px rispetto all’elemento sottostante (nell’immagine corrisponde al riquadro con bordo rosso).
Visualizzando l’homepage da dispositivi mobile, lo stesso modulo che riporta le news presenta un problema molto comune: avendo impostato un’altezza fissa di 110px, quando i titoli delle news supereranno (in questo caso) le 4 righe, l’ultima non sarà visibile perchè coperta dall’immagine di anteprima.
In questo caso alcune delle soluzioni possono essere:
- eliminare il valore fisso dell’intero div ‘div.news-details.news-details-intro’, che comprende anche la data di pubblicazione, e lasciare ai contenuti stabilire dinamicamente l’altezza del modulo. In questo modo però ci sarà un disallineamento grafico per le versioni tablet/desktop che può essere risolto con una media query.
- oppure, al contrario, impostare un valore maggiore di 110px (esempio 130px), per fare in modo che ci sia sempre un margine ‘di sicurezza’ ad impedire la sovrapposizione dell’immagine di anteprima.
Lo sviluppo CSS a servizio della user experience
L’importanza di curare gli aspetti grafici e tecnici di un sito web è oggi imprescindibile non solo per migliorare la UX/UI, ovvero l’usabilità e la navigabilità del sito, ma è di fondamentale importanza per assicurarci che in tutti o almeno nella gran parte dei formati dei nostri dispositivi i contenuti siano sempre visibili, leggibili e cliccabili.
Anche la SEO ricopre un ruolo fondamentale, ed uno dei problemi riscontrabili su un sito web e che Google (tramite Google Search Console) potrebbe segnalarci è proprio la sovrapposizione degli elementi, che come abbiamo visto può causare una totale perdita del contenuto stesso e della sua interazione. Questo con ogni probabilità potrà penalizzare il tuo sito in termini di posizionamento sui motori di ricerca.
Pensare però che in nostro aiuto abbiamo a disposizione uno strumento potentissimo come il CSS, ci fa capire come sia possibile evitare tutto questo ed ottenere quindi un sito facile da navigare e chiaro in termini grafici, responsive per la sua adattabilità ai tutti i dispositivi e privo di errori in termini tecnici/SEO.
Un mancato investimento su questo tipo di competenze tra grafica e programmazione, possono costare caro sul lungo termine, soprattutto per marchi di livello in cui l’immagine è tutto e il branding dovrebbe essere sempre impeccabile!
Se questo articolo ti è piaciuto e vorresti un sito web costruito con una user experience attenta e professionale per la tua attività o i tuoi progetti, prova a dare un’occhio al nostro servizio di realizzazione siti web: avrai incluso nel prezzo, oltre alla garanzia di un’esperienza di navigazione intuitiva e accattivante grazie al custom UX/UI design, la navigabilità da qualsiasi dispositivo in maniera fluida grazie all’utilizzo di moduli mobile responsive e tutta l’ottimizzazione SEO strutturale,
