8 principi di web design che funzionano ancora nel 2020
Pubblicato: 2021-07-22Il design del tuo sito web è più importante per le conversioni di quanto pensi. Puoi implementare ogni tattica di potenziamento delle conversioni nel mondo, ma se il tuo web design sembra una schifezza, non ti farà molto bene.
Il design non è solo qualcosa che fanno i designer. Il design è marketing. Il design è il tuo prodotto e come funziona. Più ho imparato sui principi del web design, migliori sono i risultati che ho ottenuto.
Corso gratuito su UX e usabilità
Passa dai principi alla pratica. Guarda i corsi gratuiti su UX e usabilità.
Ecco 8 principi di web design efficaci che dovresti conoscere e seguire.
1. Gerarchia visiva
Le ruote cigolanti ottengono il grasso e le immagini prominenti attirano l'attenzione. La gerarchia visiva è uno dei principi più importanti alla base del buon web design. È l'ordine in cui l'occhio umano percepisce ciò che vede.
Esercizio. Si prega di classificare i cerchi in ordine di importanza:
Senza sapere nulla di questi cerchi, sei riuscito a classificarli
facilmente. Questa è una gerarchia visiva.
Alcune parti del tuo sito web sono più importanti di altre (moduli, inviti all'azione, proposte di valore, ecc.) e desideri che ricevano più attenzione rispetto alle parti meno importanti.
Se il menu del tuo sito web contiene 10 voci, sono tutte ugualmente importanti? Dove vuoi che l'utente faccia clic? Rendi più evidenti i link importanti.
La gerarchia non deriva solo dalle dimensioni. Amazon rende più evidenti i pulsanti di invito all'azione "Aggiungi al carrello" e "Acquista ora" utilizzando il colore:
Inizia con l'obiettivo aziendale
Dovresti classificare gli elementi sul tuo sito web in base al tuo obiettivo aziendale. Se non hai un obiettivo specifico, non saprai a cosa dare la priorità.
Ecco un esempio. È uno screenshot che ho preso dal sito web di Williams-Sonoma. Vogliono vendere pentole da esterno.
Il più grande colpo d'occhio è l'enorme pezzo di carne (fammelo desiderare), seguito dal titolo (dì di cosa si tratta) e un invito all'azione (prendilo). Il quarto posto va a un paragrafo di testo sotto il titolo; il quinto è il banner di spedizione gratuita e la navigazione in alto è l'ultima.
Questa è la gerarchia visiva, un principio senza tempo del web design, ben fatto.
Esercizio. Naviga sul web e classifica consapevolmente gli elementi nella gerarchia visiva. Allora vai a dare un'occhiata al tuo sito. Qualcosa di importante (cioè le informazioni chiave che i visitatori cercano) è troppo in basso nella gerarchia? Rendilo più evidente.
2. Proporzioni divine
La sezione aurea è il numero magico 1.618 (φ). Si ritiene che i disegni che utilizzano proporzioni definite dal rapporto aureo siano esteticamente gradevoli.
Poi c'è la sequenza di Fibonacci. Ogni termine è la somma dei due termini precedenti: 0, 1, 1, 2, 3, 5, 8, 13, 21 e così via. La cosa interessante è che i due argomenti apparentemente non correlati producono lo stesso numero esatto.
Ecco come appare la sezione aurea:
Molti artisti e architetti usano le proporzioni per approssimare la sezione aurea. Un famoso esempio è il Partenone, costruito nell'antica Grecia:
La sezione aurea può funzionare per il web design? Scommetti. Ecco Twitter:
Ecco un commento, di anni fa, del direttore creativo di Twitter, Doug Bowman. La scelta del design non è stata casuale:
Quindi, se la larghezza del layout è 960 px, dividila per 1,618 (= 593 px). Sai che la larghezza dell'area del contenuto dovrebbe essere 593 px e la barra laterale 367 px. Se l'altezza del sito web è di 760 px, puoi dividerla in blocchi da 470 px e 290 px (760/1.618=~470).
Se vuoi saperne di più, dai un'occhiata a questo articolo su come applicare la sezione aurea alla tipografia.
3. Legge di Hick
La legge di Hick dice che con ogni scelta aggiuntiva aumenta il tempo necessario per prendere una decisione.
L'hai sperimentato innumerevoli volte nei ristoranti. I menu con enormi opzioni rendono difficile la scelta della cena. Se offrisse due opzioni, prendere una decisione richiederebbe molto meno tempo. Questo è simile al Paradosso della Scelta: più scelte dai, più facile è non scegliere nulla. Entrambi i principi entrano in gioco con il web design.
Più opzioni ha un utente sul tuo sito web, più difficile sarà l'uso (se non viene utilizzato). Dobbiamo eliminare le scelte. Per realizzare un web design migliore, concentrati sull'eliminazione delle opzioni di distrazione durante il processo di progettazione.
In un'era di scelta infinita, le persone hanno bisogno di filtri migliori! Se vendi un numero enorme di prodotti, aggiungi filtri migliori per prendere decisioni più facilmente. Wine Library vende una quantità enorme di vino.
Fanno un buon lavoro con i filtri:
4. Legge di Fitt
La legge di Fitt stabilisce che il tempo necessario per spostarsi verso un'area bersaglio (es. fare clic su un pulsante) è una funzione della distanza dal bersaglio e delle dimensioni del bersaglio. In altre parole, più un oggetto è grande e vicino, più è facile da usare.
Spotify rende più facile premere "Riproduci" rispetto ad altri pulsanti:
Nell'app del telefono cellulare, posizionano anche il pulsante di riproduzione in una posizione facile da toccare.
Più grande non è sempre meglio. Un pulsante che occupa metà dello schermo non è una buona idea e non abbiamo bisogno di uno studio matematico per dircelo. Anche così, la legge di Fitt è un logaritmo binario. Ciò significa che i risultati previsti dell'usabilità di un oggetto corrono lungo una curva, non una linea retta.
È molto più facile fare clic su un pulsante minuscolo quando viene dato un aumento delle dimensioni del 20%, mentre un oggetto molto grande, dato lo stesso aumento delle dimensioni del 20%, non offrirà gli stessi vantaggi in termini di usabilità.
Questo è simile alla regola della dimensione del target. La dimensione di un pulsante dovrebbe essere proporzionale alla frequenza di utilizzo prevista. Puoi utilizzare il monitoraggio del mouse per vedere quali pulsanti vengono utilizzati di più, quindi ingrandire i pulsanti più diffusi (più facili da premere).
Immaginiamo che ci sia un modulo che vuoi che le persone riempiano. Alla fine del modulo, ci sono due pulsanti: "Invia" e "Ripristina" (cancella i campi).
Il 99,9999% vuole premere "Invia". Quindi, il pulsante dovrebbe essere molto più grande di "reset".
5. Regola dei terzi
È una buona idea usare le immagini nel tuo progetto. Un elemento visivo comunica le tue idee molto più velocemente del testo.
Le immagini migliori seguono la regola dei terzi: un'immagine deve essere divisa in nove parti uguali da due linee orizzontali equidistanti e due linee verticali equidistanti. Importanti elementi compositivi dovrebbero essere collocati lungo queste linee o alle loro intersezioni.
Sotto, vedi come l'immagine a destra è più interessante? Questa è la regola dei terzi in azione.
L'uso di immagini belle e grandi contribuisce a un buon web design. Se le tue immagini sono più interessanti, il tuo sito web sarà più attraente.
6. Leggi sulla progettazione gestaltica
La psicologia della Gestalt è una teoria della mente e del cervello. Il suo principio è che l'occhio umano vede gli oggetti nella loro interezza prima di percepire le loro singole parti.
Ecco cosa intendo:
Hai notato come potresti vedere il cane senza concentrarti su ogni punto nero di cui è composto il cane? Un fondatore del gestaltismo, Kurt Koffka, lo spiegò in questo modo: "il tutto esiste indipendentemente dalle parti".
Per quanto riguarda il web design, le persone vedono prima l'intero sito Web, prima di distinguere l'intestazione, il menu, il piè di pagina e così via.
Esistono otto cosiddette leggi di progettazione gestalt che ci consentono di prevedere come le persone percepiranno qualcosa. Ecco come ciascuno si riferisce al web design:
1. Legge di prossimità
Le persone raggruppano cose che sono vicine nello spazio. Diventano un unico oggetto percepito.
Per un web design efficace, assicurati che le cose che non vanno insieme non siano percepite come una cosa sola. Allo stesso modo, raggruppi insieme elementi di design correlati (menu di navigazione, piè di pagina, ecc.) per comunicare che formano un tutt'uno.
Craigslist utilizza questa legge per rendere facile capire quali sottocategorie rientrano in "in vendita":
2. Legge di somiglianza
Raggruppiamo cose simili insieme. Questa somiglianza può verificarsi sotto forma di forma, colore, ombreggiatura o altre qualità.
Qui raggruppiamo i punti neri in un gruppo e i bianchi in un altro, perché, beh, i punti dello stesso colore sembrano simili tra loro.
Com'è questo aspetto quando applicato al web design? Mixpanel utilizza un design simile per i collegamenti ai casi di studio, quindi li vediamo come un singolo gruppo, ognuno rafforza l'altro:
3. Legge di chiusura
Cerchiamo la completezza. Quando le forme che non sono chiuse o mancano parti di un'immagine, la nostra percezione riempie il vuoto visivo. Vediamo un cerchio e un quadrato anche se nessuna forma esiste effettivamente nel grafico sottostante.
Senza la legge di chiusura, vedremmo semplicemente linee diverse con lunghezze diverse. Ma la legge della chiusura unisce le linee per formare forme intere.
L'uso della legge di chiusura può rendere più interessanti i loghi o gli elementi di design. Un buon esempio è il logo del World Wide Fund For Nature, disegnato da Sir Peter Scott nel 1961:
4. Legge di simmetria
La mente percepisce gli oggetti come simmetrici, formandosi attorno a un punto centrale. È percettivamente piacevole dividere gli oggetti in un numero pari di parti simmetriche.
Quando vediamo due elementi simmetrici che non sono collegati, la mente li connette percettivamente per formare una forma coerente.
Quando osserviamo l'immagine sopra, tendiamo a osservare tre coppie di parentesi simmetriche anziché sei singole parentesi.
Le persone preferiscono le apparenze simmetriche rispetto a quelle asimmetriche. Colonne alternate di immagini e testo, cursori centrati e un elenco a tre colonne aggiungono al divertimento visivo del design della homepage di Trello:
5. Legge del destino comune
Tendiamo a percepire gli oggetti come linee che si muovono lungo un percorso. Raggruppiamo oggetti che hanno lo stesso andamento di movimento e sono, quindi, sullo stesso percorso.
Mentalmente, le persone raggruppano bastoni o mani alzate che puntano da qualche parte perché puntano tutti nella stessa direzione. Nel design del tuo sito, puoi usarlo per guidare l'attenzione dell'utente su qualcosa (ad esempio un modulo di iscrizione, una proposta di valore, ecc.).
Ad esempio, se c'è una serie di punti e metà dei punti si spostano verso l'alto mentre l'altra metà si sposta verso il basso, percepiamo i punti che si muovono verso l'alto e i punti che si spostano verso il basso come due unità distinte.
6. Legge di Continuità
Le persone hanno la tendenza a percepire una linea come se continuasse nella sua direzione stabilita. Quando c'è un'intersezione tra oggetti (es. linee), tendiamo a percepire le due linee come due entità singole e ininterrotte. Gli stimoli rimangono distinti anche con la sovrapposizione.
Fixel lo usa per connettere i volti al bios:
Ci sono anche altre leggi della Gestalt, come Figure and Ground o Law of Good Gestalt. (Gli oggetti tendono ad essere raggruppati percettivamente se formano uno schema regolare, semplice e ordinato, come gli anelli olimpici.) Tuttavia, quelli trattati sopra sono i migliori principi guida per il web design.
7. Spazio bianco e design pulito
Lo spazio bianco (chiamato anche "spazio negativo") è la parte di una pagina Web che rimane "vuota". È lo spazio tra la grafica, i margini, i margini, lo spazio tra le colonne, lo spazio tra le righe di testo o gli elementi visivi.
Non è solo uno spazio "vuoto", è un elemento importante del web design. Consente agli oggetti al suo interno di esistere. Lo spazio bianco riguarda l'uso della gerarchia per informazioni, tipografia, colore o immagini.
Una pagina senza spazi bianchi, piena zeppa di testo o grafica, rischia di apparire occupata o disordinata. In genere, è difficile da leggere. (La gente non si preoccuperà nemmeno.) Questo è il motivo per cui i siti Web semplici sono scientificamente migliori.
La giusta quantità di spazio bianco fa sembrare un sito "pulito". Sebbene un design pulito sia fondamentale per comunicare un messaggio chiaro, non significa solo meno contenuti.
Un design pulito sfrutta al meglio lo spazio in cui si trova. Per creare un design pulito del sito, devi sapere come comunicare in modo chiaro utilizzando lo spazio bianco con saggezza. Made.com usa bene lo spazio bianco:
L'uso accurato dello spazio bianco facilita la messa a fuoco del messaggio principale e delle immagini e la copia del corpo è facile da leggere. In generale, lo spazio bianco promuove l'eleganza e la raffinatezza, migliora la leggibilità e guida l'attenzione.
Maggiori informazioni sullo spazio bianco e sulla semplicità.
8. Il rasoio di Occam
Quando vengono date diverse ipotesi in competizione, il rasoio di Occam ti spinge a scegliere quella che fa il minor numero di ipotesi e, quindi, offre la spiegazione più semplice. Per metterlo nel contesto del web design, il rasoio di Occam sostiene che la soluzione più semplice è solitamente la migliore.
In un post sulla loro esperienza con Angelpad, il team di Pipedrive scrive:
Il team di Angelpad e i mentori ci hanno sfidato in molti modi. "Hai troppe cose sulla tua home page" era qualcosa con cui non eravamo d'accordo all'inizio, ma siamo felici di testarlo. E si è scoperto che ci sbagliavamo davvero. Abbiamo rimosso l'80% del contenuto e lasciato un pulsante di registrazione e un collegamento Ulteriori informazioni sulla home page. La conversione per iscriversi è aumentata del 300%.
Non si tratta solo di aspetto, ma anche di come funziona. Alcune aziende, come 37Signals, hanno trasformato il "semplice" in un modello di business. Ecco una citazione dal libro Rework, scritto dai fondatori Jason Fried:
Molte persone ci odiano perché i nostri prodotti fanno meno della concorrenza. Sono insultati quando ci rifiutiamo di includere la loro caratteristica animale domestico. Ma siamo orgogliosi di ciò che i nostri prodotti non fanno quanto lo siamo di ciò che fanno. Li progettiamo per essere semplici perché crediamo che la maggior parte dei software sia troppo complessa: troppe funzioni, troppi pulsanti, troppa confusione.
Il design semplice e minimalista non garantisce che il design funzioni. Ma, nella mia esperienza, semplice è sempre meglio del contrario e, quindi, dovremmo sforzarci di semplificare i nostri progetti web.
Conclusione
Il web design e l'arte efficaci non sono la stessa cosa. Ma molti principi psicologici e di design si applicano ai siti web. Puoi progettare un ottimo sito web applicando gli aspetti rilevanti di quelle leggi al tuo layout, tipografia e immagini.
Progetta per l'utente e i tuoi obiettivi di business. Un buon web design può fornire risultati esteticamente gradevoli e finanziariamente gratificanti.