Valgono tutte le tendenze? I 5 errori UX più comuni che commettono i web designer

"L'eleganza si raggiunge quando tutto ciò che è superfluo è stato scartato e l'essere umano scopre semplicità e concentrazione: più semplice e sobria è la postura, più bella sarà." –Paolo Coelho

La missione di un web designer è creare esperienze utente coinvolgenti, aiutare i visitatori del sito a svolgere attività e aumentare le conversioni. Nel processo, spesso si concentrano solo sull'estetica, prendono scorciatoie e finiscono per fare affidamento su vari modelli e tendenze di design comuni. Il pericolo in questo è che possano essere sviati dalle tendenze popolari e, di conseguenza, vengono commessi errori di UX comuni perché le tendenze sono implementate in modo inappropriato.

Quando si tratta del web, le persone non vogliono imparare le cose, vogliono fare delle cose. Ci sono molti esempi sul web in cui i designer hanno scelto di concentrarsi solo sull'appeal visivo e, così facendo, hanno sacrificato l'usabilità. Presumevano che un "momento wow" che ha guidato il design sarebbe stato di per sé abbastanza potente da coinvolgere l'utente. Ma purtroppo, gli utenti hanno difficoltà a comprendere l'interfaccia utente, hanno difficoltà reali a utilizzare il sito e le frequenze di rimbalzo del sito sono salite alle stelle.

Come ha affermato Kate Rutter, "Il brutto ma utile ha la meglio sul bello ma inutile". La chiave per utilizzare in modo efficace i modelli e le tendenze del web design è trovare un equilibrio tra ciò che sembra esteticamente gradevole e dove aggiungono valore.

Diamo un'occhiata ad alcuni errori UX comuni.

Errore di UX comune nel web design n. 1: intestazioni grandi e fisse

Intestazioni adesive sempre più alte possono essere visualizzate sui siti Web. “Blocchi di branding” e menu di navigazione che hanno una posizione fissa e occupano una notevole quantità di spazio. Rimangono incollati alla parte superiore della finestra del browser (l'"intestazione adesiva") e spesso bloccano il contenuto mentre scorre al di sotto di essi.

Alcune intestazioni sui siti Web di grandi marchi hanno un'altezza superiore a 150 pixel. Dov'è il loro valore? Gli elementi fissi, come le intestazioni appiccicose possono avere reali vantaggi, ma i web designer dovrebbero fare attenzione a usarli: ci sono diversi importanti problemi di UX da considerare.

L'intestazione Sticky Nav potrebbe essere troppo grande per il comfort

Se la decisione di utilizzare un'intestazione di navigazione appiccicosa è già stata presa, è meglio testarla con gli utenti. È un errore UX comune esagerare e riempire di contenuto l'intestazione di navigazione appiccicosa. Con un'intestazione fissa, la navigazione dovrebbe comunque essere comoda per i visitatori. Non riuscire a trovare il giusto equilibrio può tradursi nel lasciare una piccola quantità di spazio per il contenuto principale e un'esperienza del sito soffocante e claustrofobica per i visitatori.

A volte c'è una semplice soluzione con i CSS: rendendo l'intestazione adesiva leggermente trasparente, le persone sono ancora in grado di vedere il contenuto attraverso di essa mentre scorrono, il che rende l'area del contenuto più sostanziale.

Ecco un esempio di un'intestazione appiccicosa alta: la pagina del profilo del giocatore dell'ATP su Roger Federer.

L'intestazione adesiva di questo sito ha un'altezza di oltre 180px! È oltre il 30% dell'intera altezza della pagina su alcuni laptop: un'esperienza utente scadente che è evitabile.

Non considerando il problema UX dell'intestazione di navigazione appiccicosa su dispositivi mobili

Alcune persone potrebbero utilizzare schermi di computer di grandi dimensioni ad alta risoluzione in cui un'intestazione di navigazione adesiva potrebbe accelerare le interazioni, ma per quanto riguarda i dispositivi mobili? Senza dubbio un numero significativo di visitatori del sito accederebbe al sito da un dispositivo mobile, quindi un'intestazione fissa potrebbe non essere l'idea migliore. Fortunatamente, le tecniche di progettazione reattiva consentono di progettare soluzioni diverse per piattaforme diverse e di attenersi all'intestazione di navigazione adesiva (gioco di parole) per i browser desktop.

Anche il sito Coffee with a Cop ha un'intestazione fissa, ma molto più piccola, alta meno di 80 pixel.

La navigazione dell'intestazione, in questo caso, è probabilmente la soluzione giusta per schermi ad alta risoluzione, poiché consente una navigazione più efficiente. Su schermi con risoluzione più piccola, anche l'intestazione è fissa ma occupa una notevole quantità di spazio. Un'ottima alternativa a un'intestazione di navigazione appiccicosa su dispositivi mobili è il sempre presente menu hamburger. Sebbene questo modello non sia un risolutore di problemi universale, libera una quantità significativa di spazio.

Errore di UX comune nel web design n. 2: caratteri sottili e leggeri

In questi giorni i caratteri sottili e leggeri sono pervasivi su numerose app e siti Web mobili. Con il progresso della tecnologia dello schermo e il miglioramento del rendering, molti designer li utilizzano perché sono eleganti, puliti e alla moda. Tuttavia, i caratteri tipografici sottili possono causare problemi di usabilità e quindi ostacolare l'UX.

L'obiettivo di tutto il testo su un sito Web è quello di essere leggibile e i caratteri sottili possono compromettere seriamente la leggibilità. Non tutti i visitatori visualizzeranno un sito su un display che rende bene il tipo sottile. Alcuni tipi di luce sono difficili da leggere su un iPhone o un iPad con display Retina.

Soprattutto, il testo deve essere leggibile. Se gli utenti non riescono a leggere le parole nella tua app, non importa quanto sia bella la tipografia.

Linee guida per l'interfaccia umana di Apple

Apple si riferisce alle app mobili, ma lo stesso principio si applica ai siti web. La leggibilità è obbligatoria, non facoltativa per una buona fruibilità. Non ha senso inserire contenuti su un sito Web se è illeggibile.

Ecco alcuni errori UX comuni da considerare prima di utilizzare il tipo thin:

Usare caratteri sottili e leggeri perché è trendy

I caratteri non dovrebbero solo avere un bell'aspetto, ma dovrebbero anche essere leggibili. Per ottenere un contrasto e una leggibilità adeguati, i designer dovrebbero cercare la combinazione ottimale nei loro progetti: dimensioni, peso e colore.

È meglio testare il sito su vari dispositivi e dimensioni dello schermo per garantire che tutto il testo del sito sia leggibile.

Il che ci porta al prossimo errore UX comune:

Non testare la leggibilità del testo su tutti i principali dispositivi

Il tipo sottile e leggero può avere un bell'aspetto sui monitor costosi e finemente sintonizzati di molti designer, ma deve essere preso in considerazione anche l'utente medio che spesso vede i nostri design su display più economici e scadenti. La migliore pratica è controllare l'aspetto dei caratteri su tutti i principali dispositivi: computer desktop, laptop, tablet e smartphone.

Ad esempio, durante il test di un design mobile, chiedi ai partecipanti di utilizzare il sito su dispositivi mobili alla luce del giorno: gli utenti del mondo reale non avranno sempre condizioni di navigazione e illuminazione perfette. Se si utilizza un carattere sottile su un sito Web, esiste un modo semplice per adattarsi agli utenti mobili: specificare un carattere più spesso su dispositivo mobile per una migliore leggibilità.

Errore di UX comune nel web design n. 3: testo a basso contrasto

L'uso di elementi a basso contrasto cromatico è diventato di moda anche nel moderno design dell'interfaccia utente. È nato da una tendenza del design minimalista perché riducendo il contrasto in alcune aree, il design sarebbe apparso "minimalista". I designer non sono riusciti a ridurre la complessità delle informazioni che dovevano essere presentate, quindi hanno giocato con un basso contrasto nel design.

Abbiamo già trattato i caratteri sottili, ma c'è un trabocchetto ancora più grande: una combinazione di un carattere tipografico leggero con basso contrasto che ostacola seriamente l'UX a causa della pessima leggibilità. I progettisti dovrebbero fare tutto il possibile per evitare questa trappola dell'usabilità.

Basso contrasto del testo nella copia del corpo

Cool Springs Financial utilizza una variante sottile di Helvetica per il corpo del testo sul suo sito web. Sebbene sembri elegante e contribuisca a un'interfaccia utente esteticamente gradevole, è difficile da leggere su diverse piattaforme. Sebbene il basso contrasto non sia necessariamente negativo, può avere un impatto negativo sull'usabilità di un sito Web rendendo il testo difficile da leggere.

Non testare il contrasto del testo

Esiste uno strumento ingegnoso per il controllo del contrasto sul Web chiamato Colorable che aiuterà i designer a impostare il contrasto del testo corretto in base alle Linee guida per l'accessibilità dei contenuti Web. Una volta che i designer sanno che stanno usando il giusto contrasto del testo, possono regolare altri colori sul loro sito Web ed eseguire rapidamente test multipli su dispositivo/utente per assicurarsi che il testo sia leggibile.

Errore di UX comune nel web design n. 4: dirottamento dello scorrimento

Un'altra tendenza ad alto rischio che sta guadagnando terreno sul web è il "dirottamento di scorrimento". I siti web che implementano questa tendenza prendono il controllo dello scorrimento delle pagine (di solito con JavaScript). Quando le persone lo incontrano, non hanno più il controllo dello scorrimento della pagina e non sono in grado di prevederne il comportamento, il che può facilmente portare a confusione e frustrazione. È un esperimento rischioso che potrebbe danneggiare l'usabilità del sito Web e, nel peggiore dei casi, indurre "rabbia da computer".

Alcuni siti Web possono farla franca con il dirottamento dello scorrimento, ma ciò non significa che tutti possano farlo. Ad esempio, molti web designer seguono i siti di Apple con dirottamento dello scorrimento, effetti di parallasse e immagini ad alta risoluzione di vari prodotti. Apple ha il suo mercato di riferimento, un concetto unico e contenuti esclusivi per il proprio sito web. Poiché ogni sito ha problemi unici, deve anche avere soluzioni uniche su misura per quei problemi.

Non testare con utenti del mondo reale

Quando prendi in prestito idee alla moda o modelli dell'interfaccia utente, è meglio testare il prototipo di un sito Web su utenti del mondo reale per evitare problemi di UX. Semplici test di usabilità riveleranno se l'implementazione di uno scroll hijack, ad esempio, è fattibile o meno. Senza test, i progettisti non hanno modo di sapere se il dirottamento dello scorrimento funzionerà e fare ipotesi è spesso costoso.

Tumblr, un popolare sito di blog personale, utilizza lo scroll hijacking sulla propria home page. Sebbene ciò possa essere rischioso, è lecito ritenere che conoscano bene il loro pubblico di destinazione e l'esperienza utente interessante e alla moda che vogliono presentare. Quando i visitatori del sito iniziano a scorrere, la pergamena viene dirottata e le persone vengono indirizzate alla sezione successiva.

La lunga pagina di scorrimento è suddivisa in diverse sezioni che sono distinguibili da una forte dose di colori saturi e punti indicatori prominenti sul lato sinistro della finestra. Di conseguenza, la home page di Tumblr sembra un grande carosello verticale su cui i visitatori hanno il controllo, piuttosto che uno spiacevole sito sperimentale con una mente propria.

Errore di UX comune nel web design n. 5: caroselli

I caroselli, una presentazione per la rotazione di una varietà di contenuti, sono molto comuni sul Web, in particolare sulle pagine di destinazione e sulle home page. Sebbene possano essere utili, presentano numerosi problemi di usabilità e quindi si qualificano come un altro errore UX comune. Secondo il Nielsen Norman Group: " le persone spesso scorrono immediatamente oltre queste grandi immagini e perdono tutto il contenuto al loro interno ". Potrebbe avere un impatto negativo sull'esperienza utente poiché i visitatori potrebbero non vedere contenuti di valore in alcune diapositive a rotazione.

I caroselli del sito Web potrebbero non fornire valore agli utenti

Se eseguito correttamente, un carosello può coinvolgere gli utenti con immagini di grandi dimensioni e sorprendenti. Il problema è che i caroselli spesso non aggiungono alcun valore aggiuntivo, ma sono semplicemente lì per la decorazione e inclusi solo perché tutti gli altri li stanno usando. Un modo per verificare se un carosello di un sito ha senso: annota tre vantaggi che un carosello offre al visitatore. Se non è possibile trovare tre vantaggi significativi, non aggiunge alcun valore.

Le frecce precedenti e successive hanno una bassa rilevabilità

Informazioni importanti in un carosello di siti Web potrebbero rimanere nascoste se le frecce successiva e precedente non sono rilevabili. I controlli dovrebbero anche essere compatibili con il tocco per dispositivi mobili.

Spesso non ci sono frecce per controllare la giostra; solo i punti dell'indicatore diapositiva sono inclusi per far avanzare le diapositive. Tuttavia, sono spesso a basso contrasto, hanno una bassa rilevabilità e mancano di un'area cliccabile o toccabile sufficientemente ampia. I piccoli target cliccabili possono portare a una scarsa UX, a un visitatore frustrato del sito Web e a una rapida uscita dal sito Web.

Ad esempio, il sito web della Fondazione Floresta Longo ha un carosello rotante di immagini sulla sua homepage. È impostato per la riproduzione automatica e ruota attraverso cinque fotografie. Le frecce precedente e successiva, tuttavia, sono piccole e trasparenti, il che le rende difficili da individuare e difficili da fare clic. Non ci sono indicatori per i visitatori della diapositiva attivati ​​e nessuna etichetta per indicare cosa rappresentano le immagini. Le immagini non sono collegamenti e fungono da pura decorazione. Sebbene questo tipo di carosello possa avere un certo valore per coinvolgere il visitatore, nel complesso lascia molto a desiderare.

Conclusione

Le tendenze del web design, se non considerate attentamente e implementate con cautela, potrebbero portare a diversi errori UX comuni. I designer di UX dovrebbero usare il loro miglior giudizio e non aver paura di innovare, ma per garantire un'ottima usabilità del sito Web sarebbe utile testare a fondo il loro design con utenti del mondo reale.

Nella folle profusione delle tendenze del web design, le cose in voga vanno e vengono. In questo caos, l'uso equilibrato di estetica, efficienza e usabilità gioca un ruolo significativo nel distinguere le tendenze UX che si sono rivelate le più forti e hanno ottenuto il maggior consenso da parte degli utenti.

I web designer possono inventare la combinazione di colori più interessante, l'animazione di scorrimento più fantasiosa o gli effetti di parallasse più fantastici, ma se l'interazione umana ne risente, l'esperienza utente sarà scarsa e le persone andranno avanti rapidamente. Un altro sito è a portata di clic.

Ulteriori letture sul blog di Toptal Design:

• Design reattivo: migliori pratiche e considerazioni
• Accesso al processo di progettazione del sito Web dal browser
• Codifica per i designer: quanto dovremmo sapere?
• Procedure consigliate per la progettazione dell'interfaccia utente ed errori comuni