Jeśli trafiłeś na ten tekst to z pewnością interesujesz się praktyczną stroną swojego serwisu internetowego – doskonale! Przejdziemy zatem przez najważniejsze zagadnienia UX w WordPressie razem.
W treści poniżej postaramy się naszkicować istotne dla użytkowników elementy strony, pokazać na jakie błędy powinieneś uważać oraz jakie narzędzia pomogą Ci zrozumieć reakcje odbiorców.
UX w WordPressie
Czy wiesz, że aż 43,2% wszystkich stron internetowych jest obsługiwana przez WordPress?
Oznacza to, że 2 na 5 odwiedzanych statystycznie serwisów internetowych wykorzystuje ten popularny CMS. Choć oprogramowanie pojawiło się dwadzieścia lat temu (wiem, wiem, trudno w to uwierzyć) i zostało opracowane jako system zarządzania treściami blogowymi to bardzo szybko rozwinęło się do roli wszechstronnej platformy do obsługi stron firmowych czy dużych sklepów internetowych.
Popularność WordPressa przyczyniła się do powstania wielu wtyczek i rozwiązań, które ułatwiają codzienną pracę osobom posługującym się CMSem. Nie dziwi zatem fakt, że dotychczas na rynku pojawiło się ponad 60 000 pluginów o zróżnicowanych zadaniach i przeznaczeniu.
Zacznijmy jednak od podstaw, a właściwie od sprawców całego zamieszania – Twoich użytkowników.
Poznaj użytkowników strony WP
Jak poznać użytkowników serwisu internetowego i ich wymagania? To pytanie zadaje sobie większość projektantów stron i aplikacji. Może wyda Ci się to zaskakujące, ale odpowiedź jest prostsza niż mogłoby się wydawać: potrzeba Ci nieco wyobraźni i życiowego doświadczenia.
Spróbujmy podejść do sprawy na konkretnym przykładzie.
Wyobraź sobie, że prowadzisz wypożyczalnie samochodów nad morzem. W Twojej flocie znajduje się wiele różnych modeli aut, głównie osobowych, ponieważ wynajmujesz pojazdy głównie turystom na krótki okres czasu. Kiedy zjawia się klient chcesz poznać jego oczekiwania, aby zaproponować najlepszy model, zamiast godzinę biegać po placu i pokazywać każde auto z osobna – nie masz na to czasu! Sezon urlopowy trwa w najlepsze!
Jakie pytania zadasz potencjalnemu turyście?
1. Ile osób będzie z nim podróżować? (Wystarczy auto trzydrzwiowe, czy rodzinne kombi?)
2. Jaką skrzynię biegów preferuje kierowca? (Może od 10 lat nie obsługiwał drążka zmiany biegów?)
3. Czy jest potrzebny większy bagażnik? (Czy będzie potrzebny rodzinny, przestronny van z dużym bagażnikiem na wózek dziecięcy czy mały kabriolet dla dwojga?)
Odpowiedzi uzyskane na zaledwie trzy pytania pozwalają znacznie zawęzić obszar poszukiwań. Z punktu widzenia pracownika wypożyczalni mamy jasność jakie auta musi pokazać klientowi, a teraz zmieńmy punkt widzenia i wcielamy się w potencjalnego wypożyczającego – czego może szukać turysta poszukujący auta nad morzem?
,,Chciałbym wypożyczyć auto na dwa dni dla mojej czteroosobowej rodziny. Jedziemy na wycieczkę wzdłuż wybrzeża. Zależy mi na wygodnym aucie z klimatyzacją i miejscem z tyłu, ponieważ podróżuje z nami jeszcze pies. Wolę automatyczną skrzynię biegów, ponieważ żona jest przyzwyczajona do takiego kierowania autem, a wieczorem na promenadzie chcę wypić piwo i to ona będzie wracała do hotelu.”
Przybliżone dwie perspektywy pozwalają nam zobaczyć punkty wspólne oczekiwań informacyjnych obu stron.
1. Zarówno w przypadku pracownika, jak i wypożyczającego pojawiła się kwestia wielkości auta.
2. Ważny dla obu stron był także aspekt techniczny – rodzaj skrzyni biegów.
3. Bagażnik wydaje się istotnym elementem, choć w drugim przypadku nie zostało to wyartykułowane w sposób dosłowny.
Na podstawie już tych informacji możemy określić jakie elementy powinny pojawić się w serwisie klienta, gdybyśmy projektowali internetową wypożyczalnie samochodów.
Na pewno w menu powinna pojawić się zakładka ,,dostępne auta”, a w niej ,,karty produktowe” poszczególnych modeli.
Atrybutami, jakimi należałoby opisać konkretne pozycje byłyby: wielkość (liczba miejsc), pojemność bagażnika oraz typ skrzyni biegów. Takich informacji będzie szukał nasz użytkownik w pierwszej kolejności. Gdy już znajdzie odpowiedni model zainteresuje się ceną usługi oraz kwestią ubezpieczenia i warunków umowy.
Teza tak przeprowadzonego eksperymentu myślowego, dla projektanta UX brzmi: potencjalny użytkownik najpierw trafi na stronę główną, następnie będzie starał się dotrzeć do podstron produktowych z dostępnymi autami, to one zdecydują czy potencjalny klient podejmie się dalszych działań w serwisie, dlatego muszą być przejrzyste, proste w obsłudze, a wskazane wyżej atrybuty mocno podkreślone.
Czy nasza teza ma sens? W teorii tak, ale w projektowaniu dobrego UX nie jesteśmy teoretykami lecz dokładnymi praktykami, dlatego posłużymy się dwoma narzędziami WordPressa, aby zweryfikować nasze przypuszczenia.
Google Analytics w WordPressie
Najprostszą metodą poznania zachowań w serwisie internetowym jest zaimplementowanie kodu Google Analytics w WordPressie, zrobisz to za pomocą odpowiedniej wtyczki np. Google Analytics Dashboard for WP lub innego darmowego plugina.
Utwórz konto w Google Analytics 4, skopiuj kod śledzenia i wklej do wyznaczonego miejsca – et voila! Już wiesz jak poruszają się po Twojej stronie użytkownicy, jakie podstrony klikają, czy trafiają częściej na wybrane modele dostępnych samochodów czy jednak przechodzą od razu do cennika.
Pamiętaj jednak, że zgodnie ze zmianami w polityce prywatności użytkowników internetu powinieneś odpowiednio skonfigurować Consent mode na swojej stronie – o tym jak to dokładnie zrobić opowiedzą nasi specjaliści z zespołu SEM.
Dane zbierane w Analytics 4, odpowiednio połączone z WordPressem pozwolą także odkryć wiele innych cech odbiorców Twojej domeny – gdzie mieszkają? w jakim języku poszukują informacji? jak wyglądają ich cechy demograficzne?
Taka wiedza okazuje się nieocenioną przy projektowaniu optymalnych rozwiązań UX dla serwisów internetowych i aplikacji mobilnych.
Mapy cieplne z Hotjar w WordPressie
Wdrożenie i odczytywanie danych z Google Analytics 4 pozwalają naszkicować ogólny schemat poruszania się użytkownika po całym analizowanym serwisie, często jednak analizy wymagają dokładniejszych danych.
Wróćmy na chwilę do naszej, hipotetycznej wypożyczalni aut i przyjrzyjmy się podstronom produktowym. Użytkownicy spędzają na nich dużo czasu, chciałbyś wiedzieć na czym skupiają swoją uwagę? W takich momentach nieocenione okazują się mapy cieplne, generowane przez wtyczkę Hotjar. Rozszerzenie skanuje wybraną podstronę i zaznacza ciepłymi odcieniami miejsca, na których zatrzymują się przewijający stronę, dzięki czemu na chłodnym (niebieskim, szarym) tle tworzą się ciepłe w tonacji (od żółtej, przez pomarańczową do czerwonej) plamy. Dla osoby analizującej zachowanie użytkowników w serwisie to niezwykle cenne informacje, mówią o tym czy dane o samochodach są odpowiednio widoczne i rozpoznane przez poszukujących. Jeśli na przykład wiele osób skupia uwagę na statycznej tabeli z danymi typie skrzyni biegów, zamiast klikać w nią bez rezultatu oznacza to, że informacja jest czytelna i odbiorca zaspokoił swoją potrzebę pozyskania informacji o sposobie obsługi samochodu.
Hotjar umożliwia także pomiar czasu jaki użytkownicy spędzają na stronie lub jej podstronach to również fundamentalna kwestia – jeśli procent bezwartościowych wizyt jest znaczący a czas spędzony w serwisie bardzo długi może to oznaczać, że klienci bezowocnie poszukują dodatkowych informacji, których nie znajdują i dlatego rezygnują z usługi. Chcąc lepiej zweryfikować taki przypadek sprawdź, również w Hotjar, w które miejsca klikają Twoi użytkownicy wówczas szybko odnajdziesz obiekty problematyczne lub niedopracowane.
Wtyczka WPtouch Pro
Ostatnia wtyczka w zestawieniu to propozycja z kategorii premium, jednak wciąż warta wdrożenia.
Powróćmy na koniec do naszej internetowej wypożyczalni aut. Wyobraźmy sobie, że w oczekiwaniu na samolot w ciepłe kraje chciałbyś zarezerwować samochód, aby na miejscu nie musieć się już tym martwić (a do tego masz mnóstwo czasu po odprawie), bagaż już nadany, więc sięgasz po swojego smartphona, szybko łączysz się z lotniskową siecią i przechodzisz do wybranej firmy. Przeglądałeś witrynę przed urlopem, jeszcze w pracy na laptopie i wszystko wyglądało dobrze, a teraz przeżywasz istne katusze! Serwis długo się ładuje, przyciski są za małe i nie możesz ich kliknąć, menu się rozjeżdża – dramat! W tym miejscu dla projektanta stron opartych na WordPressie przychodzi wtyczka WPtouch Pro, która pomaga zoptymalizować serwis tak, aby poprawnie (i wygodnie) działał również na urządzeniach mobilnych. Znajdziesz w nim lekkie motywy, które nie obniżają wydajności strony oraz czynią ją responsywną. Rozszerzenie kosztuje około 80 dolarów rocznie, ale przy założeniu, iż prawie połowa światowego ruchu internetowego odbywa się za pośrednictwem urządzeń mobilnych, może warto taką inwestycję rozważyć?
Jeśli projektujesz strony internetowe w WordPressie powinieneś szczegółowo zapoznać się z oczekiwaniami i potrzebami swoich przyszłych użytkowników, pamiętaj, że odpowiedni research i analiza danych przed uruchomieniem serwisu zaprocentuje w przyszłości, dlatego nie wahaj się stworzyć odpowiedniego prototypu i przeprowadzić testów funkcjonalnych swojego projektu.
O rozwoju konkurencji w internecie nie trzeba nikogo przekonywać, dlatego zadbaj o to, aby Twoi użytkownicy przez złe User Experience nie zechcieli poszukać wygodniejszej alternatywy znajdującej się przecież o jeden klik niżej niż Twoja domena.
W obecnych czasach projektowanie stron internetowych wymaga znacznie więcej analiz i interdyscyplinarnego podejścia niż w latach minionych, dlatego warto zaufać specjalistom w dziedzinie UX.
Aleksandra Kluczykowska
Specjalistka ds. SEO