Immaginate di entrare in un negozio al dettaglio per cercare dei nuovi abiti da lavoro. Mentre vi guardate intorno, notate delle macchie sul pavimento, scaffali disorganizzati e uno strano odore. Rimarreste nel negozio e comprereste qualcosa?
Il design del negozio influenza il comportamento dei clienti e lo stesso vale per i siti web.
Un sondaggio condotto da Clutch su 612 persone ha rilevato che l’83% dei partecipanti nota se il design di un sito web è esteticamente piacevole e aggiornato. In alternativa, il 50% dei partecipanti abbandonerebbe per sempre un sito web se ritiene che i contenuti siano irrilevanti o non rispondano alle proprie esigenze.
Quindi, come si fa a progettare un sito web che piaccia ai clienti?
Ne parliamo in questo articolo. Vi mostreremo perché un buon web design è essenziale e condivideremo 15 principi di web design che potrete sfruttare per creare un sito web di alta qualità.
Perché un Buon Web Design È Importante?
Chi lavora come web designer in media guadagna 57.000 dollari all’anno, circa 8.000 dollari in più rispetto ai web developer junior, che in media guadagnano 44.000 dollari all’anno. I designer ricevono compensi ragionevoli per un buon motivo: il loro lavoro è fondamentale.
Quando un nuovo cliente visita il vostro sito web, si forma la prima impressione che influenza le sue future interazioni con il vostro brand. È a questo punto che si forma la prima opinione su di voi.
Il vostro sito web trasmette anche l’identità, la visione e la posizione del vostro brand all’interno del settore. Se avete concorrenti molto agguerriti con un prodotto simile, un sito web che faccia dire “wow” alla gente vi renderà più memorabile e aumenterà la notorietà del vostro brand rispetto alla concorrenza.
Inoltre, un sito web solido può migliorare i vostri sforzi di ottimizzazione per i motori di ricerca (SEO).
I motori di ricerca considerano il modo in cui le persone rispondono ai siti web quando li classificano nei risultati di ricerca. Se la vostra frequenza di rimbalzo è bassa e le persone visitano spesso più pagine del vostro sito, i motori di ricerca vi posizioneranno probabilmente più in alto rispetto a un concorrente con una frequenza di rimbalzo elevata.
Anche la SEO tecnica è importante. I siti web con titoli, strutture di pagine e link ben progettati sono più accessibili. Per questo motivo, sia i motori di ricerca che i clienti li preferiscono. Vediamo alcuni importanti principi di web design.
15 Principi per un Web Design Efficace
Quando parliamo di “principi di web design”, ci riferiamo a regole generali per la progettazione degli elementi testuali e visivi di un sito o di una pagina web. Ogni brand adotta i principi del web design in modo diverso: alcuni sono in linea con le best practice, altri no.
Per aiutarvi a creare un sito web eccellente, ecco 15 principi di web design (oltre a esempi di siti web che li usano in modo efficace):
1. Le Pagine Devono Essere Facili da Navigare
Nello studio di Clutch sull’esperienza degli utenti sui siti web, il 94% dei partecipanti considera la navigazione del sito web come la “caratteristica più importante”.
Non c’è da stupirsi del perché. Se un utente di un motore di ricerca arriva sul vostro sito web alla ricerca di informazioni sul “mobile design” e non le trova, il passo successivo più naturale è quello di cliccare “indietro” e cercare un altro sito web.
Come si fa ad adottare una navigazione ben pianificata? Ispiratevi al sito web di The Cool Club.
Quando entrate nella homepage del Cool Club, il layout del sito è estremamente chiaro. Potete navigare verso le sezioni chiave dei prodotti (come “giochi di carte” e “lista dei desideri”) usando i pulsanti sul lato sinistro, oppure potete navigare verso le pagine “informazioni” e “contatti” con i pulsanti sulla destra.
Anche le pagine dei prodotti di The Cool Club sono molto facili da navigare. Attualmente il brand dispone di un mazzo di carte interattivo che presenta 54 belle varianti e le relative pagine. È sufficiente scorrere verso il basso e fare clic sulla carta che si desidera vedere meglio.
Per creare un sito web altrettanto efficace, suddividete i contenuti in categorie chiare per gli header e i footer e date loro titoli descrittivi. Poi ordinate le pagine per argomento, in modo che le persone possano navigare facilmente tra argomenti simili.
Inoltre, fate in modo che l’header e il footer siano coerenti in tutto il sito.
2. Sfruttate Sempre lo Spazio Negativo
Lo spazio negativo (o “spazio bianco”) è l’area che circonda gli argomenti di una pagina, siano essi immagini, video, testo o pulsanti.
Molti esperti di marketing si affrettano a riempire tutti gli spazi liberi di una pagina, sperando che dare alle persone più informazioni li renda più partecipi. Tuttavia, questo spesso si traduce in pagine sovraccariche e confuse.
È qui che entra in gioco lo spazio negativo. L’uso dello spazio negativo enfatizza gli elementi più critici di ogni pagina, perché la mancanza di colore attira lo sguardo del visitatore verso le aree più luminose.
Naturalmente, “usare lo spazio negativo” non significa “creare un noioso sito web tutto bianco”. Al contrario, potete sfruttare lo spazio usando i colori del vostro brand, proprio come fa Garoa.
La homepage di Garoa usa una palette di colori crema per creare un’atmosfera, sfruttando al contempo lo spazio negativo. Il risultato è che lo sguardo si concentra sui contenuti introduttivi della sezione “Skincare for Autumn” al centro, invece che sulle parti meno importanti.
Sfruttate lo spazio bianco per mettere in evidenza la gerarchia nel vostro sito web.
3. Le Pagine Devono Essere Coerenti, ma Coinvolgenti
Quando leggete nomi di marchi come “Cadbury”, “Hershey’s” o “Nike”, probabilmente vi viene subito in mente la visione dei loro loghi, font e stili di design. Questo è il potere di un branding coerente.
Quando progettate il vostro sito web, create pagine con elementi coerenti per dare al vostro brand una chiara identità visiva. Questo significa che:
- Usate gli stessi font, stili e colori per gli header
- Mantenete gli stessi spazi tra gli elementi visivi delle varie pagine
- Usate palette di colori anziché colori casuali
- Stabilite delle linee guida di layout per i contenuti di lunga durata, come le notizie e gli articoli dei blog
- Usate un modello di sito web per tutte le pagine
Le pagine coerenti non devono necessariamente avere un aspetto completamente uniforme. Al contrario, potete bilanciare coerenza e coinvolgimento mescolando gli elementi.
Per esempio, potete usare font e colori diversi per gli header H1, H2 e H3. Oppure, potete modificare il layout di diversi tipi di pagine, per mescolare le cose.
4. Approfittate dei Colori Complementari
I colori complementari sono coppie di colori che potete mescolare senza che il vostro design risulti eccessivo e pesante.
Il modo in cui i colori vengono visualizzati su uno schermo segue il modello di colore Rosso, Verde e Blu (RGB da Red-Green-Blue) piuttosto che il modello Ciano, Magenta, Giallo e Nero (CMYK, da Cyan, Magenta, Yellow, Black) usato nella stampa. Anche chi dipinge spesso usa il modello di colore Rosso-Giallo-Blu (RYB) che considera i colori complementari come rosso-verde, blu-arancio e giallo-viola.
Indipendentemente dal modello che preferite, l’uso dei colori complementari raggiunge uno scopo simile a quello del bianco e nero. I colori complementari danno enfasi e creano una chiara identità visiva per il vostro brand.
Si vede bene sul sito web di Swab The World.
Nella schermata qui sotto, l’associazione benefica per la lotta contro la leucemia usa il verde e le sfumature del magenta. Questi colori cambiano in altre combinazioni di colori complementari quando si visitano le diverse sezioni del sito (anche se tutti i colori hanno una saturazione simile, per cui il brand rimane coerente).
I colori complementari sono un principio facile da seguire nel vostro design. Se volete mantenere le cose semplici, selezionate due colori complementari e aggiungeteli a elementi contrastanti (come un H2 e il testo del corpo). Oppure usate più tonalità di ciascun colore in ogni pagina.
5. Progettate Pensando al Vostro Pubblico di Riferimento
Se guardate i siti web di The Cool Kids, Garoa e Swab The World, potete notare che ognuno di essi ha un’atmosfera unica. Questa sensazione deriva dall’adattamento del design del sito web al pubblico.
La personalizzazione è l’obiettivo finale. Alla maggior parte di noi piace acquistare prodotti e servizi da brand con cui ci sentiamo allineati e rappresentati. Infatti, una ricerca dimostra che il 72% dei consumatori apprezza l’acquisto da aziende che “si allineano con le loro convinzioni e i loro valori”. Quindi, se qualcuno visita il vostro sito web e vede riflessi i propri valori, obiettivi e priorità, è più probabile che acquisti da voi.
Per personalizzare il design del vostro sito web in base al pubblico, prendete in considerazione:
- Quali immagini risuonano con il vostro mercato di riferimento
- Quale tono funziona per il vostro pubblico (per esempio, professionale, minimalista, frizzante, ecc.)
- Quali sono gli argomenti per i quali il vostro mercato target arriva sul vostro sito web
- Come potete trasmettere il posizionamento del vostro brand attraverso il design del vostro sito web
- A quali call-to-action (CTA) risponde il vostro pubblico (e dove dovreste metterle per ottimizzare il tasso di click-through (CTR))
Punti bonus se potete usare le automazioni del sito web per offrire un’esperienza personale basata sul profilo dell’utente e sulle precedenti interazioni con il vostro brand.
Potrebbe essere utile trarre ispirazione dalla concorrenza o da brand che vendono cose diverse al vostro target demografico.
6. I Font Devono Essere Leggibili e Accessibili
I font che usate sul vostro sito web determinano se le persone possono leggere o meno ciò che avete scritto. È bene ricordare che sono molto importanti.
La prima cosa da considerare quando si sceglie un font è la sicurezza sul web. I font sicuri per il web sono supportati dai sistemi operativi e dai browser web, quindi funzioneranno sulla maggior parte dei dispositivi.
Dovete anche considerare l’accessibilità. I font accessibili devono essere chiari e facili da leggere sia a grandi che a piccole dimensioni. Per esempio, i font in corsivo non sono molto accessibili, mentre il Times New Roman lo è abbastanza.
Inoltre, quando scegliete un font, osservate le tendenze dei font su altri siti web. Nel 2021, lo scienziato Michael Li ha analizzato i font di oltre 1.000 siti web. Ha riscontrato le seguenti tendenze:
- L’85% dei font non usa i serif (le piccole grazie aggiunte alle lettere nei font dei giornali)
- I cinque font principali sono Sans Serif, Arial, Helvetica, Helvetica Neue e Roboto
- Le intestazioni H1 hanno il 58% di probabilità di non avere i font serif (rispetto al 93% del testo dei paragrafi)
- Le due dimensioni più comuni per i font dei paragrafi sono 14 px e 16 px
Potreste scegliere di sfruttare queste informazioni per selezionare uno stile di font che si adatti a ciò che le persone cercano nei siti web. Oppure potreste scegliere di fare qualcosa di diverso.
Virgin è un brand che ha scelto la seconda opzione. Nella schermata sottostante, Virgin ha utilizzato almeno cinque font. Questi font separano le sezioni della pagina e le rendono accattivanti.
7. Seguite la Legge di Fitt e la Legge di Hick
Lo psicologo Paul Fitts sviluppò per la prima volta la Legge di Fitt nel 1954, ma nel 2022 è ancora di grande attualità nel web design. La legge di Fitt sostiene che le dimensioni di un obiettivo influenzano il tempo necessario per raggiungerlo.
In un contesto di web design o di User Experience (UX), questo significa che le persone impiegheranno meno tempo a fare clic su pulsanti più grandi o più tempo a fare clic su pulsanti più piccoli. Quindi, per sfruttare la legge di Fitt, dovreste rendere i vostri pulsanti CTA estremamente grandi e ben visibili, in modo che sia più facile farci clic sopra.
Il termine “facile” è fondamentale in questo caso. La Legge di Hick, sviluppata dallo psicologo britannico William Edmund Hick e dallo psicologo americano Ray Hyman, afferma che le persone si affaticano ogni volta che decidono qualcosa.
Quindi, più decisioni chiedete di prendere a chi visita un sito web, maggiori sono le possibilità che seguire la procedura sia troppo faticoso.
8. Usate l’Invarianza per Evidenziare le Informazioni Chiave
Quando qualcosa è “invariante”, si distingue come un’opzione unica rispetto ad altre molto simili. L’esempio più ovvio di invarianza è l’evidenziazione dei piani nelle pagine dei prezzi, come questa di Box.
Ma questo non è l’unico modo in cui potete usare l’invarianza. L’invarianza può aiutarvi a stabilire una gerarchia visiva nelle vostre pagine per evidenziare le informazioni chiave e attirare le persone verso le parti importanti della pagina.
Per esempio, date un’occhiata a come il Frans Hals Museum ha usato l’invarianza per creare una gerarchia visiva sulla sua homepage:
La gerarchia in questa immagine è la seguente: il grande “Welcome”, le immagini, il pulsante “acquista i biglietti”, il pulsante “tutte le mostre” e poi gli altri contenuti.
Per usare l’invarianza quando create la vostra gerarchia, classificate gli elementi della pagina in ordine di importanza. Quindi, regolate le dimensioni, il colore e la posizione di ogni elemento fino a quando gli occhi dei visitatori non si dirigeranno verso ogni elemento nell’ordine che desiderate.
9. Per le CTA: Usate un Linguaggio Chiaro Che Faccia Venire Voglia di Cliccare
Abbiamo accennato all’importanza di rendere i pulsanti grandi e facili da cliccare, ma le dimensioni non sono l’unico aspetto da considerare quando create i pulsanti.
I pulsanti cliccabili sono descrittivi e persuasivi allo stesso tempo. Incuriosiscono le persone che visitano il sito e danno loro un motivo per andare a vedere il link del pulsante.
Un modo per farlo è usare un testo dettagliato come “leggi il nostro blog”, “scopri qui i nostri segreti di marketing” o “ecco il nostro report per il 2022”. Un altro modo è quello di rendere i pulsanti visivamente interessanti o unici.
Rainforest Protector ha adottato entrambi gli approcci. Rainforest Protector vi permette di navigare nella foresta amazzonica visitando diverse località. Il pulsante di ogni località include un’immagine e un’azione come “visita il villaggio”.
10. Sfruttate il Modello di Lettura a F o a Z
Per 13 anni, il team di ricerca del Nielsen Norman Group (NN Group) ha usato l’eye tracking per vedere come oltre 500 persone leggono e interagiscono con i contenuti web. Questo li ha portati a sviluppare il modello a F, secondo il quale la prima cosa che le persone fanno è scansionare la pagina, poi leggere in linea da sinistra a destra. Come in questo caso:
Potete sfruttare lo schema a F sul vostro sito web strutturando i vostri contenuti in base a questo o a un modello alternativo.
Facebook usa un modello a forma di Z sulla sua homepage. Quando visitate la pagina, i vostri occhi vanno subito sul logo “Facebook”, poi sul pulsante “login”, poi sull’immagine a sinistra e infine sul pulsante “Create an account”.
11. I Buoni Siti Web Sono Veloci e Compatibili con i Dispositivi Mobili
Nel quarto trimestre del 2021, il 54,4% del traffico di siti web a livello globale proveniva da un dispositivo mobile. Quindi, se il vostro sito web non è mobile-friendly, potreste dimezzare il vostro traffico.
Anche la velocità influisce sul traffico organico dei siti web. Una ricerca di Google dimostra che il 53% delle persone abbandona un sito web se il caricamento avviene in più di tre secondi.
Il modo più semplice per rendere il vostro sito web mobile-friendly o veloce è scegliere un tema per siti web veloci realizzato da designer esperti. In alternativa, se volete essere più coinvolti nel design del vostro sito web, potete costruire un sito web responsive su misura.
È quello che ha fatto il team di design del film 1917. Il sito web dedicato al film offre un’esperienza mirata a coinvolgere e far appassionare le persone. È stato progettato specificamente per i dispositivi mobili: potete usare il dito per muovervi nelle trincee della Prima Guerra Mondiale.
Se prestate attenzione, noterete che anche il sito web di 1917 sfrutta il motivo F.
12. Suddividere il Testo in Porzioni Piccole e Semplici
Immaginate la scena: state facendo una ricerca a tema “giochi mentali” e trovate una pagina web che sembra promettente. Tuttavia, quando ci fate clic sopra, vi ritrovate sommersi da un muro di testo difficile da leggere.
Come molte altre persone, anche voi potresti fuggire subito dal sito (per quanto promettente sia il contenuto!).
Una ricerca di eye-tracking condotta dalla Missouri University of Science and Technology dimostra che le persone che visitano un sito web impiegano in media 5,59 secondi per leggere il testo. Quindi, se le persone non riescono a leggere il vostro testo in questo lasso di tempo, è improbabile che riusciate a coinvolgerle.
Risolvete questo problema dividendo il testo in piccole parti. Inoltre:
- Usate frasi brevi
- Evitate i colloquialismi
- Fornite le definizioni di tutte le parole specifiche del vostro settore
- Evitate metafore, avverbi e aggettivi non necessari
13. Usate le Griglie
Quando diciamo “usate le griglie” non intendiamo dire che dovete far assomigliare il vostro sito a una tabella di Excel. Dividete il vostro sito web in sezioni distinte che hanno uno scopo specifico, in modo che le persone possano individuare rapidamente i contenuti.
A tal fine non è necessario usare le linee della griglia. Create invece delle distinzioni tra gli spazi della griglia con colori, spazi negativi e ombreggiature come ha fatto Atlason. La homepage di Atlason presenta i prodotti nuovi e quelli più venduti in griglie. Poiché i visitatori sono probabilmente alla ricerca di questi prodotti, le griglie li aiutano a trovarli in pochi secondi.
Uno dei modi più semplici per usare le griglie sul vostro sito web è scegliere un tema WordPress che ne faccia uso. Alcuni esempi sono Gridframe, Masonry Grid e Shuttle Grid.
14. Ricordate l’Equilibrio
Nel contesto del web design, il termine “equilibrio” si riferisce al modo in cui gli elementi di design sono posizionati l’uno rispetto all’altro e l’armonia che riescono a creare. Ci sono molti modi per creare equilibrio nel vostro sito web, tra cui alcuni di questi principi di web design:
- Attraverso la simmetria (inclusa la simmetria bilaterale, radiale o traslazionale)
- Usando colori complementari o contrastanti
- Usando elementi di forme e dimensioni simili
- Usando pattern ripetuti
Potete vedere l’equilibrio in azione sul sito web di Woven. Questo sito web usa una tavolozza di colori equilibrata, il bianco e il nero per creare contrasto all’interno del testo e la simmetria per attirare l’attenzione dei visitatori sui contenuti.
15. Prestare Attenzione ai Dettagli
La teoria Gestalt sostiene che le persone percepiscono qualcosa come un insieme prima di osservare i singoli elementi. O, come disse Kurt Koffka: “L’insieme esiste indipendentemente dalle parti”. Anche se di solito si fa riferimento alla teoria della Gestalt per quanto riguarda la psicologia, essa si applica anche al web design.
Dovete prestare attenzione ai piccoli dettagli del vostro sito web per far sì che il vostro design risulti curato e completo. Quando progettate qualcosa, è facile concentrarsi su elementi importanti come titoli, immagini e CTA e dimenticarsi di altri aspetti:
- Icone del footer e dell’header
- Pulsanti dei social media
- Come avete trasferito il vostro sito web in WordPress (se applicabile)
- Spaziatura del testo
- Errori di battitura e grammaticali
- Compatibilità con i browser
- Dimensioni delle immagini
Verificate due volte questi elementi prima di premere “pubblica” e assicuratevi che il vostro sito web trasmetta professionalità. Voi potete anche trascurare piccoli difetti, ma le persone non lo faranno.
Inoltre, aggiornatevi sulle nuove tendenze e sui nuovi concetti di web design. L’aggiunta di questi elementi al vostro sito web lo farà apparire sempre nuovo, fresco e accattivante.
Riepilogo
Un negozio al dettaglio ben progettato migliora l’esperienza del cliente, mentre uno scadente potrebbe allontanare per sempre le persone dal vostro brand. Lo stesso vale per il web design.
Creare un sito web visivamente accattivante non è solo un progetto divertente. Può aiutarvi a:
- Trasmettere professionalità
- Creare fiducia nei vostri visitatori
- Distinguervi dai vostri concorrenti
- Attirare traffico organico dai motori di ricerca
Sfruttate i principi di web design illustrati in questo articolo per creare un sito web che faccia dire “wow” alle persone.
Ora che abbiamo trattato tutto ciò che sappiamo sul web design, ci piacerebbe sentire il vostro parere. Cosa notate quando visitate il sito web di un brand? Sul vostro sito usate qualche principio che non abbiamo menzionato nell’articolo? Fatecelo sapere nei commenti qui sotto.
Lascia un commento