Sprawdzone metody projektowania portalu społecznościowego
W jaki sposób otrzymujesz codzienne wiadomości? Cóż ... możesz odwiedzać ulubione witryny i blogi, ale to nieskuteczne, ponieważ te blogi mogą nie mieć żadnych aktualizacji. Być może zasubskrybujesz je za pomocą RSS , która dostarcza wszystkie nowe artykuły prosto do Ciebie, ale w tym przypadku musisz przejrzeć wszystkie nowe rzeczy, aby znaleźć to, co jest dla Ciebie interesujące. Inną opcją jest dziś wizyta na portalu społecznościowym .
Serwisy społecznościowe to agregatory linków, co oznacza, że ich główną funkcją jest zbieranie i udostępnianie interesujących linków. Można to zrobić za pomocą zgłoszeń użytkownika lub może to być wykonane automatycznie przez system. Aspekt agregacji jest tylko jego częścią, ponieważ te strony również sortują linki. Znowu można to zrobić za pomocą głosowania przez użytkownika lub jakiegoś algorytmu mechanicznego (choć w tym przypadku możemy go nazwać "społeczną" stroną z wiadomościami?). Wynik końcowy jest jednak taki sam: najciekawsze linki rosną na samą górę . Ta szczególna funkcja sprawia, że serwisy informacyjne o społecznościach są świetną alternatywą dla RSS.
W tym artykule przedstawię niektóre z aktualnych serwisów społecznościowych, zidentyfikuję trendy i wzorce w ich projektach i podpowiem najlepsze praktyki, które należy zastosować podczas projektowania takich stron. Zacznijmy od obejrzenia czterech popularnych serwisów społecznościowych i zobaczmy, jak ich projekty się porównują.
Digg
Digg jest najpopularniejszą witryną z wiadomościami społecznościowymi i ma użyteczny design, często dostosowywany przez wielu konkurentów. Digg używa układu dwóch kolumn : listy opowieści po lewej stronie i dodatkowych elementów po prawej stronie, takich jak pole 10 najwa niejszych opowieści. U góry Digg pokazuje listę kategorii wątków, a tuż pod nimi kontrolki sortowania. Aby użytkownik mógł wybrać kategorię, powiedzmy "Technologia", a następnie posortuj ją według "Nadchodzące", aby zobaczyć wszystkie najnowsze zgłoszenia.
Śmigło
Śmigło jest dobrym przykładem strony, która dość ściśle podąża za układem Digga. Jest to układ dwukolumnowy z listą opowiadań po lewej stronie i treścią dodatkową po prawej stronie , takimi jak najnowsze tweety na temat śmigła lub lista najbardziej komentowanych artykułów.
W odróżnieniu od Digg, śmigło używa poziomych separatorów linii pomiędzy poszczególnymi historiami, a także paski w paski, aby ułatwić skanowanie listy. Może to pomóc, chociaż muszę zauważyć, że paski zebry są tradycyjnie używane do ułatwienia czytania na wielu tablicach kolumn, szczególnie tych z wieloma kolumnami. Dzieje się tak dlatego, że chcesz odczytywać dane w kolumnie, która jest daleko od oryginalnej etykiety po lewej stronie, a używanie paska jako przewodnika pomaga przesunąć oko bez utraty śladu rzędu . W kontekście śmigła, które ma zasadniczo tylko jedną kolumnę danych, efekt pasków zebry jest wątpliwy.
Reddit jest przykładem innego projektu niż Digg. Reddit koncentruje się głównie na treściach, w szczególności na nagłówkach. Nacisk jest tak silny, że wszystko poza nagłówkami gazet jest zminimalizowane i przeniesione, aby historie zająć na przednim siedzeniu. Ta minimalistyczna konstrukcja pozwala na bardzo szybkie zużycie informacji, ponieważ użytkownik może szybko zeskanować wiele nagłówków, aby znaleźć ciekawą historię. Ponieważ Reddit nie ma pól opisu, każda opowieść zajmuje mniej miejsca, więc więcej historii można wyświetlić na ekranie .
Reddit ma również unikalny element na samej górze pierwszej strony: losową, nadchodzącą historię. Podobnie jak w innych serwisach społecznościowych, najnowsze opowiadania Reddita znajdują się w sekcji "nadchodzące". Ponieważ ta sekcja ma mniejszy ruch niż strona tytułowa, niektóre interesujące historie mogą zostać utracone. Aby temu zaradzić, Reddit pokazuje losowe, nadchodzące historie na pierwszej stronie, aby dać im krótką chwilę naświetlania, która mogłaby pomóc w doprowadzeniu ich na szczyt.
Newsvine
W swoim projekcie Newsvine stosuje inne podejście. W przeciwieństwie do innych serwisów społecznościowych, które wyglądają jak lista nagłówków, Newsvine używa wyglądu czasopisma / gazety . Opowieściom towarzyszy duże zdjęcie i opis, a w niektórych przypadkach treść opowieści można również znaleźć na stronie szczegółów / komentarzy.
Ciekawym elementem Newsvine jest mapa wpływu:
Wykres pokazuje dwa paski: najczęściej wybierane historie i najczęściej omawiane historie. Każdy pokazuje zestaw bloków, wszystkie w różnych kolorach i rozmiarach. Większe bloki oznaczają, że jest ich więcej lub więcej głosów, w zależności od wykresu, w którym się znajdują. Kolor wskazuje wiek historii - zielony jest świeży, a czerwony jest stary. Ta wizualizacja pozwala na wyjątkowy sposób przeglądania treści w Newsvine .
Teraz przyjrzyjmy się niektórym typowym elementom interfejsu na portalach społecznościowych:
Skrzynki głosowania
Wszystkie serwisy z wiadomościami społecznościowymi mają pewną metodę głosowania na artykuły, z wyjątkiem witryn, które używają automatycznych algorytmów sortowania do ustalania rang. To sprawia, że obszar głosowania jest bardzo ważny. Chcesz, żeby wystaje na tyle, by ludzie tego nie ominęli , ale jednocześnie musisz odpowiednio wczuć się w projekt interfejsu, aby nie rozpraszał się podczas skanowania list nagłówków .
Oto kilka przykładów popularnych skrzynek głosowych w serwisach informacyjnych:
Każde pole składa się z maksymalnie czterech elementów: rangi zgłoszenia, sumy głosów, linku do głosowania w górę i linku do głosowania w dół . Większość witryn nie pokazuje rangi i wyświetla tylko sumę wyników - to znaczy zarówno głosy dodatnie, jak i ujemne. Mówiąc o głosach, większość serwisów z wiadomościami społecznościowymi ma sposób na głosowanie zarówno w dół, jak i w górę, choć niektórzy decydują się tylko na jeden przycisk w górę. W przypadkach, gdy wyświetlany jest tylko przycisk w górę, link do "zakopania" (lub w dół głosowania) opowiadania jest zazwyczaj podawany w innym miejscu.
Szczegóły historii
Każda historia ma coś więcej niż tylko nagłówek. Historie zazwyczaj wyświetlają swoją datę, użytkownika, który je opublikował, krótki opis, link do sekcji komentarzy, a może nawet zdjęcie.
Oto kilka przykładów obszernego obszaru przekazywania wiadomości:
Pole głosowania często znajduje się po lewej stronie. Dzięki temu może pozostać w spójnej lokalizacji dla każdej opowieści. Link do komentarzy, a także wszelkie inne dodatki, takie jak "udostępnij tę historię", znajdują się poniżej opisu (jeśli jest obecny) lub nagłówka. Poprzez dopracowanie tekstu szczegółów wokół nagłówka szarości, szczegóły znikają i skupiają się na nagłówkach , dzięki czemu skanowanie historii jest o wiele łatwiejsze, ponieważ nasze oczy mogą szybko przeskakiwać z jednego na drugi.
Większość serwisów społecznościowych wyświetla czas jako względny - np. 10 godzin temu. Ma to sens, ponieważ ludzie chcą zobaczyć, jak świeża jest historia i nie są szczególnie zainteresowani dokładną datą i czasem publikacji.
Zauważysz również, że niektóre witryny wyświetlają domenę, do której prowadzi łącze przesyłania, po stronie nagłówka, zwykle po nawiasach. Jest to pomocne, ponieważ pozwala odwiedzającym ocenić, jakiego rodzaju treści powinni się spodziewać . Jeśli na przykład widzą jako źródło "youtube.com", będą wiedzieć, że jest to film wideo. Wybitne źródła, takie jak "nytimes.com", mogą również być wskaźnikiem jakości i długości historii. Podczas gdy użytkownik będzie mógł zobaczyć źródło, gdy unosi się nad linkiem, wyświetlanie go przez cały czas pomaga w szybkim skanowaniu nagłówków.
Paginacja
Serwisy społecznościowe mają tysiące lub w niektórych przypadkach miliony linków przesłanych przez użytkowników. Pokazanie wszystkich tych linków na raz jest oczywiście niemożliwe; musisz pokazać mały zestaw na raz, aby umożliwić użytkownikom trawienie . Linki są zwykle dzielone na strony za pomocą stronicowania . Paginacja to metoda dzielenia treści na kilka stron i dostarczania zestawu linków, które zwykle widzisz u dołu lub u góry strony, które pozwalają przejść do następnej lub poprzedniej strony, lub wybierz numer strony, który chcesz ręcznie.
Oto kilka przykładów paginacji popularnych witryn z wiadomościami:
Istnieją oczywiście alternatywy dla stronicowania. Reddit pokazuje tylko następne i poprzednie linki do stron:
Ta metoda sprawia, że nawigacja jest prostsza, ponieważ nie musisz zastanawiać się, która strona jest pożądana lub chcesz znaleźć link "następny" - istnieją tylko dwa łącza, więc w większości przypadków potrzebujesz tylko następnej strony. Powiedziawszy to, czasami jest to nieco mylące, ponieważ trudno jest określić, na której stronie się znajdujesz.
Slashdot ładuje więcej artykułów na żądanie. Po prostu kliknij przycisk "Więcej", a więcej historii zostanie załadowanych poniżej za pomocą AJAX:
Ładowanie rzeczy za pomocą AJAX oznacza, że nie ma "pierwszej strony", tylko historie na górze i historie na dole.
Niezależnie od wybranej opcji paginy, należy pamiętać o kilku rzeczach, aby upewnić się, że ten element interfejsu jest użyteczny. Obszary kliknięć powinny być duże - nie wystarczy podać listę linków, ale dodać atrybut wypełnienia CSS do każdego linku, aby ułatwić klikanie. Zidentyfikuj wyraźnie bieżącą stronę za pomocą niestandardowej stylizacji - użytkownicy muszą wiedzieć, gdzie są teraz. Na koniec podaj linki "poprzedni" i "następny" . Zazwyczaj użytkownicy będą chcieli przeglądać historie na następnej stronie, więc dzięki tym liniom odbierasz wszelkie myśli związane z lokalizowaniem następnej strony.
Komentarze
Ostatnim przedmiotem, który zbadam, są komentarze. Komentarze są ważnym elementem serwisów społecznościowych, ponieważ umożliwiają dyskusje wokół każdej historii. Strona, na której wskazuje link do wątku, może nie mieć funkcjonalności komentarzy, więc sekcja komentarzy serwisów społecznościowych służy jako platforma dyskusyjna .
Oto, jak wyglądają komentarze na Digg:
Można głosować na komentarze, tak jak poszczególne historie. Kontrola głosowania znajduje się po prawej stronie każdego komentarza, jako kciuk w górę lub kciuk w dół. Najwyżej ocenione komentarze znajdują się na szczycie listy , co oznacza, że dyskusja o wyższej jakości zawsze będzie na szczycie, a wszelkie bezwartościowe komentarze zostaną odrzucone.
Jest jeszcze jedna funkcja, którą Digg zapewnia, aby komentarze były lepsze: wątkowanie. Każdy komentarz może rozpocząć wątek własny, jeśli na nie odpowiesz . Te wątki są "zwinięte", ale możesz je otworzyć, używając małego linku odpowiedzi u dołu komentarza wątku. Wszystkie odpowiedzi są następnie przechowywane pod komentarzem nadrzędnym i mogą być również głosowane w górę lub w dół. Pozwala to na interesujące odpowiedzi w celu odrodzenia ich własnych dyskusji.
Oto, jak wyglądają komentarze Reddita:
Podobne funkcje tutaj: głosowanie i gwintowanie. Kontrolki głosowania są umieszczone po lewej stronie każdego komentarza i wyglądają jak strzałki w górę iw dół. Reddit pozwala na głębokie wątki, co oznacza, że odpowiedzi na komentarz mogą również zawierać własne zestawy odpowiedzi związanych właśnie z nimi . Rzeczywiście, tworzy to drzewo komentarzy, ponieważ wiele indywidualnych komentarzy spawnuje gałęzie i pod-gałęzie odpowiedzi.
Na koniec zobaczmy komentarze z Newsvine:
Newsvine ma taką samą strukturę jak Digg - każdy komentarz jest w stanie obsłużyć zestaw odpowiedzi, ale same odpowiedzi nie mogą zawierać dalszych odpowiedzi. Dzięki temu widok jest czysty, ale dyskusja staje się nieco bardziej sztywna , niezależnie od tego, czy jest to dobre, czy nie zależy od ilości wolności, jaką chcesz widzieć w swoich dyskusjach.
Wygląd jest nieco inny. Zamiast dodawać lewy margines do każdego komentarza, komentarze Newsvine są zawijane w ramkach. Odpowiedzi są również pakowane w pudełka i umieszczane w pudełku nadrzędnym. Zapewnia to przejrzysty wskaźnik relacji. Newsvine umożliwia także głosowanie tylko na nadrzędne komentarze.
Myślę, że te dwa elementy, komentowanie głosowania i komentowanie wątków, są niezbędnymi składnikami, których potrzebujesz, aby ułatwić dobre dyskusje na portalach społecznościowych. Głosowanie działa jak filtr usuwający komentarze o niskiej wartości lub spamerskie z góry, a nawet całkowicie je usuwa (niektóre witryny ukrywają komentarze z negatywnymi wynikami); a wątki pozwalają na zwrócenie uwagi na różne obszary zainteresowań. Więcej obszarów dyskusji oznacza więcej rzeczy do omówienia i więcej komentarzy - coś, czego sztywna struktura jednej warstwy nie będzie w stanie zapewnić.
Napisany wyłącznie dla WDD przez Dmitrija Fadejewa. Prowadzi bloga na temat użyteczności o nazwie Stan użyteczności .
Czy obecnie korzystasz z serwisów społecznościowych, aby otrzymywać codzienną dawkę wiadomości, a jeśli nie, dlaczego nie? Czy są rzeczy, które chciałbyś poprawić, czy funkcje, które dodasz do takich stron?