13 Website Design Best Practice per il 2021

Al giorno d’oggi, è possibile ottenere un sito web installato e funzionante in pochi minuti. Ma c’è una differenza tra un sito web dal vivo e ottimizzato.

Perché il design è importante? Ci vogliono solo 0,05 secondi per le persone a formarsi un’opinione sul tuo sito web. Sì, avete letto che correttamente – 50 millisecondi per qualcuno di essere spazzato via o respinto dal tuo sito web. La maggior parte di questa opinione è formata dal design.

Il design del sito Web influisce anche sulle conversioni, sulla credibilità e, in definitiva, sul successo del tuo sito. Nessun sito web è perfetto, ma dovresti ottimizzarlo il più possibile.

Ecco qualcosa da prendere in considerazione pure: Dopo una brutta esperienza, 88% dei consumatori è improbabile che tornare a un sito web. Inoltre, un recente studio ha rilevato che il 77% delle agenzie afferma che un design di siti Web scadente è la debolezza più significativa dei loro clienti.

Linea di fondo: Se il tuo web design non è ottimizzato per l’esperienza utente (UX), sarà dannoso per il tuo successo. Ecco perché ho scritto questa guida.

Molti fattori vanno nella progettazione di un sito web. Questi sono i tredici elementi più importanti da dare priorità nel 2021. Se segui queste best practice, le prestazioni del tuo sito miglioreranno drasticamente.

Utilizzare questo elenco di controllo per assicurarsi di che avere un design accattivante

1. Minimizzare testo
2. Show, non dire
3. Usare frasi brevi
4. Provare più brevi paragrafi
5. Scegli una combinazione di colori che si adatta
6. Rendere il vostro CTA chiaro
7. Rafforzare le azioni con familiarità
8. Semplificare la navigazione
9. Ottimizzare il design per il mobile
10. Priorità SEO
11. Monitorare la velocità di caricamento della pagina
12. Continuamente eseguito dei test A/B

Minimizzare testo

non riempire le pagine con massicci blocchi di testo.

Non sto parlando di post di blog, che a volte hanno bisogno di approfondire (come questo!). Sto parlando delle tue pagine web (ad esempio homepage, pagina di destinazione). Mantenere il testo al minimo qui.

Vuoi dire ai visitatori del tuo sito tutto su di te, la tua azienda, il tuo marchio e i tuoi prodotti. Ma devi imparare a raccontare quella storia in poche frasi o— meglio ancora-in poche parole.

Mostra, non dire

Le immagini non solo ti aiutano a rompere il contenuto scritto, ma possono anche fornire spiegazioni più approfondite. Mostra ai tuoi visitatori di cosa stai parlando. Capiranno di più in un breve lasso di tempo.

La pagina del prodotto di Harry incarna entrambi questi primi due principi di progettazione:

Ad esempio, supponiamo che il tuo sito web venda rasoi, lame, crema da barba e altri prodotti da barba per uomo.

Operate su un modello di business in abbonamento e consegnate questi prodotti ai vostri clienti su base mensile. Il design dei tuoi rasoi è molto bello – sono fatti di legno intagliato e sono abbastanza belli da regalare.

Piuttosto che entrare in tutti questi dettagli sulla tua home page, puoi semplicemente avere una foto di questi prodotti con un testo che dice qualcosa come “consegnato a casa tua.”Ottieni il tuo messaggio in sole quattro parole.

Certo, puoi andare più in dettaglio più in profondità il visitatore entra nelle tue pagine, ma non è necessaria una lunga descrizione del testo.

Usa frasi brevi

Le frasi brevi sono più facili da leggere.

Non bombardare i visitatori con grandi pezzi di testo. Non sapranno da dove iniziare a leggere e non saranno in grado di digerire i tuoi contenuti.

Mescolare. Se hai bisogno di una frase lunga, seguila con una breve. La varietà aiuta.

Prova i paragrafi più brevi

Usa le interruzioni di paragrafo a tuo vantaggio. Va bene scrivere paragrafi più lunghi, ma mi piace mantenere i paragrafi della mia homepage su alcune frasi.

È anche importante non esagerare. Troppo di una buona cosa, è in realtà una brutta cosa.

Inizia ogni paragrafo con nuove informazioni, quindi se qualcuno sta scorrendo può rapidamente dire se ha bisogno di leggere quel paragrafo.

Eliminare il testo non necessario sulle pagine riduce il disordine e pone maggiore enfasi sul tuo invito all’azione.

Avere il CTA distinguersi da solo nel proprio paragrafo è più impattante che seppellirlo in un mucchio di testo.

Uno strumento molto utile in questa situazione sono i proiettili. Invece di aggiungere paragrafi e scrittura a forma lunga, considerare l’utilizzo di elenchi. In tali elenchi, utilizzare i punti elenco.

Gli studi dimostrano che più persone guarderanno le liste con punti elenco rispetto ad altri formati. Questo perché aiutano a migliorare la scannabilità di una pagina e consentono di evidenziare i punti più importanti che si desidera fare.

Scegli una combinazione di colori che si adatta alla tua strategia di branding

Le scelte di colore che fai sul tuo sito web sono più importanti di quanto pensi.

I visitatori giudicano il tuo sito web in meno di 90 secondi. La maggior parte di questo è il risultato dei colori che si sceglie.

Il modo migliore per scegliere la combinazione di colori del tuo sito web è con il branding. Fare riferimento al vostro logo. I colori sul tuo sito web si adattano alla tua immagine di marca?

Ecco un esempio. Pensa a Starbucks.

Quando senti questo marchio, sono sicuro che hai un’immagine nella tua testa. Forse è il logo, un segno o una posizione del negozio.

Associ dei colori a quel nome? Ora diamo un’occhiata al loro sito web.

Non sorprende che siano andati con una combinazione di colori verde.

Questa scelta di design corrisponde al loro logo e all’immagine del marchio, il che rafforza ciò che i consumatori già associano al marchio. Mantenendo le cose coerenti, non c’è confusione. Sarebbe strano se avete visitato questo sito ei colori erano giallo e rosso. Questo non ha nulla a che fare con il loro marchio.

Parleremo di più sul rinforzo in modo più approfondito mentre continuiamo.

Rendi il tuo CTA chiaro e ovvio

I CTA non devono essere sepolti. Devono essere grandi, audaci e potenti e devono chiaramente distinguersi come l’azione che i visitatori dovrebbero intraprendere dopo.

Tuttavia, la maggior parte dei siti Web non dispone di un pulsante CTA che può essere individuato in meno di tre secondi. C’è una buona probabilità che si rientra nel gruppo che richiede più tempo. Questa non è la categoria in cui vuoi essere.

Non puoi guidare le conversioni senza un pulsante CTA efficace.

Non vedo quasi mai un CTA sulle pagine interne di un’azienda (le pagine che spiegano cosa fa il tuo marchio e cosa offri). Questo è un grave difetto di progettazione. Non puoi aspettarti che i visitatori tornino alla tua home page per convertirli.

Dai un’occhiata a questo CTA da Litmus.

Guarda quanto è semplice questo design. C’è un testo minimo sullo schermo, quindi il messaggio è chiaro.

Di conseguenza, il CTA “iscriviti gratis” si distingue. In realtà, Tornasole anche metterlo in più di una posizione sullo schermo.

Dove dovresti mettere il tuo CTA differisce da pagina a pagina. Ad esempio, i post del blog dovrebbero avere il CTA in alto in modo che i lettori lo vedano rapidamente e anche in basso dopo aver letto il post.

Approfondisci: vuoi ottimizzare i tuoi CTA? Qui ci sono 11 modi per migliorare i vostri inviti all’azione.

Rafforza le azioni con familiarità

Se il tuo messaggio è lo stesso, il tuo CTA dovrebbe essere lo stesso su ogni singola pagina.

Pensa a come le persone navigano nel tuo sito web. Anche se si imposta un certo flusso, non tutti atterrerà su una pagina e convertire in pochi secondi. Essi possono navigare in giro per un po ‘ prima.

Ad esempio, supponiamo che tu abbia un sito di e-commerce. Non dovresti cambiare il pulsante CTA da una pagina all’altra, che sarebbe simile a questo:

• Homepage: Acquista ora
• Pagina della categoria: Acquista oggi
• Pagina del prodotto: Fai clic per acquistare

Se un visitatore vede uno di questi pulsanti sulla tua home page, l’altro su una pagina di categoria e il terzo su una pagina di prodotto, non c’è rinforzo.

Invece, mantieni la messaggistica e lo stile coerenti. Ecco un buon esempio dal marchio di gioielli e accessori MVMT.

Non importa se sei sulla loro pagina di occhiali, orologi o gioielli. Stai andando a vedere lo stesso” NEGOZIO ORA ” CTA per i loro prodotti.

Ogni pagina rimane anche coerente con il design minimalista e in bianco e nero del loro sito web.

Applica questo principio di progettazione anche al tuo sito web.

Va oltre il pulsante CTA. L’idea è di avere questo tipo di rinforzo con il maggior numero possibile di elementi.

La coerenza nel linguaggio, nella messaggistica e nel design rafforza la tua identità di marca e lascia un’impressione duratura nella mente dei tuoi visitatori.

Semplifica la navigazione

Non dovrebbe essere difficile per un visitatore del sito trovare ciò che sta cercando sul tuo sito.

Mettiti nei loro panni. Perché stai visitando il sito web? Come si fa a realizzare questo compito? Forse vuoi comprare qualcosa, ottenere maggiori informazioni o vedere cosa c’è da offrire. Qualunque sia la ragione, se i visitatori non riescono a capirlo in fretta, se ne andranno.

C’è troppa concorrenza là fuori. Gli utenti non hanno motivo di sopportare la navigazione del sito web ingombrante. Tutto quello che devono fare è lasciare il tuo sito e trovare ciò di cui hanno bisogno da qualche altra parte.

Non cercare di reinventare la ruota con un design complesso. Bastone con il formato standard.

Ad esempio, la maggior parte dei siti web mette il menu di navigazione orizzontalmente nella parte superiore di ogni pagina. Se il menu è da qualche altra parte, potrebbe confondere i visitatori.

Meno opzioni nel menu, meglio è. Altrimenti, sarà troppo difficile per le persone trovare ciò di cui hanno bisogno. Questo concetto è noto come Legge di Hick.

Più opzioni dai a qualcuno, più tempo ci vorrà per prendere una decisione. Ecco perché i progetti e le navigazioni complesse distruggeranno i tuoi tassi di conversione.

C’è un famoso esperimento su questo, indicato come lo studio jam, che discute il paradosso della scelta.

L’esperimento è stato condotto in un negozio di alimentari locale. I consumatori sono stati presentati con 24 marmellate a campione in un giorno, e sei marmellate il giorno successivo:

• Il display più grande il primo giorno ha attirato il 60% degli acquirenti, ma solo il 3% di quelle persone ha effettuato un acquisto.
• La più piccola esposizione di sei marmellate il secondo giorno ha attirato il 40% degli acquirenti, ma il 30% di loro ha effettuato un acquisto.

Limitando le scelte, le conversioni erano dieci volte superiori. Questo stesso concetto può essere applicato alla navigazione del tuo sito web.

Elimina le opzioni di menu non necessarie. Ad esempio, invece di avere un pulsante “home”, basta usare il logo del sito Web per collegarsi alla schermata iniziale.

Dai un’occhiata alla homepage di Square.

Il design è super pulito. Le opzioni di menu sono estremamente limitate. Questo rende facile per i visitatori di scegliere una selezione che si adatta alle loro esigenze.

Noterai che c’è un testo minimo sullo schermo e il CTA è chiaro e ovvio.

Questo tipo di design rende quasi impossibile per i visitatori del sito di perdersi o confuso quando stanno navigando.

Per quelli di voi che hanno un sacco di opzioni sul tuo sito web, come ad esempio un negozio di e-commerce, è possibile aggiungere una barra di ricerca per semplificare il processo di navigazione senza utilizzare un menu complicato. Un sacco di aziende di software mettono le loro caratteristiche in una scheda caratteristiche piuttosto che avere una scheda individuale per ogni caratteristica.

Ottimizza il tuo design per dispositivi mobili

Mobile è come la maggior parte del mondo accede a Internet. Ciò significa che se non sei ottimizzato per i dispositivi mobili, il tuo sito web non funzionerà bene.

Dai un’occhiata a questi dati da Hootsuite:

I motori di ricerca riconoscono questo e premiano i siti che sono adatti ai dispositivi mobili. Qui ci sono un paio di statistiche per colpire la casa punto:

• Google sa che l ‘ 87% dei proprietari di smartphone utilizza i propri dispositivi per eseguire una ricerca su Internet almeno una volta al giorno.
• Il 58% di tutte le ricerche su Google viene eseguito da un dispositivo mobile
• Il risultato: il 70% dei risultati della prima pagina su Google sono ottimizzati per i dispositivi mobili.

Mobile SEO è la cosa più importante che puoi fare per classificare bene su Google. Seriamente.

Se il tuo sito web non ha un bell’aspetto su uno smartphone, le persone non vorranno rimanere in giro. Quindi, assicurati che i tuoi progetti di siti Web siano compatibili con i dispositivi mobili.

Approfondisci: vuoi imparare come ottimizzare il tuo sito web per dispositivi mobili? Controlla la nostra guida completa per un sito web mobile friendly.

Priorità SEO

Tutto quello che fai sul tuo sito ha bisogno di cerchio di nuovo a SEO.

E non è sufficiente aggiungere parole chiave qua e là. È un sistema a livello di sito Web per migliorare i contenuti e mirare incessantemente a argomenti specifici per costruire l’autorità del tuo sito in quell’area.

Ad esempio, una pagina di destinazione per un sito di e-commerce vorrà concentrarsi su alcuni elementi della pagina come:

• Usabilità. Come è facile per i visitatori di utilizzare e navigare.
• Cellulare. Come il tuo sito web appare ed esegue su un dispositivo mobile.
• Ottimizzazione delle parole chiave. Le parole e le frasi che si desidera classificare per.
• Collegamenti interni. Quanto spesso si collega ad altre pagine del tuo sito web.
• Titolo. Questo è spesso il testo più grande su una pagina web. Come tale, fa la maggior parte del lavoro pesante sulla tua pagina di destinazione.

Crea una sitemap XML. Questo renderà più facile per i crawler dei motori di ricerca per analizzare i contenuti sul tuo sito web. Una sitemap mostrerà ai bot la posizione delle pagine del tuo sito, l’ultima volta che la pagina è stata aggiornata, la frequenza di aggiornamento e la relazione con altre pagine del tuo sito.

Una mappa del sito corretta mostra a Google che non hai contenuti duplicati, il che può danneggiare le tue classifiche SEO.

Quando stai progettando il tuo sito, ci sono un sacco di elementi meno evidenti che fattore in classifica su Google, anche.

Abbiamo già esaminato alcuni aspetti che puoi migliorare sulla pagina stessa. Ma altri elementi includono:

• Dominio. Il tuo URL è abbastanza consequenziale al tuo rango di Google. I fattori chiave includono avere la parola chiave nel dominio, quanti anni ha il dominio e qual è l’estensione del dominio (ad esempio di alta qualità come. com,. net,. gov,.org contro estensioni non tradizionali).
• Qualità del sito. Il tuo sito web deve essere utile per i visitatori. I fattori chiave includono una pagina “Chi siamo”, una pagina “Contattaci” , la frequenza con cui aggiorni il tuo sito Web, quanto è facile navigare nel tuo sito Web, i tempi di attività (con quale frequenza il tuo sito Web si blocca) e i certificati SSL.
• A ritroso. Ciò si riferisce alla frequenza a cui il tuo sito web è collegato da altri siti web. Si tratta di un fattore cruciale per la classifica bene su Google. I fattori chiave includono il numero di pagine di collegamento, la qualità e l’autorità dei siti web che si collegano a te, il testo di ancoraggio che stanno usando per collegarsi a te e se questi collegamenti provengono o meno da domini .edu o .gov.

Monitora la velocità di caricamento della pagina

So cosa stanno pensando alcuni di voi. Che cosa ha a che fare la velocità di caricamento della pagina con il web design? Tutto.

Certo, i tempi di caricamento sono legati al piano di hosting del tuo sito web, al server, al traffico e a cose di questo tipo. Tuttavia, le scelte di progettazione possono influire anche sui tempi di caricamento.

Ogni volta che aggiungi un elemento al tuo sito, in particolare immagini, video e altri file multimediali complessi, i tempi di caricamento possono essere influenzati. Come tale, può rallentare le richieste HTTP.

I tempi di caricamento lenti portano ad alti tassi di abbandono. Non puoi ignorarlo. Se le tue pagine richiedono troppo tempo per essere caricate, sarà un problema enorme.

Inoltre, il 25% delle persone abbandona i siti Web che richiedono più di quattro secondi per essere caricati. Sì, quattro secondi. Questo è tutto quello che hai, o perderai 25 visitatori su 100. La maggior parte dei visitatori si aspetta che una pagina venga caricata in due secondi o meno.

Quindi, come puoi applicarlo al tuo web design?

• Riduci le dimensioni dei file delle tue immagini
• Approfitta degli strumenti di caching del browser
• Riduci le richieste HTTP
• Migliora il tuo TTFB (time to first byte)
• Minimizza e combina i tuoi file

Ci sono molti strumenti disponibili online per aiutarti a realizzare queste cose. Ad esempio, controlla il plugin WordPress Rocket come risorsa per minimizzare e combinare i tuoi file. E usa lo strumento Page Speed Insights di Google per aiutarti a monitorare i tempi di caricamento ogni volta che apporti modifiche al design sul tuo sito web.

Eseguire continuamente test A/B

Quando si tratta di design del tuo sito web, non puoi semplicemente impostarlo e dimenticarlo.

Come ho detto prima, nessun sito web è perfetto. Ci sono sempre modi per migliorare il tuo design.

Ecco perché è necessario eseguire test A / B. Questi ti permettono di apportare miglioramenti regolari al tuo sito web e testare gli elementi per vedere cosa funziona meglio e, cosa più importante, cosa non funziona affatto.

Quasi ogni elemento del design del sito può essere testato. Ad esempio, è possibile creare due pagine di destinazione diverse che hanno CTA diversi ma sono altrimenti uguali. Se una pagina di destinazione funziona meglio dell’altra, saprai che è probabile che il suo CTA porti a termine il lavoro.

Ecco alcuni suggerimenti rapidi per iniziare nella giusta direzione:

• Prova la posizione del vostro CTA pulsante
• Prova il colore del CTA pulsante
• Prova il CTA copia
• Prova le immagini che stai utilizzando su le pagine di destinazione
• Test di variazioni di testo sullo schermo
• Prova la dimensione della vostra barra di navigazione

Ci sono così tante opzioni, Potrei passare tutto il giorno a parlare di questo. Per quelli di voi che non hanno familiarità con i test A/B o hanno bisogno di aiuto, controlla la mia guida su tutto ciò che devi sapere prima di iniziare i test A/B.

Conclusione

Dire che la progettazione di un sito web è importante sarebbe un eufemismo. Le tue scelte di web design avranno un impatto finale se il tuo sito ha successo o meno.

• Il sito web di tutti può essere migliorato. Utilizzare questo elenco come guida come risorsa per aiutarvi a fare questi miglioramenti.
• Non farti sopraffare. Non sto dicendo che è necessario implementare tutti questi suggerimenti di progettazione durante la notte, ma è necessario iniziare da qualche parte.
• Non ho tirato fuori queste idee dal nulla. Tutto in questo elenco è supportato da ricerche e statistiche relative ai principi di progettazione.

Ricorda: Ogni sito web è un work in progress. Se metti il lavoro e metti sempre a punto il tuo sito web, migliorerai il tuo vantaggio con i tuoi concorrenti.

Non importa se il tuo sito web è nuovo di zecca o se è in circolazione da un decennio. Queste sono le migliori pratiche di web design che è necessario seguire nel 2021.