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

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

Come deve essere strutturato il menu del vostro 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 vostro sito web o a ignorarlo? Come designer, mi sono occupato di domande sulla progettazione dell'interfaccia utente e sull'usabilità del web - potete trovare le risposte in questo articolo.

Cosa sono i modelli di progettazione dell'interfaccia utente (UI)?

I Design Patterns dell'interfaccia utente (UI) sono librerie di problemi di usabilità che sono già stati analizzati e risolti con successo. Tuttavia, non dovrebbero essere adottati uno a uno. Tuttavia, essi forniscono una base completa per un'esperienza d'uso armoniosa. I modelli UI sono lì per facilitare e accelerare il vostro flusso di lavoro.

Ulteriori suggerimenti su UX Design & Usabilità del Web

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

Formula per i modelli di design dell'interfaccia utente

Come sapete quali modelli di design sono appropriati per il vostro sito web e come utilizzarli correttamente? Chris Bank ha scritto di questo nel suo e-book Modelli di design dell'interfaccia utente mobile la seguente procedura è stata elaborata:

  • Identificazione del problema: cosa cerca di ottenere l'utente sul vostro sito web e quali problemi incontra? Provate a formulare i problemi in una sola frase.
  • Soluzione: altri progettisti hanno già risolto questo problema? Se sì, come?
  • Esempio reale: Guardate gli esempi e analizzateli come utente. Provate ad analizzare ciò che vi ha aiutato a risolvere un certo compito. Pensate a ciò che vi ha fatto pensare - o forse anche sconvolto - al compito. 
  • Uso: Riassumere i risultati della vostra analisi. Come potete implementarle sul vostro sito web in modo che offrano un valore aggiunto ai visitatori? Quali modelli di design è meglio evitare di utilizzare? Se avete una guida di stile, dovreste includere i vostri risultati.

4 categorie di modelli di design dell'interfaccia utente

Gli UI Design Patterns possono essere suddivisi in quattro categorie, che vi illustrerò brevemente in questa sezione. Purtroppo non sarò in grado di coprire tutti i modelli di design dell'interfaccia utente. Se volete approfondire l'argomento, il web vi offre possibilità quasi illimitate di leggere di più. Alcune risorse utili sul tema dei modelli di progettazione dell'interfaccia utente sono:

1. elementi di navigazione più comuni

La navigazione è uno degli elementi di interazione più importanti per l'utente: non solo funge da indice per la vostra pagina, ma anche da guida di orientamento. Il fatto che di solito sia posizionato in alto o a lato della pagina era in origine principalmente per motivi gerarchici. Con la navigazione mostriamo all'utente a colpo d'occhio cosa può fare sul nostro sito e dove si trova al momento.

Grazie ad anni di pratica, abbiamo interiorizzato queste conoscenze a tal punto che la tendenza al minimalismo non deve fermarsi alla navigazione. I Design Pattern sono quindi abbastanza personalizzabili - o devono anche essere individualizzati per il vostro sito per farli funzionare.

screenshot-www.castoretpollux.com-2020.06.11-18-05-59
Sito web di Ruota & Polluce

Castor et Pullex hanno seguito le regole dell'interfaccia utente e le hanno comunque adattate al loro sito: una navigazione che si trova nella schermata in alto a destra e diventa "appiccicosa" quando si scorre. Il logo che riporta sempre l'utente al "porto sicuro" - la home page.

Un sito web che permette molta interazione e quindi sembra quasi caotico, ottiene una piacevole fruibilità utilizzando soluzioni di design già note.

La navigazione "appiccicosa", come descritto nell'esempio precedente, è una meravigliosa invenzione del web design. Non solo possono essere utilizzati per mostrare animazioni impressionanti, ma fanno anche in modo che i visitatori del vostro sito web passino da "A a B" più rapidamente da "A a B". Con One Pager funzionano anche come un filo rosso: L'utente sa dove si trova e cosa ha già visto.

È simile con le briciole di pane: Non hanno molto senso con le pagine piccole. Ma per pagine più complesse possono fare miracoli. Non solo aiutano l'utente ad orientarsi, ma anche a tornare in qualsiasi punto della navigazione.

Un altro modo di utilizzare questi modelli è mostrato nell'esempio seguente:

I creatori di questo sito hanno adottato la conoscenza del menu mobile burger: da un lato, per facilitare una navigazione minimalista del loro sito, che non è estranea all'utente. D'altra parte, volevano dare al loro prodotto abbastanza spazio per stare in primo piano.

screenshot-demodern.com
Progetto campione da Demoders

Un po' fuori moda - ma almeno altrettanto utili - sono le cosiddette schede di navigazione. Ricordano un sistema di archiviazione e vengono compresi rapidamente e intuitivamente dagli utenti. Anche qui, nella versione snella, il lavoro semi-specializzato, così 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 modo da risparmiare spazio. Come schede modali, hanno anche il vantaggio che le pagine non devono essere completamente ricaricate per mostrare altri contenuti. Soprattutto nelle pagine dei prodotti dei negozi basate su di essi, come negli esempi WooCommerce che seguono: 

Modelli di progettazione dell'interfaccia utente: soluzioni collaudate per comuni problemi di usabilità
vista da Terrazza atlantica

Poi, un esempio meno minimalista per il confronto:

Modelli di progettazione dell'interfaccia utente: soluzioni collaudate per comuni problemi di usabilità
pagina campione da vestiti di bambù

I modelli di interfaccia utente sono spesso basati su interazioni nel mondo reale. Pertanto è importante non perdere mai di vista le proprietà fisiche e/o modificarle intenzionalmente. Perché questo porta al fatto che l'utente non è più in grado di comprendere intuitivamente queste azioni e le loro conseguenze. Per chiarirvelo, ho adattato l'esempio di cui sopra una volta:

screenshot-abbigliamento di bambù.co.uk-2020.06.11-18-33-55_modificato

Le proprietà fisiche della struttura delle cartelle non sono più indicate. Le schede ora sembrano elementi di navigazione fuori luogo. L'affiliazione degli elementi si perde un po' - sembrano disposti quasi a caso.

Menu di troppopieno e pulsanti "Jump to Section" (Vai alla sezione)

Per rendere la nostra lista completa, non dovrebbero mancare i menu di overflow e i pulsanti "Vai alla sezione". 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 solo clic. Soprattutto con One Pager, i pulsanti Jump to Section hanno senso: fanno risparmiare tempo ed evitano la frustrazione di un noioso scorrimento.

I menu a tendina hanno la loro origine meno nel migliorare la fruibilità delle pagine. Sono stati sviluppati per risparmiare spazio e per accogliere più contenuti nella navigazione. Inoltre, rendono il vostro design più ordinato e chiaro. I menu a discesa appartengono ai Design Patterns, spesso chiamati Anti-Patterns - perché non facilitano la navigazione nel sito web. Tuttavia, si consiglia comunque di utilizzare menu a tendina. Dopo tutto, la loro funzione è nota e appresa. Gli indicatori per un menu a tendina sono spesso gli schemi 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

Pulsanti e link sono intenzionalmente citati solo brevemente in questo articolo, in quanto dovrebbero essere sufficientemente familiari ad ogni designer. Non ci sono quasi limiti al design e all'animazione dei pulsanti. Il loro stile di solito dipende dalla disposizione visiva delle informazioni offerte. Dovrebbero essere chiaramente visibili nel Colore primario della pagina e posizionati in modo che siano raggruppati con il relativo contenuto.

Lo stesso vale per i link: Non devono più essere visualizzati in blu con una sottolineatura, come avveniva in precedenza. Ma la loro esistenza deve essere chiara e soprattutto uniforme. Conoscenze approfondite sui bottoni che si ottengono qui.

L'impaginazione - la condivisione di contenuti su più pagine - è particolarmente importante per i negozi di e-commerce che offrono un gran numero di prodotti. Con l'aiuto dell'impaginazione, il contenuto viene offerto su più pagine, il tempo di caricamento si riduce e il contenuto viene suddiviso in sezioni facilmente digeribili. Anche i giornali, come la 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 una tendenza negli ultimi anni, è ora uno dei modelli di IU appresi. Qui potete, ad esempio, collegarvi alle sottopagine visitate più frequentemente, memorizzare i vostri dati di contatto e visualizzare contenuti legali che non trovano posto nella navigazione principale. 

Il piè di pagina funziona in parte come un indice strutturato in modo diverso della vostra pagina. Ma può anche servire come una sorta di teaser per ulteriori informazioni. Una volta che l'utente ha sfogliato il vostro sito, il piè di pagina può offrire contenuti rilevanti - come articoli interessanti, link ai social media, ecc.

2. ingresso e uscita: Contatto e moduli di iscrizione

Oltre alle direttive sulla protezione dei dati, vale la pena di concentrarsi sulle esigenze degli utenti. Soprattutto sui dispositivi mobili un modulo di input può portare rapidamente alla frustrazione: Il già piccolo schermo, l'ambiente fisico durante l'uso, l'aspetto temporale e una possibile connessione instabile possono diventare rapidamente una prova snervante. Fortunatamente, ci sono alcuni modelli di design che hanno già affrontato esattamente questi problemi.

Suggerimento:

Lo stesso vale qui come in generale sul web: Il più breve possibile, il più a lungo possibile. Gli studi hanno dimostrato che l'aggiunta di domande inutili è un crollo della partecipazione e può costare molto.

Di seguito ho creato una forma fittizia per mostrarvi i principi più importanti:

Modulo
Principi per i moduli di input
  1. Test di tracciamento degli occhi hanno scoperto che elaboriamo le informazioni più velocemente quando sono disposte dall'alto verso il basso invece che da sinistra verso destra. Pertanto, è consigliabile posizionare l'intestazione sopra il campo del modulo e creare una sola colonna.
  2. È utile fornire all'utente un campione di input in segnaposto predefiniti - in questo modo le informazioni richieste vengono visualizzate in anticipo. Si dovrebbe evitare l'immissione di numeri frammentati, perché complicano solo l'immissione. Inoltre, dovrebbero essere programmati in modo da essere tolleranti nei confronti degli spazi.
  3. La gestione degli errori è un argomento importante e complesso. L'asterisco e il campo di input incorniciato in rosso si sono dimostrati modelli di interfaccia utente. Idealmente i campi dovrebbero essere autoesplicativi. Tuttavia ci si dovrebbe sempre aspettare che qualcosa non funzioni. Pertanto offrire diverse opzioni di aiuto. Ci sono diverse possibilità per questo: Un pulsante info, che offre aiuto quando si è in bilico. O il popup dei piccoli modali se il modulo non viene inviato con successo.
  4. Ha senso dare un feedback già durante l'input. Nel caso delle password, si è dimostrato utile anche per dare all'utente una valutazione qualitativa di quanto sia sicura la password scelta. 
  5. Il modulo Multi-Step ha diversi vantaggi psicologici. Prima di tutto, ha un effetto più chiaro e meno dissuasivo. Se l'utente viene poi mostrato anche dove si trova nella forma per mezzo di un indicatore (qui la barra di caricamento), sa esattamente cosa aspettarsi. La probabilità che si rompa prematuramente è minore. I dati personali devono sempre essere richiesti alla fine del modulo. Se il visitatore del vostro sito web ha già compilato in gran parte il 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 realmente bisogno e di motivare la richiesta. Se chiedete ai vostri utenti di iscriversi a qualcosa, è consigliabile indicare un vantaggio per loro à la "Ottenere sempre prima le migliori offerte". Nell'ultimo passo si dovrebbe dare una piccola panoramica di ciò che succede dopo - e di ciò che l'utente può aspettarsi quando.

Inoltre, i moduli devono includere la compilazione automatica (tramite i dati memorizzati nel browser) e il riconoscimento delle informazioni (come l'aggiunta della città dopo l'inserimento di un codice postale). Soprattutto WordPress molti moduli hanno questo già incluso di default. 

Si dovrebbe evitare l'uso di captchas, se possibile, o almeno mantenerlo al minimo. Secondo di questo studio Le captchas possono portare a una riduzione del 30% dell'interazione con la forma.

3. strutturare i contenuti

Come operatore del sito web, dovresti prestare particolare attenzione a come è strutturato il contenuto del tuo sito: I tuoi visitatori vengono aiutati a trovare la loro strada attraverso il tuo sito? I vostri contenuti sono facilmente accessibili e la loro gerarchia può essere compresa? 

La questione della facile accessibilità è particolarmente interessante per gli utenti che visualizzano il vostro sito in condizioni modificate. Ad esempio, le persone con disturbi della vista a colori e disturbi della vista. Se desiderate approfondire il tema dell'accessibilità e della libertà dalle barriere, qui troverete ulteriori informazioni: 

Se avete un blog o una rivista online, probabilmente conoscete il problema: avete molti contenuti interessanti che vorreste offrire nel modo più uniforme possibile. Un modello di design adatto a questo scopo è il cosiddetto "Elenco degli articoli". Qui potete categorizzare i vostri contenuti e mostrarne solo una piccola parte. In questo modo potete mostrare molti argomenti a colpo d'occhio senza inondare i vostri utenti di informazioni. Un bell'esempio mostra qui RAIDBOXES:

RAIDBOXES  WP unboxed
Vista della WordPress rivista wp unboxed

Questa divisione permette all'utente di sfogliare l'intero contenuto per aree di interesse e quindi di trovare più rapidamente ciò che gli interessa.

Per offrire determinati contenuti senza distrazioni, è possibile utilizzare i modal box. Queste caselle sono posizionate sopra il resto del sito e permettono all'utente di concentrarsi sul contenuto. Questo può essere necessario e importante. Si noti, tuttavia, che questi modelli sono anche più di un anti-pattern: Fondamentalmente bloccano la libertà d'azione dell'utente fintanto che il modale è aperto.

Usate correttamente, tuttavia, i modal box possono aiutare i vostri visitatori a comprendere meglio i vostri contenuti. Tuttavia, scatole modali troppo frequenti o apparentemente non provocate possono rapidamente causare frustrazione e un senso di impotenza.

Anche il Lightbox e la modalità a schermo intero appartengono a questa categoria. Da un lato, consentono all'utente di osservare da vicino i contenuti selezionati. D'altra parte rendono impossibile qualsiasi altra interazione. Pertanto è sempre importante offrire almeno un punto di fuga. Particolarmente noti sono il click su una X nella parte superiore destra dell'immagine o il click fuori dalla scatola per chiuderla di nuovo.

Le presentazioni sono anche un modo popolare di visualizzare le immagini. Si distingue tra auto-play e slideshow navigati manualmente. Le gallerie sono spesso elencate come immagini in miniatura e poi ingrandite con slide show e/o lightbox.

Qui si dovrebbe agire principalmente secondo la funzione: Che tipo di immagini rappresenta? Devono essere disponibili a schermo intero? E cos'è più importante: il 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 in sospensione? Quest'ultimo è particolarmente popolare nell'e-commerce.

Screenshot Unsplash-UI Design Patterns
Vista in miniatura di unsplash.com

unsplash.com utilizza un mix di galleria di immagini e lightbox. Tuttavia, le immagini non vengono visualizzate come miniature. Perché? Unsplash è una piattaforma che offre solo immagini da scaricare. Ciò significa che gli utenti devono poter decidere a prima vista a favore o contro l'immagine. Per poter prendere questa decisione, la risoluzione dell'immagine deve essere relativamente buona. Le miniature sarebbero troppo piccole per questo. E cliccando su ogni immagine singolarmente o navigando attraverso uno slideshow si riduce al minimo l'efficienza del sito molte volte.

Durante l'intero processo di implementazione e di concezione non si deve mai perdere di vista la questione dell'utilità/valore aggiunto e dell'importanza.

4. utilizzare i canali sociali

Si tratta di modelli che aiutano a guidare gli utenti verso i canali dei social media e/o a facilitare l'interazione sociale. Potete trovare esempi dettagliati di questi modelli qui Leggi.

Conclusione

In conclusione, posso raccomandare due approcci in particolare. Primo: visitare e analizzare il maggior numero possibile di siti web per raccogliere ispirazione: Come hanno risolto o non hanno risolto certi problemi altri progettisti? Cosa mi frustra quando navigo sul web? Quando è stata l'ultima volta che sono rimasto positivamente sorpreso - e perché? 

In secondo luogo, ricordate sempre che non siete voi l'utente. I visitatori del vostro sito web pensano in modo sorprendentemente diverso da voi. Potrebbero non conoscere ancora il vostro prodotto. Pertanto, condurre vari test ripetutamente al fine di valutare come l'usabilità sul vostro sito è effettivamente.

Quali domande a Sonja sui modelli dell'interfaccia utente ha da porre a Sonja?

Sentitevi liberi di usare la funzione di commento. Volete essere informati su nuovi articoli e consigli sul web design e lo sviluppo? Poi seguiteci su TwitterFacebook o nella 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.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

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