CNNs nya webbplatsdesign dekonstruerad

På måndag 26 oktober, CNN.com introducerade en ny webbdesign , som gjorde ett antal stora förändringar i deras informations-tunga layout.

Den nya designen är vacker, ren, organiserad och välstrukturerad. Det uppmanar ögat att skanna och hitta något intressant med målet att klicka vidare till en annan sida.

Den tidigare designen var lite rörig och inte mycket inbjudande; innehållet såg ut som om det tvingades till ett ostrukturerat utrymme. Den nya layouten är väldigt annorlunda och omfattar ett antal moderna webbdesign och användbarhetens bästa praxis och trender .

Så, låt oss se närmare på inte bara de anmärkningsvärda förbättringarna, utan några av de tvivelaktiga design- och användbarhetsbesluten.

Grid-inspirerad layout

Jag använder frasen "grid-inspirerad" eftersom den nya designen verkar vara baserad på ett rutnät, men precisioninriktningen av element är inte exakt där.

Tar en kortfattad titt på deras primär stilark , de verkar ha löst baserat sin stil och rutnät på Blueprint CSS ramverk.

Deras CSS-återställning har många likheter med ritningsramen, och ordet "ritning" ingår i toppen, så det här skulle vara en logisk bedömning baserad på min egen begränsade kunskap om Blueprint.

Efter att ha analyserat en skärmdump av deras hemsida har jag kommit fram till att om de baserade den nya layouten på ett rutnät skulle specifikationerna för det här nätet vara: 16 kolumner, 50px per kolumn, med 12px rännor (mellanslag mellan kolumner), totalt 980px i bredd.

Nedan visas en visuell representation av mitt nätprognos, som en Photoshop-mock up:

Även om elementen på sidan inte följer den typ av anpassning och balans som vanligtvis förväntas av en rutnätlayout, finns det en märkbar förbättring i denna layout jämfört med tidigare design, som visas nedan:

Den nya layouten håller alla sidelement i den 980px breda behållaren - till skillnad från den klumpiga tidigare designen som hade en breddhuvud bredd som spände över hela sidan ovanför en fast breddhalt.

Även om den gamla konstruktionen inte tycks avgöra mellan avrundade hörn och kvadrat, har den nya konstruktionen konsekvent fyrkantiga hörn med subtila avkänningseffekter som skiljer lämpliga element, som visas i bilden nedan.

Även om formatet är rutnät, är det, som nämnts, inte ett strikt rutformat, och sektionerna under vikningen är ganska lite i struktur från ovanstående.

Drastiskt förbättrad rubrik avsnitt

En av de mest uppenbara förbättringarna i den nya designen är rubrikavsnittet.

Den horisontella navigeringsfältet är modern, ren och klar . Sökrutan, anmälningsalternativet och inloggningslänken finns i det övre högra hörnet, där de borde vara.

Och även om det inte är vanligt i modern design att centrera webbplatslogotypen, fungerar det i det här fallet. Det skapar en mycket dominerande, livfull, varumärkesupplevelse som inte lätt glöms bort .

En annan bra funktion i navigeringsfältet är att den indikerar med hjälp av färg och grafik vilka länkar är primära, vilka är sekundära, och som kommer att öppnas på mikroplatser eller systerplatser. Sistnämnda indikeras av högerpekande trianglar ("Money" och "Sports" - mer nedan).

Effektiv användning av rymden

På den högra sidan av sidan, under den primära annonsenheten, har de inkluderat en innehållsbrytare för dragspel, vilket gör det möjligt för användaren att se förhandsvisningar, i ett relativt litet område , innehåll som är relaterat till ett antal olika ämnen.

Betoning på video och historia popularitet

I den tidigare designen hade videoen ganska stark tonvikt, som presenterades i en låda på höger sida. I den nya designen är video en huvudkategori i den primära navigationsfältet, som ges nästan samma visuella betydelse som "hem" -länken.

Videoberättelser presenteras på hela webbplatsen och anges tydligt av den vanliga "play-knappen" -länken på foton som länkar till videoinnehåll, som visas nedan:

En annan kategori med samma betydelse som "Home" och "Video", som visas i bilden ovan, är "NewsPulse" -delen, som är ny och fortfarande i beta.

Det här avsnittet visar nyhetsberättelser efter popularitet (som verkar beräknas med totala sidvisningar, inte kommentarer) och låter läsaren filtrera resultaten efter kategori eller historiktyp.

Starka kategori sidor

Huvudkategorissidorna ("USA", "Världen", "Politik" etc.), som är åtkomliga från den primära navigationsfältet, fungerar på samma sätt som hemsidan .

Om du inte visste vilken sida du var på kanske du tror att du var på hemsidan. "US" kategorin visas nedan:

Var och en av dessa avsnitt visar bekvämt topprapporter, senaste nyheter och andra objekt som är relaterade till den kategorin.

De svarta och vita bildtexterna under bilder, som också finns på hemsidan och på artikelsidor, är iögonfallande och lättlästa, utan att använda överflödig grafik eller teckensnitt.

Starka artikel sidor

Artikelsidorna, för det mesta, behåller den livfulla märkningen av hemsidan. Kroppstexten visas snyggt i 14px Arial med en mycket läsbar linjehöjd.

Även om vissa element på sidorna verkar vara små, känner jag personligen hur typsnittets kroppsstorlek sticker ut på sidan, så läsaren kan vara fokuserad på den.

Också på vänster sida av varje berättelse finns en sektion som heter "Story Highlights" som sammanfattar den aktuella historien på några punkter med punktlista. Detta visar att CNNs designers är medvetna om användarnas online tendens att "skanna" långt material.

Information Överbelastning

Av alla negativa aspekter av den nya designen är förmodligen det första problemet som är uppenbart tydligt överbelastningen av länkar och information på hemsidan - även om den är mer strukturerad och organiserad, som diskuterats tidigare.

Hemsidan är ungefär två och en halv skärmar lång , och innehåller sektioner som duplicerar objekt i huvudnavigationsfältet, med ungefär ett halvt dussinlänkar under varje kategori. Dessa sektioner visas under veckan och visas i bilden:

Eftersom CNN är en av de populäraste platserna i världen (38 miljoner unika besökare varje månad), kommer dessa avsnitt att få stor trafik i jämförelse med andra webbplatser, eftersom de visas så långt under veckan och eftersom det finns så många länkar, den relativa trafikmängden som besöker dessa länkar via hemsidan skulle sannolikt vara ganska låg.

Viktiga sektioner begravda?

Som påpekats ovan ser mycket information på hemsidan långt under veckan. Och väsentligt verkar det som att något viktigt innehåll är helt begravt längst ner på hemsidan, mer än två hela skärmar under rubriken .

Till exempel visas ett avsnitt med titeln "Hot Topics" nära botten, till höger, precis ovanför vissa kampanjer och annonser.

Det verkar vara mer meningsfullt att det här avsnittet skulle ersätta dragspelets innehållsomkopplare, annars ingå i dragspelet.

Annonserna och kampanjerna som visas under "Hot Topics" verkar också vara viktigare än deras plats avslöjar. Även om en sådan hög trafikwebbplats skulle få många klick på dessa områden, skulle klickfrekvensen i jämförelse med sektionerna och annonserna ovanför veckan sannolikt vara drastiskt annorlunda.

Naturligtvis vet CNNs producenter vad innehållet är viktigast och de förstår sina användares vanor bättre än någon annan - men dessa utmaningar och användbarhetsutmaningar är användbara för att analysera om andra utvecklare skulle ha liknande beslut.

Användbarhet Mysterier

Det finns några element på den nya sajten som kanske inte är utformad för optimal användbarhet.

Ett exempel är den högra pekande triangeln som visas på var och en av mikrositen länkar. Vid första anblicken var jag inte säker på vad dessa trianglar var för. De verkar indikera någon form av en JavaScript-reglage sektion som skulle dyka upp.

Vissa användare som inte betalar full uppmärksamhet kan till och med misstänka dem för nedåtpekande pilar som producerar rullgardinsmenyer.

Finns det ett bättre sätt att ange en mikro-länk med samma fönster? Jag är verkligen inte säker. Kanske något som liknar den välkända Wikipedia-ikonen

skulle ha varit tillräcklig - men då skulle det vara ett problem för användarna som antar att länkarna öppnade i ett nytt fönster, vilket i detta fall inte är sant.

Harmoniseringshalten omkopplare, som diskuterats tidigare, har också några användbarhetsproblem. För det första, när JavaScript är avstängt, spelas dragspelet värdelöst och visar inte något innehåll.

Det bör utökas som standard för att visa allt innehåll, eller annars visa en av objekten. De hyperlänkade rubrikerna för dragspelssektionerna borde också länka till sina respektive avsnitt, men de gör det inte.

Ett annat problem med dragspelets innehåll är att eftersom texten som den innehåller är så liten, är det inte alltid klart vad som kan klickas inuti dragspelet. Detta gör länkarna mindre skilda från resten av dragspelets innehåll.

I bilden nedan har den röda pilen som jag har ritat pekar på två punktposter. Texten i dessa listobjekt är länkad men det är inte uppenbart vid första anblicken.

Vissa avsnitt återspeglar fortfarande gammal design

Som det är fallet med någon omformning av en webbplats, CNNs storlek, återspeglar vissa sektioner fortfarande den gamla designen tills alla sidor är helt integrerade.

Detta är vanligtvis fallet med äldre innehåll som inte kommer att besöks så ofta, men i fallet med CNN har vissa viktiga avsnitt fortfarande den gamla huden.

Två exempel är handla om och kontakta sidor.

Små typografi

En speciell designproblem som inte överensstämmer med moderna webbdesigntrender är användandet av liten text och små typografiska element.

Den lilla storleken på teckensnittet i dragspelets innehåll diskuterades tidigare. Det finns också verktygsfältet "Dela" som visas på artikel- och videosidor, avsnittet "Senaste Nyheter" på hemsidan, "Registrera" och "Logga in" -länkar i rubriken och texten länkar under veckan på hemsida, för att nämna några.

Skulle "dela" verktygsfältet, som visas ovan, vara mer effektivt med större typografi? Vad sägs om avsnittet "rekommenderat", som visas nedan eller andra avsnitt med mindre typ?

Slutsats

Den nya CNN.com-webbplatsen har lagt till ett antal funktioner som inte diskuteras här, som relaterar mer till deras nyhetstjänster och anpassat innehåll. Den första länken nedan innehåller en video som presenteras av CNN som diskuterar några av de nya funktionerna.

Jag tycker definitivt att den nya sajten presenterar en mycket vacker och intressant användarupplevelse än den gamla, och förutom svagheterna i dragspelets innehållsväxlare är nackdelarna med den nya designen inte så betydande.

Det ser ut som mycket tid och planering gick in i designen av den nya CNN.com och jag tror att webbdesigners och de som är intresserade av att förbättra användbarheten på sina egna webbplatser skulle göra det bra att överväga och försöka lära av några av de förändringar som presenteras på CNNs nya hemsida.

Vidare läsning

Detta inlägg skrevs uteslutande för Webdesigner Depot av Louis Lazaris, en frilansskribent och webbutvecklare. Louis körs Imponerande Webs där han postar artiklar och handledning om webbdesign. Du kan följa Louis på Twitter eller ta kontakt med honom genom sin hemsida .

Vad tycker du om eller ogillar om CNNs nya webbdesign? Dela dina kommentarer nedan.

webbdesign cnn cnn ny hemsida