Praca nad stroną internetową to proces, który potrzebuje indywidualnego podejścia. Jest on niezbędny, aby stworzona witryna mogła w przyszłości skutecznie realizować cele. Każdy projekt to inne wyzwania i problemy, dlatego wymaga doboru odpowiednich badań, narzędzi oraz procesu projektowego, by im sprostać. Dobór zależy nie tylko od przeznaczenia strony, lecz także od tego czy jest tworzona dla firmy, która jeszcze nie posiada własnej witryny, czy przedsiębiorstwa, które pragnie odświeżyć stronę, ponieważ stara nie spełnia już standardów.

Redesign to nie tylko zmiana wyglądu witryny

 Większość firm gdy widzi, że ich strona internetowa odbiega od nowoczesnych standardów decyduje się na redesign, czyli stworzenie witryny na nowo. Częstym impulsem do takich zmian są działania konkurencji, która postanowiła zmienić stronę, co motywuje firmy do odświeżenia własnej witryny. W takim przypadku stara strona jest świetną bazą do analizy i sprawdzenia, z jakimi problemami borykała się do tej pory. Często wydaje się, że wystarczającym zabiegiem będzie zmiana warstwy graficznej na nowoczesną i dopasowaną do trendów, lecz jest to tylko jeden z elementów, jaki należy poprawić. Na tym etapie, warto przemyśleć strategię zmian, aby prace nad nową witryną nie poszły na marne.

Zanim zaczniemy jakiekolwiek działania, warto sprawdzić dane zastane starej strony. Jeżeli mamy odrobinę szczęścia to strona posiada podpięty moduł Google Analytics lub Hotjar, co pozwala wyciągnąć pierwsze wnioski. Dane możemy skonfrontować z architekturą strony oraz ścieżkami użytkowników. Tutaj świetnie sprawdzi się Audyt UX, który wskaże większość problemów i pomoże zdefiniować nowe cele i potrzeby użytkowników, które ulegają zmianom wraz z upływającym czasem.

Audyt UX dostarczy niezbędnej wiedzy

Audyt UX to analiza strony lub aplikacji, przeprowadzona przez specjalistę w celu sprawdzenia błędów, czy też braku zgodności z obecnymi standardami. Pozwala on lepiej zrozumieć użytkowników istniejącej strony i zapobiec błędom na nowej witrynie.

Specjalista sprawdza wszystkie aspekty związane z użytecznością strony internetowej. Poniżej lista obszarów, jakie najczęściej są analizowane:

• architektura informacji,
• ścieżki użytkownika,
• komunikaty / teksty,
• zgodność warstwy graficznej z wartościami marki,
• zgodność ze standardami WCAG,
• analiza danych Google Analytics /

Podsumowaniem Audytu UX jest raport wskazujący błędy oraz ich przyczyny wraz z rekomendacjami. Tak przygotowane dane ułatwiają znacząco prace w kolejnych etapach. Przede wszystkim operujemy na realnych danych, a nie intuicji czy hipotezach.

Badania można prowadzić na każdym etapie projektu

Posiadając raport audytu UX, można rozpocząć fazę badań. Ten etap może być prowadzony równolegle z innymi etapami i trwać do samego końca projektu. Jest on niezwykle istotny, gdyż dostarcza realne informacje oraz pozwala zbadać nowe rozwiązania, zanim zostaną wdrożone. Dzięki temu możemy przygotować stronę pozbawioną większości błędów, których usunięcie już po wdrożeniu byłoby niezwykle czasochłonne i drogie.

Badania należy zacząć od postawienia celów oraz stworzenia planu badawczego. Wiedząc, czego chcemy się dowiedzieć, możemy dobrać właściwe metody badawcze dla odpowiednich etapów prac. Dlatego każdy projekt, ma swój indywidualny proces. W różnych projektach możemy potrzebować odmiennych danych i możemy je otrzymywać na innych etapach. Na początku dzięki badaniom poznajemy użytkowników, aby stworzyć odpowiednią strategię działań, w późniejszych fazach konfrontujemy nasze rozwiązania, wykonując testy użyteczności.

Przeprowadzając wywiady z klientem, pracownikami firmy czy użytkownikami poznajemy ich odczucia oraz problemy podczas korzystania ze strony. Zebrane dane pozwalają ustalić dalszą strategię działań. Pomoże to nam także w potwierdzeniu, jacy użytkownicy odwiedzają naszą stronę. Jest to kluczowy aspekt, którego ustalenie pozwoli nam na stworzenie person (profili przykładowych klientów) oraz znalezieniu odpowiednich użytkowników do testowania nowych rozwiązań.

Rozwiązania te powinny być zorientowane na użytkownika, więc dobrze stworzona persona pozwoli skupić się na realnych potrzebach ludzi, ich preferencjach oraz problemach.

Kiedy zgromadzone dane są wystarczające i mamy zdefiniowany cel, możemy opracować nowe ścieżki użytkowników wraz ze strukturą strony. Jeżeli mamy do czynienia z bardzo rozbudowaną strukturą, która musi zostać przebudowana, warto zbadać nową wersję wraz z użytkownikami. Do tego celu można wykorzystać metody sortowania kart lub tree test. Dzięki temu sprawdzimy, jak realni użytkownicy odnajdują się w nowej strukturze.

Korzyści przeprowadzenia etapu badań:

• poznanie nowych potrzeb użytkowników,
• zrozumienie oczekiwań i obaw użytkowników,
• weryfikacja założeń projektu,
• minimalizowanie błędów.

Makiety pozwalają efektywniej tworzyć strony WWW

Tworzenie makiet to etap, w którym wizualizujemy swoje rozwiązania na podstawie zebranych danych. Dzięki szybkości wprowadzania zmian to najlepszy moment na przetestowanie nowych rozwiązań. Makiety nie mają warstwy graficznej, dlatego możemy skupić się tylko na skuteczności zawartych funkcji oraz logice całego serwisu. Przedstawienie rozwiązań w takiej formie pozwala na skuteczniejszą komunikację z klientem podczas warsztatów. Łatwość wprowadzania modyfikacji pozwala na zmiany nawet w trakcie spotkań, dzięki czemu sprawniej możemy weryfikować założenia projektu.

Makiety mogą przybierać formę szkiców (na wczesnym etapie prac) lub bardziej szczegółowych widoków, stworzonych za pomocą odpowiedniego oprogramowania. Przy wykorzystaniu adekwatnej aplikacji nasze makiety, mogą być bardzo dokładne i posiadać klikalne widoki strony. Dzięki temu możemy, przejść przez wszystkie ścieżki tak jakbyśmy korzystali z istniejącej strony. Jest to istotne, gdyż część błędów znajdziemy tylko wtedy, gdy „przeklikamy się” przez wszystkie ścieżki. Kolejnym atutem makiet jest łatwość rozplanowania przygotowanych tekstów. W razie potrzeby teksty mogą być szybko modyfikowane lub dostosowane do wymagań

SEO.

Etap ten z powodzeniem można wykorzystać do przeprowadzenia testów użyteczności. Kluczowe ścieżki jak np. ścieżka zakupowa lub sposób eksploracji produktów, mogą zostać udostępnione do przeprowadzenia testów. Sprawdzenie ich poprawności z grupą docelową pozwala dopracować makiety przed etapem graficznym, w którym wprowadzanie zmian jest bardziej czasochłonne.

Sposób przeprowadzania testów, zależy od aspektów, jakie chcemy sprawdzić. Najważniejsze jest jednak aby zostały one przeprowadzone skutecznie z odpowiednią grupą użytkowników. W innym wypadku bazowalibyśmy na błędnych informacjach. Jakość danych to podstawa, dlatego trzeba zadbać, by grupa testerów była odpowiednikiem wypracowanych person. Testując założenia sklepu dla seniorów z grupą studentów, nie pozwoli pozyskać danych o odpowiedniej jakości, a w dodatku wprowadzi nas w błąd.

Design — to nie sztuka dla sztuki, a przemyślane założenia graficzne

Projektowanie graficzne strony internetowej to etap, który warto zacząć gdy makiety są już gotowe — pozwala to skupić się wyłącznie na walorach estetycznych. Zanim jednak zaczniemy należy zadbać o to by warstwa graficzna była zgodna z wartościami marki. Sprawdzenie księgi znaku czy strategii marki to zazwyczaj pierwsze kroki projektanta. Tworzony design nie może być tylko efektem kreatywności czy obecnych trendów, lecz przede wszystkim zgodny z wartościami firmy i emocjami, jakie powinien wywoływać u użytkowników.

Opracowanie kierunku stylistycznego dla nowej strony to trudne zadanie. Często w projekt zaangażowanych jest kilka osób po stronie klienta, a każda z nich ma inny gust i wyobrażenie na to jak nowa strona powinna wyglądać. Mimo wszystko dzięki poprzednim etapom klient jest świadomy logiki strony i wartości, jakie powinny zostać przekazane przez warstwę graficzną, co ułatwia zadanie. Dlatego należy dobrze przygotować się do prac i skonfrontować swoje pomysły z wyobrażeniami klienta, zanim rozpoczniemy prace na dobre. Pomoże to zaoszczędzić mnóstwo czasu, który mógłby pójść na marne, tworząc projekt bez konsultacji kierunku stylistycznego z klientem.

Tworzone projekty poszczególnych podstron zwykle przekazywane są fragmentami, aby omówić ich wygląd z klientem. Pozwala to na utrzymanie spójności w razie zmian, jakie mogą zostać wypracowane podczas warsztatów. Sam sposób pracy czy komunikacji jest podobny jak na etapie makiet. Projekty przekazywane są jako klikalne prototypy, dzięki czemu możemy przetestować całość jak normalną stronę. Unikamy dzięki temu błędów, braków lub sprawdzamy wpływ grafiki na postrzeganie odpowiednich funkcji serwisu.

Wszystkie tworzone strony, powinny być po wdrożeniu responsywne. Dlatego należy zadbać, aby projekty odpowiednio się skalowały przy wyświetlaniu na różnych urządzeniach. To w jak rozbudowany sposób zostaną przygotowywane, zależy od projektu oraz preferencji użytkowników. Sama grafika powinna być przygotowana w taki sposób, żeby grupa docelowa nie miała problemów odczytywaniem z niej informacji. Aktualnie strony w sieci są bardzo szybko przeglądane, wręcz skanowane, co wymaga odpowiednich decyzji, co i w jaki sposób prezentować. Aspekt ten można zbadać poprzez tzw. test 5 sekund, który sprawdza, czy użytkownik po wejściu na stronę rozpoznaje jej przeznaczenie. Już po kilku sekundach użytkownik wyrabia sobie opinię o stronie i postanawia czy będzie ją eksplorował lub po prostu z niej wyjdzie.

Długie teksty i nudna grafika nie zachęcają do pozostania na stronie i przeczytania treści. Trzeba pamiętać o odpowiednich nagłówkach, hierarchii, rytmie między elementami czy infografikach, które skuteczniej niż tekst przekażą pewne informacje. Na koniec trzeba też sprawdzić, czy wszystko jest zgodne ze standardami WCAG, żeby strona była dostępna dla każdego użytkownika. W skrócie są to zasady, które ułatwiają przeglądanie Internetu przez osoby niewidome, niesłyszące lub z niepełnosprawnością ruchową. Wszystko to powinno być zgodne z założonymi celami biznesowymi oraz odpowiednim przepływem użytkowników. Sam „efekt wow” na niewiele się zda jeżeli koniec końców nie osiągniemy założonych celów przez przeładowaną grafikę. Możemy też na tym etapie przeprowadzać testy użyteczności. Otrzymane wyniki można skonfrontować z wynikami uzyskanymi na etapie makiet. Często odkrywane są wtedy mniejsze błędy, które na etapie makiet były niewidoczne przez inne. Testować warto na każdym etapie a po wdrożeniu obserwować i udoskonalać.

Wdrożenie

Ostatni etap to przekazanie strony do wdrożenia. Najlepiej gdy wdrożenie przeprowadza ta sama firma, która zajmuje się projektowaniem, unikniemy wtedy problemów związanych z komunikacją. Czasami jednak zdarza się, że wdrożenie przeprowadza inna firma. Jednym z najważniejszych aspektów w takim przypadku jest odpowiednie przekazanie projektów do działu wdrożeniowego. Obecnie ułatwiają to dostępne na rynku aplikacje, mimo wszystko warto porozmawiać i przedstawić wszystkie szczegóły projektu osobom odpowiedzialnym za wdrożenie. Pozwoli to na uniknięcie błędów i nieporozumień.

Sama technologia czy sposób wdrożenia jest wynikiem potrzeb, jakie musi spełniać strona internetowa. Większość stron posiada system do zarządzania treścią — CMS — który ułatwia edycję treści. Sam dobór CMS-a powinien być dostosowany do specyfiki strony. Na rynku są dostępne darmowe systemy jak WordPress. Można też skorzystać z systemu szytego na miarę, który sprosta specyficznym potrzebom projektu. Trzeba jednak pamiętać, że skazujemy się często na współpracę z jedną firmą, która go napisała. Systemy ogólnodostępne takie jak Worpress są powszechnie znane, często aktualizowane co podnosi ich bezpieczeństwo i odporność na ataki z zewnątrz. Strona oparta o takie rozwiązanie może być w przyszłości łatwo modyfikowana nawet przez firmę zewnętrzną, która również pracuje w danej technologii.

Warto też zadbać o zainstalowanie takich narzędzi jak Google Analytics, czy Hotjar, które zbierają dane o użytkownikach. Nawet jak nie będziemy z tego korzystać w najbliższym czasie, to zebrane dane będą dostępne na wyciągnięcie ręki w przyszłości. Zanim odbierzemy wdrożoną stronę, należy sprawdzić szybkość jej wczytywania. Jest to aspekt wpływający na pozycjonowanie, więc dobrze stworzona strona powinna działać szybko. Możemy to sprawdzić np. za pomocą narzędzia Google „PageSpeed Insights”.

Proces tworzenia strony powinien być dostosowany do projektu. Każdy etap jest ważny i wpływa na kolejny, lecz przeprowadzony w odpowiedni sposób pozwala na skuteczne osiągnięcie założonych celów. Nie można zapominać o częstych aktualizacjach treści na stronie oraz stałym jej rozwoju. Tylko tak prowadzony serwis będzie spełniał postawione przed nim cele, jak i również pozwoli osiągnąć wysokie wyniki w indeksach wyszukiwarek. Strona internetowa jest inwestycją, a zarazem narzędziem dla Twojego biznesu, który pomoże pozyskać nowych klientów i zwiększyć obroty firmy.

Piotr Strzembowicz

UI/UX Designer w agencji JAAQOB HOLDING™. 12 lat doświadczenia komercyjnego w agencjach interaktywnych. Specjalizuje się w projektowaniu cyfrowego doświadczenia użytkownika.