UI design patterns

Modelli di progettazione dell'interfaccia utente: soluzioni collaudate per comuni problemi di usabilità

Come deve essere strutturato il menu del tuo sito web? Perché per alcuni proprietari di siti web è più facile ottenere abbonamenti rispetto ad altri? Cosa spinge gli utenti a compilare il modulo sul tuo sito web o a ignorarlo? Come designer, mi sono confrontato con domande relative al design dell'interfaccia utente e all'usabilità del web: troverai le risposte in questo post.

Cosa sono i modelli di progettazione dell'interfaccia utente?

I modelli di progettazione dell'interfaccia utente (UI) sono librerie di problemi di usabilità che sono già stati analizzati e risolti con successo. Tuttavia, questi non dovrebbero essere adottati uno a uno. Tuttavia, forniscono una base completa per un'esperienza utente armoniosa. I pattern dell'interfaccia utente servono a facilitare e accelerare il tuo flusso di lavoro.

Altri suggerimenti su UX Design & Web Usability

Come descritto in questo articolo, una buona usabilità aiuta a guidare gli utenti senza problemi attraverso il tuo sito, prodotto o marchio.

Formula per i modelli di design dell'interfaccia utente

Come fai a sapere quali sono i modelli di design adatti al tuo sito web e come usarli correttamente? Chris Bank ha elaborato il seguente approccio nel suo libro Mobile UI Design Patterns:

  • Identificazione del problema: cosa sta cercando di ottenere l'utente sul tuo sito web e quali problemi incontra? Cerca di formulare i problemi in una sola frase.
  • Approccio alla soluzione: altri designer hanno già risolto questo problema? Se sì, come?
  • Real-Life-Example: Guardate gli esempi e passateli come utente. Cerca di analizzare cosa ti ha aiutato a risolvere un certo compito. Pensate a ciò che vi ha fatto pensare - o forse ti ha anche fatto sentire insicuri. 
  • Sbocco: riassumi i risultati della tua analisi. Come puoi implementarli nel tuo sito web in modo che offrano ai visitatori un valore aggiunto? Quali modelli di design dovresti evitare di utilizzare? Se hai una guida di stile, dovresti includere i tuoi risultati in essa.

4 categorie di modelli di progettazione dell'interfaccia utente

I design pattern di UI possono essere divisi in quattro categorie, che introdurrò brevemente in questa sezione. Sfortunatamente, non sarò in grado di coprire tutti i pattern di design UI. Se volete approfondire l'argomento, il web offre possibilità quasi illimitate per leggere su di loro. Alcune risorse utili sull'argomento dei modelli di design UI sono:

1. gli elementi di navigazione più comuni

La navigazione è uno degli elementi di interazione più importanti per l'utente: non funziona solo come indice della tua pagina, ma anche come aiuto all'orientamento. Il fatto che sia solitamente posizionato in alto o di lato aveva in origine ragioni principalmente gerarchiche. Con la navigazione, mostriamo all'utente a colpo d'occhio cosa può fare sulla nostra pagina e dove si trova al momento.

Grazie ad anni di pratica, abbiamo interiorizzato questa conoscenza a tal punto che la tendenza al minimalismo non deve fermarsi alla navigazione. I modelli di design sono quindi abbastanza personalizzabili - o addirittura devono essere individuati per il vostro sito, in modo che funzionino.

screenshot-www.castoretpollux.com-2020.06.11-18-05-59
Sito web di Castore e Polluce

Castor et Pullex hanno seguito le regole dell'UI Pattern e le hanno ancora adattate individualmente al loro sito: una navigazione che si trova in alto a destra dello schermo e diventa "appiccicosa" quando si scorre. Il logo che riporta sempre l'utente al "porto sicuro" - la pagina iniziale.

Un sito web che di per sé permette molte interazioni, e che quindi appare quasi caotico, viene reso piacevole grazie all'utilizzo di soluzioni di design già note.

Le navigazioni "appiccicose", come quelle descritte nell'esempio precedente, sono un'invenzione meravigliosa nel web design. Non solo possono essere utilizzati per visualizzare animazioni di grande effetto, ma garantiscono anche che i visitatori del tuo sito web vadano da "A a B" più rapidamente. I pager One funzionano anche come un filo rosso: L'utente sa dove si trova e cosa ha già visto.

È simile con il pangrattato: Per le pagine piccole, non hanno molto senso. Per le pagine più complesse, tuttavia, possono fare miracoli. Non solo aiutano l'utente a orientarsi, ma anche a saltare indietro a qualsiasi punto della navigazione.

Potete vedere un altro modo di usare questi modelli nel seguente esempio:

I creatori di questo sito hanno adottato la conoscenza del menu mobile degli hamburger: da un lato, per facilitare una navigazione minimalista del loro sito che non sia estranea all'utente. D'altra parte, per offrire comunque al loro prodotto uno spazio sufficiente per essere in primo piano.

screenshot-demodern.com
Esempio di progetto da Demodern

Leggermente fuori moda - ma almeno altrettanto utili - sono le cosiddette schede nella navigazione. Ricordano un sistema di archiviazione e sono rapidamente e intuitivamente compresi dagli utenti. Anche qui, il dotto funziona nella versione dimagrita proprio come nella versione originale.

Nel frattempo, le schede sono sempre più utilizzate come schede modali per visualizzare contenuti che dovrebbero essere collegati tra loro in un modo più salvaspazio. Come schede modali, hanno anche il vantaggio che le pagine non devono essere ricaricate completamente per mostrare altri contenuti. Soprattutto nelle pagine dei prodotti dei negozi basati su WooCommerce li vediamo spesso - come nei seguenti esempi: 

Modelli di progettazione dell'interfaccia utente: soluzioni collaudate per comuni problemi di usabilità
Vista dal Patio Atlantico

A seguire, un esempio meno minimalista per un confronto:

Modelli di progettazione dell'interfaccia utente: soluzioni collaudate per comuni problemi di usabilità
Pagina di esempio di Bamboo Clothing

Spesso, i pattern UI sono modellati sulle interazioni del mondo reale. Pertanto, è importante non perdere mai di vista le proprietà fisiche e/o cambiarle intenzionalmente. Perché questo porta l'utente a non essere in grado di capire intuitivamente queste azioni e le sue conseguenze. Per rendervelo più chiaro, ho adattato l'esempio di cui sopra una volta:

screenshot-bambooclothing.co.uk-2020.06.11-18-33-55_modified

Le proprietà fisiche della struttura della cartella non sono più presenti. Le schede ora sembrano elementi di navigazione fuori posto. L'appartenenza degli elementi è un po' persa: sembrano quasi disposti a caso.

"*" indica i campi obbligatori

Consenso*
Questo campo è per la convalida e non deve essere modificato.

Menu di overflow e pulsanti "Salta alla sezione

Per rendere la nostra lista completa, i menu di overflow e i pulsanti "Jump to Section" non sono da meno. I pulsanti "Jump to Section" si trovano di solito nell'angolo in basso a sinistra. Permettono all'utente di tornare all'inizio della pagina con un clic. Specialmente con le one pager, i pulsanti di salto alla sezione hanno senso: fanno risparmiare tempo e prevengono la frustrazione causata da uno scorrimento noioso.

I menu a tendina in realtà hanno la loro origine meno nel migliorare l'usabilità delle pagine. Sono stati sviluppati per risparmiare spazio e per ospitare più contenuti nella navigazione. Inoltre, rendono il tuo design più ordinato e chiaro. I menu a tendina appartengono a quei modelli di design che vengono spesso definiti anti-pattern, perché non facilitano la navigazione all'interno del sito web. Tuttavia, è sempre consigliabile utilizzare i menu a tendina. Dopo tutto, il loro funzionamento è noto e appreso. Gli indicatori di un menu a tendina sono spesso i motivi a spina di pesce rivolti verso il basso.

Modelli di progettazione dell'interfaccia utente: soluzioni collaudate per comuni problemi di usabilità
Sito web di Ehire

I pulsanti e i link sono intenzionalmente menzionati solo brevemente in questo post, poiché dovrebbero essere sufficientemente familiari a ogni designer. Non ci sono quasi limiti al design e all'animazione dei pulsanti. Il loro stile di solito dipende dal layout visivo delle informazioni offerte. Dovrebbero essere visualizzati in modo prominente nel colore primario della pagina e posizionati in modo che siano raggruppati con il contenuto pertinente.

Lo stesso vale per i link: Non devono più essere visualizzati in blu con un trattino basso, come lo erano prima. Ma la loro esistenza deve essere chiara e, soprattutto, coerente. Potete ottenere una conoscenza approfondita dei pulsanti qui.

La paginazione, ovvero la suddivisione dei contenuti su più pagine, è importante soprattutto per i negozi di e-commerce che offrono un gran numero di prodotti. Con l'aiuto di questo sistema, i contenuti vengono offerti su più pagine, i tempi di caricamento si riducono e i contenuti vengono suddivisi in sezioni facilmente digeribili. Anche i giornali, come il FAZ, utilizzano la paginazione per suddividere gli articoli più lunghi.

screenshot-www.faz.net-2020.06.13-15-49-43
Esempio di FAZ

Inoltre, il cosiddetto "fat footer", che è diventato di tendenza negli ultimi anni, è ora uno dei modelli di UI appresi. Qui è possibile, per esempio, collegare le sottopagine visitate di frequente, memorizzare i dati di contatto e visualizzare contenuti legali che non hanno posto nella gerarchia della navigazione primaria. 

Il piè di pagina funziona quindi in parte come un indice diversamente strutturato per la tua pagina. Ma può anche essere una sorta di teaser per ulteriori informazioni. Una volta che l'utente ha fatto scorrere la tua pagina, il piè di pagina può offrirgli contenuti rilevanti - come articoli interessanti, link ai social media, ecc.

2. ingresso e uscita: Moduli di contatto e di iscrizione

Oltre alle linee guida sulla privacy, vale la pena concentrarsi anche sulle esigenze degli utenti. Soprattutto sui dispositivi mobili, un modulo di input può portare rapidamente alla frustrazione: Lo schermo già piccolo, l'ambiente fisico mentre lo si usa, l'aspetto temporale così come una possibile connessione instabile possono essere rapidamente una prova snervante. Fortunatamente, ci sono alcuni design pattern che hanno già affrontato questi problemi.

Suggerimento:

Come accade generalmente sul web, anche in questo caso vale lo stesso discorso: Il più breve possibile, il più lungo necessario. Alcuni studi hanno dimostrato che l'aggiunta di domande inutili fa crollare la partecipazione e può quindi costare molto in certe circostanze.

Qui sotto ho creato un modulo fittizio per mostrarvi i principi principali: 

Forma
Principi per i moduli di input
  1. Itest di eye tracking hanno scoperto che elaboriamo le informazioni più velocemente quando sono disposte dall'alto verso il basso, piuttosto che da sinistra a destra. Pertanto, è consigliabile posizionare il titolo sopra il campo del modulo e creare una sola colonna.
  2. È utile fornire all'utente un esempio di input in segnaposti predefiniti: in questo modo le informazioni richieste vengono visualizzate in anticipo. Dovresti evitare le voci numeriche frammentate, perché non fanno altro che complicare l'inserimento. Inoltre, devono essere programmati in modo da tollerare gli spazi vuoti.
  3. La gestione degli errori è un argomento importante e complesso. L'asterisco e il campo di input con il bordo rosso si sono dimostrati come modelli di UI. Idealmente, i campi dovrebbero essere autoesplicativi. Tuttavia, bisogna sempre aspettarsi che qualcosa non funzioni. Pertanto, assicuratevi di offrire diversi modi per aiutare. Ci sono diversi modi per farlo: Un pulsante informativo che offre un possibile aiuto quando si passa il mouse. O l'apparizione di piccoli modali quando il modulo non viene inviato con successo.
  4. È una buona idea fornire un feedback mentre la password viene inserita. Nel caso delle password, si è anche dimostrato utile dare all'utente una valutazione qualitativa di quanto sia sicura la password che ha scelto. 
  5. Il modulo a più fasi presenta diversi vantaggi psicologici. Innanzitutto, è più chiaro e meno scoraggiante. Se all'utente viene mostrato dove si trova nel modulo tramite un indicatore (in questo caso la barra di caricamento), sa esattamente cosa aspettarsi. La probabilità che abortisca prematuramente è più bassa. Le informazioni personali devono sempre essere richieste alla fine del modulo. Dopo tutto, se una persona ha già compilato la maggior parte del modulo, è più difficile che abbandoni il tempo già investito senza alcun risultato. È inoltre consigliabile chiedere solo le informazioni effettivamente necessarie e motivare la richiesta. Se chiedi ai tuoi utenti di iscriversi a qualcosa, è consigliabile dare loro un vantaggio alla "Ottieni sempre le migliori offerte per primo". Nell'ultima fase, dovresti fornire una breve panoramica di ciò che accadrà in seguito e di ciò che l'utente può aspettarsi e quando.

Inoltre, il riempimento automatico (attraverso i dati memorizzati nel browser) così come il riconoscimento delle informazioni (come l'aggiunta della città dopo aver inserito un codice postale) dovrebbero essere integrati nei tuoi moduli. Specialmente su WordPress molti moduli hanno questo già incluso di default. 

Se possibile, dovresti evitare di usare i captchas o almeno ridurli al minimo. Secondo questo studio, i captchas possono portare a un 30% in meno di interazione con il modulo.

3. strutturare i contenuti

Chiunque gestisca un sito web dovrebbe prestare particolare attenzione a come sono strutturati i contenuti del sito: Aiuta i tuoi visitatori a orientarsi nel tuo sito? I tuoi contenuti sono facilmente accessibili e la loro gerarchia è comprensibile? 

La questione della facile accessibilità è particolarmente attraente per gli utenti che visualizzano il tuo sito in condizioni alterate. Per esempio, le persone con problemi di visione dei colori e con problemi di vista. Se volete approfondire il tema dell'accessibilità, potete trovare maggiori informazioni qui: 

Se hai un blog o una rivista online, probabilmente conosci il problema: hai molti contenuti interessanti che vorresti offrire nel modo più uniforme possibile. Un modello di progettazione adatto a questo scopo è il cosiddetto "Elenco di articoli". Qui puoi suddividere i tuoi contenuti in categorie e mostrare solo una piccola sezione alla volta. In questo modo puoi mostrare molti argomenti in un colpo d'occhio senza sommergere i tuoi utenti di informazioni. Un bell'esempio è mostrato qui Raidboxes:

Raidboxes WP unboxed
Vista della rivista WordPress wp unboxed

Questa suddivisione permette all'utente di scorrere l'intero contenuto in base all'area di interesse e quindi di trovare più rapidamente ciò che gli interessa.

Per offrire certi contenuti senza distrazioni, si possono usare i box modali. Questi si sovrappongono al resto della vostra pagina e permettono all'utente di concentrarsi solo sul tuo contenuto. Questo può essere necessario e importante. Si noti, tuttavia, che questi modali tendono anche ad essere anti-pattern: Fondamentalmente, bloccano l'utente dal compiere qualsiasi azione finché la modale è aperta.

Usati correttamente, tuttavia, i box modali possono aiutare i tuoi visitatori a capire meglio il tuo contenuto. Tuttavia, le caselle modali che vengono attivate troppo spesso o apparentemente senza motivo possono rapidamente causare frustrazione e una sensazione di impotenza.

Anche la modalità lightbox e lo schermo intero appartengono a questa categoria. Da un lato, permettono al vostro utente di guardare da vicino il contenuto selezionato. D'altra parte, rendono impossibile qualsiasi altra interazione. Ecco perché è sempre importante offrire almeno un punto di fuga. Particolarmente noti sono il clic su una X nella parte superiore destra dell'immagine o il clic fuori dalla casella per chiuderla di nuovo.

Un modo popolare per visualizzare le immagini sono anche gli slideshow. Viene fatta una distinzione tra gli slideshow a riproduzione automatica e quelli a navigazione manuale. Le gallerie sono spesso elencate come immagini in miniatura e poi ingrandite tramite slideshow e/o lightbox.

Qui devi agire soprattutto in base alla funzione: Che tipo di immagini stai visualizzando? Devono necessariamente essere disponibili a schermo intero? E cosa è più importante: il tuo contenuto nel suo complesso o le singole immagini? Vale la pena di utilizzare altre opzioni, come ad esempio una lente di ingrandimento che ingrandisce le immagini al passaggio del mouse? Quest'ultimo è particolarmente diffuso nell'e-commerce.

Screenshot Unsplash Modelli di design UI
Vista in miniatura su unsplash.com

unsplash.com utilizza un misto di galleria di immagini e lightbox. Tuttatia, le immagini non vengono tisualizzate come miniature. Perché? Unsplash è una piattaforma che offre solo immagini da scaricare. Questo significa che gli utenti devono essere in grado di decidere a favore o contro l'immagine direttamente al primo sguardo. Per prendere questa decisione, la risoluzione dell'immagine deve essere relativamente buona. Le miniature sarebbero troppo piccole per questo. E cliccare su ogni immagine inditidualmente o natigare attraverso una presentazione ridurrebbe l'efficienza della pagina molte volte.

Durante tutto il processo di implementazione e progettazione, non bisogna mai perdere di vista la questione del beneficio/valore e dell'importanza.

4. giocare sui canali sociali

Questo riguarda i modelli che aiutano a guidare i tuoi utenti verso i tuoi canali di social media e/o a facilitare la loro interazione sociale. Potete leggere esempi più dettagliati qui.

Conclusione sui modelli di progettazione dell'interfaccia utente

In conclusione, posso consigliare due approcci principali. In primo luogo, visita e analizza il maggior numero possibile di siti web per trarre ispirazione: In che modo altri designer hanno risolto o meno determinati problemi? Cosa mi frustra quando navigo in rete? Quando è stata l'ultima volta che sono rimasto positivamente sorpreso e perché? 

In secondo luogo, ricorda sempre che non sei tu l'utente. I visitatori del tuo sito web pensano in modo sorprendentemente diverso da te. Forse non conoscono ancora il tuo prodotto. Pertanto, esegui ripetutamente diversi test per valutare l'effettiva usabilità del tuo sito.

Quali domande hai per Sonja su UI Patterns?

Sentiti libero di utilizzare la funzione di commento. Vuoi essere informato su nuovi articoli e consigli sul web design e sullo sviluppo? Allora seguici su Twitter, Facebook o tramite la nostra newsletter.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più il nostro contenuto.

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati da *.