CNN's nieuwe websiteontwerp gedeconstrueerd
Op maandag 26 oktober, CNN.com introduceerde een nieuw website-ontwerp en bracht een aantal belangrijke wijzigingen aan in hun informatie-zware lay-out.
Het nieuwe ontwerp is mooi, schoon, georganiseerd en goed gestructureerd. Het nodigt uit om te scannen en iets interessants te vinden met als doel door te klikken naar een andere pagina.
Het vorige ontwerp was nogal rommelig en niet erg uitnodigend; de inhoud zag eruit alsof hij in een ongestructureerde ruimte werd gedwongen. De nieuwe lay-out is heel anders en omvat een aantal moderne webdesign- en usability-best practices en -trends .
Dus, laten we in meer detail kijken naar niet alleen de opmerkelijke verbeteringen, maar ook een aantal van de dubieuze ontwerp- en bruikbaarheidbeslissingen.
Op grid geïnspireerde lay-out
Ik gebruik de uitdrukking "grid-inspired" omdat het nieuwe ontwerp op een raster lijkt te zijn gebaseerd, maar de precieze uitlijning van elementen is niet precies daar.
Een vluchtige blik op hun nemen primaire stylesheet , ze lijken hun stijl en raster losjes te hebben gebaseerd op de Blueprint CSS kader.
Hun CSS-reset vertoont veel overeenkomsten met het Blueprint-framework en het woord 'blueprint' staat bovenaan, dus dit zou een logische beoordeling zijn gebaseerd op mijn eigen beperkte kennis van Blueprint.
Na het analyseren van een schermopname van hun startpagina, heb ik geconcludeerd dat als ze de nieuwe lay-out op een raster zouden baseren, de details van dat raster zouden zijn: 16 kolommen, 50px per kolom, met 12px goten (de ruimte tussen kolommen), in totaal 980 px breed.
Hieronder is een visuele weergave van mijn rasterschatting, als een Photoshop-mock-up:
Hoewel de elementen op de pagina niet het soort uitlijning en balans volgen dat gewoonlijk wordt verwacht van een rasterlay-out, is er een duidelijke verbetering in deze lay-out ten opzichte van het vorige ontwerp, hieronder weergegeven:
De nieuwe lay-out behoudt alle pagina-elementen in de 980px-brede container - in tegenstelling tot het onhandige ogende vorige ontwerp met een kopregel met een vloeiende breedte die de hele pagina overspande boven een contentgedeelte met een vaste breedte.
Ook, terwijl het oude ontwerp niet kon lijken te kiezen tussen afgeronde hoeken en vierkant, heeft het nieuwe ontwerp consistent vierkante hoeken met subtiele afschuiningseffecten die geschikte elementen scheiden, zoals getoond in de afbeelding hieronder.
Hoewel het formaat rasterachtig is, is het, zoals gezegd, geen strikt rasterformaat en de secties onder de vouw dwalen behoorlijk af van de bovenstaande.
Drastisch verbeterde kopsectie
Een van de duidelijkste verbeteringen in het nieuwe ontwerp is het kopgedeelte.
De horizontale navigatiebalk is modern, schoon en duidelijk . Het zoekvak, de aanmeldingsoptie en de aanmeldingslink bevinden zich in de rechterbovenhoek, waar ze zouden moeten zijn.
En hoewel het in modern design niet gebruikelijk is om het sitelogo te centreren, werkt het in dit geval. Het creëert een zeer dominante, levendige merkbeleving die niet snel vergeten wordt .
Een andere leuke eigenschap van de navigatiebalk is dat deze door middel van kleur en grafische weergave aangeeft welke links primair zijn, die secundair zijn en die worden geopend in micro-sites of zustersites. De laatste worden aangegeven door driehoeken die naar rechts wijzen ("Geld" en "Sporten" - meer hierover hieronder).
Effectief gebruik van de ruimte
Aan de rechterkant van de pagina, onder het primaire advertentieblok, is een inhoudswisselaar in accordeonstijl opgenomen, zodat de gebruiker voorbeelden in een relatief klein gebied van inhoud met betrekking tot een aantal verschillende onderwerpen kan bekijken.
Nadruk op Populariteit van video en geschiedenis
In het vorige ontwerp had video een vrij sterke nadruk, te zien in een doos aan de rechterkant. In het nieuwe ontwerp is video een belangrijke categorie in de primaire navigatiebalk, gezien vrijwel hetzelfde visuele belang als de koppeling "Home".
Videoverslagen worden overal op de site weergegeven en worden duidelijk aangegeven met de gebruikelijke link "afspeelknop" op foto's die naar video-inhoud linken, zoals hieronder wordt weergegeven:
Een andere categorie die net zo belangrijk is als "Home" en "Video", zoals te zien is in de bovenstaande afbeelding, is de "NewsPulse" -sectie, die nieuw is en nog steeds in bèta is.
In deze sectie worden nieuwsberichten weergegeven op basis van populariteit (die lijkt te worden berekend op basis van de totale paginaweergaven, niet op opmerkingen) en kan de lezer de resultaten filteren op categorie of verhaaltype.
Sterke categoriepagina's
De hoofdcategoriepagina's ("VS", "Wereld", "Politiek", enz.), Toegankelijk via de primaire navigatiebalk, werken op dezelfde manier als de startpagina .
Als u niet wist op welke pagina u zich bevond, zou u kunnen denken dat u op de startpagina stond. De categorie "VS" wordt hieronder weergegeven:
In elk van deze secties worden handig topverhalen, het laatste nieuws en andere items met betrekking tot die categorie weergegeven.
De zwart-wit onderschriften onder afbeeldingen, ook op de startpagina en op artikelpagina's, zijn opvallend en gemakkelijk te lezen, zonder het gebruik van overdreven fancy graphics of lettertypestijlen.
Sterke artikelpagina's
De pagina's van het artikel onderhouden voor het grootste deel de levendige branding van de startpagina. Tekst van het lichaam wordt mooi weergegeven in 14px Arial met een zeer leesbare regelhoogte.
Hoewel sommige elementen op de pagina's enigszins klein lijken, vind ik het persoonlijk prettig hoe de lettergrootte van de artikeltekst opvalt op de pagina, zodat de lezer hierop gefocust kan blijven.
Aan de linkerkant van elk verhaal staat ook een sectie met de titel 'Verhaalshighlights' die het huidige verhaal samenvat in een aantal punten met opsommingstekens. Dit laat zien dat ontwerpers van CNN op de hoogte zijn van de online neiging van gebruikers om langdurig materiaal te "scannen".
Overbelasting van informatie
Van alle negatieve aspecten van het nieuwe ontwerp is waarschijnlijk het eerste probleem dat onmiddellijk duidelijk is de overbelasting van links en informatie op de startpagina - hoewel het meer gestructureerd en georganiseerd is, zoals eerder besproken.
De startpagina is ongeveer twee en een half scherm lang en bevat secties die items dupliceren in de hoofdnavigatiebalk, met ongeveer een half dozijn sublinks onder elke categorie. Deze secties verschijnen onder de vouw en worden weergegeven in deze afbeelding:
Aangezien CNN een van de meest populaire sites ter wereld is (38 miljoen unieke bezoekers per maand), zullen deze secties aanzienlijk verkeer ontvangen in vergelijking met andere sites, omdat ze tot dusver onder de vouw verschijnen en omdat er zoveel zijn links, de relatieve hoeveelheid verkeer die die links bezoekt via de startpagina is waarschijnlijk vrij laag.
Belangrijke secties begraven?
Zoals hierboven aangegeven, verschijnt veel informatie op de startpagina ruim onder de vouw. En, beduidend, het lijkt erop dat een aantal belangrijke inhoud volledig is begraven onderaan de startpagina, meer dan twee volledige schermen onder de kop .
Een sectie met de titel 'Hot Topics' verschijnt bijvoorbeeld aan de onderkant, aan de rechterkant, net boven sommige promoties en advertenties.
Het lijkt logischer dat dit gedeelte de accordeoninhoudwisselaar zou vervangen, of anders in de accordeon zou worden opgenomen.
De advertenties en promo's die verschijnen onder de "Hot Topics" lijken ook belangrijker dan hun locatie onthult. Nogmaals, hoewel zo'n website met veel verkeer veel klikken zou ontvangen op deze gebieden, zou de klikfrequentie in vergelijking met de secties en advertenties boven de vouw waarschijnlijk drastisch anders zijn.
Uiteraard weten de producenten van CNN welke inhoud het belangrijkst is en begrijpen ze de gewoonten van hun gebruikers beter dan wie ook - maar deze lay-out en bruikbaarheid zijn nuttig om te analyseren als andere ontwikkelaars met vergelijkbare beslissingen worden geconfronteerd.
Usability Mysteries
Er zijn een paar elementen op de nieuwe site die mogelijk niet zijn ontworpen voor optimale bruikbaarheid.
Een voorbeeld is de naar rechts wijzende driehoek die op elk van de microsite-links staat. Op het eerste gezicht wist ik niet waar die driehoeken voor bedoeld waren. Ze lijken een soort JavaScript-schuifregelaarsectie aan te geven die zou verschijnen.
Sommige gebruikers die niet volledig opletten, kunnen zich zelfs vergissen voor naar beneden wijzende pijlen die vervolgkeuzemenu's produceren.
zou voldoende zijn geweest - maar dan zou dat het probleem van gebruikers zijn, ervan uitgaande dat de links in een nieuw venster geopend zijn, wat in dit geval niet waar is. De accordeon-inhoudwisselaar, die eerder is besproken, heeft ook een paar bruikbaarheidsproblemen. Ten eerste, wanneer JavaScript is uitgeschakeld, wordt de accordeon onbruikbaar gemaakt en bevat deze geen inhoud.
Het moet standaard worden uitgebreid om alle inhoud weer te geven of om een van de items weer te geven. Ook moeten de gehyperlinkte headers voor de accordeonsecties nog steeds worden gekoppeld aan hun respectievelijke secties, maar dat is niet het geval.
Een ander probleem met de accordeon-inhoud is dat, aangezien de tekst die het bevat zo klein is, het niet altijd duidelijk is wat klikbaar is in de accordeon. Dit maakt de links minder onderscheiden van de rest van de accordeon-inhoud.
In de onderstaande afbeelding wijst de rode pijl die ik heb getekend naar twee lijstitems met opsommingstekens. De tekst in die lijstitems is hypergelinkt, maar dit is op het eerste gezicht niet duidelijk.
Sommige secties weerspiegelen nog steeds het oude ontwerp
Zoals bij alle herontwerpen van een site ter grootte van CNN's het geval zal zijn, zullen sommige secties nog steeds het oude ontwerp weergeven totdat alle pagina's volledig zijn geïntegreerd.
Dit is meestal het geval bij oudere inhoud die niet zo vaak wordt bezocht, maar in het geval van CNN hebben sommige belangrijke delen nog steeds de oude huid.
Twee voorbeelden zijn de over en contact pagina's.
Kleine typografie
Een bepaald ontwerpprobleem dat niet voldoet aan moderne webontwerptrends, is het gebruik van kleine tekst en kleine typografische elementen.
De kleine omvang van het lettertype in de accordeoninhoud is eerder besproken. Er is ook de werkbalk "Delen" die wordt weergegeven op artikel- en videopagina's, het gedeelte "Laatste nieuws" op de startpagina, de koppelingen "Aanmelden" en "Aanmelden" in de kop, en de tekstkoppelingen onder de vouw op de pagina. startpagina, om een paar te noemen.
Zou de werkbalk "Delen", hierboven weergegeven, effectiever zijn met grotere typografie? Hoe zit het met de "aanbevolen" sectie, hieronder weergegeven, of andere secties met een kleiner type?
Conclusie
De nieuwe CNN.com-site heeft een aantal functies toegevoegd die hier niet worden besproken en die meer betrekking hebben op hun nieuwsdiensten en aangepaste inhoud. De eerste link hieronder bevat een video gepresenteerd door CNN die enkele van de nieuwe functies bespreekt.
Ik denk echt dat de nieuwe site een veel mooiere en interessantere gebruikerservaring biedt dan de oude, en afgezien van de zwakke punten in de accordeon-inhoudswitcher, zijn de nadelen van het nieuwe ontwerp niet zo belangrijk.
Het lijkt veel tijd en de planning is besteed aan het ontwerp van de nieuwe CNN.com, en ik denk dat webontwerpers en mensen die geïnteresseerd zijn in het verbeteren van de bruikbaarheid op hun eigen sites er goed aan doen om te leren van enkele van de gepresenteerde wijzigingen en deze te leren. op de nieuwe website van CNN.
Verder lezen
- Welkom bij de nieuwe CNN.com (video op CNN.com)
- The New CNN.com (First Screenshots on TechCrunch)
- Nieuw CNN.com gaat live: wat denk je?
Dit bericht is exclusief geschreven voor Webdesigner Depot door Louis Lazaris, een freelance schrijver en webontwikkelaar. Louis rent Indrukwekkende webs waar hij artikelen en tutorials over webdesign plaatst. Je kunt Louis volgen op Twitter of neem contact op met hem via zijn website .
Wat vind je leuk of niet leuk aan het nieuwe siteontwerp van CNN? Deel uw opmerkingen hieronder.