CNNs nye nettsteddesign dekonstruert

Mandag 26. oktober, CNN.com introduserte en ny nettside design , noe som gjør en rekke store endringer i deres informasjonstunge layout.

Den nye designen er vakker, ren, organisert og godt strukturert. Det inviterer øyet til å skanne og finne noe interessant med målet om å klikke gjennom til en annen side.

Den forrige designen var litt rotete og ikke veldig innbydende; innholdet så likt det ble tvunget til en ustrukturert plass. Den nye utformingen er veldig forskjellig og omfatter en rekke moderne webdesign og brukervennlige beste praksis og trender .

Så, la oss se nærmere på ikke bare de bemerkelsesverdige forbedringene, men noen av de tvilsomme design- og bruksbeslutningene.

Grid-Inspired Layout

Jeg bruker uttrykket "grid-inspirert" fordi det nye designet ser ut til å være basert på et rutenett, men presisjonsjusteringen av elementene er ikke akkurat der.

Tar en oversiktlig titt på deres primære stilark , synes de å ha løst basert sin stil og rutenett på Blueprint CSS rammeverk.

Deres CSS reset har mange likheter med Blueprint-rammen, og ordet "Blueprint" er inkludert på toppen, så dette ville være en logisk vurdering basert på min egen begrensede kunnskap om Blueprint.

Etter at jeg har analysert en skjermbilde av hjemmesiden deres, har jeg konkludert med at hvis de baserte det nye oppsettet på et rutenettet, ville det være følgende: 16 kolonner, 50px per kolonne, 12px rennere (mellomrommet mellom kolonnene) totalt 980px i bredde.

Nedenfor er en visuell representasjon av mitt rutenett, som en Photoshop mock up:

Selv om elementene på siden ikke følger den type tilpasning og balanse som normalt ville forventes av en rutenettoppsett, er det en merkbar forbedring i dette oppsettet over det forrige designet, vist nedenfor:

Den nye layouten holder alle sidelementene inne i den 980px brede beholderen - i motsetning til det klumpete utseende tidligere design som hadde en overskrift med fluidbredde som spenner over hele siden over en fast breddeinnholdsdel.

Også, mens den gamle designen ikke synes å bestemme mellom avrundede hjørner og firkant, har den nye designen konsekvent firkantede hjørner med subtile skråvirkninger som skiller passende elementer, som vist på bildet nedenfor.

Selv om formatet er grid-lignende, er det som nevnt ikke et strengt gridformat, og seksjonene under brettet sviker litt i struktur fra de ovenfor.

Drastisk forbedret overskriftsseksjon

En av de mest synlige forbedringene i det nye designet er overskriftsdelen.

Den horisontale navigasjonslinjen er moderne, ren og klar . Søkeboksen, registreringsalternativet og påloggingslenken er øverst til høyre, hvor de skal være.

Og selv om det ikke er vanlig i moderne design å sentrere nettstedlogoen, fungerer det i dette tilfellet. Det skaper en svært dominerende, levende, merkevareerfaring som ikke lett blir glemt .

En annen fin funksjon i navigeringslinjen er at den indikerer ved hjelp av farge og grafikk hvilke koblinger som er primære, som er sekundære, og som vil åpne på mikrosider eller søstersider. Sistnevnte er angitt med høyre pekende trekanter ("Money" og "Sports" - mer på dette under).

Effektiv bruk av plass

På høyre side av siden, under den primære annonseenheten, har de tatt med en bryter for trekkspill, slik at brukeren kan se forhåndsvisninger, i et relativt lite område , av innhold som er relatert til en rekke forskjellige emner.

Fokus på video og historie popularitet

I den forrige designen hadde videoen ganske sterk vekt, med en boks på høyre side. I det nye designet er video en stor kategori i den primære navigasjonslinjen, gitt nesten samme visuelle betydning som "Hjem" -linken.

Videohistorier er omtalt i hele nettstedet, og er tydelig angitt av den vanlige "spillknapp" -linken på bilder som lenker til videoinnhold, som vist nedenfor:

En annen kategori med samme betydning som "Hjem" og "Video", som vist på bildet over, er "NewsPulse" -delen, som er ny og fortsatt i beta.

Denne delen viser nyhetshistorier etter popularitet (som synes å være beregnet ut fra totalt sidevisninger, ikke kommentarer), og lar leseren å filtrere resultatene etter kategori eller historiktype.

Sterke kategori sider

Hovedkategorisidene ("USA", "Verden", "Politikk", etc.), som er tilgjengelige fra hovednavigasjonslinjen, fungerer på samme måte som hjemmesiden .

Faktisk, hvis du ikke visste hvilken side du var på, kan du tro at du var på hjemmesiden. Kategorien "amerikansk" er vist nedenfor:

Hver av disse seksjonene viser beleilig topphistorier, siste nyheter og andre elementer knyttet til den kategorien.

De svarte og hvite bildeteknene under bilder, som også finnes på hjemmesiden og på artikkelsider, er iøynefallende og enkle å lese, uten bruk av altfor fancy grafikk eller skriftstiler.

Sterke artikkelsider

Artikkelsidene, for det meste, opprettholder den levende merkevaren til hjemmesiden. Kroppsteksten vises pent i 14px Arial med en meget lesbar linjehøyde.

Selv om enkelte elementer på sidene virker litt små, liker jeg personlig hvordan skriftstørrelsen på artikkelen kroppen står på siden, slik at leseren kan holde fokus på den.

På venstre side av hver historie er det også en seksjon kalt "Story Highlights" som oppsummerer gjeldende historie i noen punkter med punktliste. Dette viser at CNNs designere er oppmerksomme på at brukerne har en online tendens til å "skanne" lenge materiale.

For mye informasjon

Av alle de negative aspektene ved det nye designet, sannsynligvis det første problemet som er umiddelbart tydelig, er overbelastningen av lenker og informasjon på hjemmesiden - selv om den er mer strukturert og organisert, som diskutert tidligere.

Hjemmesiden handler om to og en halv skjerm lang , og inneholder seksjoner som dupliserer elementer i hovednavigasjonslinjen, med omtrent halvt dusin underkoblinger under hver kategori. Disse seksjonene vises under folden og vises i dette bildet:

Siden CNN er en av de mest populære nettstedene i verden (38 millioner unike besøkende hver måned), vil disse seksjonene få betydelig trafikk i forhold til andre nettsteder, fordi de ser så langt under brettet, og fordi det er så mange koblinger, vil den relative mengden trafikk besøke disse koblingene gjennom hjemmesiden sannsynligvis være ganske lav.

Viktige seksjoner begravet?

Som nevnt ovenfor, vises mye informasjon på hjemmesiden godt under brettet. Og det ser ut som om noe viktig innhold er helt begravet nederst på hjemmesiden, mer enn to fulle skjermbilder under overskriften .

For eksempel vises en seksjon med tittelen "Hot Topics" nær bunnen, på høyre side, rett over noen kampanjer og annonser.

Det ser ut til å være mer fornuftig at denne delen vil erstatte trekkraftinnholdsvitsjeren, ellers bli innlemmet i trekkspillet.

Annonsene og kampanjene som vises under "Hot Topics", ser også ut til å være viktigere enn deres plassering avslører. Igjen, selv om en slik høy trafikkwebside ville motta mange klikk på disse områdene, ville klikkfrekvensen i forhold til seksjonene og annonsene over folden trolig være drastisk forskjellig.

Selvfølgelig vet CNNs produsenter hvilket innhold som er viktigst, og de forstår deres brukers vaner bedre enn noen andre - men disse utfordringene og bruksproblemene er nyttige å analysere om andre utviklere møter lignende beslutninger.

Usability Mysteries

Det er noen elementer på det nye nettstedet som kanskje ikke er utformet for optimal brukervennlighet.

Et eksempel er den høyre pekende trekant som vises på hver av mikrosider-koblingene. Ved første øyekast var jeg ikke sikker på hva de trekantene var for. De ser ut til å indikere en slags JavaScript-skyveavdeling som vil komme opp.

Noen brukere som ikke betaler full oppmerksomhet kan til og med forveksle dem for nedadrettede piler som produserer rullegardinmenyer.

Er det en bedre måte å indikere en mikrosider-link med samme vindu? Jeg er virkelig ikke sikker. Kanskje noe som ligner på det velkjente Wikipedia-ikonet

ville ha vært nok - men da ville det presentere problemet med brukere som antar at koblingene åpnet i et nytt vindu, som i dette tilfellet ikke er sant.

Harmoniseringsinnholdsswitcheren, diskutert tidligere, har også noen bruksproblemer. Først, når JavaScript er deaktivert, blir trekkspillet gjort ubrukelig og viser ikke noe innhold.

Det skal utvides som standard for å vise alt innhold, ellers vise ett av elementene. Også de hyperkoblede overskriftene til trekkspillene skal fortsatt koble til sine respektive seksjoner, men de gjør det ikke.

Et annet problem med trekkspillets innhold er at siden teksten den inneholder, er så liten, er det ikke alltid klart hva som kan klikkes inne i trekkspillet. Dette gjør koblingene mindre forskjellig fra resten av trekkspillets innhold.

I bildet nedenfor har den røde pilen jeg har tegnet, peket på to punktlisteelementer. Teksten i disse listepunktene er hyperkoblet, men dette er ikke åpenbart ved første øyekast.

Noen seksjoner gjenspeiler fortsatt gammelt design

Som det vil være tilfelle med et redesign av et nettsted, størrelsen på CNN, vil enkelte avdelinger fortsatt gjenspeile det gamle designet til alle sidene er fullt integrert.

Dette er vanligvis tilfelle med eldre innhold som ikke blir besøkt så ofte, men i tilfelle av CNN, har noen viktige seksjoner fortsatt den gamle huden.

To eksempler er handle om og kontakt sider.

Små typografi

Et bestemt designproblem som ikke samsvarer med moderne webdesigntrender, er bruken av liten tekst og små typografiske elementer.

Den lille størrelsen på skriften i harmoniinnholdet ble diskutert tidligere. Det finnes også verktøylinjen "del" som vises på artikkel- og videosider, "Siste nytt" -delen på hjemmesiden, "Registrer" og "Logg inn" -koblingene i overskriften, og teksten kobles under brettet på hjemmeside, for å nevne noen.

Vil "del" -verktøylinjen, vist ovenfor, være mer effektiv med større typografi? Hva med "anbefalt" delen, vist nedenfor, eller andre seksjoner med mindre type?

Konklusjon

Det nye CNN.com-nettstedet har lagt til en rekke funksjoner som ikke er diskutert her, og som relaterer seg til deres nyhetstjenester og tilpasset innhold. Den første linken nedenfor inneholder en video presentert av CNN som diskuterer noen av de nye funksjonene.

Jeg tror absolutt at det nye nettstedet presenterer en mye mer vakker og interessant brukeropplevelse enn den gamle, og bortsett fra svakhetene i harmoniinnholdsvitsjeren, er ulempene med det nye designet ikke så stor.

Det ser ut som mye tid og planlegging gikk inn i utformingen av den nye CNN.com, og jeg tror at webdesignere og de som er interessert i å forbedre brukervennligheten på sine egne nettsteder, vil gjøre det bra å vurdere og prøve å lære av noen av de endrede endringene på CNNs nye nettside.

Videre lesning

Dette innlegget ble skrevet utelukkende for Webdesigner Depot av Louis Lazaris, frilansskribent og webutvikler. Louis løper Imponerende Webs hvor han legger inn artikler og opplæringsprogrammer på webdesign. Du kan følge Louis på Twitter eller ta kontakt med ham gjennom hans nettside .

Hva liker du eller misliker om CNNs nye nettsteddesign? Del dine kommentarer nedenfor.

webdesign nettsted redesign cnn cnn ny hjemmeside