Il principio di prossimità nel web design
Recentemente ho preso un vecchio libro di design che non avevo toccato per un po ', e mi ha ricordato un principio di progettazione che molti di noi hanno messo in pratica probabilmente solo in modo subconscio, se non del tutto.
Il libro si occupa del design per la stampa, ma ho pensato che sarebbe stato un argomento di grande interesse da discutere nel contesto del web design.
Il principio delle chiamate di prossimità per gli elementi correlati deve essere raggruppato visivamente, creando meno confusione e creando un layout più organizzato. Gli oggetti non correlati tra loro dovrebbero essere posizionati più distanti, per enfatizzare la loro mancanza di relazione.
Discuterò i dettagli e alcuni modi in cui ciò può essere implementato in modo efficace, ma questa definizione dovrebbe essere sufficiente per ciò che discuteremo in questo articolo.
L'uso corretto della prossimità, in combinazione con altri principi di progettazione, ha un grande impatto sull'esperienza utente e, in definitiva, sul successo generale di un sito Web.
Non temere lo spazio bianco
Il primo passo per implementare correttamente il principio di prossimità è capire l'importanza dello spazio bianco nel design.
La mancanza di spazio bianco è un problema comune nei progetti amatoriali. Il design è un mezzo per comunicare le informazioni e quando i dilettanti cercano di trasmettere un messaggio attraverso il design, la loro naturale inclinazione è quella di distribuire il contenuto in modo uniforme per riempire lo spazio, senza riflettere troppo sul potenziale di uno spazio bianco ben organizzato.
Lo spazio bianco può influenzare il comportamento dell'utente quanto, se non di più, del contenuto effettivo della pagina. Lo spazio bianco guida gli occhi dell'utente nella direzione desiderata, crea contrasto e fa un'impressione duratura.
Anche se il sito Web di W3Avenue in alto contiene una notevole quantità di contenuti (con articoli di numerose categorie, come qualsiasi blog di design) e una serie di annunci di sidebar, non sommerge visivamente l'utente.
La generosa sala nell'intestazione e gli elementi opportunamente distanziati nelle aree del contenuto e della barra laterale contribuiscono a questo aspetto pulito e organizzato. W3Avenue non sta facendo nulla di particolarmente unico con il suo contenuto, ma il suo design probabilmente contribuisce al traffico intenso entra in a breve lasso di tempo .
Quindi non essere insicuro sullo spazio vuoto nel tuo progetto. Usare correttamente lo spazio bianco è il primo passo per implementare il principio di prossimità e, quindi, rendere il design più accattivante.
Elementi correlati visivamente al gruppo
Lo spazio bianco, tuttavia, è solo una parte dell'implementazione della prossimità. Un disegno può avere molto spazio bianco, ma se gli elementi non sono raggruppati correttamente , lo spazio bianco avrà scarso effetto, come illustrato dai due biglietti da visita seguenti:
La carta a sinistra non è ingombra; ha un po 'di spazio bianco. Ma gli elementi non sono raggruppati logicamente, quindi l'effetto è debole.
Il lettore è costretto a scansionare la carta più volte. La carta a destra, tuttavia, ha un effetto visivo più piacevole. Il lettore deve semplicemente guardarlo per prendere le informazioni (più su questo più tardi).
Anche il raggruppamento di elementi nella carta a destra è più logico . Nel primo set di elementi vediamo il nome della società in caratteri grandi con la posizione sottostante. Il secondo set ci dice come ottenere informazioni sui servizi forniti (ad es. Numero di telefono e indirizzo del sito web).
Questo esempio illustra l'importanza della prossimità nella progettazione di stampa e un'idea simile può essere utilizzata per gli elementi nel web design, come mostrato nello screenshot qui sotto.
Sebbene il sito Web di Arora Designs non sia complesso o pesante da informazioni, il suo utilizzo dello spazio bianco e la separazione visiva degli elementi raggruppati sono efficaci. Va notato qui che lo "spazio bianco" non deve essere bianco; può essere qualsiasi spazio vuoto tra gli elementi, indipendentemente dal colore.
Nel caso di Arora Designs, sebbene lo spazio bianco abbia colori, serve allo stesso scopo di separare visivamente l'intestazione, la navigazione e le aree di contenuto.
Creazione di gerarchia visiva
Usare efficacemente lo spazio bianco e raggruppare gli elementi correlati è fondamentale per dare al tuo sito web una chiara gerarchia visiva. Naturalmente, l' architettura del sito web e il flusso di informazioni sono alla base di una prossimità effettiva .
La gerarchia è espressa dal modo in cui gli elementi sono raggruppati e sottogruppi.
Questa gerarchia aiuta l'utente a capire dove sono stati e dove vuole andare e, quindi, aiuta a comunicare lo scopo del sito web. Un elenco è un buon esempio di un elemento che ha il potenziale per comunicare la gerarchia visiva, come dimostrato nell'immagine seguente:
Semplicemente dando uno sguardo ai due elenchi sopra, senza nemmeno esaminare il contenuto, vedrai che l'elenco a sinistra ha una chiara gerarchia visiva, mostrando le relazioni tra gli elementi (gli oggetti rientrati sono sottocategorie degli oggetti principali).
Questa gerarchia non sarebbe possibile senza lo spazio bianco (incluso macro e micro spazio bianco). L'elenco sulla destra è solo un raggruppamento casuale di elementi senza alcuna relazione apparente o gerarchia.
Implementare questo principio su un sito Web con qualcosa di semplice come una lista HTML è facile. La sfida consiste nell'utilizzare questo principio come fattore guida nella costruzione del sito web dalla fase di pianificazione e wireframe fino alla progettazione.
Layout facili da scansionare e leggere
Il contenuto che è organizzato in una gerarchia e raggruppato logicamente è più facile da leggere e scansionare .
Le intestazioni, ad esempio, dovrebbero consentire all'utente di eseguire la scansione indicando chiaramente i punti principali. Inutile dire che il contenuto dovrebbe essere pianificato fin dall'inizio per riflettere un'appropriata gerarchia visiva; la lista sopra con gli oggetti rientrati è un esempio scarso, perché il contenuto non corrisponde alla gerarchia visiva.
Un sito web che utilizza la prossimità nella sua architettura e design non sommerge l'utente con le informazioni.
Quindi, anche se è relativamente facile implementare i principi di prossimità su siti web che sono leggeri sul contenuto, la vicinanza è molto più importante su siti Web ricchi di contenuti.
I siti di notizie sono buoni studi di casi su questo principio. Di seguito è riportato un confronto di Los Angeles Times e il Globe e posta .
Nel complesso, il sito web del LA Times ha un design piacevole soprattutto a causa della scelta del colore e della tipografia. Ma ha anche un aspetto pulito e ordinato, soprattutto nella sezione di intestazione.
Il logo è grande e si distingue, contribuendo efficacemente al marchio del sito. L'oggetto più vicino al logo è la barra di navigazione orizzontale sottostante. Poiché la barra di navigazione è scura, contrasta con il logo.
I link testuali sopra il logo sono disposti ordinatamente, con molto spazio tra le due sezioni. L'allineamento a sinistra del contenuto nell'intestazione contribuisce anche all'aspetto pulito.
Ogni bit di informazioni nell'intestazione di LA Times è raggruppato con voci correlate, ad eccezione del logo, che si trova da solo. Nulla nell'intestazione ti confonde o ti fa domandare a chi appartiene.
Che mi dici del sito Globe and Mail, mostrato sotto?
Il sito Web Globe and Mail ha una sezione di intestazione complessa che non riesce a implementare il principio di prossimità.
L'unica quantità significativa di spazio bianco è al centro, accanto al logo, che non porta a nulla. Nell'intestazione compaiono due annunci che contribuiscono alla confusione. Le pubblicità potrebbero essere necessarie per motivi finanziari, quindi i problemi sono comprensibili.
Il problema più grande è la sezione disordinata sopra l'annuncio banner grande. Non c'è una chiara distinzione tra gli elementi in quella sezione.
Tre linee verticali tratteggiate tentano di separare l'area in quattro sezioni, ma il primo separatore non ha alcun senso. In effetti, quella sezione sarebbe probabilmente più invitante se quei separatori puntati fossero rimossi.
Le griglie aiutano con la prossimità
Un modo per raggruppare elementi e utilizzare lo spazio bianco in modo appropriato è iniziare con una griglia .
Da uno sguardo superficiale ai siti LA Times e Globe and Mail, solo il LA Times sembra aver basato il suo progetto su una griglia, o almeno ha usato i principi basati sulla griglia nella fase di pianificazione. Il sito web di Globe and Mail mostra poche prove di un formato di griglia.
Un layout basato sulla griglia, con opportune dimensioni di grondaia, consente un ampio spazio tra le sezioni, e in molti casi costringe il progettista ad attuare principi di prossimità senza nemmeno pensarci.
Di seguito sono riportati gli screenshot di due siti Web che hanno utilizzato il file Sistema a griglia 960 . Sono entrambi abbastanza semplici (cioè non pesanti come i siti web di notizie discussi sopra), ma mostrano che le griglie danno respiro agli elementi della pagina, offrendo a ciascuna sezione la propria casa visiva.
Conduci gli utenti lungo il percorso giusto
Un altro grande vantaggio della vicinanza è che aiuta gli utenti a navigare in un sito Web senza inutili ritardi o ostacoli. Quando la navigazione principale è chiaramente separata dagli altri elementi della pagina, verrà trovata immediatamente ed è meno probabile che venga dimenticata.
Una corretta gerarchia visiva per mezzo della vicinanza aiuta gli utenti a esplorare più a fondo il tuo sito Web senza preoccuparti di dove sono stati o dove stanno andando.
Si sentiranno sempre a loro agio e raggiungeranno le sezioni più importanti del tuo sito web in modo rapido ed efficiente.
I web designer con poca o nessuna esperienza nel design della stampa potrebbero trarre grandi benefici dai principi che i designer di stampa hanno messo in pratica da anni prima del boom del web.
La prossimità non è l'unico principio di progettazione che aiuterà un sito a essere più fruibile e visivamente piacevole, ma è un fattore importante da considerare per molte delle ragioni appena discusse.
Ulteriori letture
- Nozioni di base sul design: il principio di prossimità
- Come CRAP sta progettando il tuo sito?
- Utilizzo del raggruppamento nei layout di pagina Web
Questo post è stato scritto esclusivamente per Webdesigner Depot da Louis Lazaris, scrittore freelance e sviluppatore web. Louis corre Web impressionanti , dove pubblica articoli e tutorial sul web design. Puoi seguire Louis su Twitter o mettiti in contatto con lui attraverso il suo sito web .