Sobota, 21 maja 2022

Najlepsze praktyki w zakresie projektowania witryny z wiadomościami społecznymi

19 kwietnia 2022

Jak w dzisiejszych czasach zdobywa się codzienne wiadomości? Cóż... możesz odwiedzać swoje ulubione witryny i blogi, ale to nie jest efektywne, ponieważ blogi te mogą nie mieć żadnych aktualizacji. Być może subskrybujesz je za pomocą RSS, który dostarcza wszystkie nowe artykuły prosto do Ciebie, ale w tym przypadku będziesz musiał sortować wszystkie nowe materiały, aby znaleźć to, co jest dla Ciebie interesujące. Innym rozwiązaniem jest odwiedzenie serwisu społecznościowego.

Serwisy społecznościowe to agregatory linków, co oznacza, że ich główną funkcją jest gromadzenie i udostępnianie interesujących linków. Może się to odbywać poprzez zgłoszenia użytkowników lub może być wykonywane automatycznie przez system. Aspekt agregacji jest jednak tylko częścią tej funkcji, ponieważ serwisy te zajmują się również sortowaniem linków. Również w tym przypadku może się to odbywać za pomocą głosowania użytkowników lub mechanicznego algorytmu (choć czy w tym przypadku naprawdę można mówić o "społecznościowym" serwisie informacyjnym?) Efekt końcowy jest jednak taki sam: najciekawsze linki znajdują się na samej górze. Właśnie ta cecha sprawia, że serwisy społecznościowe są świetną alternatywą dla RSS.

W tym artykule przedstawię kilka najlepszych obecnie społecznościowych serwisów informacyjnych, wskażę trendy i wzorce w ich projektowaniu oraz zaproponuję kilka najlepszych praktyk, którymi warto się kierować przy projektowaniu takich serwisów. Na początek przyjrzyjmy się czterem popularnym społecznościowym serwisom informacyjnym i zobaczmy, jak wypadają ich projekty.

Digg

Digg jest najpopularniejszym serwisem społecznościowym i charakteryzuje się użytecznym wyglądem, który jest często adaptowany przez wielu jego konkurentów. Digg ma układ dwukolumnowy: po lewej stronie znajduje się lista artykułów, a po prawej stronie dodatkowe elementy, takie jak ramka z 10 najlepszymi artykułami. Na górze Digg wyświetla listę kategorii artykułów, a tuż pod nimi elementy sterujące sortowaniem. Użytkownik może więc wybrać kategorię, np. "Technologia", a następnie posortować ją według kategorii "Nadchodzące", aby zobaczyć wszystkie najnowsze artykuły.


Propeller

Propeller to dobry przykład strony, która dość dokładnie odwzorowuje układ Digg. Jest to układ dwukolumnowy, z listą artykułów po lewej stronie i zawartością po prawej, taką jak najnowsze tweety o Propellerze lub lista najczęściej komentowanych artykułów.

W przeciwieństwie do Digg, Propeller stosuje poziome separatory pomiędzy poszczególnymi artykułami, a także tło w kształcie paska zebry, aby ułatwić skanowanie listy. Może to pomóc, choć muszę zauważyć, że paski zebry są tradycyjnie stosowane w celu ułatwienia czytania tabel wielokolumnowych, zwłaszcza tych z wieloma kolumnami. Dzieje się tak, ponieważ użytkownik chce odczytać fragment danych w kolumnie, która znajduje się daleko od oryginalnej etykiety po lewej stronie, a użycie paska zebry jako przewodnika pomaga przesunąć wzrok w poprzek, nie tracąc orientacji w wierszu. W kontekście Śmigła, które ma w zasadzie tylko jedną kolumnę danych, efekt pasków zebry jest wątpliwy.


Reddit

Reddit jest przykładem projektu innego niż Digg. Reddit kładzie duży nacisk na treść, zwłaszcza na nagłówki. Skupienie to jest tak silne, że wszystko poza nagłówkami jest minimalizowane i odsuwane na bok, aby historie mogły zająć pierwsze miejsce. Ten minimalistyczny projekt pozwala na bardzo szybkie przyswajanie informacji, ponieważ odwiedzający może szybko przeskanować wiele nagł ówków, aby znaleźć interesującą go historię. Ponieważ Reddit nie ma pól opisowych, każda historia zajmuje mniej miejsca, dzięki czemu na ekranie można wyświetlić więcej historii.

Reddit posiada również unikalny element na samej górze strony głównej: losowo wybraną nadchodzącą historię. Podobnie jak w innych serwisach społecznościowych, najnowsze historie z Reddita są przechowywane w sekcji "nadchodzące". Ponieważ w tej sekcji jest mniejszy ruch niż na stronie głównej, niektóre interesujące historie mogą zostać utracone. Aby temu zaradzić, Reddit pokazuje przypadkowe nadchodzące historie na pierwszej stronie, aby dać im krótką chwilę uwagi, która może potencjalnie pomóc w awansie na szczyt.


Newsvine

Newsvine podchodzi do projektowania w inny sposób. W przeciwieństwie do innych serwisów społecznościowych, które wyglądają jak lista nagłówków, Newsvine wykorzystuje wygląd magazynu/newslettera. Opowiadaniom towarzyszy duże zdjęcie i opis, a w niektórych przypadkach treść opowiadania można znaleźć również na stronie szczegółów/komentarzy.

Jednym z ciekawych elementów Newsvine jest mapa wpływu:

Wykres pokazuje dwa paski: historie, na które oddano najwięcej głosów i historie, o których najwięcej dyskutowano. Każdy z nich zawiera zestaw bloków w różnych kolorach i rozmiarach. Większe bloki oznaczają albo więcej komentarzy, albo więcej głosów, w zależności od wykresu, na którym się znajdują. Kolor wskazuje wiek historii - zielony oznacza, że jest ona świeża, a czerwony, że stara. Wizualizacja ta pozwala na unikalny sposób przeglądania treści na Newsvine.

Przyjrzyjmy się teraz niektórym elementom interfejsu obecnym w serwisach społecznościowych:

Pola do głosowania

Wszystkie serwisy społecznościowe mają jakąś metodę głosowania na artykuły, z wyjątkiem serwisów, które używają automatycznych algorytmów sortowania do tworzenia rankingów. Z tego powodu pole do głosowania jest bardzo ważne. Powinien on wyróżniać się na tyle, aby użytkownicy nie mogli go przeoczyć, ale jednocześnie powinien być na tyle dobrze wkomponowany w wygląd interfejsu, aby nie rozpraszał uwagi podczas przeglądania list nagłówków.

Oto kilka przykładów skrzynek do głosowania w popularnych serwisach informacyjnych:

Każda ramka składa się z maksymalnie czterech elementów: rangi zgłoszenia, sumy głosów, łącza do głosowania na artykuł w górę i łącza do głosowania na artykuł w dół. Większość serwisów nie pokazuje rangi, a jedynie sumę punktów - czyli zsumowane głosy pozytywne i negatywne. Mówiąc o głosach, większość serwisów społecznościowych ma możliwość oddania głosu zarówno w dół, jak i w górę, choć niektóre decydują się tylko na jeden przycisk w górę. W przypadku gdy widoczny jest tylko przycisk "w górę", link do "zakopania" (lub oddania głosu w dół) historii jest zwykle umieszczony w innym miejscu.

Szczegóły historii

Każda historia ma coś więcej niż tylko nagłówek. Historie zazwyczaj zawierają datę, użytkownika, który je opublikował, krótki opis, łącze do sekcji komentarzy, a być może nawet zdjęcie.

Poniżej znajduje się kilka przykładów z obszaru szczegółów nadsyłanych materiałów w popularnych serwisach informacyjnych:

Pole do głosowania jest często umieszczone po lewej stronie. Pozwala to zachować spójną lokalizację dla każdej historii. Link do komentarzy, a także wszelkie inne dodatki, takie jak "podziel się tą historią", są umieszczane poniżej opisu (jeśli jest obecny) lub nagłówka. Dzięki temu, że tekst szczegółów jest umieszczony wokół nagłówka, szczegóły znikają i skupiają się na nagłówkach, co znacznie ułatwia skanowanie listy historii, ponieważ nasz wzrok może szybko przeskakiwać od jednej do drugiej.

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 dana historia, i nie są szczególnie zainteresowani dokładną datą i godziną jej opublikowania.

Można również zauważyć, że niektóre strony wyświetlają domenę, do której prowadzi link do artykułu, obok nagłówka, zwykle po nim, w nawiasie. Jest to pomocne, ponieważ pozwala odwiedzającym ocenić, jakiego rodzaju treści powinni się spodziewać. Na przykład, jeśli jako źródło zobaczą "youtube.com", będą wiedzieli, że chodzi o wideo. Wyraźne źródła, takie jak "nytimes.com", mogą być także wskaźnikiem jakości i długości artykułu. Użytkownik będzie mógł zobaczyć źródło po najechaniu kursorem na link, ale wyświetlanie go przez cały czas pomaga w szybkim przeglądaniu nagłówków.

Paginacja

W serwisach społecznościowych znajdują się tysiące, a w niektórych przypadkach miliony, linków przesłanych przez użytkowników. Wyświetlenie wszystkich tych linków naraz jest oczywiście niemożliwe; należy wyświetlać niewielki zestaw na raz, aby umożliwić użytkownikom przyswojenie informacji. Łącza są zwykle dzielone na strony przy użyciu paginacji. Paginacja to metoda dzielenia treści na kilka stron i udostępniania zestawu linków, które zwykle można zobaczyć na dole lub na górze strony, umożliwiających przejście do następnej lub poprzedniej strony albo ręczne wybranie numeru strony.

Oto kilka przykładów paginacji w popularnych serwisach informacyjnych:

Istnieją oczywiście alternatywy dla paginacji. W serwisie Reddit wyświetlane są tylko łącza do następnej i poprzedniej strony:

Ta metoda upraszcza nawigację, ponieważ nie trzeba się zastanawiać, na jakiej stronie chcemy znaleźć link "następna" - są tylko dwa linki, więc w większości przypadków chcemy po prostu znaleźć następną stronę. Mimo to czasami jest to trochę dezorientujące, ponieważ trudno się zorientować, na jakiej stronie się znajdujemy.

Slashdot ładuje więcej artykułów na żądanie. Wystarczy kliknąć przycisk "Więcej", a kolejne historie zostaną załadowane poniżej przy użyciu AJAX:

Ładowanie rzeczy za pomocą AJAX oznacza jednak, że nie ma "pierwszej strony", tylko historie na górze i historie na dole.

Bez względu na to, jaką paginację wybierzesz, musisz pamiętać o kilku rzeczach, które sprawią, że ten element interfejsu będzie użyteczny. Obszary klikania powinny być duże - nie ograniczaj się do listy linków, ale dodaj do każdego z nich atrybut CSS padding, aby ułatwić klikanie. Bieżąca strona powinna być wyraźnie ozna czona za pomocą niestandardowej stylizacji - użytkownicy muszą wiedzieć, gdzie się aktualnie znajdują. Na koniec należy umieścić linki "poprzednia" i "następna". W większości przypadków odwiedzający będą chcieli przejrzeć historię na następnej stronie, więc umieszczając te odnośniki, pozbawiasz użytkowników możliwości zastanowienia się nad znalezieniem następnej strony.

Komentarze

Ostatnią kwestią, którą omówię, są komentarze. Komentarze są ważnym elementem społecznościowych serwisów informacyjnych, ponieważ umożliwiają prowadzenie dyskusji wokół każdej historii. Strona, na której znajduje się link do artykułu, może nie mieć funkcji komentowania, dlatego sekcja komentarzy w serwisach społecznościowych służy jako platforma dyskusyjna.

Oto jak wyglądają komentarze na Digg:

Na komentarze można głosować, tak samo jak na poszczególne artykuły. Elementy sterujące głosowaniem znajdują się po prawej stronie każdego komentarza, w postaci kciuków w górę lub w dół. Najwyżej oceniane komentarze znajdują się na szczycie listy, co oznacza, że dyskusje o wyższej jakości zawsze będą na szczycie, a bezwartościowe komentarze będą odrzucane.

Jest jeszcze jedna funkcja, którą Digg oferuje, aby usprawnić komentowanie: tworzenie wątków. Każdy komentarz może rozpocząć swój własny wątek, jeśli się na niego odpowie. Wątki te są "zwinięte", ale możesz je otworzyć, używając małego linku odpowiedzi na dole komentarza. Wszystkie odpowiedzi są przechowywane pod komentarzem nadrzędnym i mogą być głosowane w górę lub w dół. Dzięki temu interesujące odpowiedzi mogą wywoływać własne dyskusje.

Oto, jak wyglądają komentarze w serwisie Reddit:

Podobne funkcje: głosowanie i tworzenie wątków. Elementy sterujące głosowaniem znajdują się po lewej stronie każdego komentarza i wyglądają jak strzałki w górę i w dół. Reddit pozwala na głębokie wątkowanie, co oznacza, że odpowiedzi na komentarz mogą zawierać własne zestawy odpowiedzi odnoszących się tylko do nich. W rzeczywistości tworzy to drzewo komentarzy, ponieważ wiele pojedynczych komentarzy tworzy gałęzie i podgałęzie odpowiedzi.

Na koniec przyjrzyjmy się komentarzom Newsvine:

Newsvine ma taką samą strukturę jak Digg - każdy komentarz może zawierać zestaw odpowiedzi, ale same odpowiedzi nie mogą zawierać kolejnych odpowiedzi. Dzięki temu widok jest czysty, ale dyskusja staje się nieco bardziej sztywna. Czy to dobrze, czy źle, zależy od tego, jak dużą swobodę chcesz widzieć w swoich dyskusjach.

Wygląd wizualny jest nieco inny. Zamiast dodawać lewy margines do każdego komentarza, komentarze Newsvine są zawijane w ramki. Odpowiedzi również są zawijane w ramki i umieszczane wewnątrz ramki nadrzędnej. W ten sposób uzyskuje się wyraźny wskaźnik powiązania. Newsvine pozwala także na głosowanie tylko na komentarze nadrzędne.

Uważam, że te dwa elementy - głosowanie na komentarze i tworzenie wątków - są niezbędnymi składnikami, które są potrzebne do prowadzenia dobrych dyskusji w serwisach społecznościowych. Głosowanie działa jak filtr, który usuwa z góry komentarze o niskiej wartości lub będące spamem, a nawet usuwa je w ogóle (niektóre serwisy ukrywają komentarze z negatywną oceną). Więcej obszarów dyskusji oznacza więcej rzeczy do omówienia i więcej komentarzy - coś, czego sztywna, jednowarstwowa struktura nie jest w stanie zapewnić.

Napisany wyłącznie dla WDD przez Dmitrija Fadeyeva. Prowadzi on bloga o użyteczności o nazwie Usability Post.

Czy korzystasz obecnie z serwisów społecznościowych, aby zdobyć codzienną dawkę wiadomości, a jeśli nie, to dlaczego? Czy są rzeczy, które poprawilibyście lub funkcje, które dodalibyście do takich serwisów?