Designing News: Hoe topnieuwssites omgaan met tonnen inhoud

Als ik mijn zin had, zou ik, net als bijna elke andere webdesigner, altijd een vrij beperkte hoeveelheid inhoud bevatten om de focus duidelijk te houden en de communicatielijn gemakkelijk te volgen.

Helaas vragen situaties in de echte wereld om webpagina's met een enorme hoeveelheid inhoud. Om te leren omgaan met de problemen die zich in deze arena voordoen, gaan we kijken naar een bepaald gedeelte van websites die misschien meer overvol zijn dan alle andere: nieuwswebsites. Hoe gaan de ontwerpers van CNN, MSNBC, Fox en anderen om met de lay-out van zoveel informatie? Kom erachter na de sprong.

Koptekst en navigatie

De header is een absoluut cruciaal aspect van een nieuwssite. Elke gebruiker weet bij het bezoeken van een nieuwssite dat er tonnen inhoud zal zijn om door te bladeren en als ze iets specifieks willen, gaan ze rechtstreeks naar de koptekst om het te vinden.

Hier krijgen we onze eerste glimp van het probleem dat ons de rest van het artikel zal plagen: te veel spullen! Zoals ik in de intro al zei, moeten nieuwssites absoluut veel informatie overbrengen, daarom bestaan ​​ze. Het organiseren van al deze informatie is geen sinecure en zowat elke beslissing die u neemt, kan de bruikbaarheid van de site drastisch beïnvloeden.

Laten we eens kijken naar ons eerste voorbeeld. De onderstaande afbeelding toont de koptekst en navigatie voor MSNBC.com.

Zoals je kunt zien, gebeurt er veel in de eerste centimeters van deze site. Helemaal bovenaan de pagina staan ​​ongeveer vijftien links, en deze zijn alleen voor andere sites, de interne navigatie zit daaronder en bevat er nog eens twaalf.

MSNBC gebruikt hun eigen interessante draai aan een vervolgkeuzemenu voor elk gedeelte van de site dat in de navigatie wordt getoond. Hier ziet u vijf tot zes tekstkoppen, enkele afbeeldingen en nog meer inhoud die naar een andere site leidt. Na verschillende navigatielagen komen we eindelijk bij het logo van de site onder aan de koptekst, naast weer- en zoekwidgets.

Ik denk dat de MSNBC-header een beetje een puinhoop is, de branding verloren gaat en de lading secundaire inhoud afleidt. Vergelijk dit met de koptekst van een van de mooiste nieuwssites die ik heb gevonden, CNN.

Hier hebben we een sterke, duidelijke branding, een zoekbalk precies waar je ernaar zou zoeken en een eenvoudig navigatiemenu zonder een enkele vervolgkeuzelijst. Dit menu is een goede balans tussen minimaal ontwerp en voldoende functionaliteit om u probleemloos naar uw bestemming te brengen.

Fox neemt een route die lijkt op CNN. Het is wat rommeliger en omvat verschillende sites zoals MSNBC's, maar de tabbladen helpen de metafoor begrijpelijk te maken.

De Washington Post begon met een soortgelijk idee als MSNBC, maar haalde het veel beter uit. Zoals je kunt zien, is de naam van de site mooi en groot en wordt gevolgd door een weerwidget.

Door over de navigatie te bewegen, krijgt u een groot vervolgkeuzemenu, maar in plaats van onhandig inhoud naar beneden te duwen zoals op MSNBC, is het zo gestructureerd dat het het grote "Washington Post" -gebied bedekt.

De les

"Wees op uw hoede voor mega-dropdowns die hun belofte om uw site gemakkelijker te navigeren niet echt waarmaken."

Ik denk dat de les hier is om je gebruikers niet meteen te overweldigen met een rommelige koptekst. Dit betekent niet dat u niet veel inhoud kunt hebben, maar wees op uw hoede voor mega-dropdowns die niet echt hun belofte nakomen om uw site gemakkelijker te navigeren te maken. CNN bewijst dat soms een gewone oude horizontale lijst met links en een aantal mooi gestructureerde witruimte zelfs in een massa-inhoudsomgeving geweldig kan werken.

Aanbevolen Verhalen

Het volgende dat ik wil bespreken, is hoe deze sites uw aandacht trekken en deze richten op wat belangrijk is. Elke nieuwssite heeft een of twee topverhalen waarvan ze weten dat ze hot items van de dag zijn en die de pagina moeten structureren om deze verhalen op de juiste manier te markeren.

Mijn favoriete voorbeeld hiervan is The Huffington Post, die ervoor kiest om een ​​enkel nieuwsbericht te markeren met een enorme afbeelding en een gedurfde kop, die beide de volledige breedte van de paginacontainer beslaan.

Kijk maar eens hoe schoon en mooi dat is in vergelijking met andere nieuwssites die je hebt gezien. Het is verre van populair voor nieuwssites om dit formaat te gebruiken, maar u kunt niet anders dan toegeven dat het hier redelijk goed lijkt te werken.

MSNBC volgt een vergelijkbare route, maar is niet zo ingrijpend dat het slechts één verhaal bovenaan de pagina bevat. Ze hebben aan de linkerkant een grote afbeelding met verschillende koppen. Ik hou echt van de basislay-out, hoewel ik denk dat de willekeurige kleine koppen die tussen grote verhalen worden gegooid, het behoorlijk rommelig maken.

CNN en Fox kiezen voor een iets rommeliger aanpak, vooral omdat ze geen waardevolle advertentieruimte wilden opgeven voor belangrijke nieuwsverhalen. CNN heeft een indeling met drie kolommen, waarbij het midden het breedst is en de laatste de advertentieruimte gevolgd door een inlogzijbalk.

Fox heeft één grote afbeelding met drie kolommen eronder, allemaal naast een brede kolom helemaal rechts voor advertentieruimte, aandelentickers en sociale informatie.

De les

Met de pagina van Fox krijg ik veel informatie, wat geweldig is, maar mijn ogen weten niet precies waar ze moeten landen en hebben de neiging veel rond te stuiteren voordat ik ooit iets lees. CNN trekt momenteel mijn aandacht met een paar gezichten, die altijd goed zijn om gebruikers te begeleiden waar je heen wilt.

Ik merk echter dat echt grote afbeeldingen, zoals die op Huffington en MSNBC, echt de tool zijn om me iets belangrijks te laten opmerken. Dit wordt op een belangrijke manier versterkt met de enorme, vetgedrukte koptekst van Huffington.

"Soms is veel inhoud netjes georganiseerd in een kleine ruimte geweldig."

Welke methode voor alle gebruikers het beste is, is een lastige beslissing. Je hoeft alleen maar langs te gaan bij de enorm populaire Craigslist om te zien dat grote afbeeldingen niet altijd nodig zijn om een ​​site aantrekkelijk te maken voor bezoekers. Soms is veel inhoud netjes georganiseerd in een kleine ruimte geweldig, vooral als je een snel overzicht wilt van alles wat belangrijk is.

De wereld is geen plaats waar één evenement meestal belangrijker is dan elk ander, dus het is begrijpelijk dat sites zoals Fox de behoefte voelen om dit gedeelte behoorlijk op te splitsen. Mijn beste advies is om zoveel mogelijk belang te hechten aan de paar dingen die echt belangrijk zijn. Als je één groot verhaal kunt uithalen, ga ervoor. Zo niet, probeer dan het aantal laag te houden, anders is het niet echt een 'featured' sectie, toch?

Het verhaalraster

Naarmate we verder komen dan de koptekst en aanbevolen inhoud, groeien nieuwssites steeds meer van elkaar, waardoor het moeilijk wordt om ze punt voor punt te vergelijken. Maar op dit punt begint de echte uitdaging. Dit is waar de ontwerpers een berg andere inhoud krijgen en wordt verteld om het te organiseren.

Elke site is opgedeeld in verschillende unieke modules en secties die zijn gerangschikt in verschillende rasters, maar je zult merken dat het een behoorlijk populaire trend is om op een bepaald moment op de pagina in te breken in een opstelling met drie kolommen om de verschillende artikelen te behandelen. Hier zijn voorbeelden van The Huffington Post, The Washington Post en The Economist die precies dat doen.

Als u drie kolommen heeft, wordt uw inhoud netjes opgesplitst, hetzij gelijkmatig, hetzij met een gevarieerde breedteaanpak zoals The Economist voor meer controle over de nadruk. Een groot probleem met de aanpak met drie kolommen is dat we onze hersenen hebben geleerd die derde kolom te negeren! We weten allemaal dat dit is waar de advertenties samen met al die andere onzin zitten die we niet willen zien, dus we houden ons browsen grotendeels beperkt tot de eerste twee kolommen.

Dit kan slecht zijn voor sites die er wel een belangrijke kolom overheen strooien, omdat het waarschijnlijk verdwaalt in de mix. Houd rekening met deze neiging van gebruikers en zorg ervoor dat uw derde kolom er nog steeds niet uitziet als een puinhoop van advertenties zodra u vaste inhoud krijgt.

Een verfrissende verandering

CNN heeft een van de betere benaderingen van inhoudsorganisatie die ik op een nieuwssite heb gezien. Ze gebruiken een vierkolommenraster van kaarten van gelijke hoogte met daarop een categoriekop. Het resultaat voelt echt leeg van de rommelige rommel die typisch is voor deze secties.

"Als we bijna alle afbeeldingen eruit halen en de inhoud normaliseren, is het resultaat iets veel bruikbaarder."

Interessant genoeg, wanneer we bijna alle afbeeldingen eruit halen en de inhoud normaliseren, is het resultaat iets veel bruikbaarder. Op een typische nieuwssite is er gewoon te veel concurrentie om mijn aandacht. Elk verhaal voelt alsof het harder probeert te schreeuwen dan het verhaal ernaast en het resultaat is nogal overweldigend. Daarentegen is het verhaalraster van CNN gemakkelijk en leuk om door te bladeren.

MSNBC heeft ook een andere aanpak. Ze ordenen hun verhalen in categorieën en plaatsen ze in duidelijk gedefinieerde horizontale kaders. Ze geven je hier veel controle door je te laten kiezen hoeveel verhalen je wilt laten zien en je zelfs controles te geven voor het herschikken van de dozen.

De les

Wat me hier opviel, is dat ik het leuk vond om de sites te gebruiken die hun inhoud organiseerden in duidelijk gedifferentieerde secties en categorieën. Het formaat met drie kolommen, hoewel beproefd en waar, zorgt voor werkintensief browsen dat meer aanvoelt als rommelig doorzoeken.

CNN en MSNBC hebben stappen ondernomen om een ​​duidelijke visuele scheiding tussen verhalen en verschillende soorten inhoud te creëren en hadden lay-outs die er minder lukraak uitzagen. Een van de redenen waarom het formaat met drie kolommen er rommelig uitziet, is de verschillende hoogtes van elke module, die de inhoud horizontaal afzet en zorgt voor veel op- en neergaande oogbewegingen. Het formaat met gelijke hoogte helpt enorm.

Waarom is dit belangrijk voor mij?

De meeste mensen die dit lezen zijn geen topontwerpers voor The Washington Post, dus waarom zijn deze observaties waardevol voor dit publiek? Het antwoord is dat, hoewel we niet allemaal op nieuwssites werken, we onze klanten allemaal de toespraak 'te veel inhoud' hebben gegeven.

We haten het gewoon als onze klanten ons een hoop spullen geven en eisen dat we het allemaal op één pagina plaatsen. Hoe we het ook proberen te tegenspreken, verschillende situaties vragen in feite om deze aanpak. Een heleboel inhoud op een enkele pagina proppen terwijl je probeert het zowel bruikbaar als aantrekkelijk te maken, is een van de moeilijkste situaties waarmee je als ontwerper te maken krijgt, als je het kunt verslaan, kun je je weg uit alles ontwerpen.

'Bij twijfel is het antwoord meestal te vereenvoudigen.'

De lessen die we hier vandaag hebben geleerd, kunnen worden toegepast op elke website die u maakt waar u worstelt met teveel inhoud. Bij twijfel is het antwoord meestal te vereenvoudigen. Snijd die grote lelijke koptekst af, probeer een of twee echt belangrijke punten te vinden en deze te maximaliseren en verdeel de rest van de inhoud in visueel afzonderlijke secties die gemakkelijk te bladeren zijn en die niet te veel rondscharrelen vereisen om te lezen.

Gevolgtrekking

Wat denk je nu je mijn analyse hebt gezien? Welke nieuwssites zijn volgens u het meest aantrekkelijk? Welke zijn het meest bruikbaar? Kunnen de twee doelen synergetisch zijn?

Laat hieronder een reactie achter en laat ons uw mening weten over de informatie en voorbeelden hierboven.