Metody wizualizacji treści na stronach www

17 November 2011 | Kamil Kaniuk | Brak komentarzy »

Pracując nad interfejsem strony internetowej często zastanawiamy się w jaki sposób zwiększyć nie tylko jego atrakcyjność, czytelność czy przejrzystość. Niepodważalnie ważną rolę w komunikacji między użytkownikiem serwisu (często klientem) odgrywa interaktywność i sposób pokazania treści.

Specjaliści od pozycjonowania (SEO) nie mylą się powtarzając, że content is the king. Unikalna zawartość serwisu to jeden z podstawowych kryteriów oceny jakości strony przez Google. Dobrze zoptymalizowana (odpowiednie użycie tagów H, wewnętrzne linkowanie, stosowanie atrybutów title w linkach, dobrze opisane Page Title itp.) oraz często aktualizowana treść (nie rzadziej niż raz w miesiącu) znacznie pomoże wypromować stronę wysoko w naturalnych wynikach wyszukiwania (SERP – Search Engine Results Page).

OK, załóżmy, że pod kątem SEO nie mamy sobie nic do zarzucenia. Czy wystarczy, że roboty wyszukiwarek ocenią wysoko treść naszej witryny a dla użytkowników będzie ona po prostu mało atrakcyjna?

Oczywiście, że nie!

Pomińmy ocenę merytoryczną contentu. Tego, póki co, na pewno Google poprawnie nie oceni. Dobry, to znaczy pisany z myślą o internecie, Copywriting jest bardzo często niedoceniany i traktowany po macoszemu. Wiele się ostatnio mówi o User Experience (UX) stron internetowych. O ile definicji UX znajdziemy w internecie wiele, to moim zdaniem kluczowym słowem opisującym istotę zagadnienia jest: empatia. To w jaki sposób (i na ile przyjemne) jest obcowanie użytkowników naszej strony z interfejsem i treścią sprowadza się do pozytywnego lub negatywnego User Experience. Mówiąc o treściach stron, niezwykle ważną rolę w UX pełnie właśnie wspomniany wcześniej Copywriting. Takie detale jak sposób nazwania elementów menu, nazwy buttonów czy treść komunikatów błędu budują szereg doświadczeń użytkowników i pośrednio kreują wizerunek marki naszego serwisu. Polecam lekturę artykułu traktującego o tzw. metodach Dark Patterns, które ocierają się o manipulację, psychologię i techniki wywierania wpływu.

W tym artykule pokażę kilka sposób i przykładów jak można skutecznie poprawić atrakcyjność contentu stosując narzędzia wizualizacji treści.

Narzędzia i przykłady wizualizacji treści na stronach

Jakie informacje można wizualizować? Prawie każdy rodzaj informacji nadaje się do wizualizacji, np.: wszelkie dane statystyczne, raporty, liczby, fakty, pytania, badania itd. Najczęściej stosowany, poczciwy wykres kołowy (ang. pie-chart) nie budzi już żadnych emocji. O wiele większym zainteresowaniem cieszą się dynamiczne, bardziej skomplikowane, ale pokazujące więcej zależności wizualizacje, np. projekt newsmap.jp:

Inny przykład. Pracując nad koncepcją naszego agregatora zakupów grupowych GoDealla.pl szukaliśmy odpowiednich narzędzi, które pozwolą w dynamiczny i atrakcyjny sposób prezentować aktualne lokalne oferty z poszczególnych platform zakupów grupowych w Polsce. Nasza aplikacja na bieżąco pobiera i przetwarza znaczną ilość różnego rodzaju danych (200-300 ofert dziennie z kilkudziesięciu portali jednocześnie). Przygotowaliśmy odpowiednio strony informacyjne każdego z portali, na której oprócz adresu firmy i danych kontaktowych z obsługą klienta prezentujemy dynamicznie generowane wykresy dziennej (i miesięcznej) liczby dodawanych ofert. Tak prezentują się dane najpopularniejszego portalu w Polsce Groupon.

Warto przyjrzeć się demonstracyjnym wizualizacjom użytej biblioteki Raphaël‘a. Podobne wykresy umieściliśmy na pozostałych wizytówkach portali takich jak goniący lidera Gruper, należący do Grupy Allegro Citeam, międzynarodowy DealLX czy poznański FastDeal.

Kolejnym narzędziem, także opartym o JavaScript, na które na warto zwrócić uwagę jest InfoVis. Spektrum możliwości ciekawie pokazuje video:

Upowszechnienie się standardu WebGL przyczyni się do rozwoju i powszechniejszego zastosowania tego typu narzędzi.

Infografiki dziś. Interaktywne dokumenty jutro?

Można powiedzieć, że Infografiki szturmem weszły do powszechnego użytku nie tylko w mediach cyfrowych. Dziennikarze z prasy czy telewizji chętnie wzbogacają swoje materiały o kolorowe, bogato ilustrowane infografiki. Redaktorzy upodobali sobie taką formę prezentacji treści do tego stopnia, że wysyłając notkę prasową bez infografiki mamy znacznie mniejszą szansę na publikację.

Największym ograniczeniem infografik jest ich statyczna forma. Nie pozwalają “eksperymetnować” z danymi i relacjami, które prezentują. Dlatego myślę, że z czasem trend ten się rozwinie w kierunku tworzenia interaktywnych dokumentów (ang. reactive documents). Użytkownicy naszych stron nie chcą być tylko biernymi obserwatorami. Interaktywne dokumenty pozwolą ich zaangażować w treść serwisu, zmieniać dane, które będą reagowały dynamicznie w zależności od wybranych parametrów. Brzmi abstrakcyjnie?

Najciekawsze przykłady tzw. reactive documents.

Tangle:

Explorable Explanations:

Liczę, że wiele firm wkrótce otworzy się na takie rozwiązania i pisząc treści na swoje strony www uwzględni opisane trendy i rozwiązania. Potencjał jest ogromny, grzechem byłoby tego nie wykorzystać.

Ps. Zainteresowanych tematem wizualizacji informacji odsyłam do świetnych blogów infosthetics i Information is Beautiful