5 UI pattern che fanno bene al tuo sito
Ci impegniamo tanto a semplificare la vita dell’utente, ma a semplificare la nostra vita chi ci pensa?
Gli UI pattern arrivano in nostro soccorso quando abbiamo bisogno di migliorare l’esperienza della nostra interfaccia e non sappiamo proprio che pesci pigliare. Sono delle soluzioni, delle best practices, già definite che risolvono problemi comuni di design, di svariato tipo.
Ma usare qualcosa di già definito non uccide la creatività?
Non è detto. Un pattern non deve essere riprodotto al 100% ma adattato al contesto nel quale andiamo ad inserirlo.
Sta a noi essere bravi a fare qualcosa di originale senza perdere i vantaggi del pattern scelto.
Quali sono i vantaggi di utilizzare uno o più UI pattern?
Un grande vantaggio sta nell’apprendimento utente.
Essendo riutilizzabili, gli utenti si imbattono negli UI pattern quotidianamente, visitando altri siti o applicazioni.
A furia di incontrarli c’è la possibilità che, prima ancora di arrivare sul nostro sistema, abbiano già imparato ad usarli.
Grazie a questo apprendimento pregresso la nostra interfaccia risulterà molto più semplice da utilizzare.
In molti casi addirittura, quando uno UI pattern è molto diffuso, viene data per scontato la sua presenza. Ci sono contesti in cui, se quel determinato pattern non è presente, l’utente potrebbe percepire la sua assenza come una falla nella UX.
Gli UI pattern vanno a creare una sorta di consistenza con tutti gli altri sistemi, aiutando l’utente a navigare più velocemente e sfruttando il suo apprendimento pregresso.
Andiamo a vedere alcuni dei più comuni UI pattern, che vi faranno esclamare “ma io questo l’ho già visto!”, e quali problemi vanno a risolvere.
1. Lazy registration
L’utente, come ben sappiamo, è sempre di fretta.
Non legge il testo, vede solo parte dell’interfaccia ed è pigro, tremendamente pigro.
Inoltre, finché non è convinto che ne valga la pena, non spenderà tempo prezioso per effettuare task dispendiosi, come la registrazione a un servizio.
La soluzione potrebbe essere il pattern definito lazy registration, “registrazione pigra”, che prevede di far utilizzare per un certo periodo il nostro prodotto prima di chiedere la sign up.
Un esempio molto comune è quello di e-commerce come Amazon o Zalando, che permettono l’inserimento di prodotti nel carrello pur non avendo fatto l’accesso e, tramite cookie, sono in grado di conservare l’informazione.
Quale problema risolve?
Permette dell’utente di utilizzare il nostro sito per “assagiarlo” prima ancora di spendere del tempo per registrarsi, chiedendogli di effettuare la sign up solo per completare l’azione, come ad esempio un acquisto.
2. Infinite scrolling
Ci sono situazioni in cui non è possibile organizzare il contenuto di una pagina in una sola schermata, basti pensare ad una serp o alla lista di oggetti di un catalogo. Peggio ancora se parliamo di basse risoluzioni, come quelle di tablet e smartphone.
Elementi come la paginazione ci vengono in aiuto ma, in alcuni contesti, appesantiscono l’esperienza utente e scoraggiano la visualizzazione delle pagine successive.
Con l’infinite scrolling è possibile far sì che, una volta arrivati in fondo alla lista, gli utenti vedano caricarsi subito gli elementi successivi.
In questo modo il contenuto risulta organizzato in maniera compatta, pulita e intuitiva.
Quale problema risolve?
Organizza i problemi di spazio che possono presentarsi in alcune sezioni della nostra applicazione, soprattutto quando andiamo a lavorare su risoluzioni basse come quelle mobile.
3. Autocomplete
Che l’utente sia pigro e desideroso di arrivare subito al punto lo abbiamo già detto. Il nostro compito è quindi rendergli la vita più facile ma, soprattutto, fornirgli tutte le semplificazioni possibili per permettergli di effettuare l’azione da noi desiderata.
Nel caso in cui si debbano inserire dati o fare una ricerca, ci viene in aiuto il pattern dell’autocomplete, che si presenta come una tendina che suggerisce la voce da introdurre man mano che l’utente digita le lettere.
Suggerendo cosa inserire all’utente, non solo si scongiura la possibilità che quest’ultimo commetta degli errori di battitura, ma gli rinfresca la memoria su informazioni che potrebbe non ricordare.
Quale problema risolve?
Grazie alla sua funzione predittiva, l’autocomplete permette di affinare con più precisione la ricerca, di selezionare la voce dalla tendina senza digitarla e aumenta la possibilità che l’input inviato sia corretto.
Nel caso di un motore di ricerca, ad esempio, sarà meno probabile che la ricerca non produca risultati.
4. Breadcrumbs
La navigazione di un’interfaccia è sempre molto delicata da strutturare, soprattutto quando il sito web è ricco di contenuti.
Il rischio che l’utente smarrisca la bussola e inizi a sentirsi perso fra pagine e sezioni, è dietro l’angolo.
A venirgli in aiuto può essere il breadcrumb (letteralmente “briciole di pane”) che, come nella famosa fiaba di Hansel e Gretel, traccia il percorso di navigazione indicando all’utente la sua posizione.
Quale problema risolve?
Aiuta l’utente a districarsi con facilità attraverso la struttura del sistema, presentandogli la struttura gerarchica a partire dalla pagina in cui si trova. Inoltre permette l’accesso diretto ai livelli superiori della navigazione, che si presentano sotto forma di link.
È molto utile in particolare quando l’interfaccia appartiene a un blog, un e-commerce o qualsiasi sistema con gerarchia strutturata in sezioni e sottosezioni.
5. Input strutturate
Molto spesso l’utente viene chiamato a inserire dati complessi.
Un esempio molto comune l’inserimento di una data: esistono molti formati diversi e, il rischio di inserire quello sbagliato, è sempre molto alto.
Con le input strutturate l’utente può selezionare direttamente dalla tendina il dato, senza il rischio di inviare un formato non compatibile con quello che il sistema si aspetta di ricevere.
Quale problema risolve?
Riduce la possibilità di errore quando c’è necessità di inserire dati complessi, annulla la possibilità che il formato non sia compatibile con quello del nostro database e alleggerisce il ruolo dell’utente che non dovrà appesantire il carico cognitivo per eseguire il task.
