Come progettare contenuti leggibili per il Web

Progettare contenuti è qualcosa di più che fare qualcosa di bello. Devi creare un design che le persone effettivamente leggeranno e aiutarli a interagire con il contenuto. A volte, è più facile a dirsi che a farsi.

Le persone hanno generalmente una capacità di attenzione limitata e non dovresti aspettarti che digeriscano ogni parola sullo schermo. Ma puoi usare determinate tecniche ed elementi di progettazione per aiutare gli utenti a leggere il più possibile.

Stabilire la gerarchia con dimensioni e scala

Il design leggibile inizia con più livelli di testo. Stabilire una gerarchia di pensieri aiuterà gli utenti a muoversi nel testo.

Le dimensioni più grandi sono un'indicazione visiva che indica agli utenti di leggere prima una certa cosa perché è più importante. La maggior parte degli occhi degli utenti si sposterà naturalmente da elementi più grandi a quelli più piccoli creando un flusso visivo piacevole.

La maggior parte degli occhi degli utenti si sposterà naturalmente da elementi più grandi a quelli più piccoli creando un flusso visivo piacevole.

Sfrutta al massimo i tag H2, H3 e H4 nella progettazione e crea una scala coerente per i sottotitoli che possono essere utilizzati per suddividere grandi blocchi di testo.

La creazione di una scala con posizionamenti e dimensioni di testo coerenti semplifica ulteriormente gli utenti nella navigazione del testo. Questo vale sia per i contenuti di lunga durata che per i contenuti brevi nelle home page, come ad esempio Narrativa.

Nota come la home page ha quattro distinti livelli di testo nell'area dell'eroe. C'è un grande titolo a colori, con un breve frammento sopra. Quindi il contenuto del corpo ha uno stile con una linea in grassetto per l'enfasi. La maggior parte degli utenti vedrà le parole in questo ordine: Titolo, testo in grassetto, corpo del testo, snippet del titolo a causa dei pesi, delle dimensioni e della scala delle lettere.

Scegli i caratteri leggibili

Mentre un divertente carattere tipografico di novità o uno script elaborato potrebbe essere molto divertente da progettare, non è sempre la scelta migliore per l'utente finale.

I caratteri leggibili sono quelli con maggiori probabilità di essere letti.

Ecco perché:

  • I caratteri altamente leggibili sono più facili da scansionare.
  • Le forme delle lettere sono facili da vedere in diverse dimensioni.
  • Le lettere non corrono insieme o creano spazi o forme scomode.
  • Questi caratteri tipografici sono comunemente usati e facili per gli utenti. (Anche i caratteri tipografici simili, ma non appartenenti alla stessa famiglia, sembrano familiari alla maggior parte degli utenti.)

Le caratteristiche di un carattere tipografico leggibile includono:

  • Peso standard - non troppo spesso o sottile
  • X-altezza comune - non troppo corto o alto
  • Forme di lettere più arrotondate - in modo che il? O? ha una forma circolare
  • Leggermente o meno
  • Lettere che non sono troppo vicine o distanti

Osservando queste caratteristiche puoi vedere che quasi tutte le categorie di tipi probabilmente includono un'opzione leggibile. Non è necessario attenersi esclusivamente a serifs o sans serifs; un mix di altri caratteri tipografici è effettivamente buono. Assicurati di testare le parole che intendi utilizzare in quel carattere per assicurarti che siano facili da leggere.

Impilare il contenuto per le persone che eseguono la scansione

Il contenuto impilato risale alla gerarchia. Ma con un elemento in più: pensate agli elementi di testo e non testuali quando impilate i contenuti.

Se l'utente vede un blocco di testo e un'immagine sullo schermo, l'immagine è quasi sempre la cosa che riceve la sua attenzione per prima, rendendo importante impilare gli elementi in un modo che aiuti gli utenti a spostarsi attraverso di essi dall'immagine al testo.

Alzheimers New Zealand, sopra, utilizza lo stacking per portare gli utenti al titolo principale. Nota come il testo è posizionato al centro dell'immagine con tre persone. L'occhio va prima alle facce ma poi scende al cerchio sottilmente animato con il testo all'interno. Quindi l'occhio si sposta sul blocco di testo più piccolo e secondario.

Ed ecco la cosa: tutto questo è accaduto così rapidamente quando hai visto per la prima volta l'immagine che forse non ci avevi nemmeno pensato. La maggior parte degli utenti esegue la scansione dell'intero schermo allo stesso modo quando decide se interagire con il contenuto o meno.

Play Up Visuals

Riproduci le immagini integrandole con altri elementi per un design più coinvolgente.

Vuoi veramente assicurarti che gli utenti vedano i tuoi contenuti? Integrare testo e immagini in modo significativo. Crea un'immagine di un eroe che utilizza un'interessante abbinamento di colori visivo o insolito o una combinazione di animazioni e caratteri per mettere in pausa gli utenti.

L'errore che a volte fanno i progettisti è separare ogni elemento nella sua scatola o spazio. Riproduci le immagini integrandole con altri elementi per un design più coinvolgente.

Octavo Designs, sopra, ha una homepage che non puoi evitare di essere coinvolta. Per i principianti, c'è una mucca dall'aspetto molto divertente su uno sfondo colorato. Il testo è molto parte dell'immagine. (In realtà tocca le corna della mucca in alto.) Questa combinazione di immagini e testo attira gli utenti verso il contenuto, facendogli desiderare di più.

Mantieni linee e pensieri

Quando pianifichi il design, pensa in brevi raffiche. Ogni pagina o schermo dovrebbe concentrarsi su un singolo pensiero e su semplici blocchi di testo di facile lettura.

Struttura e organizza pensieri per gli utenti in modo tale da incoraggiare la lettura:

  • Utilizza i paragrafi da una a tre frasi
  • Incorporare elenchi puntati
  • Usa sottotitoli per suddividere grandi blocchi di testo
  • Includi collegamenti per l'interattività
  • Punti chiave evidenziati o in grassetto
  • Modifica tutte le copie per chiarezza e brevità

Crea un punto focale

Ogni disegno dovrebbe avere un punto focale. Il punto focale è la parte del design che quasi tutti gli utenti vedranno prima. Spesso è altamente visivo o in forte contrasto con altri elementi sullo schermo.

Il punto focale dovrebbe stabilire di cosa tratta il progetto e perché gli utenti dovrebbero occuparsene.

Nell'esempio sopra, Abingworth utilizza un blob rosa brillante come punto focale. Attira l'attenzione a causa del colore e della curiosità (che cos'è?) E perché contrasta con lo spazio bianco e aperto sull'altro lato dello schermo.

Il punto focale del design dovrebbe essere la migliore immagine, illustrazione o animazione e riguardare i messaggi chiave. Il punto focale dovrebbe stabilire di cosa tratta il progetto e perché gli utenti dovrebbero occuparsene. Perché questo è il primo posto dove gli utenti guarderanno, dà il tono per come (e se) interagiranno con il design.

Conclusione

La creazione di contenuti che gli utenti in realtà leggeranno è molto più di un semplice testo sullo schermo. È una combinazione di elementi di scrittura e elementi visivi che attirano l'attenzione degli utenti, li aiuta a dare un'idea di cosa è il design e quindi decidono di continuare ad interagire con esso.

Anche se sembra molto, tutto accade in pochi millisecondi. C'è una ricerca che dice che la maggior parte degli utenti ha la capacità di attenzione di un pesce rosso - 8 secondi - sfruttare al massimo il tempo con contenuti facili da leggere.