Se avessi la mia strada, insieme a quasi tutti gli altri web designer, le pagine web conterrebbero sempre una quantità limitata di contenuti al fine di mantenere la messa a fuoco chiara e la linea di comunicazione facile da seguire.
Sfortunatamente, le situazioni del mondo reale richiedono pagine web con contenuti immensi. Per imparare ad affrontare i problemi che sorgono in questa arena, esamineremo una particolare sezione di siti Web che sono forse più sovraffollati di qualsiasi altro: siti Web di notizie. In che modo i progettisti di CNN, MSNBC, Fox e altri gestiscono il layout di così tante informazioni? Scoprilo dopo il salto.
Intestazione e navigazione
L'intestazione è un aspetto assolutamente cruciale per un sito di notizie. Ogni utente sa quando visita un sito di notizie che ci saranno tonnellate di contenuti da setacciare e se vogliono qualcosa di specifico, andranno direttamente all'intestazione per trovarlo.
Qui abbiamo il primo assaggio del problema che ci affliggerà per il resto dell'articolo: troppe cose! Come ho accennato nell'introduzione, i siti di notizie devono assolutamente trasmettere molte informazioni, ecco perché esistono. Organizzare tutte queste informazioni non è un'impresa da poco e quasi tutte le decisioni che prendi possono influire drasticamente sull'usabilità del sito.
Diamo un'occhiata al nostro primo esempio. L'immagine sotto mostra l'intestazione e la navigazione per MSNBC.com.
Come puoi vedere, c'è un lotto andando avanti nei primi centimetri di questo sito. La parte superiore della pagina contiene una quindicina di link, e questi sono solo per altri siti, la navigazione interna si trova sotto e contiene altri dodici.
MSNBC utilizza il proprio spin interessante in un menu a discesa per ciascuna sezione del sito visualizzata nella navigazione. Qui puoi vedere da cinque a sei titoli di testo, alcune immagini e ancora più contenuti che conducono a un altro sito. Dopo diversi livelli di navigazione, arriviamo finalmente al logo del sito vicino alla parte inferiore dell'intestazione, insieme ai widget meteo e di ricerca.
Penso che l'intestazione di MSNBC sia un po 'confusa, il marchio è perso e il carico di contenuti secondari è fonte di distrazione. Confrontalo con l'intestazione di uno dei migliori siti di notizie che ho trovato, la CNN.
Qui abbiamo un marchio forte e chiaro, una barra di ricerca proprio dove lo si cercherebbe e un semplice menu di navigazione senza un singolo menu a discesa. Questo menu rappresenta un buon compromesso tra design minimale e funzionalità sufficienti a portarti dove vuoi senza problemi.
Fox prende una rotta simile alla CNN. È un po 'più ingombrante e si estende su diversi siti come MSNBC, ma le schede aiutano a rendere la metafora comprensibile.
Il Washington Post è iniziato con un'idea simile a MSNBC, ma l'ha tirato fuori molto meglio. Come puoi vedere, il nome del sito è bello e grande ed è seguito da un widget meteo.
Passare con il mouse sulla navigazione ti offre un ampio menu a discesa, ma invece di spingere i contenuti in modo imbarazzante come su MSNBC, è stato strutturato per coprire il grande "Washington Post"? la zona.
La lezione
? Diffidare di mega-dropdowns che non soddisfano davvero la loro promessa di rendere il tuo sito più facile da navigare.?Penso che la lezione qui sia di non travolgere i tuoi utenti fin da subito con un'intestazione ingombra. Ciò non significa che non si può avere un sacco di contenuti, basta stare attenti ai mega-dropdown che non rispettano la loro promessa di rendere il tuo sito più facile da navigare. La CNN dimostra che a volte una semplice lista orizzontale di link e alcuni spazi bianchi ben strutturati può funzionare benissimo anche in un ambiente con contenuti di massa.
Storie in primo piano
La prossima cosa che voglio discutere è come questi siti catturano la tua attenzione e indirizzano verso ciò che è importante. Ogni sito di notizie ha una o due storie principali che sanno essere oggetti caldi del giorno e devono strutturare la pagina per evidenziare in modo appropriato queste storie.
Il mio esempio preferito di questo è The Huffington Post, che sceglie di evidenziare una singola notizia usando un'immagine enorme e un titolo in grassetto, entrambi che occupano l'intera larghezza del contenitore della pagina.
Basta dare un'occhiata a quanto è bello e pulito rispetto ad altri siti di notizie che hai visto. È tutt'altro che popolare per i siti di notizie utilizzare questo formato, ma non si può fare a meno di ammettere che sembra funzionare abbastanza bene qui.
MSNBC prende una strada simile ma non è così drastica da presentare solo una storia nella parte superiore della pagina. Hanno una grande immagine affiancata a sinistra con vari titoli. Mi piace molto il layout di base, anche se penso che i piccoli titoli casuali gettati tra le storie principali lo ingombrino in modo significativo.
La CNN e la Fox scelgono un approccio leggermente più disordinato, soprattutto perché non erano disposti a rinunciare a spazi pubblicitari preziosi per importanti notizie. CNN ha un layout a tre colonne con il centro che è il più ampio e l'ultimo è lo spazio pubblicitario seguito da una barra laterale di accesso.
Fox presenta una grande immagine con tre colonne sottostanti, il tutto accanto a un'ampia colonna all'estrema destra per lo spazio pubblicitario, i ticker delle azioni e le informazioni sociali.
La lezione
Con la pagina di Fox, ricevo molte informazioni, il che è fantastico, ma i miei occhi non sanno dove atterrare e tendono a rimbalzare molto prima che io legga davvero qualcosa. La CNN attira la mia attenzione con alcune facce, che sono sempre utili per guidare gli utenti dove vuoi che vadano.
Tuttavia, trovo che le immagini veramente grandi, come quelle trovate su Huffington e MSNBC, siano davvero lo strumento per farmi notare qualcosa di importante. Questo è rafforzato in modo sostanziale con il testo enorme e audace di Huffington.
? A volte un sacco di contenuti organizzati ordinatamente in un piccolo spazio è una cosa grandiosa?Il metodo migliore per tutti gli utenti è una chiamata complicata. Uno deve solo fermarsi dal Craigslist massicciamente popolare per vedere che le grandi immagini non sono sempre necessarie per rendere un sito attraente per i visitatori.A volte un sacco di contenuti organizzati ordinatamente in un piccolo spazio è una grande cosa, soprattutto se si desidera una rapida panoramica di tutto ciò che è importante.
Il mondo non è un luogo in cui un singolo evento è generalmente più importante di ogni altro, quindi è comprensibile che siti come Fox sentano la necessità di rompere un po 'questa sezione. Il mio miglior consiglio è dare la massima importanza possibile alle poche cose che sono veramente importanti. Se riesci a dare una svolta a una grande storia in primo piano, provaci. Se no, cerca di mantenere il numero basso, altrimenti non è davvero un? sezione è?
The Story Grid
Man mano che progrediamo oltre l'intestazione e il contenuto in primo piano, i siti di notizie diventano sempre più dissimili, rendendo difficile confrontarli punto per punto. Tuttavia, è a questo punto che inizia la vera sfida. È qui che i progettisti ricevono una montagna di altri contenuti e gli viene detto di organizzarla.
Ogni sito è suddiviso in vari moduli e sezioni unici disposti in diverse griglie, ma scoprirai che è una tendenza piuttosto popolare, ad un certo punto della pagina, entrare in una configurazione a tre colonne per coprire i vari articoli. Ecco alcuni esempi di The Huffington Post, The Washington Post e The Economist che fanno esattamente questo.
Avere tre colonne suddivide il tuo contenuto piacevolmente, in modo uniforme o utilizzando un approccio a larghezza variabile come The Economist per un maggiore controllo sull'enfasi. Uno dei principali problemi con l'approccio a tre colonne è che abbiamo insegnato al nostro cervello a ignorare quella terza colonna! Sappiamo tutti che questo è il posto in cui si trovano gli annunci e tutte le altre schifezze che non vogliamo vedere, quindi manteniamo la nostra navigazione limitata alle prime due colonne.
Ciò può essere negativo per i siti che in realtà distribuiscono una colonna importante in quanto è probabile che si perdano nel mix. Ricorda solo questa tendenza degli utenti e assicurati che la terza colonna non assomigli ancora a un pasticcio di annunci una volta entrato nel contenuto solido.
Un cambiamento rinfrescante
La CNN ha uno dei migliori approcci all'organizzazione dei contenuti che ho visto su un sito di notizie. Usano una griglia a quattro colonne di carte di altezza uguale con un titolo di categoria. Il risultato si sente davvero privo della confusione disordinata tipica di queste sezioni.
? Quando estraiamo quasi tutte le immagini e normalizziamo il contenuto, il risultato è qualcosa di molto più utilizzabile? È interessante notare che, quando estraiamo quasi tutte le immagini e normalizziamo il contenuto, il risultato è qualcosa di molto più utilizzabile. In un tipico sito di notizie c'è semplicemente troppa competizione per la mia attenzione. Ogni storia sembra che stia cercando di urlare più forte di quella accanto e il risultato tende ad essere piuttosto travolgente. Al contrario, la griglia della storia della CNN è facile e divertente da consultare.
Anche MSNBC ha un approccio diverso. Organizzano le loro storie in categorie e le posizionano in riquadri orizzontali chiaramente definiti. Hanno messo un sacco di controllo nelle tue mani qui, permettendoti di scegliere quante storie mostrare e persino di darti i controlli per riorganizzare le scatole.
La lezione
La cosa che ho notato qui è che mi è piaciuto usare i siti che hanno organizzato i loro contenuti in sezioni e categorie chiaramente differenziate. Il formato a tre colonne, benché provato e vero, rende la navigazione intensiva per il lavoro che sembra più una spaccatura.
CNN e MSNBC hanno preso provvedimenti per creare una chiara separazione visiva tra storie e vari tipi di contenuti e avevano layout che sembravano meno casuali. Uno dei motivi per cui il formato a tre colonne appare disordinato sono le altezze variabili di ciascun modulo, che distanziano il contenuto orizzontalmente e creano molti movimenti oculari su e giù. Il formato di altezza uguale aiuta immensamente.
Perché questo mi importa?
La maggior parte delle persone che leggono questo non sono i migliori designer del Washington Post, quindi perché queste osservazioni sono preziose per questo pubblico? La risposta è che, mentre non lavoriamo tutti sui siti di notizie, tutti abbiamo dato ai nostri clienti troppi contenuti? discorso.
Semplicemente lo odiamo quando i nostri clienti ci danno un sacco di roba e chiediamo di mettere tutto su un'unica pagina. Per quanto si possa contestare, diverse situazioni richiedono in realtà questo approccio. Cramming un sacco di contenuti su una singola pagina mentre si cerca di renderlo utilizzabile e attraente è una delle situazioni più difficili che dovrai affrontare come designer, se riesci a batterlo, puoi progettare la tua strada da qualsiasi cosa.
? In caso di dubbio, la risposta è di solito per semplificare.?Le lezioni che abbiamo imparato qui oggi possono essere applicate a qualsiasi sito web che crei in cui hai difficoltà a litigare in troppi contenuti. In caso di dubbio, la risposta è solitamente quella di semplificare. Riduci l'intestazione brutta e grossa, prova a trovare uno o due punti veramente importanti e ad ingrandirli, quindi separa il resto del contenuto in sezioni visivamente separate che sono facili da consultare e non richiedono troppe scorciatoie da leggere.
Conclusione
Ora che hai visto la mia analisi, cosa ne pensi? Quali siti di notizie ritieni siano i più attraenti? Quali sono i più utilizzabili? I due obiettivi possono essere sinergici?
Lascia un commento qui sotto e facci sapere i tuoi pensieri riguardo le informazioni e gli esempi sopra.