Bästa praxis för att designa en webbplats för sociala nyheter
Hur får du dina dagliga nyheter idag? Tja ... du kan besöka dina favoritwebbplatser och bloggar, men det är ineffektivt eftersom bloggarna kanske inte har några uppdateringar. Kanske du prenumererar på dem med RSS , som levererar alla nya artiklar direkt till dig, men i det här fallet måste du sortera igenom alla nya saker för att hitta det som är intressant för dig. Ett annat alternativ idag skulle vara att besöka en social nyhetssida .
Sociala nyheter är länkaggregatörer, vilket innebär att deras huvudsakliga funktion är att samla in och dela intressanta länkar. Detta kan ske genom användarinslag, eller det kan ske automatiskt av systemet. Sammanställningsaspekten är bara en del av det men eftersom dessa platser också sorterar länkarna. Återigen kan detta göras genom användarröstning eller någon mekanisk algoritm (även om vi i det här fallet kan kalla det en "social" nyhetssida?). Slutresultatet är dock detsamma: de mest intressanta länkarna stiger till toppen . Denna speciella funktion gör sociala nyheter webbplatser ett bra alternativ till RSS.
I den här artikeln kommer jag att visa upp några av de aktuella toppsociala nyheterna, identifiera trender och mönster i deras mönster och föreslå några bra metoder att följa vid utformningen av sådana webbplatser. Låt oss börja med att titta på fyra populära sociala nyheter och se hur deras mönster jämför.
Digg
Digg är den mest populära sociala nyhetssiten och har en användbar design som ofta anpassas av många av sina konkurrenter. Digg använder en layout med två kolumner : en lista med historier till vänster och extra saker till höger, till exempel topp 10-fältet. Högst uppvisar Digg en lista över historikategorier, och precis under dem sorteringsreglagen. Så en användare kan välja en kategori, säg ... "Teknik", och sortera sedan "Kommande" för att se alla senaste inlägg.
Propeller
Propeller är ett bra exempel på en webbplats som följer Digg-layout ganska nära. Det är en två kolumnlayout med en lista med historier till vänster och sekundärt innehåll till höger , till exempel de senaste tweetsna om Propeller eller en lista med mest kommenterade berättelser.
Till skillnad från Digg använder Propeller horisontella linjeseparatorer mellan var och en av berättelserna, liksom en zebra randig bakgrund för att göra listan lättare att skanna. Detta kan hjälpa, även om jag måste notera att zebra striping traditionellt används för att underlätta läsning på flera kolumnbord, särskilt de med många kolumner. Detta beror på att du vill läsa en bit data i en kolumn som ligger långt ifrån den ursprungliga etiketten till vänster och med hjälp av zebra stripen som en guide hjälper dig att flytta ögat över utan att förlora spåret på raden . I samband med Propeller, som i huvudsak endast har en datakolonn, är effekten av zebra striping tvivelaktig.
Reddit är ett exempel på en annan design än Digg. Reddit har stor inriktning på innehåll, särskilt rubrikerna. Fokus är så stark att allt utom rubrikerna minimeras och flyttas för att låta historierna ta framsätet. Den här minimalistiska designen möjliggör mycket snabb informationskonsumtion, eftersom besökaren snabbt kan skanna en hel del rubriker för att hitta en historia intressant för dem. Eftersom Reddit inte har några beskrivningsfält tar varje historia mindre plats, så fler historier kan visas på skärmen .
Reddit har också ett unikt element längst upp på framsidan: en slumpmässig kommande historia. Liksom på andra sociala nyheter, hålls de senaste Reddit-berättelserna i avsnittet "Kommande". Eftersom det här avsnittet får mindre trafik än framsidan kan några intressanta historier gå vilse. För att avhjälpa detta visar Reddit slumpmässiga kommande berättelser på forsidan för att ge dem ett kort ögonblick av exponering som potentiellt kan hjälpa till att driva dem till toppen.
Newsvine
Newsvine tar ett annat tillvägagångssätt i sin design. Till skillnad från andra sociala nyheter, som ser ut som en lista med rubriker, använder Newsvine tidningen / tidningen . Berättelser åtföljs av ett stort foto och en beskrivning och i vissa fall kan innehållet i berättelsen också hittas på dess detaljer / kommentarer sida.
Ett intressant element i Newsvine är effektvärmekortet:
Diagrammet visar två ränder: de mest röstade berättelserna och de mest diskuterade berättelserna. Varje visar en uppsättning block, alla olika färger och storlekar. Större block betyder att det finns antingen fler kommentarer på dem eller fler röster, beroende på diagrammet de är i. Färgen indikerar historiens ålder - grön är fräsch och röd är gammal. Denna visualisering möjliggör ett unikt sätt att bläddra bland innehållet på Newsvine .
Låt oss nu titta på några av de gemensamma gränssnittselementen som finns på sociala nyheter:
Rösta lådor
Alla sociala nyhetswebbplatser har någon metod att rösta på artiklar, med undantag för webbplatser som använder automatiserade sorteringsalgoritmer för att utarbeta rankningar. Detta gör omröstningsområdet mycket viktigt. Du vill att det ska klara sig tillräckligt för att se till att folk inte saknar det , men samtidigt måste du göra det bleknade tillräckligt bra i gränssnittets utformning för att säkerställa att det inte distraheras när man skannar listor med rubriker .
Här är några exempel på populära nyhetssändares röstlådor:
Varje ruta består av upp till fyra element: Inläggets rankning, summan av rösterna, en länk för att rösta upp historien och en länk för att rösta ner historien . De flesta webbplatser visar inte rangordningen och visar bara summan av poängen - det vill säga både positiva och negativa röster läggs upp. Prata om röster, de flesta sociala nyhetssidor har ett sätt att rösta en historia både nere och uppåt, även om vissa väljer att bara ha en upp-knapp. I de fall där endast upp-knappen visas, en länk till "begrava" (eller nerstämning) är en historia vanligtvis tillhandahållen någon annanstans.
Story detaljer
Varje berättelse har mer än bara en rubrik för att gå med den. Berättelser visar i allmänhet sitt datum, användaren som skrev upp dem, en kort beskrivning, en länk till kommentardelen och kanske till och med en bild.
Här är några exempel på populära nyhetssidor "inlämningsdetaljer" område:
Röstningsrutan finns ofta till vänster. Detta gör det möjligt att förbli i en konsekvent plats för varje berättelse. Kommentarer länken, liksom andra extrafunktioner som "dela denna historia" placeras under beskrivningen (om den finns) eller rubrik. Genom att göra detaljerna texten runt rubriken grå detaljerna blekna bort och ge fokus till rubriken , vilket gör att skanning av listan över historier mycket lättare eftersom våra ögon snabbt kan hoppa från en till en annan.
De flesta sociala nyhetssidor visar tiden som relativ - t ex för 10 timmar sedan. Det här är meningsfullt eftersom folk vill se hur fräsch en historia är och inte särskilt intresserad av exakt datum och tid när den publicerades.
Du kommer också märka att vissa webbplatser visar domänen där inlämningslänken leder till vid sidan av rubriken, vanligtvis efter det i parentes. Det här är användbart eftersom det tillåter besökare att bedöma vilken typ av innehåll de ska förvänta sig . Om de till exempel ser "youtube.com" som källa, vet de att det är en video. Framtida källor som "nytimes.com" kan också vara en indikator på historiens kvalitet och längd. Medan användaren kommer att kunna se källan medan den svänger över en länk, hjälper det att alltid visa det när du skannar rubrikerna snabbt.
Paginering
Sociala nyhetssidor har tusentals, eller i vissa fall miljoner, användarvänliga länkar. Att visa alla dessa länkar på en gång är givetvis omöjligt; du måste visa en liten uppsättning i taget för att tillåta användarna att smälta den . Länkarna brukar delas upp i sidor med paginering . Pagination är metoden att dela upp innehåll på flera sidor och tillhandahålla en uppsättning länkar som du vanligtvis ser längst ner eller på en sida som låter dig gå till nästa eller föregående sida eller välja ett sidnummer som du vill ha manuellt.
Här är några exempel på populär nyhetssides pagination:
Det finns naturligtvis alternativ till pagination. Reddit visar bara nästa och föregående sidlänkar:
Den här metoden gör det enklare att navigera genom att du inte behöver tänka på vilken sida du vill eller behöver hitta den "nästa" länken. Det finns bara två länkar, så det mesta du bara vill ha nästa sida. Med detta sagt gör det det lite förvirrande ibland, eftersom det är svårt att berätta vilken sida du är på.
Slashdot laddar upp fler historier på begäran. Klicka bara på knappen "Mer" och mer historier laddas nedan med AJAX:
Att ladda saker med AJAX betyder att det inte finns någon "första sida" men bara historier på toppen och berättelser längst ner.
Oavsett vilken pagination du väljer finns det några saker du bör tänka på för att se till att du gör det här gränssnittselementet användbart. Klicksområdena bör vara stora - inte bara en lista med länkar, men lägg till ett CSS-kodningsattribut till varje länk för att göra det enklare att klicka på. Identifiera den nuvarande sidan tydligt med anpassad styling - dina användare behöver veta var de är just nu. Slutligen, ge "tidigare" och "nästa" länkar . För det mesta kommer dina besökare att bläddra i berättelser på nästa sida, så genom att göra dessa länkar tar du bort eventuella tankar som är inblandade i att hitta den där nästa sidan.
kommentarer
Det sista objektet jag ska undersöka är kommentarer. Kommentarer är ett viktigt inslag i sociala nyheter, eftersom de tillåter diskussioner att uppstå kring varje historia. Webbplatsen där historiklänken pekar på kanske inte har kommentarerfunktionalitet, så kommentarsektionen på sociala nyhetssidor fungerar som diskussionsplattformen .
Här är vad kommentarerna ser ut på Digg:
Kommentarer kan röstas om, precis som enskilda historier. Röstkontrollerna finns till höger om varje kommentar, som tummen upp eller tummen nedåt. De högst rankade kommentarerna flyter till toppen av listan , vilket innebär att högre kvalitetsdiskussioner alltid skulle vara högst upp och eventuella värdelösa kommentarer skulle röstas ned.
Det finns en annan funktion som Digg tillhandahåller för att göra kommentarer bättre: threading. Varje kommentar kan starta en egen tråd om du svarar på den . Dessa trådar är "kollapsade", men du kan öppna den genom att använda länken Lite svar längst ner i trådkommentaren. Alla svar lagras sedan under moderkommentaren och kan också röstas upp eller ner. Detta möjliggör intressanta svar att gissa sina egna diskussioner.
Så här ser Reddit-kommentarerna ut:
Liknande funktioner här: röstning och gängning. Röstkontrollerna placeras till vänster om varje kommentar och ser ut som pilar upp och ner. Reddit möjliggör djuptrådning, vilket innebär att svar på en kommentar också kan innehålla egna svarsatser som är relaterade till dem . Det här skapar faktiskt ett träd av kommentarer, eftersom många enskilda kommentarer sprider grenar och underavdelningar av svar.
Slutligen, låt oss se Newsvine kommentarer:
Newsvine har samma struktur som Digg - varje kommentar kan vara värd för en uppsättning svar, men svaren själva kan inte vara värd för ytterligare svar. Detta håller vyn ren, men diskussionen blir lite mer styv , oavsett om det är bra eller inte beror på hur mycket frihet du vill se i diskussionerna.
Det visuella utseendet är lite annorlunda. Istället för att bara lägga till en vänster marginal för varje kommentar, är Newsvine-kommentarer inslagna i lådor. Svaren är också inslagna i lådor och placeras inuti förälderlådan. Detta ger en tydlig relation indikator. Newsvine tillåter också att rösta på föräldrarnas kommentarer.
Jag tror att de två elementen, kommentera rösträtt och kommentera tråder är viktiga ingredienser som du behöver för att underlätta bra diskussioner på sociala nyheter. Rösten fungerar som ett filter för att ta bort eventuella lågvärde eller spammy kommentarer från toppen, och till och med ta bort dem helt (vissa webbplatser gömmer kommentarer med negativa poäng); och tråden tillåter diskussionen att röra sig bort i olika intressanta områden. Fler diskussionsområden innebär fler saker att prata om och fler kommentarer - något som en stel struktur med en lager inte kommer att kunna ge.
Skriven uteslutande för WDD av Dmitry Fadeyev. Han driver en blogg om användbarhet som heter Användbarhet Post .
Använder du för närvarande sociala nyheter för att få din dagliga dos av nyheter, och om inte, varför inte? Finns det saker du skulle förbättra, eller funktioner som du skulle lägga till på sådana webbplatser?