Om jag hade mitt sätt, tillsammans med nästan alla andra webbdesigner, skulle webbsidor alltid innehålla en ganska begränsad mängd innehåll för att hålla fokusen klar och kommunikationslinjen lätt att följa.
Olyckligtvis kräver realtidssituationer webbsidor med enorma mängder innehåll. För att lära oss att ta itu med de problem som uppstår på denna arena, kommer vi att titta på en viss del av webbplatser som kanske är mer överfulla än någon annan: nyheter webbplatser. Hur hanterar designersna hos CNN, MSNBC, Fox och andra layouten av så mycket information? Ta reda på efter hoppet.
Rubrik och navigering
Sidhuvudet är en absolut viktig sida för en nyhetssida. Varje användare vet att man besöker en nyhetssida där det kommer att finnas massor av innehåll att sika igenom och om de vill ha något specifikt, går de direkt till rubriken för att hitta den.
Här får vi vår första glimt av problemet som kommer att plåga oss för resten av artikeln: för mycket grejer! Som jag nämnde i introet måste nyhetssajter absolut överföra mycket information, det är därför de finns. Att organisera all denna information är ingen liten prestation och nästan alla beslut du fattar kan drastiskt påverka webbplatsens användbarhet.
Låt oss ta en titt på vårt första exempel. Bilden nedan visar rubriken och navigering för MSNBC.com.
Som ni kan se finns det en massa pågår i de första tums av denna webbplats. Högst upp på sidan innehåller cirka femton länkar, och det här är bara för andra webbplatser, den interna navigeringen sitter nedanför och innehåller ytterligare tolv.
MSNBC använder sin egen intressanta snurr på en rullgardinsmeny för varje sektion av webbplatsen som visas i navigeringen. Här ser du fem till sex rubriker, några bilder och ännu mer innehåll som leder till en annan webbplats. Efter flera lager av navigering gör vi äntligen det till logotypen på webbplatsen nära botten av rubriken, tillsammans med väder och sök widgets.
Jag tycker att MSNBC-huvudet är lite av en röra, varumärket är förlorat och belastningen av sekundärt innehåll är distraherande. Kontrast detta med rubriken för en av de snyggaste nyheterna som jag hittade, CNN.
Här har vi stark, tydlig branding, en sökfält där du letar efter den och en enkel navigationsmeny utan en enda nedrullning. Den här menyn är en bra balans mellan minimal design och tillräckligt med funktionalitet för att få dig där du vill gå utan problem.
Fox tar en väg som liknar CNN. Det är lite mer rörigt och spänner över flera webbplatser som MSNBC, men flikarna hjälper till att göra metaforen förståelig.
Washington Post började med en liknande idé till MSNBC men drog av sig mycket bättre. Som du kan se är webbplatsens namn trevligt och stort och följs av en väderm widget.
Hovar över navigationen ger dig en stor rullgardinsmeny, men istället för att det är svårt att trycka ner innehåll som på MSNBC, har det strukturerats för att täcka upp den stora? Washington Post? område.
Lektionen
Var försiktig med mega-dropdowns som inte riktigt uppfyller sitt löfte om att göra din webbplats enklare att navigera.?Jag tycker att lektionen här är att inte överväldiga dina användare direkt från fladdermusen med en rörig rubrik. Det betyder inte att du inte kan ha mycket innehåll, var bara försiktig med mega-dropdowns som inte riktigt uppfyller sitt löfte om att göra din webbplats enklare att navigera. CNN visar att ibland en vanlig gammal horisontell lista över länkar och lite snyggt strukturerad blankutrymme kan fungera bra även i en miljö med massinnehåll.
Utvalda historier
Nästa sak som jag vill diskutera är hur dessa webbplatser tar tag i din uppmärksamhet och riktar den mot vad som är viktigt. Varje nyhetssida har en eller två topprapporter som de vet är heta saker av dagen och måste strukturera sidan för att på lämpligt sätt markera dessa historier.
Mitt favoritexempel på detta är The Huffington Post, som väljer att markera en enda nyhetshistoria med en stor bild och en fet rubrik, som båda spänner över hela sidoväggens bredd.
Ta bara en gander ut hur rent och vackert det är jämfört med andra nyheter du har sett. Det är långt ifrån populärt för nyhetssajter att använda det här formatet, men du kan inte låta bli att erkänna att det verkar fungera ganska bra här.
MSNBC tar en liknande väg men är inte riktigt så drastisk att den bara innehåller en enda historia nära toppen av sidan. De har en stor bild flankerad till vänster med olika rubriker. Jag gillar verkligen den grundläggande layouten, men jag tror att de slumpmässiga små rubrikerna som kastas ihop mellan stora berättelser stör det väsentligt.
CNN och Fox väljer en lite mer rörig inställning, främst för att de inte var villiga att ge upp värdefull annonsutrymme till viktiga nyhetsberättelser. CNN har en tre kolonnlayout där mitten är bredast och den sista är annonsutrymmet följt av ett inloggningsfält.
Fox har en stor bild med tre kolumner nedanför, alldeles bredvid en bred kolumn längst till höger för annonsutrymme, stock tickers och social information.
Lektionen
Med Fox-sidan får jag mycket information, vilket är bra, men mina ögon vet inte riktigt var de ska landa och tenderar att studsa runt mycket innan jag någonsin faktiskt läser någonting. CNN tar nu min uppmärksamhet med några ansikten, som alltid är bra för att styra användare där du vill att de ska gå.
Jag finner emellertid att riktigt stora bilder, som de som finns på Huffington och MSNBC, verkligen är verktyget för att få mig att märka något viktigt. Detta förstärks på ett stort sätt med Huffingtons stora fetstil text.
? Ibland är mycket innehåll organiserat snyggt i ett litet utrymme en bra sak.?Vilken metod som är bäst för alla användare är ett knepigt samtal. Man behöver bara stanna av den massivt populära Craigslisten för att se att stora bilder inte alltid behövs för att göra en webbplats tilltalande besökare.Ibland är mycket innehåll ordentligt inrymt i ett litet utrymme en bra sak, speciellt om du vill ha en snabb överblick över allt som är viktigt.
Världen är inte en plats där en enda händelse är vanligtvis viktigare än alla andra, så det är förståeligt att webbplatser som Fox känner behovet av att bryta denna sektion ner ganska. Mitt bästa råd är att ge så mycket vikt som möjligt till de få saker som verkligen är viktiga. Om du kan svänga en stor historia, gå till den. Om inte, försök hålla numret lågt, annars är det inte riktigt en? Featured? avsnitt är det?
Story Grid
När vi går vidare över huvudet och innehållet, blir nyhetssidorna alltmer olika, vilket gör det svårt att jämföra dem på en punktvis punkt. Det är dock vid den här tiden att den verkliga utmaningen börjar. Det är här designarna får ett berg av annat innehåll och berättade för att organisera det.
Varje sida är uppdelad i olika unika moduler och sektioner som är inredda i olika nät, men du kommer att märka att det är en ganska populär trend att någon gång på sidan bryta sig in i en tre kolonnuppsättning som täcker de olika artiklarna. Här är exempel från The Huffington Post, The Washington Post och The Economist som gör exakt det.
Att ha tre kolumner delar upp ditt innehåll snyggt, antingen jämnt eller med en varierad breddstilvägning som The Economist för mer kontroll över betoning. Ett stort problem med tre kolumninriktningen är att vi har lärt våra hjärnor att ignorera den tredje kolumnen! Vi vet alla att det här är där annonserna sitter tillsammans med allt annat skräp vi inte vill se så att vi i stort sett håller vår bläddring begränsad till de två första kolumnerna.
Det kan vara dåligt för webbplatser som faktiskt sprinklar en viktig kolumn där borta, eftersom det är troligt att de kommer vilse i mixen. Var bara uppmärksam på den här tendensen från användarna och se till att din tredje kolumn fortfarande inte ser ut som en röra av annonser när du kommer in i ett solidt innehåll.
En förfriskande förändring
CNN har en av de bättre metoderna för innehållsorganisation som jag sett på en nyhetssida. De använder ett fyrkolnsnät med lika höga kort toppade med en rubrikrubrik. Resultatet känns verkligen omöjligt för den rotiga rotan som är typisk för dessa sektioner.
? När vi tar ut nästan alla bilder och normaliserar innehållet, är resultatet något mycket mer användbart.? Intressant nog, när vi drar ut nästan alla bilder och normaliserar innehållet, är resultatet något mycket mer användbart. På en typisk nyhetssida är det helt enkelt för mycket att tävla för min uppmärksamhet. Varje berättelse känns som att den försöker skrika högre än den där bredvid och resultatet brukar vara ganska överväldigande. CNNs berättingsnät är däremot enkelt och roligt att bläddra.
MSNBC tar också ett annat tillvägagångssätt. De organiserar sina historier i kategorier och placerar dem i tydligt definierade horisontella lådor. De lägger mycket kontroll i dina händer här genom att låta dig välja hur många historier som ska visas och till och med ge dig kontroller för att omarrangera lådorna.
Lektionen
Det jag märkte här är att jag trivdes med att använda de webbplatser som organiserade innehållet i tydligt differentierade avsnitt och kategorier. De tre kolumnformat, även om de är riktiga och sanna, gör det möjligt för arbetsintensiv webbläsning som känns mer som att siktas genom röran.
CNN och MSNBC tog åtgärder för att skapa tydlig visuell separation mellan berättelser och olika typer av innehåll och hade layouter som såg mindre slumpmässigt ut. En av anledningarna till att de tre kolumnformat ser rosa ut är de olika höjderna i varje modul, vilket ställer in innehållet horisontellt och ger mycket upp och ner ögonrörelser. Liknande höjdformat hjälper oerhört.
Varför är det här för mig?
De flesta av de som läser detta är inte toppdesigners för Washington Post, så varför är dessa observationer värdefulla för den här publiken? Svaret är att medan vi inte alla arbetar på nyhetssajter, har vi alla gett våra kunder alltför mycket innehåll? Tal.
Vi hatar det bara när våra kunder ger oss massor av saker och kräver att vi lägger allt på en enda sida. Prova som vi kanske skulle argumentera mot det, flera situationer kräver faktiskt detta tillvägagångssätt. Kramning av en massa innehåll på en enda sida när du försöker göra den både användbar och attraktiv är en av de svåraste situationerna du kommer att möta som designer, om du kan slå det, kan du utforma din väg ut ur någonting.
? När du är osäker är svaret vanligtvis att förenkla.?Lärdomarna vi lärde oss här idag kan appliceras på vilken webbplats du skapar där du kämpar för att skryta i alltför mycket innehåll. När du är i tvivel är svaret vanligtvis att förenkla. Trim ner den stora fula huvudet, försök hitta en eller två riktigt viktiga punkter och maximera dem och separera sedan resten av innehållet i visuellt separata sektioner som är lätta att bläddra och inte kräver för mycket darting runt för att läsa.
Slutsats
Nu när du har sett min analys, vad tycker du? Vilka nyhetssajter tycker du är mest attraktiva? Vilka är de mest användbara? Kan de två målen vara synergistiska?
Lämna en kommentar nedan och låt oss veta dina tankar om informationen och exemplen ovan.