CNN's New Website Design Deconstructed

Mandag den 26. oktober, CNN.com indført et nyt website design , der gør en række store ændringer i deres information-tunge layout.

Det nye design er smukt, rent, organiseret og velstruktureret. Det opfordrer øjet til at scanne og finde noget interessant med det formål at klikke igennem til en anden side.

Det foregående design var lidt rodet og ikke meget indbydende; indholdet lignede, at det blev tvunget ind i et ustruktureret rum. Det nye layout er meget anderledes og omfatter en række moderne webdesign og brugervenlighed bedste praksis og trends .

Så lad os se nærmere på ikke kun de bemærkelsesværdige forbedringer, men nogle af de tvivlsomme design- og anvendelsesbeslutninger.

Gitter-inspireret layout

Jeg bruger sætningen "grid-inspireret", fordi det nye design synes at være baseret på et gitter, men præcisionens justering af elementer er ikke ligefrem der.

Tag et kortfattet kig på deres primære stylesheet , de synes at have løst baseret deres stil og gitter på Blueprint CSS rammer.

Deres CSS-nulstilling har mange ligheder til tegningsrammen, og ordet "blueprint" er inkluderet øverst, så det ville være en logisk vurdering baseret på min egen begrænsede viden om Blueprint.

Efter at have analyseret en skærmopsamling af deres hjemmeside, har jeg konkluderet, at hvis de baserede det nye layout på et net, ville specifikationerne for det pågældende net være: 16 kolonner, 50 px pr. Kolonne, med 12 px gutters (mellemrummet mellem kolonner) i alt 980px i bredde.

Nedenfor er en visuel gengivelse af mit grid estimat, som en Photoshop mock up:

Selvom elementerne på siden ikke følger den slags justering og balance, der normalt forventes af et gitterlayout, er der en mærkbar forbedring i dette layout over det foregående design, som vist nedenfor:

Det nye layout holder alle sideelementer inde i den 980px brede beholder - i modsætning til det klumpede udseende tidligere design, der havde en overskrift med væskebredde, der spænder over hele siden over en fast breddeindholdsafdeling.

Selvom det gamle design ikke kunne synes at afgøre mellem afrundede hjørner og firkanter, har det nye design konsekvent firkantede hjørner med subtile skråvirkninger, der adskiller passende elementer, som vist på billedet nedenfor.

Selv om formatet er gitteragtigt, er det som nævnt ikke et strengt gitterformat, og sektionerne under folden afviger ganske lidt i struktur fra ovenstående.

Drastisk forbedret overskriftsafdeling

En af de mest tilsyneladende forbedringer i det nye design er overskriftsafsnittet.

Den vandrette navigationslinje er moderne, ren og klar . Søgefeltet, tilmeldingsindstillingen og login-linket er i øverste højre hjørne, hvor de skal være.

Og selvom det ikke er sædvanligt i moderne design at centrere site-logoet, fungerer det i dette tilfælde. Det skaber en meget dominerende, livlig, mærkeoplevelse, der ikke let glemmes .

Et andet godt træk ved navigationslinjen er, at det angiver ved hjælp af farve og grafik, hvilke links der er primære, som er sekundære, og som vil åbne i mikrosites eller søstersider. Sidstnævnte er angivet ved højre-pegende trekanter ("Money" og "Sports" - mere på nedenstående).

Effektiv udnyttelse af rummet

På højre side af siden, under den primære annonceenhed, har de inkluderet en harmonikator-indholdsomsætter, der giver brugeren mulighed for at se forhåndsvisninger i et forholdsvis lille område af indhold relateret til en række forskellige emner.

Fokus på video og historie popularitet

I det foregående design havde videoen en ret stærk vægt, der fremgår af en boks på højre side. I det nye design er video en vigtig kategori i den primære navigationslinje, der gives stort set samme visuelle betydning som "Home" linket.

Videohistorier vises på hele webstedet og er tydeligt angivet ved det sædvanlige "playknap" -link på billeder, der linker til videoindhold, som vist nedenfor:

En anden kategori med samme betydning som "Home" og "Video", som vist på billedet ovenfor, er "NewsPulse" sektionen, som er nyt og stadig i beta.

Dette afsnit viser nyheder efter popularitet (som synes at være beregnet ud fra samlede sidevisninger, ikke kommentarer), og giver læseren mulighed for at filtrere resultaterne efter kategori eller historiktype.

Stærk kategori sider

Hovedkategorierne ("USA", "Verden", "Politik" osv.), Der åbnes fra den primære navigeringslinje, fungerer på samme måde som hjemmesiden .

Faktisk, hvis du ikke vidste hvilken side du var på, tror du måske, du var på hjemmesiden. Kategorien "amerikansk" er vist nedenfor:

Hver af disse sektioner viser bekvemt tophistorier, seneste nyheder og andre emner relateret til den pågældende kategori.

De sorte og hvide billedtekster under billeder, der også findes på hjemmesiden og på artikelsiderne, er iøjnefaldende og nem at læse uden brug af alt for fancy grafik eller skrifttypestile.

Stærke artikel sider

Artikelsiderne opretholder for det meste den levende branding af hjemmesiden. Kropsteksten vises pænt i 14 px Arial med en meget læsbar liniehøjde.

Selvom nogle elementer på siderne synes lidt små, kan jeg personligt lide den måde, hvorpå skriftstørrelsen af artiklen krop står på siden, så læseren kan holde fokus på den.

På venstre side af hver historie er der også et afsnit kaldet "Story Highlights", der opsummerer den aktuelle historie i et par punktum-punkter. Dette viser, at CNNs designere er opmærksomme på, at brugerne online har tendens til at "scanne" langt materiale.

For megen information

Af alle de negative aspekter af det nye design er sandsynligvis det første problem, der umiddelbart er tydeligt, overbelastningen af links og informationer på hjemmesiden - selv om den er mere struktureret og organiseret som diskuteret tidligere.

Hjemmesiden handler om to og en halv skærm lang , og indeholder sektioner, der duplikerer varer i hovednavigationslinjen, med omkring halvtreds underlinks under hver kategori. Disse sektioner vises under folden og vises i dette billede:

Da CNN er en af de mest populære steder i verden (38 millioner unikke besøgende hver måned), vil disse afsnit modtage betydelig trafik i forhold til andre websteder, fordi de vises så langt under folden, og fordi der er så mange links, vil den relative mængde trafik, der besøger disse links via hjemmesiden, sandsynligvis være ret lav.

Vigtige afsnit begravet?

Som nævnt ovenfor vises en masse oplysninger på hjemmesiden langt under folden. Og det ser ud til, at noget vigtigt indhold er helt begravet nederst på startsiden, mere end to fulde skærme under overskriften .

For eksempel vises et afsnit med titlen "Hot Topics" nær bunden, på højre side, lige over nogle promoveringer og annoncer.

Det ser ud til at være mere fornuftigt, at dette afsnit vil erstatte harmoniindholdskoblet eller ellers blive indarbejdet i harmonika.

De annoncer og promoveringer, der vises under "Hot Topics", synes også at være vigtigere end deres placering afslører. Igen, selv om en sådan høj trafikwebside ville modtage mange klik på disse områder, ville klikfrekvensen i forhold til sektionerne og annoncerne over folden sandsynligvis være drastisk anderledes.

Selvfølgelig ved CNNs producenter, hvilket indhold der er vigtigst, og de forstår deres brugeres vaner bedre end nogen andre - men disse udfordringer og anvendelsesmuligheder er nyttige til at analysere, hvis andre udviklere står over for lignende beslutninger.

Usability Mysteries

Der er et par elementer på det nye websted, der måske ikke er designet til optimal brugervenlighed.

Et eksempel er den højre pegende trekant, der vises på hver af micro-site links. Ved første øjekast var jeg ikke sikker på, hvad disse trekanter var til. De ser ud til at angive en form for en JavaScript-skyderdel, der vil dukke op.

Nogle brugere, der ikke betaler fuld opmærksomhed, kan endda forveksle dem med nedadgående pile, der producerer rullemenuer.

Er der en bedre måde at angive et micro-site-link til samme vindue? Jeg er virkelig ikke sikker. Måske noget der ligner det velkendte Wikipedia-ikon

ville have været tilstrækkeligt - men så ville det frembyde problemet med brugerne, idet det antages, at forbindelserne blev åbnet i et nyt vindue, hvilket i dette tilfælde ikke er sandt.

Harmoniseringskonverteringsenheden, der blev diskuteret tidligere, har også et par brugervenlighedsproblemer. For det første, når JavaScript er deaktiveret, bliver accordeonet ubrugeligt og viser ikke noget indhold.

Det skal udvides som standard for at vise alt indhold, eller ellers vise et af elementerne. Også de hyperlinkede headers for accordion sektionerne skal stadig forbinde til deres respektive sektioner, men de gør det ikke.

Et andet problem med accordeonindholdet er, at da teksten den indeholder er så lille, er det ikke altid klart, hvad der kan klikkes inden i accordeonet. Dette gør forbindelserne mindre adskilte fra resten af accordeonindholdet.

I billedet nedenfor peger den røde pil jeg har tegnet på to punktliste-elementer. Teksten i disse listeposter er hyperlinket, men det er ikke klart ved første øjekast.

Nogle afsnit afspejler stadig gammelt design

Som det vil være tilfældet med ethvert redesign af et websted, størrelsen af CNNs, vil nogle sektioner stadig afspejle det gamle design, indtil alle sider er fuldt integreret.

Dette er normalt tilfældet med ældre indhold, der ikke vil blive besøgt så ofte, men i tilfælde af CNN har nogle vigtige sektioner stadig den gamle hud.

To eksempler er om og kontakt sider.

Lille typografi

Et bestemt designproblem, der ikke er i overensstemmelse med moderne webdesigntendenser, er brugen af små tekst og små typografiske elementer.

Den lille størrelse af skrifttypen i accordeonindholdet blev diskuteret tidligere. Der er også værktøjslinjen "share", der vises på artikelsider og videosider, sektionen "Seneste nyheder" på hjemmesiden, "Tilmeld" og "Log på" -links i overskriften, og teksten linker under folden på hjemmeside, for at nævne nogle få.

Ville "share" værktøjslinjen, vist ovenfor, være mere effektiv med større typografi? Hvad med den "anbefalede" sektion, vist nedenfor, eller andre sektioner med mindre type?

Konklusion

Det nye CNN.com-websted har tilføjet en række funktioner, der ikke er diskuteret her, der relaterer mere til deres nyhedstjenester og tilpasset indhold. Det første link nedenfor indeholder en video præsenteret af CNN, der diskuterer nogle af de nye funktioner.

Jeg tror helt sikkert, at den nye side præsenterer en langt mere smuk og interessant brugeroplevelse end den gamle, og bortset fra svaghederne i accordion content switcher er ulemperne til det nye design ikke så betydelige.

Det ser ud til, at meget tid og planlægning gik ind i designet af den nye CNN.com, og jeg tror, at webdesignere og dem, der er interesserede i at forbedre brugervenligheden på deres egne websteder, ville gøre det godt at overveje og forsøge at lære af nogle af de ændrede præsentationer på CNNs nye hjemmeside.

Yderligere læsning

Dette indlæg blev udelukkende skrevet til Webdesigner Depot af Louis Lazaris, freelance skribent og webudvikler. Louis løber Imponerende Webs hvor han stiller artikler og vejledninger om webdesign. Du kan følge Louis på Twitter eller komme i kontakt med ham gennem hans hjemmeside .

Hvad kan du lide eller ikke lide om CNNs nye site design? Del dine kommentarer nedenfor.

webdesign hjemmeside redesign cnn cnn ny hjemmeside