it-swarm.it

Perché molti siti lasciano vuota metà di ogni pagina web?

Perché molti siti lasciano vuota metà di ogni pagina web? Non è uno spreco di spazio sullo schermo?

Un bell'esempio di ciò sono i siti Stack Exchange Network:

Screenshot of UX Stack Exchange with annotations

Come puoi vedere, c'è un sacco di spazio bianco rimasto su entrambi i lati di ogni pagina.

Lo spazio bianco rende i siti compatibili con determinate dimensioni dello schermo?
Lasciare lo spazio aiuta a rendere i siti ottimizzati per i dispositivi mobili?
Lo spazio rende le pagine meno affollate e quindi più utilizzabili?
Oppure, non c'è una buona ragione e le persone lo fanno solo perché non si rendono conto che non dovrebbero?

Ho lavorato su siti che utilizzano entrambi i design e non ho mai avuto lamentele da parte degli utenti.

Esempi di siti con spazio: Stack Overflow , GitHub , Facebook
Esempi di siti senza spazio: Amazon , Chase , Gmail

207
Tot Zam

Ci sono molte ragioni, ma le principali sono disordine visivo e gerarchia di informazioni da un lato e coerenza strutturale dal lato UI.

Disordine visivo

Il disordine è un fenomeno importante nella nostra vita e una considerazione importante nella progettazione di interfacce utente e visualizzazioni di informazioni. Molti sistemi di visualizzazione esistenti sono progettati per ridurre il disordine filtrando quali oggetti o informazioni l'utente vede o utilizzando tecniche di ingrandimento non lineari in modo che agli oggetti al centro dello schermo sia consentita una maggiore area di visualizzazione. I suggerimenti per la progettazione di pagine Web, mappe e altre visualizzazioni spesso si concentrano su tecniche per la visualizzazione di una grande quantità di informazioni, mantenendo al minimo il disordine attraverso scelte accurate di rappresentazione e organizzazione di tali informazioni. [Rosenholtz et al., 2005]

In poche parole: l'idea è di evitare il sovraccarico visivo e quindi cognitivo presentando gli elementi in modo logico. Questo modo logico è legato al punto successivo:

Gerarchia di informazioni

Le informazioni hanno una gerarchia ed è la parte più importante di ciò che vuoi mostrare. Vale a dire, la differenza tra fallimento e successo.

La gerarchia delle informazioni è un principio di progettazione universale che dovrebbe essere utilizzato in tutte le forme di progettazione, incluso il design e-Learning. Per definizione, è la disposizione di elementi o contenuti su una pagina/schermata in modo tale da rivelare un ordine di importanza (sia crescente che decrescente).

Dai un'occhiata al modello in box qui sotto:

enter image description here

Come puoi vedere, è abbastanza chiaro che la gerarchia è strutturata e comprensibile dalla maggior parte delle persone. Si noti che in modalità reattiva questa gerarchia impilerà tutti gli elementi come previsto, quindi il vantaggio mobile è molto chiaro

Ora, lo stesso layout, trasformato in larghezza intera:

enter image description here (prova a vederlo a dimensione intera)

Ora, la gerarchia 1 è andata e l'occhio dell'utente probabilmente scansionerà prima 2 e 3. E poi 6 e 7! Fondamentalmente, il nostro elemento più importante è sotto la gerarchia. Possiamo cambiarlo in modo che l'ordine sia qualcosa come 3-1-2-4. Quindi avremo anche problemi quando impiliamo su modelli reattivi (non solo dispositivi, anche il ridimensionamento dello schermo), perché 3 sarà il primo elemento, quindi di nuovo, stiamo creando problemi piuttosto che risolverli.

Come puoi vedere, i problemi sono piuttosto grandi e questi sono solo i principali.

Ma poi abbiamo anche l'interfaccia utente o il layout:

Coerenza strutturale

Supponiamo che tu abbia una pagina a larghezza intera. In ogni caso, sarà al 100%. 100% per la persona su un piccolo laptop e 100% su un monitor da 24 pollici. È facile vedere che la persona su un laptop vedrà informazioni condensate, con una certa struttura che mostrerà gli elementi in un modo molto specifico con una quantità molto specifica di informazioni sullo schermo.

Ora, l'utente su quel monitor da 24 pollici vedrà qualcosa di estremamente diverso. Prima di tutto, è probabile che l'utente si senta come in una partita tennis, con la testa che va da una parte all'altra. La saturazione visiva e l'attrito saranno incredibilmente alti , ovviamente. Ma anche la visualizzazione verticale delle informazioni sarà diversa. Vedi sotto:

1366x768 enter image description here

Ora 1920x1200 (monitor da 24 pollici) enter image description here

Piuttosto una differenza, eh? Le immagini sono state ingrandite ((e questo potrebbe essere un altro problema!) e il testo ha mantenuto le sue dimensioni, quasi raddoppiando la quantità di testo. Ora pensaci su questo moltiplicato per l'incredibile quantità di dimensioni dello schermo esistenti e quelle che ancora non esistono e che appariranno nei prossimi mesi

In altre parole: invece di preservare il controllo, ci arrendiamo a favore della casualità .

Certo, stiamo parlando di regole generali, non di casi estremamente specifici, quindi ci saranno eccezioni qua e là

Un'ultima nota:

Voglio chiarire che dai tuoi esempi a tutta larghezza, solo Amazon lo usa e ci sono voluti anni di test (c'era un articolo molto interessante su questo non riesco a trovare in questo momento) con innumerevoli test A/B. Ma qui hai una gerarchia funzionante: vendono prodotti in cui non sono in grado di conoscere la gerarchia in anticipo poiché la maggior parte dei prodotti avrà una simile approssimazione peso, quindi farai del tuo meglio per abbinare l'utente ricerca.

Per quanto riguarda Google, usano un modello boxed e allineano il contenuto a sinistra con un piccolo spazio vuoto a sinistra. Le pagine principali di LinkedIn sono inscatolate e centrate, anche se è vero che la pagina di destinazione per gli utenti non registrati ha un elemento a larghezza intera. Ma se presti molta attenzione, tutto il resto è inscatolato, anche su quella pagina

134
Devin

La lunghezza della linea ottimale per il testo del tuo corpo è considerata di 50-60 caratteri per riga, inclusi gli spazi ("Typographie", E. Ruder). Altre fonti suggeriscono che sono accettabili fino a 75 caratteri.

fonte

Mantenere un sito Web pulito (e semplicistico) è una tendenza del design, ma ha anche valori di usabilità. C'è meno rumore e gli utenti possono trovare le cose più facilmente.

Ma l'aggiunta di una larghezza massima ai tuoi contenuti è buona soprattutto per la leggibilità. Dai un'occhiata a reddit e noterai perché la lunghezza della linea è importante.

85

Esiste un limite ragionevole nella quantità di informazioni che l'utente dovrebbe vedere contemporaneamente .

Se la vista è piena di più informazioni di quelle che l'utente può assimilare/comprendere, diventa travolgente. Questo dipenderà dal tipo di contenuto e dal modo in cui le informazioni vengono visualizzate.

Non si tratta di lasciare spazio vuoto, ma di utilizzare la quantità di spazio necessaria, non di più.

Per illustrare il punto con il tuo esempio:

enter image description here

Poiché i siti Web possono utilizzare lo scorrimento, non è necessario inserire quante più informazioni possibili in un'unica schermata.

Ora, come distribuire il contenuto?

enter image description here

enter image description hereenter image description here

A seconda del sito, il contenuto potrebbe essere centrato o allineato a sinistra (quest'ultimo probabilmente a causa della lettura da sinistra a destra). Esiste un'altra alternativa che non è quella di distribuire lo spazio nei confini dei contenitori, ma all'interno degli elementi. Questo tipo di layout potrebbe essere utile se ci sono più colonne all'interno dei contenitori e c'è una barra laterale su ciascun lato. In altre parole, vale la pena se ci sono abbastanza colonne e ad un certo punto la consistenza di ciascun elemento (ogni riga) inizierà a rompersi a causa delle informazioni troppo distanti . E quando raggiungiamo quel punto, siamo tornati per continuare ad aggiungere quello spazio vuoto in uno dei modi precedenti.

enter image description here

76
Alvaro

Studi accademici sullo spazio bianco

Sì, lo spazio bianco viene utilizzato per aumentare la leggibilità e ridurre il disordine visivo [1] , [2] .

Più oggetti sono sullo schermo, più l'occhio e il cervello devono elaborare [3] . Con lo spazio vuoto riduciamo le risorse attenzionali necessarie per elaborare la pagina . Tuttavia, troppo (oltre il 50%) può avere un effetto negativo sulla leggibilità e sulla soddisfazione dell'utente [4] .

Lo spazio bianco rende i siti compatibili con determinate dimensioni dello schermo?

Non proprio. Se la pagina non ha spazi bianchi (ed è impilata con il contenuto), quando si progetta per risoluzioni diverse diventerà un grosso problema come posizionare tutti gli elementi della pagina per le diverse risoluzioni.

Lasciare lo spazio aiuta a rendere i siti ottimizzati per i dispositivi mobili?

Beh non esattamente. Sulle risoluzioni mobili puoi notare che non c'è molto spazio bianco. Hanno una struttura di layout diversa a causa dello spazio limitato sullo schermo disponibile sui telefoni cellulari.


Riferimenti:

[1] Chaparro B. et al., Lettura del testo online: un confronto tra quattro layout degli spazi bianchi, 2004

[2] Coursaris C. e Kripintris K., Estetica e usabilità del web: uno studio empirico degli effetti dello spazio bianco, 2012

[3] S. Luck ed E. Vogel La capacità della memoria di lavoro visiva per caratteristiche e congiunzioni, 1997

[4] Bernard M., Chaparro B. e Thomasson R., Trovare informazioni sul web: la quantità di spazi bianchi conta davvero?, 2000

18

Come sviluppatore web parlando per i siti che ho realizzato: non abbiamo progettato per display di grande larghezza. E lo spazio bianco è ciò che viene impostato per impostazione predefinita quando si ridimensiona la larghezza del browser (o qualunque sia il colore di sfondo CSS).

I costi di progettazione e sviluppo di un sito Web reattivo e scalabile su desktop e dispositivi mobili sono già piuttosto elevati. Le nostre analisi mostrano che il 90% + dei nostri utenti visualizza il nostro sito con una risoluzione di <1400 px.

Alla fine della giornata, non vale la pena dedicare tempo e denaro alla progettazione e all'implementazione per il <10% degli utenti che navigano nei nostri siti con una risoluzione di> 1400 px.

Correlati: https://webmasters.stackexchange.com/questions/7932/what-is-the-standard-width-for-a-website-in-pixels

18
y3sh

Perché alcune persone navigano come me, con il monitor ruotato di 90 °.

enter image description here

Altre persone sono su tablet, telefoni e Win 3.11 con risoluzione 640 * 480 e colore a 8 bit. I migliori siti Web sono generalmente progettati per sembrare leggibili su tutti dispositivi, non stanno benissimo su nessun dispositivo particolare.

6
dotancohen

Se il contenuto è naturalmente così ampio, allora allarga la pagina. Quindi, ad esempio, una tabella di grandi dimensioni sarebbe molto più utilizzabile se utilizzasse la larghezza necessaria, piuttosto che essere angusta in una colonna più stretta. Ho usato il foglio di calcolo di Google Documenti a schermo intero in passato, e questo è utile.

Ma come altri hanno già detto, c'è un limite a quanto lunghe righe di testo dovrebbero essere prima che diventino difficili da leggere. È perché diventa difficile trovare l'inizio della riga successiva mentre l'occhio torna indietro a sinistra, quindi le colonne di testo dovrebbero essere solo così larghe.

Un altro argomento per non avere ampie pagine Web è che non ho acquistato un monitor enorme solo per poter vedere più di qualsiasi sito Web. Man mano che gli schermi diventano più grandi, le persone hanno meno probabilità di massimizzare le finestre, quindi il browser non è così ampio.

Ho comprato un enorme monitor (in realtà, due enormi monitor affiancati e ne avrei di più se la mia macchina li guidasse) in modo da poter avere più finestre, browser, editor, ecc. Fianco a fianco. In questo modo non devo passare costantemente da un'app all'altra, posso solo dare un'occhiata dall'una all'altra, il che rende le cose molto più efficienti. Ciò è probabilmente più vero per siti come stackexchange, che sono spesso utilizzati in contesti di lavoro, in cui le persone stanno lavorando su altre cose contemporaneamente. È quasi certamente molto meno importante per i siti di intrattenimento.

Quindi, come per qualsiasi domanda sull'usabilità, pensa al contesto in cui lavorano gli utenti. Il tuo sito è l'unica cosa che stanno guardando o è solo una parte di ciò che stanno facendo? Puoi davvero esserne sicuro? Hai registrato queste informazioni per esempio?

Anche se è l'unica cosa che stanno facendo, non ha ancora senso mettere le cose sullo schermo a meno che non abbiano effettivamente uno scopo. Altrimenti sono solo rumore che toglie ciò che in realtà vuoi che guardino (o, in effetti, vogliono guardare). Quindi, se è veramente utile, vai avanti. Ma non riempire solo lo spazio per il gusto di farlo.

4
Peter Bagnall

Tale design può essere facilmente trovato e modificato utilizzando bootstrap, l'esempio è qui: http://getbootstrap.com/css/#grid-example-fluid

La semplice risposta per l'interfaccia utente è che la larghezza del paragrafo è paragonabile alla quantità di movimento non forzato che un occhio può fare da sinistra a destra - inoltre è paragonabile a un foglio di carta.

Normalmente l'area leggibile di un paragrafo non dovrebbe essere più ampia di una mano di dimensioni medie.

3
user96861

Sono stato davvero sorpreso di vedere questa domanda e l'interesse per l'argomento. Questo mi sembra faccia parte del vecchio dibattito intorno alla domanda "Lo spazio bianco è sprecato spazio?"

Penso che questo sia un mito e ci sono molti argomenti che sostengono l'idea che lo spazio bianco sia la chiave per un design di successo.

L'argomento più importante per limitare la larghezza del blocco di contenuto principale e avere spazio bianco di layout è che rende il design più utilizzabile e aiuta gli utenti concentrarsi sugli elementi più importanti. Posso dirti per esperienza che ho semplicemente lasciato quei siti Web con così tante informazioni in una pagina che ho la sensazione che non troverò mai ciò di cui ho bisogno. È estenuante vedere informazioni su tutto lo schermo e non capisco come potrei concentrarmi sulla colonna centrale con il testo sul lato sinistro e sul lato destro.

So che questo è un po 'soggettivo, ma sulla pagina con molte informazioni nella pagina, ho la sensazione che gli sviluppatori non volessero passare più tempo per aggiungere un pulsante con "più" o sintetizzare ciò che è importante. Sembra una punizione ed è economico.

Lo spazio bianco aiuta a:

  • concentrarsi sui contenuti più importanti;
  • migliora la comprensione della lettura;
  • creare l'aspetto e la sensazione di minimalismo ed eleganza.

In questo articolo, Why White Space Is Crucial To UX Design , ho trovato un'opinione interessante:

Lo spazio bianco ha dimostrato di aumentare la comprensione fino al 20%. (...)

Lo spazio bianco aiuta a creare mappe mentali. (...)

Il potere dello spazio bianco deriva dai limiti dell'attenzione e della memoria umana

Aggiornamento: per essere più precisi, l'alternativa ad avere i margini a sinistra e a destra è avere più colonne o avere una casella principale con una larghezza maggiore.

Il problema con la prima opzione è che è difficile dare la priorità alle informazioni importanti e con la seconda è difficile leggere un testo di grande larghezza.

Viene presentato un buon argomento per limitare la larghezza di una colonna qui e questo riferimento è importante da menzionare:

Esiste una lunghezza di linea ideale per i contenuti?

Per citare un passaggio da "Web Style Guide - Principi base di progettazione per la creazione di siti Web".

La lunghezza della linea ideale per il layout del testo si basa sulla fisiologia dell'occhio umano ...

A una distanza di lettura normale l'arco del campo visivo è di pochi pollici, circa la larghezza di una colonna di testo ben progettata o circa 12 parole per riga. La ricerca mostra che la lettura rallenta e i tassi di ritenzione diminuiscono quando la lunghezza della linea inizia a superare la larghezza ideale, perché il lettore deve quindi utilizzare i muscoli dell'occhio e del collo per tracciare dalla fine di una riga all'inizio della riga successiva. Se l'occhio deve percorrere grandi distanze sulla pagina, il lettore si perde facilmente e deve cercare l'inizio della riga successiva. Studi quantitativi mostrano che lunghezze di linea moderate aumentano in modo significativo la leggibilità del testo.

Guida allo stile Web - Principi di progettazione di base per la creazione del sito Web Patrick J. Lynch e Sarah Horton 2a edizione, pagina 97.

2
Madalina Taina

Direi che il campo visivo ha un ruolo. Puoi leggere facilmente un pezzo di carta e la larghezza del sito Web ha circa le stesse dimensioni. In questo modo non devi muovere la testa tanto in direzione orizzontale durante la lettura o l'analisi della pagina.

Inoltre, anche se provassi a ridurre lo spazio bianco, come lo faresti? Non è necessariamente facile. La maggior parte delle domande sono già piuttosto brevi. 2 pagine una accanto all'altra? Come funzionerebbe con lo scroll inifinte o lo scrolling in generale?

2

Ho letto tutte le risposte sopra, ma non ho visto da nessuna parte alcuna menzione ai problemi di risposta che potrebbero verificarsi.

Anche se non riesco ancora a ottenere il design "mobile first", se devi progettare un'applicazione web reattiva, lo stesso contenuto deve apparire bello da 320px fino a ... qualunque cosa. Sto lavorando principalmente con i dashboard, quindi è necessario molto spazio, ma la maggior parte delle volte non riesco ancora ad allungare il contenuto così tanto da apparire reattivo su tutti i livelli di risoluzione.

Tieni sempre presente che maggiore è la larghezza del contenitore, il contenuto verrà impilato in livelli di risoluzione più piccoli e maggiore sarà l'altezza del blocco di contenuto in tali risoluzioni. Ad esempio una singola riga di testo in un contenitore di 1920px di larghezza, consuma 140px di altezza in una visualizzazione a schermo mobile: è il 30% dell'altezza dello schermo di un piccolo telefono ed esclude l'interfaccia utente del browser. Attualmente sono su uno schermo 21: 9 3440x1440px. Imaging con elementi che si estendono da un lato all'altro del mio schermo. Per non parlare del fatto che a volte devo girare la testa per vedere il desktop da un lato all'altro! : D

Ecco un esempio: https://jsfiddle.net/cjj1Ln36/1/

Per esperienza, qualcosa di più di 1400 px è eccessivo soprattutto per i contenuti multimediali, ad esempio la combinazione di un titolo, un testo e un grafico. Di solito, la cosa logica da fare con risoluzioni più elevate è quella di rompere il contenuto in colonne, tuttavia, a seconda della risoluzione e dell'esperienza, queste colonne finiscono per essere troppo sterili o troppo dense a seconda della risoluzione. È anche altamente improbabile che due blocchi di codice contengano lo stesso contenuto, probabilmente impossibile da prevedere nei siti Web dinamici, quindi il contenuto di una colonna potrebbe essere denso e l'altro scarso.

Per i siti Web ricchi di foto, le cose vanno ancora peggio.

a) Se le foto utilizzano una larghezza del contenitore piena di 1400 px, ma devono mantenere un rapporto comune, come 4: 3, molto probabilmente occuperebbe tutta l'altezza dello schermo e molto probabilmente lo supererebbe.

https://jsfiddle.net/mg965au8/1/

b) Se la foto viene utilizzata sul lato del testo, passando da una risoluzione di 1400 px a una risoluzione in cui la foto ha senso sedere sopra il testo (ad esempio> 768 px), molto probabilmente il contenuto inizierebbe troppo scarso e probabilmente supererà l'altezza dell'immagine mentre si restringe. Ho creato un violino per illustrare il problema. Prova ad espandere da una bassa risoluzione fino a un massimo di 1400 px (immagina senza contenitore!). Sembra bello per tutte le larghezze del browser? Probabilmente no.

https://jsfiddle.net/2xnt3mk2/

Inoltre, ciò che hanno detto tutti gli altri sopra - troppo travolgente, ecc

1
scooterlord

Soprattutto nei siti Web ricchi di testo, una stretta colonna di testo è più piacevole da leggere rispetto a una parete di testo a larghezza intera. Inoltre, se il testo non è un romanzo, scoprirai che più della metà delle righe di testo non raggiunge la larghezza massima, quindi crea una "macchia di testo" sgradevole e irregolare.

Pensa a come viene visualizzato il testo in un romanzo (fisico) rispetto a un dizionario. I dizionari sono generalmente visualizzati in due colonne. Permette al lettore di concentrarsi meglio su ciò che viene letto perché è importante. Non è così importante conservare tutte le parole di un romanzo, così come non è difficile perché supponiamo che il lettore sia già interessato alla storia.

In breve: gli umani hanno scarse capacità di attenzione e mantengono meglio la concentrazione se ricevono poche informazioni alla volta.

0
ecc

Dipende anche da un tipo di contenuto, dalle sue dimensioni e dalla distanza di un utente dallo schermo.

Per video, dashboard con foto di grandi dimensioni o presentazioni: l'opzione a schermo intero è la migliore.

Per il contenuto del testo e le immagini medio-piccole è fondamentale tenere conto di un campo di percezione confortevole.

Quanto sarebbe ampio un campo di percezione confortevole senza la necessità di spostare gli occhi da sinistra a destra per un normale PC o notebook con una distanza da 50 a 65 cm (da 20 a 26 pollici) a un utente seduto?

Gli occhi sono troppo preziosi e si stancano rapidamente, quindi le persone preferiscono fissare gli ampi gradi di libertà dal movimento 2-D al movimento 1-D e scorrere la pagina verticalmente e lasciare che gli occhi rimangano fissi nella loro posizione.

Scorrere la pagina in verticale è più facile per le persone, poiché spostando gli occhi avanti e indietro da sinistra a destra e riparando ulteriormente la posizione verticale del contenuto corrente/successivo. Alcuni contenuti possono semplicemente essere persi, se collocati al di fuori del campo di percezione principale.

Di conseguenza, l'impressione visiva complessiva di una pagina potrebbe risentirne.

0
Doc