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

Sonja Hoffmann Ultimo aggiornamento 21.10.2020
11 Min.
UI design patterns
Ultimo aggiornamento 21.10.2020

Come dovrebbe essere strutturato il menu del tuo sito web? Perché è più facile per alcuni proprietari di siti web ottenere abbonati rispetto ad altri? Cosa spinge gli utenti a compilare il modulo sul tuo sito web o a ignorarlo? Come designer, sono stato alle prese con domande sul design dell'interfaccia utente e sull'usabilità del web - troverete le risposte in questo post.

Cosa sono gli schemi di progettazione dell'interfaccia utente (UI)?

I pattern di design 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 modelli di UI sono lì per facilitare e accelerare il vostro flusso di lavoro.

Altri suggerimenti su UX Design & Web Usability

Come descritto in questo articolo, una buona usabilità aiuta a guidare i vostri utenti in modo fluido attraverso il vostro sito, prodotto o marchio.

Formula per i modelli di progettazione UI

Come fai a sapere quali design pattern sono appropriati per il tuo sito web e come usarli correttamente? Chris Bank ha elaborato il seguente approccio nel suo e-book Mobile UI Design Patterns:

  • Identificazione del problema: cosa cerca di ottenere l'utente sul tuo sito web e quali problemi incontra? Cercate 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 vi ha anche fatto sentire insicuri. 
  • Outreach: Riassumi i risultati della tua analisi. Come puoi implementarli sul tuo sito web in modo che offrano un valore aggiunto ai visitatori? Quali design pattern dovreste evitare di usare? Se hai una guida di stile, dovresti includervi i tuoi risultati.

4 categorie di modelli di progettazione UI

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. elementi di navigazione più comuni

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

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 Castor & Pollux

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 quindi appare quasi un po' caotico, riceve una piacevole usabilità attraverso l'uso di soluzioni di design già familiari.

Le navigazioni "appiccicose", come descritte nell'esempio precedente, sono una meravigliosa invenzione nel web design. Non solo possono essere usati per mostrare animazioni impressionanti - ma assicurano anche che i visitatori del tuo sito web arrivino da "A a B" più rapidamente. Con gli One Pagers 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 hamburger mobile: da un lato, per facilitare una navigazione minimalista del loro sito, che non è estraneo all'utente. D'altra parte, per offrire ancora il loro prodotto abbastanza spazio per essere in primo piano.

screenshot-demodern.com
Progetto di esempio 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

Poi, un esempio meno minimalista per il confronto:

Modelli di progettazione dell'interfaccia utente: soluzioni collaudate per comuni problemi di usabilità
Esempio di pagina da 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 delle cartelle non sono più presenti. Le schede ora sembrano elementi di navigazione fuori posto. L'affiliazione degli elementi è un po' persa - sembrano disposti quasi a caso.

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 discesa hanno in realtà 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 discesa sono uno di quei modelli di design che sono spesso indicati come anti-pattern - perché non rendono davvero più facile la navigazione attraverso il sito web. Tuttavia, l'uso di menu a discesa è ancora raccomandato. Dopo tutto, il modo in cui funzionano è conosciuto e imparato. Gli indicatori di un menu a discesa sono spesso i modelli a spina di pesce che puntano 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 - la condivisione dei contenuti su più pagine - è particolarmente importante per i negozi di e-commerce che offrono un gran numero di prodotti. Con l'aiuto di questo, il contenuto è offerto su diverse pagine, il tempo di caricamento è ridotto e il contenuto è diviso in sezioni facilmente digeribili. I giornali, come la FAZ, usano anche la paginazione per dividere 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 d'iscrizione

Oltre alle linee guida sulla protezione dei dati, 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, lo stesso vale qui: Il più breve possibile, il più lungo possibile. Gli studi hanno dimostrato che l'aggiunta di domande inutili è un crollo della partecipazione e può quindi costare molto in certe circostanze.

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

Modulo
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 segnaposto predefiniti - questo visualizza in anticipo le informazioni richieste. Si dovrebbe evitare l'inserimento di numeri frammentati, perché complicano solo l'inserimento. Inoltre, questi dovrebbero essere programmati in modo tale da essere tolleranti con gli spazi.
  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. La forma a più fasi ha diversi vantaggi psicologici. Prima di tutto, è più chiaro e meno scoraggiante. Se all'utente viene anche mostrato dove si trova nel modulo per mezzo di un indicatore (in questo caso la barra di caricamento), sa esattamente cosa aspettarsi. Ha meno probabilità di abortire prematuramente. Dovresti sempre chiedere informazioni personali alla fine del modulo. Questo perché se il visitatore del tuo sito ha già compilato la maggior parte del modulo, sarà più difficile per lui rinunciare al tempo che ha già investito senza risultati. Si consiglia inoltre di chiedere solo le informazioni di cui si ha effettivamente bisogno e di giustificare la richiesta. Se chiedete ai vostri utenti di iscriversi a qualcosa, è consigliabile fornire un beneficio per loro à la "Ottieni sempre le migliori offerte per primo". Nell'ultimo passo, dovreste dare una piccola panoramica di ciò che accadrà dopo - e cosa l'utente può aspettarsi 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 vostri moduli. Specialmente su WordPress molti moduli hanno questo già incluso di default. 

Dovresti evitare di usare i captchas se possibile, o almeno tenerli al minimo. Secondo questo studio, i captchas possono portare al 30% in meno di interazione con il modulo.

3. strutturare il tuo contenuto

Come proprietario di un sito web, dovresti prestare particolare attenzione a come è strutturato il contenuto del tuo sito: Aiuta i tuoi visitatori a trovare la strada nel tuo sito? Il tuo contenuto è facilmente accessibile e la sua gerarchia può essere compresa? 

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 un sacco di contenuti interessanti che vorresti offrire il più uniformemente possibile. Un modello di design adatto a questo è il cosiddetto "elenco di articoli". Qui si categorizza il contenuto e si mostra solo una piccola sezione alla volta. In questo modo mostri molti argomenti a colpo d'occhio senza inondare i tuoi utenti di informazioni. Un bell'esempio mostra qui RAIDBOXES:

RAIDBOXES WP unboxed
Vista della rivista WordPress wp unboxed

Questa divisione permette all'utente di scremare l'intero contenuto per area di interesse e quindi 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 suo 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 si dovrebbe agire principalmente in base alla funzione: Che tipo di immagini visualizzate? Devono essere disponibili a schermo intero? E cos'è più importante: il tuo contenuto nel suo insieme o le singole immagini? Vale la pena di ricorrere ad altre possibilità - come una lente d'ingrandimento che ingrandisce le immagini quando si passa il mouse? Quest'ultimo è particolarmente popolare nell'e-commerce.

Screenshot Unsplash UI Design Patterns
Vista in miniatura su unsplash.com

unsplash.com utilizza un misto di galleria di immagini e lightbox. Tuttavia, le immagini non vengono visualizzate 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 individualmente o navigare 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 vostri utenti verso i vostri canali di social media e/o a facilitare la loro interazione sociale. Potete leggere esempi più dettagliati qui.

Conclusione

In conclusione, posso raccomandarvi due approcci in particolare. Per prima cosa, visita e analizza quanti più siti web possibile per raccogliere l'ispirazione: Come hanno risolto o non risolto certi problemi gli altri designer? Cosa mi frustra quando navigo in rete? Quando è stata l'ultima volta che sono stato positivamente sorpreso - e perché? 

In secondo luogo, ricordate sempre che voi non siete l'utente. I visitatori del tuo sito web pensano in modo sorprendentemente diverso da te. Potrebbero non conoscere ancora il vostro prodotto. Pertanto, eseguite ripetutamente vari test per poter valutare come è realmente l'usabilità della vostra pagina.

Che domande hai per Sonja su UI Patterns?

Sentitevi liberi di usare la funzione di commento. Vuoi essere informato su nuovi articoli e consigli sul web design e lo sviluppo? Allora seguici su Twitter, Facebook o tramite la nostra newsletter.

Dopo aver studiato Game Design e scrittura creativa, si è specializzata nel web e app designe e nel loro sviluppo. La sua attenzione è rivolta alla gamification e al capire la motivazione e l'esperienza dell'utente, insieme alla passione e alla curiosità per i trend tecnologici.

Commenti su questo articolo

Scrivi un commento

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