Wdrożone jest lepsze niż perfekcyjne, a zrobienie tego, czego użytkownicy chcą jest lepsze od zrobienia tego, co wydaje Ci się, że chcą.

Kontynuując poprzedni wpis o nowym podejściu do stron internetowych, chciałbym pokazać jak wygląda to w praktyce, na przykładzie serwisu newsowego Zipnews, który jest wdrażany dokładnie odwrotną metodą niż zwykle robi się strony.

Zgodnie z hasłem wdrożone jest lepsze niż idealne najpierw sprawdzamy co podoba się ludziom, później to testujemy, a dopiero na końcu idziemy do grafika, żeby wszystko wyglądało perfekcyjnie. Najlepsze jest to, że przykład jest opisywany na żywo, bo Zipnews jeszcze nie przeszedł całego procesu!

Nie ukrywam, że mój sposób działania opiera się na podejściu Stephena Haya i Paula Boaga, projektantów stron pracujących dla największych firm na świecie i mającym doświadczenie tak długie, jak cała historia stron WWW.

Jeśli nie widziałeś Zipnewsa na samym początku, to poniżej jest zrzut ekranu z pierwszych dwóch tygodni działania. Tak, to pierwsza z brzegu, darmowa skórka! Wtedy liczyło się uruchomienie strony w jakiejkolwiek wersji. Co zrobiłem dalej?

zipnews na samym początku

1. Analiza architektury informacji

Zacząłem ustalenia jaki jest cel strony i co ma ona prezentować. To zaskakujące, jak mało osób w ogóle jest w stanie powiedzieć jaki cel ma spełniać ich strona. Na Zipnews celem jest wygenerowanie jak największej liczby odsłon na użytkownika w miesiącu. Docelowo ma to być 300 odsłon miesięcznie na użytkownika :).

W zawiązku z tym:

  1. musi być dużo wpisów (albo wyglądać na to, że jest ich dużo ;) )
  2. nie może być żadnych sztuczek, bo ludzie się wkurzą i uciekną. Mają wracać po dwa razy dziennie
  3. trzeba opracować odpowiedni flow, czyli zobaczyć co ludzie robią na stronie i to uprościć

Tu drobna uwaga: Zipnews to strona oparta na treści. Na stronach sprzedażowych architektura informacji będzie zupełnie inna i tam najważniejszy będzie flow.

2. Rozmieszczenie treści

Wiedząc już co chcę osiągnąć, przeanalizowałem wygląd konkurencyjnych stron i ustaliłem jaki wstępny wygląd powinien być u mnie.

Zaraz po ręcznych szkicach na szybko go zakodowałem (tu działające demo – webdeveloperów zachęcam do zajrzenia do źródła).

zipnews - rozmieszczenie ukladu w

Jeśli robisz stronę sprzedażową i korzystasz z Peak Appa, Na tym etapie jakieś oprogramowanie podobne do Peak Appa sprawdzi się najlepiej to po prostu wybierasz jeden ze wstępnych układów strony, a algorytm zajmie się wyborem najlepszego układu.

3. Wstawienie treści

Równolegle ze zmianami w warstwie wizualnej prowadzone były prace nad „silnikiem” strony, ale to temat na inny wpis.

Kolejnym krokiem było zrobienie backendu, czyli całego systemu do wprowadzania treści i jej wyświetlania tam gdzie trzeba. Do Zipnews oczywiście skorzystałem z WordPressa (z kolejną gotową skórką ;) ), a do stron firmowych polecam Peak Appa, w którym dostajesz wbudowany system do prowadzenia testów (patrz kolejny punkt).

Strona wyglądała na tym etapie tak:

Najważniejszą zmianą było uzupełnienie kodu z punktu drugiego treścią, chociaż na razie w domyślnych kolorach, bez marginesów itp.

4. Przeprowadź testy na żywych użytkownikach

Im więcej żywych osób zobaczy twoją stronę, tym lepiej. Jest tylko jeden warunek: musisz mierzyć ich zachowania. Wstępnie pokolorowałem więc wersję z punktu trzeciego i zmieniłem skórkę na Zipnews. Następnie przepytałem czytelników o ich opinie (za pomocą Survicate i normalnych pytań wśród znajomych). Powstało coś takiego:

zipnews - wersja prawie gotowa

To był kluczowy moment, bo bez testów mógłbym tylko zgadywać w którym kierunku iść nie mając żadnego sprzężenia zwrotnego od prawdziwych czytelników. W moim podejściu mogę robić to, czego potrzebują użytkownicy, a nie co wydaje mi się, że potrzebują.

5. Zacznij szukać grafika

W międzyczasie udało mi się od nowa napisać zupełnie od nowa skórkę, chociaż nie sądzę, żeby ktoś to zauważył. Nic dziwnego, bo celem było głównie przyśpieszenie działania poprzedniej skórki, która jak przypominam była nadpisanym gotowcem. „Nowa” skórka wygląda prawie tak samo jak w punkcie czwartym, ale pod maską jest zupełnie inna.

Zipnews - wersja z przepisaną skórką (jeszcze bez grafika)

Wykorzystałem natomiast kod utworzony w punkcie drugim, „backend” o którym wspomniałem w punkcie trzecim i oczywiście treść. Dla programistów (dobrych) to normalne, ale dla sporej części osób pewnie nie jest to jasne, że jeśli strona jest sensownie zrobiona, to można sobie podmienić jedną rzecz, a reszta zostanie bez zmian.

Ale wróćmy do grafika (a właściwie zacznijmy go szukać ;)). Mając odzew od ok. 300 osób i podpierając się zdarzeniami w Google Analytics (np. prawdziwy czas odwiedzin strony, procent przewinięcia strony, kliknięcia w niektóre linki) mogłem zabrać się za dopracowywanie szczegółów wyglądu i rozmów z grafikiem. Dopiero teraz!

Co z tego wyjdzie? Jeszce nie pochwalę się efektem, bo prace trwają (przypominam, że Zipnews nie ma jeszcze nawet dwóch miesięcy!), ale aż boję się pomyśleć jak wyglądałaby współpraca z grafikiem, gdybym z każdym nowym pomysłem zlecał mu narysowanie nowej wersji strony, a po tygodniu zmieniał zdanie ;).

Zresztą już teraz widzę, że z każdym tygodniem statystyki Zipnewsa pną się do góry. To samo można zrobić z każdą inną stroną, tylko warunek jest jeden: trzeba zmienić podejście i pokazać coś, co nie jest dopieszczone graficznie.

A już w środę — kontynuując serię o nowym podejściu do stron internetowych — zrobię coś zaskakująco skutecznego. Zapraszam ponownie!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *