Best practice per la progettazione dell'interfaccia utente per una migliore scansionabilità

I designer di prodotti spesso comunicano molte informazioni in un breve periodo di tempo. Coloro che comprendono il termine "scansionabilità", schemi comuni di eye-tracking e principi di progettazione moderni sono meglio attrezzati per creare contenuti facilmente consumabili e "interfaccia utente appiccicosa".

Ogni giorno Internet si espande con nuove app, siti Web, articoli e altro ancora. Sta diventando sempre più difficile attirare l'attenzione degli utenti sovraccarichi di informazioni che trovano difficile filtrare le informazioni rilevanti da contenuti irrilevanti. L'esperto di marketing David Zheng ha scoperto che in oltre il 60% dei casi i visitatori si arrendono e lasciano un sito Web in meno di 15 secondi .

La ricerca indica che gli utenti in realtà non leggono tutto ciò che vedono parola per parola: scansionano e quindi determinano se il materiale vale il loro tempo. Rendendo immediatamente scansionabili i contenuti appropriati, un designer di prodotti può convertire un visitatore a breve termine in un utente di lunga durata. Di seguito è riportata una selezione di best practice per la progettazione dell'interfaccia utente per aiutare ad amplificare l'importante fattore di progettazione dell'usabilità che spesso viene trascurato: scannabilità .

Che cos'è la scansionabilità?

Gli esperti di UX del Nielsen Norman Group hanno condotto una ricerca per rispondere alla domanda: come leggono le persone sul web? Le sue scoperte erano semplici. Non lo fanno.

Il gruppo ha scoperto che è probabile che solo il 16% dei visitatori per la prima volta su un sito web lo legga parola per parola. L'altro 84% cercherà rapidamente elementi hook, come titoli, frasi, immagini o animazioni prima di decidere di approfondire il materiale. Questo comportamento non è limitato alle interfacce digitali. Ad esempio, le persone raramente leggono ogni parola di un giornale. Al contrario, scansionano gli stessi elementi - titoli, immagini, ecc. - per determinare cosa è degno del loro tempo.

La scansione è, quindi, l'approccio per disporre il contenuto in modo che sia facile da scansionare. Spesso c'è solo un breve periodo di tempo per impressionare un visitatore con contenuti di valore sullo schermo, il che rende fondamentale ottimizzare completamente un'interfaccia per il modo in cui gli utenti leggono sul Web. Indipendentemente dal fatto che il prodotto digitale sia un sito Web, un'applicazione o un altro tipo di interfaccia utente, la scannabilità è uno dei fattori più significativi del design intuitivo.

I vantaggi di un'interfaccia scansionabile

Il modo ideale per determinare la scannabilità di un prodotto digitale è osservarlo dal punto di vista dell'utente e rispondere a queste domande chiave:

1. Il contenuto della pagina corrisponde alle aspettative del pubblico?
2. Il messaggio principale della pagina è di facile comprensione in un breve periodo di tempo?

Sebbene la produzione di interfacce scansionabili richieda uno sforzo, a lungo termine si ripaga creando un design dell'interfaccia utente appiccicoso. Lo studio di Nielsen Norman Group mostra che le pagine ottimizzate per la scansione diventano molto più efficaci nei seguenti modi:

• Gli utenti hanno tempi di completamento delle attività più rapidi
• Gli utenti possono facilmente definire se il contenuto è adatto a loro
• Gli utenti commettono meno errori nel ricordo
• Gli utenti hanno un'idea migliore della struttura di una pagina
• Un sito riceve valutazioni soggettive più favorevoli per credibilità e qualità dei contenuti
• Le frequenze di rimbalzo sono ridotte
• La probabilità di visite di ritorno è aumentata
• L'ottimizzazione per i motori di ricerca (SEO) è migliorata

Il potere delle abitudini degli utenti nei modelli di scansione

Ognuno consuma i contenuti in modo diverso. Tuttavia, attraverso la ricerca, sono emersi modelli di eye-tracking ben definiti. Sapere in che modo gli utenti interagiscono con le interfacce entro i primi secondi può aiutare i progettisti a dare priorità ai contenuti, a posizionare informazioni importanti nelle zone visibili primarie e a stabilire una forte gerarchia visiva.

Secondo il Nielsen Norman Group, esistono sette modelli comuni in cui gli utenti scansionano un'interfaccia:

• Il famoso modello F: dodici anni dopo la sua scoperta, questo modello è ancora il modello di scansione più comune, anche durante la scansione di interfacce mobili. L'occhio si muove orizzontalmente, come è tipico durante la lettura, quindi salta al contenuto sottostante. Questo può essere fatto lentamente e sistematicamente o rapidamente con una mappa di calore spottier.
• Motivo a Z: il modello a zig-zag è tipico delle pagine Web con una presentazione uniforme delle informazioni e una gerarchia visiva debole.
• Schema torta a strati: gli utenti seguono questo schema durante la scansione di intestazioni e sottotitoli per determinare rapidamente dove (e se) le informazioni che stanno cercando possono essere trovate sulla pagina.
• Pattern maculato: le creatività in genere seguono questo modello di scansione, in cui saltano grandi porzioni di testo e scansionano componenti visivi come colore, forme e anomalie delle proporzioni per trovare un'informazione specifica.
• Pattern di marcatura: come un ballerino che si fissa su un oggetto per rimanere in equilibrio mentre volteggia, gli utenti mantengono l'occhio concentrato su un punto durante lo scorrimento, uno schema molto comune per l'UX mobile.
• Schema di esclusione: gli utenti saltano deliberatamente le prime parole di una riga quando più righe di testo in un elenco iniziano tutte con le stesse parole.
• Modello di impegno: questo è un modello raro e si verifica solo quando un utente è molto interessato al contenuto e motivato a consumarlo tutto.

I modelli adottati dall'utente riguarderanno principalmente la motivazione per visitare la pagina web: che tipo di informazioni stanno cercando? Quanto tempo sono disposti a dedicare per trovarlo? Ci sono altri siti Web che potrebbero fornire queste informazioni più rapidamente?

Fornire valore attraverso la ricerca degli utenti e i modelli di scansione

Il dottor Donald Norman, il ricercatore di scienze cognitive che ha coniato il termine " design centrato sull'utente ", ha scritto: "Non è sufficiente costruire prodotti che funzionino, che siano comprensibili e utilizzabili, abbiamo anche bisogno di costruire prodotti che portino gioia ed eccitazione , piacere e divertimento, e sì, bellezza nella vita delle persone”.

La ricerca degli utenti è una pietra miliare della progettazione incentrata sull'utente e delle migliori pratiche di progettazione dell'interfaccia utente. Successivamente, per migliorare la scansione di un'interfaccia digitale, un progettista deve comprendere l'utente finale. Quando i modelli dell'interfaccia utente sono progettati dal punto di vista dell'utente finale, si verifica un'esperienza naturale e intuitiva.

Le soluzioni di impatto non sono fatte di astrazioni. Di seguito una serie di prodotti digitali belli, praticabili e sostenibili. Ogni team di progettazione ha definito il pubblico chiave, ha utilizzato modelli di eye-tracking e ha progettato layout di contenuto per produrre un'interfaccia utente appiccicosa.

Instacart sfrutta la progettazione incentrata sull'utente attraverso i modelli di progettazione dell'interfaccia utente. Una parte significativa del loro pubblico è composta da anziani e utenti con disabilità visive, quindi gli elementi sono elencati in una griglia ad alto contrasto con una chiara enfasi sui principali CTA. Il design consente alla modalità di scansione Spotted Pattern di ospitare visitatori di lunga durata.

Yelp serve gli utenti alla ricerca dei migliori ristoranti, negozi, locali notturni, cibo, ecc. È probabile che le persone valutino le recensioni in base ai propri criteri personali e a ricerche approfondite, rendendo il modello F il modello di scansione più applicabile. Yelp, quindi, presenta i contenuti in modo facilmente scansionabile, con un'enfasi su elementi specifici come valutazioni, immagini e indirizzi.

Airbnb è senza dubbio una delle app più amate in circolazione, ed è in gran parte dovuto alla ricerca degli utenti. Poiché sanno che i loro utenti si trovano spesso su dispositivi mobili, progettano per adattarsi al modello di marcatura. L'interfaccia pulita e intuitiva è strutturata in modo da enfatizzare le immagini dell'appartamento di grandi dimensioni ea larghezza intera. Hanno intenzionalmente mantenuto il numero di immagini di copertina per schermo limitato a due in modo che l'utente possa dedicare adeguatamente il proprio tempo e vedere se l'elenco attira la sua attenzione o meno.

Un fattore da tenere a mente quando si migliora la scansionabilità di un prodotto digitale è definire il tipo di dispositivo su cui verrà visualizzato. La piattaforma mobile di Airbnb riceve un traffico significativo. Come si vede nella mappa termica dell'utilizzo del pollice, Airbnb ha posizionato strategicamente gli elementi dell'interfaccia utente più comunemente utilizzati, come "Esplora" e "Ricerche salvate", a un facile accesso durante lo scorrimento e la scansione.

Best practice per la progettazione dell'interfaccia utente per una migliore scansionabilità

Creare una corretta gerarchia visiva

La gerarchia visiva di un'interfaccia digitale si riferisce alla disposizione e alla presentazione degli elementi di progettazione dell'interfaccia utente per comunicare i livelli di importanza in modo che gli utenti possano cercare rapidamente le informazioni desiderate. Ci sono diversi fattori nella progettazione di un layout con una corretta gerarchia visiva:

• Dimensione
• Colore
• Contrasto
• Prossimità
• Allineamento
• Spazio negativo
• Ripetizione

Prendendo in considerazione questi modelli di progettazione dell'interfaccia utente durante la creazione di un design del layout dell'interfaccia utente, un designer garantirà che il prodotto finale abbia un layout dall'aspetto eccezionale, armonioso e intuitivamente scansionabile.

La pagina dei risultati di ricerca di Google utilizza tutti i fattori della gerarchia visiva per aumentare la scansionabilità. I titoli sono enfatizzati dall'uso del colore, della dimensione e, successivamente, del contrasto. Lo spazio negativo che circonda ogni titolo contribuisce a renderlo la prima cosa che un utente eseguirà la scansione.

Quando un utente trova un titolo pertinente, può verificare la credibilità del collegamento, un elemento facilmente riconoscibile a causa del colore e della vicinanza. Successivamente, per valutare meglio il risultato, analizzeranno la copia del contenuto che è coerente per colore, dimensioni e vicinanza. Oltre a questi fattori, la ripetizione e l'allineamento rendono i risultati di ricerca di Google generalmente facili da scansionare.

Sfrutta lo spazio negativo

Il brillante Claude Debussy una volta disse: "La musica è lo spazio tra le note". Lo stesso sentimento vale per la scannabilità: lo spazio negativo tra gli elementi è ciò che rende un layout di successo. La giusta quantità di spazio negativo (bianco) attorno agli elementi dell'interfaccia utente porta l'attenzione sugli elementi stessi. Sottolinea il contenuto e fornisce lo spazio necessario per respirare per garantire che il layout non sembri disordinato. Senza spazio per respirare, il cervello umano ha meno probabilità di scansionare i punti di interesse e ha maggiori probabilità di essere confuso.

Usa i sottotitoli per riassumere il contenuto

Le persone spesso rispondono negativamente a grandi porzioni di testo. Può far presumere che perderanno tempo se il paragrafo non corrisponde ai loro interessi. Le best practice per la progettazione dell'interfaccia utente offrono una soluzione a questo problema. Aggiungendo brevi sottotitoli all'inizio di lunghi articoli, l'utente ha una visione completa dell'argomento.

Durante la scrittura del sottotitolo, è fondamentale mantenerlo al punto. Comunica semplicemente il messaggio chiave offerto dal contenuto di seguito.

Crea elenchi puntati e numerati

Il cervello umano è molto sistematico: osserva il contenuto e poi lo raggruppa in unità significative. Pertanto, è più probabile che un utente comprenda un elenco puntato o numerato rispetto a diversi punti uniti in un paragrafo testuale.

Lo spazio negativo creato dagli elenchi semplifica la scansione per un utente, quindi è utile cercare attentamente le opportunità. Se più di due punti all'interno di un testo sono paralleli tra loro e ciascuno di essi non richiede più di due frasi per essere descritti, questo è un buon candidato per una lista. Nielsen Norman Group fornisce ulteriori informazioni sulla creazione di contenuti digitali puntati.

Visualizza il contenuto

Gli utenti digitali moderni sono naturalmente visivi e non sempre rispondono bene al contenuto testuale (anche se è perfettamente strutturato e segue tutti i suggerimenti per la progettazione dell'interfaccia utente per una scansione ideale). Gli ambienti esterni saranno sempre un fattore determinante. Pertanto, per compensare layout ricchi di testo, l'uso di immagini e grafica offre interruzioni visive sia informative che emotivamente accattivanti. Come si suol dire, una foto vale più di mille parole!

Elementi visivi originali (illustrazioni, foto accattivanti, ecc.) possono facilmente catturare l'attenzione dell'utente e supportare il concetto stilistico generale. Inoltre, possono migliorare la gerarchia visiva e rendere il testo più facile da digerire. Tuttavia, esiste il pericolo che un elemento grafico possa causare un effetto negativo se non utilizzato correttamente. Prima di trasformare le idee chiave in grafica, è fondamentale che i designer comprendano completamente il contenuto che stanno progettando.

Dare un'enfasi adeguata alle CTA

La maggior parte delle esperienze digitali mira a suscitare un'azione particolare da parte dell'utente. Sebbene i pulsanti di invito all'azione (CTA) spesso sembrino molto semplici, sono progettati strategicamente per aiutare l'utente a completare un'azione, come acquistare, aggiungere a un carrello o semplicemente andare a un'altra pagina.

Le migliori pratiche di progettazione dell'interfaccia utente suggeriscono di posizionare l'invito all'azione vicino al contenuto che descrive l'azione, rendendola intuitiva per l'utente. Un modo efficace per verificare se la CTA è ben proporzionata, colorata e posizionata è convertire temporaneamente il progetto finale in scala di grigi. Se il CTA rimane chiaramente visibile ed enfatizzato, l'interfaccia utente appiccicosa è fatta bene.

L'importanza della scansionabilità

Ci sono molti elementi che determinano se un progetto di layout dell'interfaccia utente sarà ben accolto dalle persone, come la pertinenza dei contenuti, le soluzioni della concorrenza e la logica aziendale. Secondo Forbes , la scannabilità potrebbe essere il fattore più trascurato del marketing dei contenuti. Creando contenuti scansionabili, un visitatore a breve termine può diventare un utente duraturo.

Il contenuto scansionabile dimostra all'utente finale che il suo tempo è prezioso e offre l'opportunità di comprendere il messaggio principale semplicemente dando un'occhiata al design del layout. Il blogger virale e professore di giornalismo Kim Keller fa notare ai designer che “stai avviando una conversazione con qualcuno che desideri come cliente. È una relazione e nessuna relazione può sopravvivere se non trascorri del tempo insieme. Rispetta il loro tempo e rendilo utile”.

• • •

Ulteriori letture sul blog di Toptal Design:

• Procedure consigliate per la progettazione dell'interfaccia utente ed errori comuni
• Stati vuoti: l'aspetto più trascurato dell'esperienza utente
• La semplicità è la chiave: esplorare il design Web minimale
• Principi euristici per interfacce mobili
• Progettare per la leggibilità - Una guida alla tipografia Web