Jak powinno się projektować serwisy internetowe, aby nie okazały się biznesową porażką

Wiele osób zlecających wykonanie serwisu internetowego pewnie zastanawia się, jak ten proces powinien przebiegać. Większość nie wie, czego tak naprawdę wymagać od wykonawcy lub też własnego zespołu. Postaram się zwrócić uwagę na kilka kluczowych obszarów, bez których stworzenie serwisu internetowego może okazać się biznesową katastrofą.

Istnieje bardzo dużo szkół projektowania serwisów internetowych. Teoretycznie, co developer to inne podejście. Istnieje wiele technologii, frameworków, języków, CMS-ów… Jednak przede wszystkim trzeba wiedzieć, na jakie etapy rozbić projekt oraz wdrożenie strony i kto odpowiada za poszczególne zakresy. Do udzielenia komentarzy do poszczególnych etapów zaprosiłem Piotra Marszałkowskiego, autora bloga ux.marszalkowski.org (jego wypowiedzi wyróżniłem w boksach). Piotr posiada dużo większe doświadczenie w projektach UX ode mnie, więc mam nadzieję, że jego uwagi dodatkowo podniosą wartość merytoryczną tego artykułu i będziecie mieć z niego więcej pożytku.

Strategia serwisu

Byłem świadkiem projektowania wielu stron i sklepów internetowych, dla których punktem wyjścia było zazwyczaj stwierdzenie o ten serwis mi się podoba – zróbmy podobny. W oparciu o taką „analizę” porównawczą webdeveloper/designer, czy ktokolwiek zajmował się tworzeniem projektu (lub zakupem gotowego szablonu) przygotowywał konkretny layout, który potem trzeba było jakoś wypełnić treścią i wrzucić do internetu. Czy to właściwe podejście? Niekoniecznie.

Przede wszystkim należy odpowiedzieć sobie na pytania:

1. Jaki jest podstawowy cel serwisu? Gdzie będzie następować konwersja? Czy chodzi o sprzedaż produktu, czy może o wygenerowanie zapytania ofertowego? A może o nawiązanie kontaktu z konsultantem i omówienie możliwych opcji współpracy? Każdy z tych celów implikuje inne rozwiązania projektowe.
2. Jakie działania marketingowe będą realizowane, aby przyciągnąć użytkowników, potencjalnych klientów? Jeśli nastawiasz się na ruch z SEO, social media, czy też Google AdWords, czy budowanie bazy newslettera, to może to mieć ogromny wpływ na fazę projektową. Potem może być za późno, aby o tym myśleć lub będzie to generowało dodatkowe koszty.
3. Czy mamy zasoby, aby realizować owe działania marketingowe? Bo jeśli nie, to w jaki sposób serwis ma realizować swój cel? Spotykałem się z serwisami, które nie mogły być skuteczne, bo powstawały z błędnymi założeniami, co do późniejszych działań promocyjnych. Tu potrzebna jest konsultacja, analiza strategiczna i świadome rozdysponowanie zasobów. Stworzenie serwisu, a potem myślenie, aby zlecić komuś pozycjonowanie to nie jest optymalna droga.

Na tym etapie dobrze też wstępnie określić ramy finansowe i czasowe projektu. Do tego będzie potrzebna opinia i wycena pracy zespołu łączącego (w minimalnym zakresie) następujące kompetencje: specjalisty UX, specjalisty SEO, grafika, developera, a także osoby odpowiedzialnej za treści.

Piotr Marszałkowski: Myślę, że to co jest istotne na tym etapie to maksymalna ilość danych analitycznych, którą można wykorzystać później. Jeżeli jakaś strona istniała tam wcześniej to Google Analytics, Facebook, Kiss Metrics dużo nam powie o tym skąd przychodzili użytkownicy, kim byli (dane demograficzne), co ich interesowało. Jeżeli nie mamy dostępu do tego typu danych to powinniśmy skupić się na konkurencji, wybrać najciekawsze rozwiązania (popularne). Jeżeli budżet pozwala powinniśmy zrekrutować, kilku potencjalnych testerów w celu przetestowania stron konkurencji. Takie testy bardzo otwierają oczy makieciarzom oraz grafikom, którzy projektują serwisy w oparciu o realne wskazówki. To dużo lepszy start, nie ma co wywarzać otwartych drzwi.

Architektura informacji strony internetowej

Określenie jakie zasoby znajdą się w serwisie, jak będą podzielone, jakie będą między nimi połączenia i jak będziemy prowadzić użytkownika (lub różne persony i grupy użytkowników) to absolutna podstawa. Dopóki ten etap nie zostanie porządnie przeanalizowany i zweryfikowany, to nie ma co przechodzić do dalszych działań. Jest to obszar bardzo często marginalizowany, bagatelizowany lub wręcz pomijany!

Bardzo istotna kwestia – to nie jest zadanie dla grafika! To obszar działania, którym powinien zająć się specjalista od UX/UI wraz ze specjalistą SEO (w przypadku pracy nad sklepem internetowym nieoceniona będzie także pomoc doświadczonego e-commerce managera). Negatywnym skutkiem bagatelizowania tego zakresu jest często nieskuteczny, trudny w zrozumieniu system nawigacji. Przez to użytkownicy nie poruszają się w obrębie serwisu w sposób optymalny i nie realizują skutecznie swoich celów oraz konwersji.

Interakcje, komunikaty, prowadzenie do punktu konwersji

Ten etap jest tak naprawdę wdrożeniem w życie tego, co zostało na wyższym stopniu ogólności opracowane w poprzednich fazach. Tutaj dobierane są już konkretne rozwiązania. Tutaj skupiamy się już na bezpośrednich doświadczeniach użytkowników, którzy muszą otrzymać określone komunikaty, aby wiedzieć, jak się poruszać w obrębie serwisu. Strona musi zawierać odpowiednio zaprezentowane i opracowane treści. W kluczowych miejscach powinny znaleźć się formularze (zapisu, logowania, kontaktu etc.). To jest najbardziej namacalny etap prac z zakresu user experience.

Makiety

Efektem pracy designerów, analityków, marketerów pracujących wcześniej przy projekcie powinna być jasna wizja tego, co w danym serwisie powinno się znaleźć, jakie są priorytety, cele etc. W efekcie powinny powstać makiety, które są de facto szkicem rozmieszczenia konkretnych elementów (z ich opisem i sposobem działania – linki, buttony, formularze etc.).

Etap ten bywa niestety pomijany i grafik często w oparciu o zdawkowe informacje projektuje „na żywo” rozmieszczenie poszczególnych zasobów w obrębie layoutu. W ten sposób nie są uwzględniane funkcje poszczególnych elementów i w efekcie na koniec trzeba iść na różnego rodzaju kompromisy. W dobrze zarządzanym projekcie punktem wyjścia dla pracy grafika powinny być makiety funkcjonalne z uwzględnieniem każdego widoku występującego w serwisie. Mogą to być widoki: strony głównej,  strony kategorii i produktu, wyników wyszukiwania wewnętrznego, podstrony typu „o nas”, bloga, pojedynczego artykułu, konfiguratora, rejestracji, koszyka etc. Należy także pamiętać o uwzględnieniu mobile w tym wszystkim! Robi się z tego dużo pracy, wiem, ale jeśli jakość jest priorytetem, to nie można tego ignorować już na samym początku.

PM: Nie wiem czy wiecie ale badania pokazują, że burze mózgów wcale nie powiększają puli pomysłów ani nie integrują lepiej zespołu. Co może niekiedy dotyczyć wspólnej pracy nad projektem www. Ideą główną makiety jest możliwość taniego przetestowania naszej strony www. Nasze założenia, nawet najbardziej doświadczonych grafików, UX designerów, czy project managerów są obciążone błędami poznawczymi, które mogą wpływać na jakość serwisu ergo na sukces naszego przedsięwzięcia. Dlatego z pomocą mogą nam przyjść testerzy zdalni/stacjonarni w zależności do budżetu. Jeżeli dobierzemy testerów w oparciu o dokładne charakterystyki naszych klientów otrzymamy wiele ciekawych wniosków, które naniesiemy na makietę. Uwaga, niedokładnie opracowany profil klienta może doprowadzić do błędnych wniosków pochodzących z testów. Czym strona dotyczy bardziej specjalistycznej branży (nisza), tym większe prawdopodobieństwo wystąpienia takich błędów.

Content – treści tekstowe (i nie tylko)

Treść serwisu może mieć bardzo różny charakter. Możemy mówić tu o opisach produktów, tekstach ofertowych, formularzach, a także artykułach poradnikowych czy FAQ. Ważne, aby treści były przygotowane w kontekście konkretnych celów i założeń. Nie jest to też praca dla sekretarki czy asystenta zarządu. Tym powinien zająć się ktoś, kto posiada chociaż podstawową wiedzę i doświadczenie z zakresu copywritingu.

Tworzenie contentu może odbywać się równolegle z późniejszymi pracami grafika, lecz wskazane jest, aby grafik przystępując do pracy już miał próbki tekstów, które znajdą się w poszczególnych widokach. Konieczne jest tu chociażby ocenienie obszerności poszczególnych pól tekstowych (lub innych).

Layout – projekt graficzny

Przygotowanie layoutu to dopiero moment, w którym może i powinien wykazać się grafik. Powinien dostać komplet informacji na temat układu poszczególnych elementów. Jeśli firma posiada odpowiedni system identyfikacji wizualnej, to koniecznie powinien zostać przekazany na samym początku grafikowi. Jeśli nie posiada, to warto się zastanowić, czy to nie jest odpowiedni moment, aby go stworzyć.

Na tym etapie również przydadzą się konsultacje specjalisty UX. Ich celem powinien być dobór optymalnych z perspektywy estetyki i funkcjonalności kolorów, które będą sprzyjać realizowaniu poszczególnych celów (np. przyswajanie treści na blogu lub dodawanie produktów do koszyka i finalizowanie transakcji).

W tym kontekście koniecznie należy przeczytać: 12 czynników związanych z wyglądem Twojego sklepu, które zabijają jego skuteczność

Tutaj skrótowa prezentacja z WordUp Silesia, gdzie poruszyłem konkretnie te zagadnienia:

Wdrożenie strony

Tutaj do gry wchodzi tzw. informatyk (przeczytaj także: SEO w wykonaniu „dobrych” informatyków), a właściwie developer odpowiedzialny za przełożenie produktu pracy grafika (layout serwisu w plikach PSD) i pozostałych specjalistów (odpowiedzialnych za strategię oraz opis funkcjonalny serwisu) na realnie funkcjonujący serwis. Ważne, aby na tym etapie prowadzone były także konsultacje ze specjalistą SEO (jeśli serwis ma generować także ruch z wyszukiwarek), gdyż podczas wdrożenia również można popełnić szereg błędów (przeczytaj o problemach związanych z indeksowaniem i innych błędach technicznych w e-commerce).

Wdrożenie następuje na końcu, lecz tak naprawdę istotne jest, aby programista / developer już na początku uczestniczył w pracach zespołu. Pozwoli to wybrać optymalne rozwiązania technologiczne. Później może się okazać, że coś, co wymyślił projektant interfejsu i specjalista UX jest możliwe do wykonania, lecz w praktyce dość drogie i nieoptymalne z perspektywy biznesu.

Wskazane, aby na etapie wdrożenia przeprowadzić jeszcze finalny audyt UX, który pozwoli stwierdzić, czy założenia projektu zostały spełnione.

PM: Z artykułu można by wnioskować, że tu kończy się nasza praca. Możemy zwalniać grafików oraz UXów z pracy, bo już na nic nam się nie przydadzą. Nic bardziej mylnego. Po wdrożeniu powinniśmy powtórzyć testy na użytkownikach docelowych. Strona po wdrożeniu i makieta bardzo się różnią, co bezpośrednio wpływa na jej odbiór. Testy powinniśmy regularnie powtarzać po kolejnych zmianach/iteracjach. P.S. To na co również warto zwrócić uwagę na tym etapie to testy A/B. Każda strona ma jakiś cel: sprzedaż, rejestracja na wydarzenie, pobranie ebooka etc. Tutaj możemy rozpocząć zabawę z drobnymi testami zamiennymi by znaleźć najlepiej konwertujące czynniki na naszej stronie www. Takie testy A/B mogą dotyczyć treść guzika call to action, rozmieszczenie go na stronie, kolorów, tekstów sprzedażowych itd. Warto zagłębić się w tą tematykę gdy już wdrożymy nasz serwis. Drobne zmiany mogą dodatkowo podnieść konwersję nawet o 100%.

Podsumowanie

Opisane powyżej etapy nie są żadną biblią tworzenia serwisów. Nie należy do nich podchodzić w zbyt doktrynalny sposób. Często się przenikają, nakładają w czasie oraz są wykonywane przez najróżniejsze konfiguracje zespołów projektowych. Ważne, aby nie były pominięte i każdy z nich został przeprowadzony w sposób rzetelny.

Na każdym z etapów warto pamiętać, aby przyjąć w procesie projektowania odpowiednią postawę. Ważna jest umiejętność unikania stwierdzeń i założeń typu „ja bym to zrobił tak”, „ja bym w to nie kliknął”, „najbardziej lubię kiedy treści są zaprezentowane w ten sposób” itp. Należy pamiętać, że projektujemy nie dla siebie! Nie projektujemy także dla zleceniodawcy, więc jego wytyczne co do funkcjonalności i użyteczności także mogą być szkodliwe, a założenia błędne. Kluczem jest porządna analiza grupy docelowej, badania z użytkownikami, analiza porównawcza (nie mylić z bezmyślnym kopiowaniem rozwiązań konkurencji). Jeśli nie wiesz, jak się za to zabrać, potrzebujesz konsultacji lub wsparcia na poszczególnych etapach projektu, skontaktuj się ze mną.