Sosyal Haber Sitesi Tasarımı için En İyi Uygulamalar
Bugünlerde günlük haberlerini nasıl alıyorsun? Peki… favori sitelerinizi ve bloglarınızı ziyaret ediyor olabilirsiniz, ancak bu blogların hiçbir güncellemesine sahip olamayacağı için verimsizdir. Belki de tüm yeni makaleleri size gönderen RSS kullanarak onlara abone olabilirsiniz , ancak bu durumda sizin için ilginç olanı bulmak için tüm yeni şeyleri sıralamak zorunda kalacaksınız. Diğer bir seçenek bugün bir sosyal haber sitesini ziyaret etmek olacaktır.
Sosyal haber siteleri bağlantı toplayıcılarıdır, bu da ana işlevlerinin ilginç bağlantılar toplayıp paylaşması anlamına gelir. Bu, kullanıcı gönderimleri yoluyla yapılabilir veya sistem tarafından otomatik olarak yapılabilir. Toplama yönü bunun bir parçasıdır, çünkü bu siteler de bağlantıları sıralar. Yine bu, kullanıcı oylama veya bazı mekanik algoritmalar yoluyla yapılabilir (bu durumda, buna gerçekten “sosyal” bir haber sitesi diyebilir miyiz?). Ancak sonuç aynı, ancak en ilginç bağlantılar en üst seviyeye çıkıyor . Bu özellik sosyal haber sitelerini RSS'ye harika bir alternatif haline getirmektedir.
Bu makalede, güncel sosyal haber sitelerinin bir kısmını sergileyeceğim, tasarımlarındaki eğilimleri ve kalıpları belirleyeceğim ve bu tür siteleri tasarlarken izlenecek bazı en iyi uygulamaları önereceğim. Dört popüler sosyal haber sitesine bakıp tasarımlarının nasıl karşılaştırıldığını görelim.
Digg
Digg, en popüler sosyal haber sitesidir ve çoğu rakibi tarafından sıklıkla uyarlanan kullanışlı bir tasarıma sahiptir. Digg iki sütun düzeni kullanır: soldaki öykülerin bir listesi ve sağ üstteki 10 haber kutusu gibi ekstra şeyler. En üstte, Digg, hikaye kategorilerinin bir listesini ve bunların altındaki sıralama kontrollerini gösterir. Bir kullanıcı bir kategori seçebilir,… “Teknoloji” diyebilir ve en son gönderimleri görmek için “Yaklaşan” ile sıralayabilir.
pervane
Pervane, Digg düzenini oldukça yakından takip eden bir sitenin iyi bir örneğidir. Pervane hakkında en yeni tweet'ler veya en çok yorumlanan hikayelerin listesi gibi , soldaki ve ikincil içerikteki öykülerin bir listesini içeren iki sütun düzeni.
Digg'den farklı olarak, Pervane, her bir hikayenin arasında yatay çizgi ayırıcıları ve listeyi taramanın daha kolay hale getirilmesi için zebra çizgili bir arka plan kullanır. Bu, zebra şeridinin geleneksel olarak birden çok sütun tablosunda, özellikle de birçok sütunu olanlarda okumayı kolaylaştırmak için kullanıldığına dikkat etmemize yardımcı olabilir. Bunun nedeni, soldaki orijinal etiketten çok uzak olan bir sütundaki bir veri parçasını okumak ve kılavuz olarak zebra şeridini okumak istediğinizde , satır izini kaybetmeden gözünüzü hareket ettirmenize yardımcı olur. Esasen sadece bir veri sütununa sahip olan Pervane bağlamında, zebra şeridinin etkisi tartışmalıdır.
Reddit, Digg'inkiyle farklı bir tasarım örneğidir. Reddit, içeriğe özellikle de başlıklara yoğun bir şekilde odaklanıyor. Odaklar o kadar güçlü ki, başlıklar dışındaki her şey en alt seviyeye indirildi ve öyküler ön koltukları almasına izin vermek için uzaklaştı. Bu minimalist tasarım, ziyaretçilerin çok sayıda manşeti hızlıca tarayarak , kendileri için ilginç bir hikaye bulabilmeleri sayesinde çok hızlı bilgi tüketimine olanak tanır. Reddit'in açıklama alanı olmadığı için, her hikaye daha az yer kaplar, bu nedenle ekranda daha fazla hikaye gösterilebilir .
Reddit ayrıca, ön sayfanın en üstünde benzersiz bir öğeye sahiptir: Rastgele yaklaşan bir hikaye. Diğer sosyal haber sitelerinde olduğu gibi, en yeni Reddit hikayeleri “yaklaşan” bölümde tutuluyor. Bu bölüm ön sayfadan daha az trafik aldığından, bazı ilginç hikayeler kaybolabilir. Bunu düzeltmek için, Reddit ön sayfada rastgele gelecek olan hikayeleri gösterir ve onlara en üst seviyeye çıkmaya yardımcı olabilecek kısa bir pozlama anı sunar .
Newsvine
Newsvine, tasarımında farklı bir yaklaşım benimsiyor. Başlıkların bir listesi gibi görünen diğer sosyal haber sitelerinin aksine, Newsvine dergiyi / gazete görünümünü kullanır. Hikayelere büyük bir fotoğraf ve açıklama eşlik ediyor ve bazı durumlarda hikayenin içeriği de ayrıntılar / yorumlar sayfasında bulunabilir.
Newsvine'in ilginç bir unsuru çarpma ısı haritasıdır:
Grafik iki çizgili gösterir: en çok oyulan hikayeler ve en çok tartışılan hikayeler. Her biri farklı renk ve boyutlarda bir blok seti gösterir. Daha büyük bloklar, içinde bulundukları şemasına bağlı olarak, daha fazla yorum ya da daha fazla oy bulunması anlamına gelir. Renk, hikayenin yaşını, yeşilin taze olduğunu ve kırmızının eski olduğunu gösterir. Bu görselleştirme , Newsvine'daki içeriğe göz atmanın benzersiz bir yolunu sağlar.
Şimdi sosyal haber sitelerinde bulunan bazı ortak arayüz elemanlarına bir göz atalım:
Oy kutusu
Tüm sosyal haber siteleri, sıralamalarda otomatik sıralama algoritmaları kullanan siteler haricinde, makalelere oy verme konusunda bazı yöntemlere sahiptir. Bu oy alanını çok önemli hale getiriyor. İnsanların kaçırmamasını sağlamak için yeterince yapışmasını istersiniz, ancak aynı zamanda , başlıkların listelerini tararken dikkati dağıtmadığından emin olmak için arayüzün tasarımına yeterince uyum sağlamanız gerekir .
İşte popüler haber sitelerinin oy kutularına birkaç örnek:
Her kutuda en fazla dört öğe bulunur: gönderimin sırası, oyların toplamı, öyküyü oylamaya yönelik bir bağlantı ve öykünün oylanmasına yönelik bir bağlantı . Çoğu site sıralamayı göstermez ve yalnızca puanların toplamını gösterir - yani hem olumlu hem de olumsuz oylar eklenir. Oylar hakkında konuşmak gerekirse, sosyal haber sitelerinin çoğunun bir hikâyeyi aşağı yukarı bir oylama yolu vardır, ancak bazıları sadece tek bir düğmeye basmayı seçer. Sadece yukarı tuşunun gösterildiği durumlarda, genellikle bir yere “gömmek” (veya aşağıya oy) için bir link verilir.
Hikaye detayları
Her öykünün onunla gitmek için bir başlıktan fazlası vardır. Hikayeler genellikle tarihlerini, gönderen kullanıcıyı, kısa bir açıklamayı, yorumlar bölümüne ve hatta bir resme bağlantıyı gösterir.
Popüler haber sitelerinin gönderim ayrıntıları alanının birkaç örneği:
Oy kutusu genellikle solda bulunur. Bu, her hikaye için tutarlı bir yerde kalmasını sağlar. “Bu hikayeyi paylaş” gibi diğer eklerin yanı sıra yorumlar bağlantısı açıklamanın (varsa) veya başlığın altına yerleştirilir. Ayrıntıları başlıktaki griye çevirerek detaylar kaybolur ve manşetlere odaklanır , böylece gözümüzün hızlı bir şekilde bir diğerine atlayabilmesi gibi hikayelerin listesini daha kolay bir şekilde tarayabiliriz.
Çoğu sosyal haber sitesi , zamanı göreceli olarak gösterir - örneğin 10 saat önce. Bu mantıklıdır çünkü insanlar bir hikayenin ne kadar taze olduğunu görmek isterler ve özellikle yayınlandığı tarih ve saatle ilgilenmezler.
Ayrıca, bazı sitelerin gönderim bağlantısının, genellikle parantez içerisinden sonra başlığının yanında yönlendirdiği alanı görüntülediğini fark edersiniz. Bu, ziyaretçilere ne tür içerik beklemeleri gerektiğini yargılamasına izin verdiği için yararlıdır. Örneğin, kaynak olarak 'youtube.com' adresini görürlerse, bunun bir video olduğunu bilirler. 'Nytimes.com' gibi önemli kaynaklar da hikayenin kalitesi ve uzunluğunun bir göstergesi olabilir. Kullanıcı, bir bağlantının üzerinde gezinirken kaynağı görebilse de, her zaman görüntülenmesi, başlıkların hızlı bir şekilde taranmasına yardımcı olur.
sayfalara numara koyma
Sosyal haber sitelerinin binlerce veya bazı durumlarda milyonlarca kullanıcı tarafından gönderilen bağlantılar vardır. Tüm bu linklerin bir kerede gösterilmesi elbette imkansızdır; Kullanıcıların sindirebilmelerini sağlamak için bir seferde küçük bir set göstermeniz gerekir . Bağlantılar genellikle sayfalandırma kullanılarak sayfalara ayrılır. Sayfalandırma, içeriği birkaç sayfaya ayırma ve bir sayfanın alt kısmında veya üstünde gördüğünüz bir dizi bağlantıyı bir sonraki veya bir önceki sayfaya gitmenizi veya elle istediğiniz bir sayfa numarasını seçmenizi sağlayan yöntemdir.
İşte popüler haber sitelerinin sayfalarının birkaç örneği:
Tabi ki paginasyon için alternatifler var. Reddit sadece sonraki ve önceki sayfa bağlantılarını gösterir:
Bu yöntem daha kolay gezinmenizi sağlar, hangi sayfada istediğinizi veya "sonraki" bağlantıyı bulmanız gerektiğini düşünmenize gerek kalmaz - sadece iki bağlantı vardır, bu nedenle çoğu zaman bir sonraki sayfayı isteyebilirsiniz. Bunu söyledikten sonra, hangi sayfada olduğunuzu söylemesi zor olduğundan zaman zaman biraz kafa karıştırıcı oluyor.
Slashdot talep üzerine daha fazla hikaye yükler. Sadece “Diğer” düğmesini tıklayın ve AJAX kullanarak daha fazla hikaye yüklendi:
AJAX ile bir şeyler yüklemek, “ilk sayfa” değil, sadece üstte öyküler ve alt kısımdaki öyküler anlamına gelir.
Hangi sayfa seçimini seçerseniz seçin, bu arayüz öğesini kullanılabilir hale getirdiğinizden emin olmak için aklınızda bulundurmanız gereken birkaç şey vardır. Tıklama alanları büyük olmalıdır - yalnızca bir bağlantı listesi sağlamaz, tıklamayı kolaylaştırmak için her bir bağlantıya bir CSS dolgu özniteliği ekler. Geçerli sayfayı özel stil ile net bir şekilde tanımlayın . Kullanıcılarınızın şu anda nerede olduklarını bilmeleri gerekir. Son olarak, “önceki” ve “sonraki” bağlantıları sağlayın . Çoğu zaman ziyaretçileriniz bir sonraki sayfadaki hikayelere göz atmak isteyeceklerdir, bu yüzden bu bağlantıları yaparak bir sonraki sayfayı bulmakla ilgili herhangi bir düşünceyi ele geçireceksiniz.
Yorumlar
İnceleyeceğim son madde yorumlar. Yorumlar, sosyal haber sitelerinin önemli bir unsuru olduğundan, her bir hikayenin etrafında tartışmaların yapılmasına izin veriyorlar. Hikaye bağlantısının işaret ettiği web sitesinin yorum işlevselliği olmayabilir, bu nedenle sosyal haber sitelerinin yorum bölümü tartışma platformu olarak hizmet verir .
Digg'de yorumların nasıl göründüğü:
Yorumlar, bireysel hikayeler gibi oylanabilir. Oylama kontrolleri, her yorumun sağında, bir başparmak yukarı veya aşağı başparmak olarak bulunur. En yüksek puan verilen yorumlar listenin en üstüne düşer, bu da daha yüksek kaliteli tartışmanın her zaman en üstte olacağı anlamına gelir ve değersiz yorumlar aşağıya çekilir.
Digg'nin yorumları daha iyi hale getirmek için sunduğu başka bir özellik daha var: iş parçacığı. Her yorum, yanıt verirseniz kendi başına bir konu başlatabilir . Bu iş parçacıkları 'daraltılmış', ancak iş parçacığı yorumunun altındaki küçük yanıtlar bağlantısını kullanarak açabilirsiniz. Tüm cevaplar daha sonra ana yorumda saklanır ve aynı zamanda yukarı veya aşağı oylanabilir. Bu, kendi tartışmalarını ortaya çıkarmak için ilginç cevaplar sağlar.
Reddit yorumlarının görünüşü şöyledir:
Burada benzer özellikler: oylama ve iş parçacığı. Oylama kontrolleri her yorumun soluna yerleştirilir ve yukarı ve aşağı oklar gibi görünür. Reddit, derinlemesine işlenmeye izin verir, bu da bir yoruma verilen cevapların yalnızca kendileriyle ilgili kendi cevap kümelerini tutabileceği anlamına gelir. Gerçekten de bu, birçok bireysel yorumun şubeler ve cevapların alt dallarını oluşturduğu için bir yorum ağacı oluşturur.
Son olarak, Newsvine yorumlarını görelim:
Newsvine, Digg ile aynı yapıya sahiptir - her yorum bir dizi yanıtı barındırabilmektedir, ancak cevapların kendileri daha fazla yanıt veremezler. Bu , görüşü temiz tutar, ancak tartışma biraz daha katı olur , Bu iyi bir şey olsun ya da olmasın Tartışmalarınızda görmek istediğiniz özgürlük miktarına bağlıdır.
Görsel görünüm biraz farklı. Her bir yoruma sadece bir sol kenar boşluğu eklemek yerine, Newsvine yorumları kutulara sarılır. Cevaplar ayrıca kutulara sarılır ve ebeveyn kutusunun içine yerleştirilir. Bu açık bir ilişki göstergesi sağlar. Newsvine ayrıca sadece ana yorumlarda oylamaya izin verir.
İki öğenin, oylama ve yorumlama yorumunun, sosyal haber sitelerinde iyi tartışmalara olanak sağlamanız için gerekli olan temel unsurlar olduğunu düşünüyorum . Oylama, düşük değeri veya spam içerikli yorumları kaldırmaya yönelik bir filtre gibi davranır ve bunları tamamen kaldırır (bazı siteler olumsuz yorumlar içeren yorumları gizler); ve iş parçacığı, tartışmanın farklı ilgi alanlarına dönüşmesini sağlar. Daha fazla tartışma alanı, konuşulacak daha fazla şey ve daha fazla yorum demektir - katı bir katman yapısının sağlayamayacağı bir şey.
Sadece Dmitry Fadeyev tarafından WDD için yazılmış. Kullanılabilirlik hakkında bir blog çalıştırıyor Kullanılabilirlik Sonrası .
Şu anda günlük haber dozunuzu almak için sosyal haber sitelerini kullanıyor musunuz ve değilse, neden olmasın? Geliştireceğiniz şeyler veya bu sitelere ekleyebileceğiniz özellikler var mı?