Il nuovo design del sito Web della CNN è stato decostruito
Lunedì 26 ottobre, CNN.com ha introdotto un nuovo design del sito Web , apportando una serie di importanti modifiche al layout delle informazioni.
Il nuovo design è bello, pulito, organizzato e ben strutturato. Invita l'occhio a scansionare e trovare qualcosa di interessante con l'obiettivo di fare clic su un'altra pagina.
Il progetto precedente era alquanto disordinato e poco invitante; il contenuto sembrava essere stato forzato in uno spazio non strutturato. Il nuovo layout è molto diverso e comprende una serie di moderne pratiche di web design e usabilità e tendenze .
Quindi, esaminiamo più in dettaglio non solo i notevoli miglioramenti, ma alcune delle discutibili decisioni sul design e sull'usabilità.
Layout ispirato alla griglia
Sto usando la frase "ispirata alla griglia" perché il nuovo design sembra essere basato su una griglia, ma l'allineamento di precisione degli elementi non è esattamente lì.
Dando uno sguardo superficiale al loro foglio di stile primario , sembrano avere liberamente basato il loro stile e la loro griglia sul CSS di Blueprint struttura.
Il ripristino dei CSS ha molte somiglianze con il framework Blueprint e la parola "blueprint" è inclusa nella parte superiore, quindi questa sarebbe una valutazione logica basata sulla mia conoscenza limitata di Blueprint.
Dopo aver analizzato una schermata della loro home page, ho concluso che se si basava il nuovo layout su una griglia, le specifiche di quella griglia sarebbero: 16 colonne, 50px per colonna, con 12px grondaie (lo spazio tra le colonne), per un totale di 980 px di larghezza.
Di seguito una rappresentazione visiva della mia stima di griglia, come un mock up di Photoshop:
Anche se gli elementi nella pagina non seguono il tipo di allineamento e bilanciamento che normalmente ci si aspetterebbe da un layout di griglia, c'è un notevole miglioramento in questo layout rispetto al progetto precedente, mostrato di seguito:
Il nuovo layout mantiene tutti gli elementi della pagina all'interno del contenitore largo 980px, a differenza del precedente design dall'aspetto goffo che aveva un'intestazione di larghezza del fluido che copriva l'intera pagina sopra una sezione di contenuto a larghezza fissa.
Inoltre, mentre il vecchio design non sembra poter decidere tra gli angoli arrotondati e il quadrato, il nuovo design presenta costantemente angoli quadrati con sottili effetti smussati che separano gli elementi appropriati, come mostrato nell'immagine qui sotto.
Sebbene il formato sia simile a una griglia, è, come detto, non un formato di griglia rigoroso, e le sezioni sotto la piega sono un po 'troppo strutturate rispetto a quelle precedenti.
Sezione dell'intestazione drasticamente migliorata
Uno dei miglioramenti più evidenti nel nuovo design è la sezione intestazione.
La barra di navigazione orizzontale è moderna, pulita e chiara . La casella di ricerca, l'opzione di registrazione e il link di accesso si trovano nell'angolo in alto a destra, dove dovrebbero essere.
E, anche se non è consuetudine nel design moderno centrare il logo del sito, in questo caso funziona. Crea un'esperienza di marchio molto dominante e vivida che non è facilmente dimenticata .
Un'altra bella caratteristica della barra di navigazione è che indica per mezzo di colori e grafica quali collegamenti sono primari, che sono secondari e che si apriranno in micro-siti o siti gemelli. Questi ultimi sono indicati da triangoli rivolti verso destra ("Soldi" e "Sport" - più su questo sotto).
Uso efficace dello spazio
Sul lato destro della pagina, sotto l'unità pubblicitaria principale, è stato incluso uno switcher di contenuti in stile a fisarmonica, che consente all'utente di visualizzare anteprime, in un'area relativamente piccola , di contenuti correlati a una serie di argomenti diversi.
Enfasi sulla popolarità di video e storie
Nel progetto precedente, il video aveva un'enfasi abbastanza forte, in una scatola sul lato destro. Nel nuovo design, il video è una categoria importante nella barra di navigazione principale, data la stessa importanza visiva del link "Home".
Le storie video sono presenti in tutto il sito e sono chiaramente indicate dal consueto link "play button" sulle foto che rimandano ai contenuti video, come mostrato di seguito:
Un'altra categoria data la stessa importanza di "Home" e "Video", come mostrato nell'immagine sopra, è la sezione "NewsPulse", che è nuova e ancora in beta.
Questa sezione visualizza le notizie in base alla popolarità (che sembra essere calcolata dal totale delle visualizzazioni di pagina, non dai commenti) e consente al lettore di filtrare i risultati per categoria o tipo di storia.
Pagine di categoria forti
Le pagine delle categorie principali ("Stati Uniti", "Mondo", "Politica", ecc.), Accessibili dalla barra di navigazione principale, funzionano in modo simile alla pagina iniziale .
Infatti, se non sapessi in quale pagina eri, potresti pensare di trovarti sulla home page. La categoria "USA" è la seguente:
Ognuna di queste sezioni visualizza convenientemente le storie migliori, le ultime notizie e altri elementi relativi a quella categoria.
Le didascalie in bianco e nero sotto le immagini, presenti anche nella home page e nelle pagine degli articoli, sono accattivanti e facili da leggere, senza l'uso di stili grafici o di font eccessivamente elaborati .
Pagine di articoli forti
Le pagine degli articoli, per la maggior parte, mantengono il marchio vivido della home page. Il testo del corpo è ben visualizzato in Arial 14px con un'altezza linea molto leggibile .
Anche se alcuni elementi delle pagine sembrano un po 'piccoli, personalmente mi piace il modo in cui la dimensione del carattere del corpo dell'articolo si staglia sulla pagina, in modo che il lettore possa rimanere concentrato su di esso.
Inoltre, sul lato sinistro di ogni storia, c'è una sezione chiamata "Story Highlights" che riassume la storia attuale in alcuni punti dell'elenco puntato. Ciò dimostra che i progettisti della CNN sono consapevoli della tendenza online degli utenti a "scannerizzare" materiale lungo.
Sovraccarico di informazioni
Di tutti gli aspetti negativi del nuovo design, probabilmente il primo problema che è immediatamente evidente è il sovraccarico di collegamenti e informazioni sulla home page - sebbene sia più strutturato e organizzato, come discusso in precedenza.
La home page è lunga circa due e mezzo e include sezioni che duplicano gli elementi nella barra di navigazione principale, con circa una mezza dozzina di sotto-link sotto ogni categoria. Queste sezioni appaiono sotto la piega e sono mostrate in questa immagine:
Dato che la CNN è uno dei siti più popolari al mondo (38 milioni di visitatori unici al mese), queste sezioni riceveranno un traffico considerevole rispetto ad altri siti, tuttavia, perché appaiono così al di sotto del fold e perché ci sono così tanti collegamenti, la quantità relativa di traffico che visita quei collegamenti attraverso la pagina principale sarebbe probabilmente abbastanza bassa.
Sezioni importanti sepolte?
Come sottolineato sopra, molte informazioni sulla home page appaiono ben al di sotto della piega. E, significativamente, sembra che alcuni contenuti importanti siano completamente nascosti nella parte inferiore della home page, più di due schermi completi sotto l'intestazione .
Ad esempio, una sezione intitolata "Hot Topics" appare in basso, sul lato destro, appena sopra alcune promozioni e annunci.
Sembra avere più senso che questa sezione sostituisca il contenter del contenuto della fisarmonica, o che sia incorporata nella fisarmonica.
Anche gli annunci e i promo che appaiono sotto "Hot Topics" sembrano essere più importanti di quanto rivela la loro posizione. Anche in questo caso, anche se un sito Web con un traffico così elevato riceverebbe molti clic su queste aree, la percentuale di clic rispetto alle sezioni e agli annunci above the fold sarebbe probabilmente drasticamente diversa.
Naturalmente, i produttori della CNN sanno quali sono i contenuti più importanti e capiscono meglio le abitudini dei loro utenti rispetto a chiunque altro - ma queste sfide di layout e usabilità sono utili per analizzare se altri sviluppatori dovessero prendere decisioni simili.
Misteri di usabilità
Ci sono alcuni elementi sul nuovo sito che potrebbero non essere progettati per l'usabilità ottimale.
Un esempio è il triangolo rivolto a destra che appare su ciascuno dei collegamenti di micro-sito. A prima vista, non ero sicuro di cosa fossero quei triangoli. Sembrano indicare una sorta di sezione del cursore JavaScript che potrebbe apparire.
Alcuni utenti che non prestano la massima attenzione potrebbero addirittura confonderli con frecce rivolte verso il basso che producono menu a discesa.
sarebbe bastato - ma in questo caso si presenterebbe il problema degli utenti supponendo che i link si aprissero in una nuova finestra, che in questo caso non è vera. Anche il commutatore di contenuti per fisarmonica, discusso in precedenza, presenta alcuni problemi di usabilità. Innanzitutto, quando JavaScript è disabilitato, la fisarmonica è resa inutilizzabile e non mostra alcun contenuto.
Dovrebbe espandersi di default per visualizzare tutto il contenuto, oppure visualizzare uno degli elementi. Inoltre, le intestazioni con collegamento ipertestuale per le sezioni della fisarmonica dovrebbero comunque collegarsi alle rispettive sezioni, ma non lo sono.
Un altro problema con il contenuto della fisarmonica è che, poiché il testo che contiene è così piccolo, non è sempre chiaro cosa sia cliccabile all'interno della fisarmonica. Ciò rende i collegamenti meno distinti dal resto del contenuto della fisarmonica.
Nell'immagine sottostante, la freccia rossa che ho disegnato punta a due voci dell'elenco puntato. Il testo in queste voci di elenco è linkato da un hyperlink, ma questo non è ovvio a prima vista.
Alcune sezioni riflettono ancora il vecchio design
Come sarà il caso di qualsiasi riprogettazione di un sito delle dimensioni di CNN, alcune sezioni rifletteranno ancora il vecchio design fino a quando tutte le pagine non saranno completamente integrate.
Questo di solito è il caso di contenuti più vecchi che non verranno visitati più spesso, ma nel caso della CNN, alcune sezioni importanti hanno ancora la vecchia skin.
Due esempi sono i di e contatto pagine.
Piccola tipografia
Un particolare problema di progettazione che non è conforme alle moderne tendenze del web design è l'uso di piccoli testi e di piccoli elementi tipografici.
La piccola dimensione del carattere nel contenuto della fisarmonica è stata discussa in precedenza. C'è anche la barra degli strumenti "condividi" che appare nelle pagine degli articoli e dei video, la sezione "Ultime notizie" nella home page, i link "Registrati" e "Accedi" nell'intestazione e i link di testo sotto la piega sul home page, per citarne alcuni.
La barra degli strumenti "condividi", mostrata sopra, sarebbe più efficace con una tipografia più grande? Che dire della sezione "raccomandata", mostrata sotto, o di altre sezioni di tipo più piccolo?
Conclusione
Il nuovo sito CNN.com ha aggiunto una serie di funzionalità non discusse qui che riguardano più i loro servizi di notizie e contenuti personalizzati. Il primo link qui sotto contiene un video presentato dalla CNN che discute alcune delle nuove funzionalità.
Sono assolutamente convinto che il nuovo sito presenti un'esperienza utente molto più bella e interessante rispetto al vecchio, e, a parte i punti deboli nel contenter di contenuti per fisarmonica, gli svantaggi del nuovo design non sono poi così significativi.
Sembra che sia trascorso molto tempo e che la pianificazione sia stata presa in considerazione nella progettazione del nuovo CNN.com, e penso che i web designer e coloro che sono interessati a migliorare l'usabilità sui propri siti farebbero bene a prendere in considerazione e cercare di imparare da alcune delle modifiche presentate sul nuovo sito web della CNN.
Ulteriori letture
- Benvenuti nel nuovo CNN.com (Video su CNN.com)
- The New CNN.com (Prime schermate su TechCrunch)
- New CNN.com Goes Live: cosa ne pensi?
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 .
Cosa ti piace o non ti piace del nuovo design del sito della CNN? Condividi i tuoi commenti qui sotto.