UI vs UX: 4 componenti frustranti sul tuo sito

UX e UI: due termini che non siamo abituati a sentire in contrasto tra loro. Eppure, alcuni componenti di UI, per quanto perfettamente realizzati e di vasto utilizzo, possono peggiorare l’esperienza finale dell’utente.

In questo articolo portiamo l’attenzione su quattro componenti che vengono utilizzati spesso, ma che nascondono delle insidie, e su come migliorarne l’utilizzo. Il punto di vista è quello di uno sviluppatore, ma in primis, cerchiamo di adottare la prospettiva dell’utente. Anche tu utilizzi questi componenti sul tuo sito?

Time picker e calendari: come complicare una questione semplice

Ti è mai capitato di dover selezionare una data sul calendario, magari quella di nascita, e di trovarti a scorrere indietro e indietro nei mesi fino ad arrivare al giorno del tuo compleanno? A dir poco snervante, e soprattutto, scorrere gli anni ha il potere di far sentir vecchio anche chi non ha ancora raggiunto la trentina.

Peggio ancora è la situazione in cui per selezionare un orario viene proposto un time picker stile iOS; un bellissimo componente per mobile, ma inutilmente complesso nell’utilizzo web. Come se lavorare in javascript con le date non fosse già sufficientemente complesso!

Perché ci ostiniamo ad utilizzare questi componenti? La verità è che sono esteticamente piacevoli e sono familiari all’utente. L’utente non si chiederà mai come utilizzare un calendario, o come selezionare l’orario tramite la rotella di Apple, perché sono elementi che conosce e utilizza abitualmente in altre piattaforme. 

La facile comprensione di utilizzo dei componenti però non giustifica a pieno il loro impiego. Vediamo quindi come migliorare la user experience senza inficiare l’aspetto estetico.

Lasciamo scegliere all’utente come spendere il suo tempo

Che si tratti di selezionare un orario o un giorno sul calendario, una scelta ovvia potrebbe essere quella di utilizzare solamente una casella di testo. È la scelta che adotta Google nella gestione dell’account.

Ci sono però due obiezioni che possono essere sollevate a questo punto:

• Innanzitutto, a livello estetico un picker di questo tipo è decisamente meno attraente.
• Poi, questa scelta costringe l’utente a utilizzare la tastiera; poco pratico, specialmente se non sta già compilando un form e questa è l’unica interazione a costringerlo a staccarsi dal mouse.

C’è quindi una soluzione che noi di Mabiloft riteniamo, almeno a volte, più consona: proporre entrambe le opzioni. Ciò significa affiancare al tradizionale selettore orario o al calendario un campo compilabile da tastiera, meglio ancora se accompagnate da un’indicazione sul formato atteso, ad esempio nel placeholder.

Questa soluzione è anche quella suggerita da U.S. Web Design System, il design system ufficiale del governo degli Stati Uniti, ed è approvata anche dalle WCAG, le linee guida che definiscono le regole di accessibilità per il web.

Abbiamo veramente bisogno dello slider?

Un’altra questione insidiosa riguarda l’inserimento dei numeri. Una normale casella di testo, forse, risulta un po’ sorpassata e potenzialmente poco chiara: ad un primo sguardo, non è ovvio che sia richiesto un numero.

L’input con tipo number default di HTML, infatti, non si differenzia in alcun modo da una qualsiasi casella di testo; per questo motivo, sono state ideate soluzioni più creative e innegabilmente più belle, come i campi appositi per i numeri, con pulsanti o freccette per aumentare o diminuire il valore, o gli slider.

Perché questi componenti compaiono in questo articolo dunque? Perché troppo spesso anziché un aiuto a visualizzare il dato che viene inserito diventano l’unico modo per inserirlo.

Come usare lo slider con la testa

Lo slider diventa un componente particolarmente insidioso se non accompagnato dalla possibilità di utilizzare un input editabile da tastiera. Questo è particolarmente vero quando viene utilizzato per l’inserimento di cifre decimali.

Un’ulteriore problematica è che lo slider non è il componente ideale per quanto riguarda l’accessibilità: troppo spesso, infatti, richiede movimenti di fino, viene sottovalutato il suo utilizzo con dispositivi diversi dal mouse (anche semplicemente con le frecce della tastiera) o la dimensione e la messa in focus dell’indicatore. 

Inoltre, per come è costruito, lo slider impone di avere un valore minimo e massimo a cui fare riferimento, in modo da poter stabilire quanto vale ogni spostamento del cursore; ciò ovviamente non è sempre il caso.

Perché, quindi, utilizziamo ancora lo slider? Ci sono almeno cinque buoni motivi:

• È più bello di un semplice campo di testo.
• Ci dà una dimensione visiva di come il numero che inseriamo si colloca nel continuum dei valori.
• È pratico per spostarsi velocemente in un insieme grande di numeri.
• L’utente ha familiarità con il componente, perché è prediletto in versione mobile.
• Quando il numero non conta (ad esempio, quando stiamo alzando o abbassando il volume di un audio), lo slider diventa la scelta perfetta.

Ma per renderlo anche funzionale è sempre meglio accompagnarlo con un campo di testo editabile, che ci consenta di rifinire il numero in maniera rapida e di inserirlo rapidamente anche da tastiera.

Quando usare il number field

Quando parliamo di campo di testo numerico, anche chiamato number field o number input, intendiamo una casella di testo affiancata da frecce o bottoni che consentono di editare il numero. Questo si rivela particolarmente utile quando non ci sono limiti al numero che può essere inserito dall’utente.

Un errore che a volte viene commesso nell’utilizzare questo componente è di omettere il campo testuale, rappresentando il numero senza possibilità di edit da tastiera. Ovviamente, questo comporta una minore fruibilità del componente, specialmente se il numero da inserire è molto distante dal default (solitamente 0 o 1).

Il campo di testo numerico è, secondo noi, la scelta ideale: unisce accessibilità, praticità ed estetica e, a differenza dello slider, non pone necessariamente limiti al set numerico, ma può farlo all’occorrenza, per esempio disabilitando i pulsanti quando il valore limite viene raggiunto.

Alternative migliori al menù ad hamburger

Qui tocchiamo un tasto dolente. Ci tiriamo in causa noi in primis: anche il nostro sito ha un menù ad hamburger! E perché quindi lo nominiamo? Perché dagli errori si impara, ma anche perché noi in primis crediamo che sia un componente pulito, che lascia più spazio al contenuto.

Ma cos’abbiamo contro i menù ad hamburger? Il problema di questo tipo di menù è che impone all’utente di cliccare più volte per compiere l’azione desiderata, come cambiare pagina.

E non solo: se sta cercando una determinata pagina o funzione, l’utente non ha nell’immediatezza la visione delle alternative tra cui cercare. In pratica, sebbene molto diffuso ed estremamente chiaro, peggiora l’esperienza utente, senza che questo nemmeno se ne accorga.

Ovviamente il problema si presenta principalmente per quanto riguarda le piattaforme, dove la velocità di utilizzo è un vantaggio non da poco. Per quanto riguarda invece i siti vetrina, specialmente quando adottano uno stile minimal, la navigazione può essere secondaria rispetto al mostrare il contenuto a pieno schermo. (Stiamo cercando di giustificarci? Forse!)

Come sostituire un menù ad hamburger e risparmiare spazio

L’alternativa migliore, quando praticabile, al menù ad hamburger è una semplice barra di navigazione, solitamente integrata in alto o a destra della pagina. Ma come fare quando le voci sono troppe per pensare di mostrarle tutte in una sola riga?

La soluzione più ovvia è usare le icone: con le icone, lo spazio per ciascuna voce si riduce notevolmente: laddove lo schermo potrebbe ospitare al massimo quattro o cinque voci per esteso, con le icone si arriva anche al doppio degli elementi.

Vedendo però l’altro lato della medaglia, anche le icone hanno i loro difetti:

• Se si tratta di una piattaforma che tratta temi molto astratti o specifici, può essere difficile trovare un’icona esemplificativa per ciascuna categoria, lasciando l’utente a dover immaginare quale sia il senso di ognuna.
• Inoltre, trovare una decina di icone allineate può risultare confusivo e poco gradevole.

Perciò, un’altra alternativa largamente diffusa è quella di riunire le varie voci del menù in sottocategorie, soprattutto se queste vengono mostrate al passaggio del mouse, quindi solamente nel momento in cui l’utente le cerca. Ad esempio, questa è la scelta del vastissimo menù di Ikea.

Un’opinione controversa: dovremmo abolire le liste infinite?

Concludiamo con un’opinione forte: non sempre una lista infinita è da preferirsi a una lista paginata. Chiariamo innanzitutto di cosa parliamo: le liste infinite sono quelle liste in cui è possibile scrollare fino a fine lista, solitamente con la virtualizzazione degli elementi non mostrati all’utente e con un fetch progressivo del contenuto. Se ne può vedere un esempio in questa pagina.

I pro? Un’esperienza fluida, molto più elegante rispetto all’aspetto “da tabella” della paginazione. Ma purtroppo, anche in questo caso a una buona UI si accompagna una UX migliorabile.

Il difetto delle liste infinite è che ritrovare un elemento che si è visto in precedenza è tutt’altro che facile. La mancanza di punti di riferimento rende complesso orientarsi nella ricerca; per ritrovare un elemento (di cui magari non ci si ricorda nemmeno il nome) è necessario scrollare nuovamente l’intera lista.

Inoltre, non può essere salvata la posizione di scroll quando viene ricaricata la pagina (o quantomeno, non in maniera agevole), rendendo difficile ritrovare il punto esatto a cui si era arrivati se si abbandona l’esplorazione.

La soluzione non è necessariamente quella di abolire le liste infinite, ma quantomeno di usarle in maniera coscienziosa, adattandosi al contesto: prevedo che il mio utente vorrà ritrovare un elemento della lista, applicare filtri e mandare un link alla ricerca ad un amico? Allora, meglio scegliere una lista paginata.

E con questo chiudiamo la carrellata di componenti di cui possiamo fare a meno. Ma c’è molto altro di cui potremmo parlare, come ad esempio l’utilizzo compulsivo dei modali, o di cui abbiamo già parlato, come i problemi di usabilità dei tooltip.

E tu? Sei sicuro che il tuo sito sia orientato alla UX tanto quanto alla UI? Vuoi sapere quali miglioramenti puoi apportare alla tua piattaforma web? Contattaci per parlare del tuo prodotto digitale e scopri se possiamo fare qualcosa per te.