Dobrze zaprojektowana witryna to taka, w której użytkownik realizuje konkretne zadania, np. przesłanie formularza kontaktowego czy dokonanie zakupu. Często zdarza się jednak, iż pomimo dużego ruchu na www, nie zachowuje się on tak, jak tego oczekujesz. Co zrobić w takiej sytuacji? Zacznij od sprawdzenia, czy Twoja strona nie zniechęca użytkownika do działania. Zobacz jak pracują UX designerzy – poznaj 10 heurystyk Nielsena i sprawdź, jak dobrze je wykorzystać.
Analiza heurystyczna, actionable insights i optymalizacja konwersji
Heurystyki stanowią zestaw wytycznych, do których należy stosować się podczas projektowania i optymalizowania strony. Zostały sformułowane przez Jakoba Nielsena i Rolfa Molicha, ekspertów w dziedzinie użyteczności. Są oparte na długoletnich obserwacjach i badaniach dotyczących ludzkiej percepcji. Analiza www w oparciu o checklistę na bazie heurystyk pozwala na ewaluację witryny pod kątem jej użyteczności, dzięki czemu zlokalizujesz i zidentyfikujesz problematyczne obszary lub procesy na stronie.
Pamiętaj, iż same wnioski z badania nie niosą jeszcze korzyści dla Twojej firmy. najważniejsze jest to, aby na ich podstawie utworzyć tzw. actionable insights, czyli rekomendacje przekuwające wiedzę z raportu na konkretne działania. Jak to zrobić?
Dla przykładu: wyobraź sobie, iż analiza heurystyczna wykazała nieprawidłowości w zakresie trzeciej heurystyki (o której przeczytasz w dalszej części artykułu). Zasada ta mówi o powierzaniu użytkownikowi całkowitej kontroli nad jego działaniem i poruszaniem się na stronie. Tymczasem witryna oferująca diety pudełkowe, którą badasz, nie umożliwia dodania do koszyka kolejnej diety na etapie checkoutu, ani też usunięcia wybranej pozycji na etapie podglądu koszyka. Skutkuje to tym, iż użytkownik, który chciałby dokonać zmiany wyboru, nie ma takiej możliwości. W rezultacie może gwałtownie sfrustrować się i zamówić dietę u konkurencji, której strona www jest bardziej elastyczna.
W takiej sytuacji actionable insight będzie polegał na przedstawieniu problemu, możliwych dla niego rozwiązań i estymacji korzyści wynikających z wprowadzonych zmian. Twoją propozycją może być umieszczenie buttona “Dodaj następną dietę” na stronie checkoutu i ikony w podglądzie koszyka, dzięki której będzie można usunąć dany produkt. Na podstawie dotychczasowych danych w GA4 wyestymujesz z kolei, jak proponowane zmiany wpłyną na wzrost współczynnika konwersji.
Jeśli actionable insights dotyczą małych elementów, które można modyfikować dzięki niewielkich kosztów, zmiany warto wprowadzić od razu. jeżeli wnioski są związane z dużymi i kosztownymi procesami, rekomenduję przeprowadzić dodatkowe analizy oparte na danych ilościowych i jakościowych, które potwierdzą założenia z wcześniejszego badania.
10 heurystyk Nielsena – niezbędna checklista podczas audytu użyteczności
1. Pokazuj status systemu
Strona internetowa powinna na bieżąco informować użytkownika, w którym miejscu się znajduje i co w tej chwili się dzieje. Bez tej wiedzy użytkownik może czuć się zdezorientowany, a w rezultacie gwałtownie zniechęcić się i opuścić witrynę. Transparentność procesów niewątpliwie wpływa na podejmowane decyzje, a co za tym idzie – na przepustowość ścieżki do realizacji celów witryny. Poniżej znajdziesz 2 najważniejsze przykłady dobrych praktyk w ramach tej zasady.
Pasek nawigacyjny informujący, na którym etapie zamówienia znajduje się użytkownik, oraz – co ważne – ile i jakich kroków pozostało do dokonania zakupu.
Źródło: https://panel.gastropaczka.pl, dostęp na dzień 22.11.2023
Tzw. “breadcrumbs”, czyli okruszki informujące użytkownika o głębokości jego wizyty i umożliwiające szybkie przejście do bardziej ogólnych podstron.
Źródło: https://www.ikea.com/pl/pl/p/vareld-narzuta-ciemnoszary-00346445/, dostęp na dzień 22.11.2023
2. Zachowaj zgodność pomiędzy systemem a rzeczywistością
Treść witryny powinna być napisana prostym i naturalnym językiem, używanym przez zwykłych ludzi. Skutkuje to łatwym i szybkim zrozumieniem przekazu strony oraz identyfikacją miejsca, w którym użytkownik zrealizuje swoje potrzeby. Układ strony i elementy graficzne, które nie odbiegają od powszechnych standardów, umożliwią z kolei szybkie i intuicyjne przemieszczanie się między kluczowymi miejscami w witrynie.
Logo marki zwykle umieszcza się na górze, z lewej strony, z prawej z kolei widnieją często buttony/ikony zachęcające do zalogowania się (ikona osoby), podejrzenia koszyka (ikona koszyka lub wózka sklepowego) czy skorzystania z wyszukiwarki (ikona lupy).
Warto pamiętać również o normach społeczno-kulturowych, czego świetnym przykładem jest strona marki Samsung. Na świecie istnieją języki czytane od prawej do lewej (np. język arabski). W takich sytuacjach standardem jest umieszczanie logotypu w prawym górnym rogu, a strona tak naprawdę jest lustrzanym odbiciem wersji czytanej od lewej do prawej, np. w języku angielskim.
Źródło: https://www.samsung.com/uk/, dostęp na dzień 22.11.2023
Źródło: https://www.samsung.com/ae_ar/, dostęp na dzień 22.11.2023
3. Daj użytkownikowi pełną kontrolę
Powierzenie użytkownikowi pełnej kontroli oznacza umożliwienie mu dzięki interfejsu dokonywania wyborów, edytowania wcześniej wprowadzonych danych czy np. odznaczania konkretnych opcji. Ważne, by użytkownik miał poczucie decyzyjności i swobodnie poruszał się po stronie, co motywuje go do działania. Poniżej 3 przykłady dobrych praktyk w ramach tej heurystyki.
Ziaja daje użytkownikom możliwość: zalogowania się w celu skorzystania z promocji, pominięcie tej opcji przy użyciu buttona “kontynuuj zakupy” i dodatkowo zamknięcia pop-upu bez dokonywania decyzji.
Źródło: https://www.ziaja.com, dostęp na dzień 22.11.2023
Robiąc zakupy w Lego, można usunąć z koszyka pojedyncze sztuki produktów lub całą pozycję.
Źródło: https://www.lego.com/pl-pl/cart, dostęp na dzień 22.11.2023
Nakrywamy.pl w procesie zamówienia oferuje 3 możliwe ścieżki – kupujący może zalogować się, założyć konto, ale także dokonać zakupu bez rejestracji. Zdarza się, iż internauci zmuszani do podawania swoich danych rezygnują z zamówienia.
Źródło: https://www.nakrywamy.pl/formularz-zamowienia, dostęp na dzień 22.11.2023
4. Trzymaj się standardów i zachowaj spójność
Trzymając się standardów, o czym częściowo Nielsen wspomina również w heurystyce numer 2, należy koniecznie skupić się na spójności. Można podzielić ją na wewnętrzną i zewnętrzną.
Pierwsza z nich dotyczy na przykład fontów, palety kolorów czy styli buttonów stosowanych w obrębie całej witryny. Estetyczna i spójna wizualnie strona budzi zaufanie i wzmacnia poczucie obcowania z profesjonalną marką.
Drugi rodzaj spójności związany jest z powszechnie przyjętymi standardami w obszarze projektowania stron. Chodzi tutaj między innymi o umiejscowienie konkretnych elementów w witrynie (logotyp marki na górze, z prawej lub lewej strony), wizualizację kroków (ikona koszyka lub wózka sklepowego w prawnym górnym rogu na stronach e-commerce) czy podlinkowanie buttonów.
Pamiętaj, iż internauci przeglądają tysiące stron internetowych i gwałtownie przyzwyczajają się do schematów, które funkcjonują w większości z nich. jeżeli planujesz zrobić coś zupełnie nowego i innego, zastanów się, czy faktycznie ma to sens. Ile czasu i motywacji będą musieli poświęcić użytkownicy na zrozumienie Twojej strony i czy dane rozwiązania przyniosą zmiany na lepsze?
5. Zapobiegaj błędom
Ta heurystyka zachęca do stosowania szeregu działań na stronie www, które będą redukować możliwość popełnienia błędów przez użytkowników podczas interakcji z witryną. Każde niedopatrzenie może rozproszyć użytkownika i negatywnie wpłynąć na jego motywację.
Jeśli na przykład na stronie e-commerce oglądany produkt jest niedostępny, to button dodania do koszyka powinien być wyszarzony, niemożliwy do kliknięcia. W przypadku strony leadowej przy polach formularza warto wyświetlać podpowiedzi, w jakim formacie mają zostać wpisane konkretne dane (np. kod pocztowy czy numer telefonu).
Strona e-konsulat.gov.pl jest dobrym przykładem stosowania się do omawianej heurystyki. Przed formularzem umiejscowione są 2 komunikaty, które instruują użytkowników, jak nie popełniać zbędnych błędów. W samym formularzu pola obowiązkowe są oznaczone czerwonymi gwiazdkami, a przy nazwie pola w punkcie 4. pojawił się wymagany format daty urodzenia.
Źródło: https://secure.e-konsulat.gov.pl/placowki/179/wiza-krajowa-formularz-bez-rejestracji, dostęp na dzień 22.11.2023
6. Pokaż, zamiast zmuszać do zapamiętania
W zdigitalizowanym świecie przez umysł użytkownika przewija się niezliczona ilość informacji. Nie możesz liczyć na to, iż internauta będzie pamiętał, co ostatnio przeglądał w danej witrynie lub czy dodał już wszystkie potrzebne produkty do koszyka podczas jednoczesnego wykonywania kilku innych czynności.
W takich sytuacjach świetnie sprawdzają się sekcje “ostatnio przeglądane” (poniżej przykład, jak robi to Allegro), możliwość podejrzenia koszyka i proste instrukcje nad polami formularza (a nie wewnątrz pól), co ma zostać wpisane w konkretnym miejscu. Takie praktyki dodatkowo stymulują odbiorców witryny i domykają realizację konwersji.
Źródło: https://allegro.pl/, dostęp na dzień 22.11.2023
7. Elastyczność i efektywność
Pędząca rzeczywistość sprawia, iż użytkownicy chcą realizować swoje potrzeby jak najszybciej i dzięki jak najmniejszych nakładów pracy. Siódma heurystyka Nielsena przekonuje do tego, by uprościć wszystkie popularne i powtarzalne czynności, a także skrócić czas potrzebny na ich wykonanie.
Klasycznymi przykładami takich praktyk będą: button “Ponów zamówienie” na liście z ostatnimi zakupami, checkbox “Zaznacz wszystkie” przy zakładaniu konta czy możliwość wyboru wielu filtrów w wyszukiwaniu produktów/usług (a nie każdego z osobna po przeładowaniu strony).
Opcja “Ponów zamówienie” na liście z poprzednimi zakupami jest szczególnie przydatna w sklepach, w których użytkownicy kupują cyklicznie. Metoda ta, którą stosuje między innymi Ziaja, gwarantuje użytkownikowi wygodę i poczucie zaoszczędzonego czasu.
Źródło: https://ziaja.com/my-account/orders, dostęp na dzień 22.11.2023
8. Dbaj o estetykę i umiar
Warto postawić na minimalizm. Strona powinna być przede wszystkim przejrzysta. Internauci nie czytają treści w witrynie, a jedynie skanują ją w poszukiwaniu słów kluczy. Chaotyczna struktura strony, duża ilość bloków tekstu i wyskakujących pop-upów potrafi zniechęcić choćby najwytrwalszych.
Witryna pełni funkcję wizytówki, która w kilka/kilkanaście sekund musi przekonać użytkownika, aby na niej pozostał. Minimalistyczne, przejrzyste i estetyczne witryny budzą zaufanie, sprawiają wrażenie obcowania z profesjonalną marką i gwarantują sprawną realizację potrzeb internautów.
Źródło: https://nubee.pl/pl/c/BLUZY/3211, dostęp na dzień 22.11.2023
9. Zapewnij skuteczną obsługę błędów
W piątej heurystyce Nielsen rekomenduje zapobieganie błędom. W rzeczywistości nie ma takiej możliwości, by wyeliminować wszystkie potencjalne problemy. Dlatego też dziewiąta zasada mówi o stosownej reakcji na błędy, które faktycznie wystąpią.
Najważniejsze jest to, by użytkownik otrzymał zrozumiałą informację o tym, co się wydarzyło i instrukcję, jak postąpić, by rozwiązać problem i przejść dalej. Dzięki temu poczuje się zaopiekowany i pokierowany, w związku z czym gwałtownie wyjdzie z opresji i będzie kontynuował interakcję ze stroną.
Bardzo dobrze do omawianej heurystyki stosuje się marka Apple. Poniżej zobaczysz komunikat wyjaśniający, iż w witrynie nie odnaleziono szukanej przez użytkownika strony. Często w takich sytuacjach pojawia się jedynie informacja o treści “Błąd 404”, która dla przeciętnego użytkownika witryny może być niezrozumiała. Co więcej, świetnym posunięciem jest również zaoferowanie użytkownikowi dodatkowych, alternatywnych działań, umożliwiających odnalezienie treści, których wcześniej poszukiwał – wpisanie słów kluczowych w wyszukiwarkę lub skorzystanie z mapy strony. To rozwiązanie mobilizujące użytkownika, aby pozostał w witrynie i spróbował dotrzeć do celu.
Źródło: https://apple.com/pl/100, dostęp na dzień 22.11.2023
10. Zadbaj o pomoc i dokumentację
Nawet na prostej i przejrzystej stronie nie powinno zabraknąć sekcji z najczęściej zadawanymi pytaniami (FAQ) czy pomocy, w której wylistowane są najważniejsze tematy związane z biznesem. W rezultacie użytkownicy pozyskają w prosty i szybki sposób informacje, na których im zależy, rozwieją swoje wątpliwości i będą mogli skutecznie zrealizować cele witryny.
Key Takeaways
- Na Twojej stronie jest duży ruch, ale współczynnik konwersji pozostaje niski? Sprawdź, czy na ścieżce do realizacji celów Twojej witryny nie pojawiają się utrudnienia, które demotywują użytkowników.
- Przeanalizuj swoją witrynę pod kątem UX. Przejdź konkretne ścieżki i zwróć szczególną uwagę na to, czy Twoja strona www przestrzega 10 heurystyk Nielsena.
- Heurystyki Nielsena to zbiór podstawowych zasad, które stosuje się podczas projektowania i optymalizacji strony, aby współczynnik konwersji był wysoki. Dzięki analizie heurystycznej zlokalizujesz i zidentyfikujesz elementy witryny oraz procesy, które wymagają modyfikacji.
- Audyt na podstawie heurystyk Nielsena stanowi niezbędną podstawę analizy UX, a także wartościowy punkt wyjścia do dalszych badań – opartych już na większej ilości danych: jakościowych, jak i ilościowych.
Podczas audytu skupisz się na:
- pokazywaniu statusu systemu, czyli na dbaniu o transparentność procesów – ponieważ ma to wpływ na podejmowane decyzje, a w rezultacie na przepustowość ścieżki do realizacji konwersji,
- zachowaniu zgodności pomiędzy systemem a rzeczywistością, czyli na stosowaniu na stronie www prostego języka, powszechnie znanych ikon i dostosowaniu się do norm społeczno-kulturowych – ponieważ skutkuje to ułatwieniem użytkownikowi zrozumienia przekazu witryny i szybką identyfikacją miejsca, w którym zrealizuje swój cel,
- dawaniu użytkownikowi pełnej kontroli, czyli na umożliwieniu mu dzięki interfejsu dokonywania wyborów i cofania wcześniejszych aktywności – ponieważ poczucie decyzyjności i swobodne poruszanie się po stronie motywuje użytkownika do działania,
- trzymaniu się standardów i zachowaniu spójności, czyli na stosowaniu powszechnie znanych norm w projektowaniu stron i utrzymaniu estetycznej i wizualnie spójnej witryny – ponieważ taka praktyka budzi zaufanie użytkownika i wzmacnia poczucie obcowania z profesjonalną marką,
- zapobieganiu błędom, czyli na stosowaniu szeregu działań redukujących możliwość popełnienia błędów przez użytkowników podczas interakcji ze stroną – ponieważ każde niedopatrzenie może rozproszyć użytkownika i negatywnie wpłynąć na jego motywację,
- pokazywaniu zamiast zmuszania do zapamiętania, czyli na wyświetlaniu sekcji “Ostatnio przeglądane” czy umożliwianiu podejrzenia dotychczasowej zawartości koszyka – ponieważ takie dodatkowe stymulowanie użytkownika bardzo często wpływa na domknięcie realizacji konwersji,
- elastyczności i efektywności, czyli na uproszczeniu i przyspieszeniu powtarzalnych czynności – ponieważ gwarantuje to użytkownikowi wygodę, poczucie zaoszczędzonego czasu i sprawnej realizacji potrzeb,
- dbaniu o estetykę i umiar, czyli na tendencji dążenia do minimalistycznej i prostej wersji strony – ponieważ chaotyczna struktura, duża ilość tekstu i wyskakujących pop-upów może wywoływać irytację użytkownika, a co za tym idzie powodować wzrost współczynnika odrzuceń,
- zapewnianiu skutecznej obsługi błędów, czyli wyświetlaniu komunikatów, które informują, co się dokładnie wydarzyło i co należy zrobić, aby przejść dalej – ponieważ bez odpowiedniej pomocy i mobilizacji użytkownik może się zestresować lub zirytować i opuścić witrynę,
- dbaniu o pomoc i dokumentację, czyli na wyposażeniu witryny w sekcję FAQ lub sekcję pomocy, gdzie wylistowane są najważniejsze tematy związane z biznesem – ponieważ użytkownicy często potrzebują szybkiej informacji czy rozwiania wątpliwości, aby przejść do realizacji konwersji.
- Pamiętaj o tym, iż same wnioski z audytu nie wystarczą. Opierając się na danych, stwórz tzw. actionable insights, czyli rekomendacje, których wdrożenie przyniesie korzyści dla Twojego biznesu. Udoskonalając witrynę, inwestujesz w satysfakcję użytkowników, a ta z kolei jest kluczowym czynnikiem wpływającym na wzrost współczynnika konwersji, jak i wskaźnika retencji.
