Heurystyki Nielsena – 10 dobrych praktyk UX

Heurystyki Nielsena to znany i sprawdzony zestaw dobrych praktyk w UX. Można je uznać za podstawową listę kontrolną, przydatną w ocenie użyteczności serwisu internetowego czy aplikacji mobilnej.

Heurystyki a optymalizacja konwersji

Analiza heurystyczna to podstawa w procesie optymalizacji konwersji. Jest to stosunkowo prosta i szybka metoda na znalezienie potencjalnych problemów z użytecznością. Zazwyczaj to od tej analizy rozpoczynam prace nad audytem UX u klientów.

Heurystyki pozwalają relatywnie niewielkim nakładem pracy (w porównaniu do pracochłonnych analiz ilościowych czy analizy nagrań sesji) wygenerować dużą liczbę hipotez wartych dalszej eksploracji.

Popularne w przypadku analizy heurystycznej są konkretne modele, zwykle tworzone przez czołowe firmy doradcze z tej branży. Tego typu frameworki nadają analizie strukturę i zapewniają, że nie pominiesz żadnego istotnego elementu w serwisie, który może mieć wpływ na współczynnik konwersji.

10 heurystyk Jakoba Nielsena

Heurystyki Nielsena to też swego rodzaju model do analizy heurystycznej. Przyjrzyjmy się szczegółowo poszczególnym punktom.

#1: Pokazuj status systemu

Wedle tej zasady istotne jest, aby poprzez interfejs być w stałej komunikacji z użytkownikiem i dostarczać mu potrzebnych informacji w zależności od kontekstu.

Przykłady?

Ścieżka składania zamówienia w sklepie internetowym. Warto w niej pokazać kolejne etapy, a także ten, na którym obecnie jest użytkownik.

Okruszki, czyli tak zwane “breadcrumbs”. Jeśli użytkownik wejdzie na szczegółową podstronę znajdującą się głęboko w hierarchii, to dzięki okruszkom będzie mógł się zorientować w nawigacji strony i łatwo przejść do bardziej ogólnej sekcji.

Komunikaty o błędach i walidacje formularza to istotna informacja zwrotna. Bez nich użytkownik musi się zastanawiać, wina leży po jego stronie (błędnie wypełnione pole formularza) czy po stronie systemu (trwa procesowanie informacji).

Status produktu w e-commerce. Jeśli pozostało niewiele sztuk lub produkt jest niedostępny, wypada taką informację pokazać. Ułatwia to nawigację.

#2: Zachowaj zgodność pomiędzy systemem a rzeczywistością

Tę heurystykę prościej możnaby ująć słowami “unikaj żargonu”. W praktyce chodzi w niej o to, aby treść na stronie była zrozumiała dla każdego użytkownika.

O ile to możliwe, powinno się unikać enigmatycznych i technicznych określeń, a gdy jest to konieczne, to zalecane jest dodanie rozbudowanego wyjaśnienia zaawansowanego konceptu w prostych słowach.

W kwestii interfejsu wizualnego czy ikon, bezpiecznym wyjściem jest nawiązywanie do ogólnie przyjętych standardów lub obiektów ze świata fizycznego. Przykładowo aplikacje do odtwarzania muzyki, takie jak Spotify, w interfejsie wykorzystują ikony znane jeszcze z magnetofonów czy discmanów. Eksperymenty w tym zakresie mogłyby się skończyć totalną dezorientacją użytkowników.

W myśl tej zasady nie warto wymyślać koła na nowo i jeśli jakiś standard w projektowaniu interfejsów jest ogólnie przyjęty, to silenie się na niepotrzebną kreatywność prawdopodobnie przyniesie więcej złego, niż dobrego.

#3: Daj użytkownikowi pełną kontrolę

Zdarzyło Ci się kiedyś wypełniać wieloetapowy formularz i zaznaczyć błędną opcję gdzieś na początku? Na pewno. Próbujesz wrócić i dokonać korekty, ale… nie da się! Musisz przejść cały proces od początku. A to frustrujące.

Spójrz na poniższy exit-intent popup. Jak niby mam go zamknąć? Brakuje ikony “X”, nie ma też jasno opisanego przycisku “Anuluj”. Działa kliknięcie w tło obok, ale nie każdy użytkownik jest świadomy tej opcji.

Dawanie użytkownikowi pełnej kontroli polega na takiej budowie interfejsu, aby akcje takie jak edycja pola w formularzu, odznaczenie danej opcji czy cofnięcie przypadkowego kliknięcia były możliwe i proste do wykonania. Jest to szczególnie istotne na urządzeniach mobilnych, gdzie przypadkowe “tapnięcia” zdarzają się częściej, niż na komputerach.

#4: Trzymaj się standardów i zachowaj spójność

Interfejs musi być spójny. W przeciwnym wypadku użytkownik będzie błądzić, i nie ma w tym niczego dziwnego, bo jeśli ten sam styl elementu czasem jest przyciskiem, a czasem statycznym blokiem, to nietrudno o dezorientację.

Jakob Nielsen dzieli spójność na wewnętrzną i zewnętrzną. W tej pierwszej chodzi o trzymanie się jednej konwencji w zakresie między innymi:

• Fontów
• Stylowania przycisków call to action (głównych i pobocznych)
• Koloru i stylu linków
• Palety kolorów wykorzystywanej w obrębie strony
• Podświetlenia przycisku po najechaniu kursorem
• Sposobu wyświetlania komunikatów o błędzie w formularzu
• Umiejscowienia opisów pól formularza

Spójność zewnętrzna polega na podążaniu za ogólnie przyjętymi standardami w dziedzinie UX/UI. Istnieją pewne elementy, które praktycznie na każdej stronie internetowej funkcjonują w identyczny sposób. Jako przykłady można wymienić:

• Logotyp umieszczony w lewym górnym rogu bądź na środku górnej części ekranu i podlinkowany do strony głównej
• Menu w górnej lub bocznej części strony
• Menu na urządzeniach mobilnych dostępne po kliknięciu ikony “hamburgera” bądź przycisku “menu” w lewym lub prawym górnym rogu ekranu
• Ikona “koszyka” w sklepie internetowym widoczna w prawym górnym rogu ekranu

W związku z tym opłaca się być na bieżąco z innymi stronami w Twojej branży. Użytkownicy spędzają tam sporo czasu, więc wiedza o mechanizmach i interfejsach, z którymi obcują, może być przydatna w projektowaniu Twojej strony.

#5: Zapobiegaj błędom

W idealnym scenariuszu interakcja ze stroną powinna być na tyle płynna, żeby komunikatów o błędach nie było na niej w ogóle. To scenariusz utopijny i wiadomo, że takowe pojawić się muszą, natomiast warto dążyć do tego, żeby było ich jak najmniej.

Czynnikami pomagającymi zredukować liczbę komunikatów o błędzie są między innymi:

• Klarowna komunikacja (na przykład dostępności produktu)
• Jasne instrukcje co do formatu wartości pól w formularzach – na przykład dynamiczne sprawdzanie, czy definiowane hasło spełnia wszystkie warunki
• Inteligentne podpowiedzi w wyszukiwarce na stronie czy zrozumiały interfejs.

#6: Pokaż, zamiast zmuszać do pamiętania

Wygodna strona internetowa potrafi użytkownikowi podsunąć istotne informacje wtedy, gdy jest to potrzebne, dzięki czemu nie musi on polegać tylko i wyłącznie na swojej pamięci. Świetnym przykładem są sekcje “Ostatnio oglądane produkty”, typowe dla sklepów internetowych.

Jeśli użytkownik wraca do sklepu po jakimś czasie i chce znaleźć buty, które mu się podobały, ale niestety nie pamięta nazwy modelu ani marki, taka sekcja zdecydowanie ułatwia mu życie. Mistrzem jest w tym oczywiście Amazon.

Często spotykanym błędem w UX jest umieszczanie nazw pól formularza wewnątrz pól. Gdy użytkownik rozpoczyna wpisywanie wartości, opis znika. Jeśli w trakcie wypełniania formularza użytkownika rozproszy na przykład telefon i wróci on na stronę po kilku minutach, może już nie pamiętać o co pytano w danym polu i musi rozpocząć proces od nowa.

W sklepach internetowych gdzie typowe są koszyki z wieloma różnymi produktami, dobrym rozwiązaniem jest wyświetlanie zawartości koszyka (lub opcji jego podejrzenia) w procesie składania zamówienia (w checkoucie). Gdy użytkownik nie jest pewny, czy dodał wszystkie potrzebne produkty, nie musi już opuszczać checkoutu i błądzić po sklepie (co może się skończyć rozproszeniem i porzuceniem koszyka).

#7: Elastyczność i efektywność

Jakie opcje możesz dodać do interfejsu, aby przyspieszyć wykonywanie popularnych akcji? Ta heurystyka Nielsena w oryginale odnosi się głównie do interfejsów w programach czy aplikacjach, dlatego pozwoliłem sobie poszerzyć jej definicję i przedstawić moje autorskie zastosowania na stronach internetowych oraz w e-commerce.

Jednym z przykładów jest checkbox “Zaznacz wszystkie zgody”. Zamiast klikać w kilka zgód oddzielnie, użytkownik załatwia sprawę za jednym zamachem. Szybciej, sprawniej, wygodniej.

W sklepach internetowych o wysokim współczynniku wykorzystania filtrów na stronie kategorii warto przemyśleć sposób działania tej funkcjonalności. Jeśli po każdej pojedynczej zmianie ustawień strona się przeładowuje, to będzie to frustrujące dla odwiedzających. Lepiej zdecydować się na wariant, w którym użytkownik wybiera wszystkie potrzebne filtry i dopiero wtedy klika w przycisk ładujący zaktualizowaną listę.

A teraz wyobraź sobie sklep ze szkłami kontaktowymi lub karmą dla zwierząt. Powracający klienci zazwyczaj będą zamawiać ten sam produkt. Byliby wdzięczni za możliwość skopiowania koszyka z poprzedniego zamówienia. Genialnie robi to Frisco.

Do tej kategorii zaliczają się też skróty klawiszowe bądź interakcje typu “double-tap”, które pewnie znasz z Instagrama, gdzie podwójne tapnięcie w zdjęcie powoduje jego polubienie.

Świeżym przykładem jest też niedawne usprawnienie w interfejsie Google Tag Manager, dzięki któremu WRESZCIE można zaznaczyć wiele tagów jednocześnie i przeprowadzić ”hurtowe” akcje, jak pauzowanie lub usunięcie.

Drugim aspektem tej heurystyki jest elastyczność. Interfejs powinien być dostosowany do potrzeb zarówno początkujących, jak i zaawansowanych użytkowników.

#8: Dbaj o estetykę i umiar

“Mniej znaczy więcej” to już frazes, ale wciąż istnieje multum stron internetowych, których twórcy zapominają o tej heurystyce. Nic w tym dziwnego, bo obcięcie zawartości serwisu z wszystkich niepotrzebnych elementów to czasochłonne i trudne zadanie. Łatwiej jest pozostawić na stronie różne “przydasie”.

W praktyce im więcej treści na stronie internetowej, tym więcej energii użytkownik musi poświęcić na jej przeanalizowanie i odnalezienie tego, czego potrzebuje. Jeśli w serwisie brakuje jasnej hierarchii wizualnej, to mało istotne informacje zlewają się z kluczowymi. Chaotycznie zbudowana strona internetowa jest dla odwiedzających irytująca i będzie powodować wysoki współczynnik odrzuceń.

Współczynnik odrzuceń jaki jest na poszczególnych podstronach możesz sprawdzić w Google Analytics. Warto się nauczyć się GA4, bo od lipca 2023 stara wersja tego narzędzia nie będzie już wspierana.

Minimalizm jest bezpieczniejszy, niż zbyt duża ilość tekstów, banerów, linków, animacji i opcji do wyboru. Warto tutaj wspomnieć o “signal-to-noise ratio”, czyli terminie z dziedziny UI Design, który określa ilość istotnych informacji do tych niekoniecznie potrzebnych.

Strzeż się pułapki “A co, jeśli ktoś będzie potrzebował XYZ…” – w ten sposób można nieźle skomplikować stronę i zrobić z niej coś na wzór choinki bożonarodzeniowej. Skup się na najważniejszych informacjach. Eliminuj to, co zbędne. Nie bądź jak LingsCars.

#9: Zapewnij skuteczną obsługę błędów

Komunikaty o błędach to sedno heurystyki Nielsena numer 9. Heurystyka numer 5 mówiła o tym, żeby za wszelką cenę redukować możliwość wystąpienia błędu na stronie, ale jeszcze się taki nie narodził, co by wyeliminował je w 100%.

Tak więc jeśli już się pojawią, to wręcz trzeba zadbać o widoczny i zrozumiały komunikat o błędzie. Powinien on:

1. W prostych słowach tłumaczyć, co się stało. Na przykład: “Login damian123 jest już zajęty”
2. Sugerować rozwiązanie. Na przykład: “Dostępne loginy: damian931, damian567, damian111”

Prowadząc użytkownika za rękę w takich sytuacjach sprawiasz, że interakcja ze stroną jest dla niego prostsza i przyjemniejsza. Istnieje więc większa szansa, że dokończy on proces zakupowy czy wypełnianie formularza, czyli wygeneruje konwersję.

Komunikaty w stylu “Wystąpił błąd” albo “Błąd #129-BC-123” to UXowy koszmarek. Odwiedzający nie wie, co zrobił źle i nie wie, jak to naprawić. Efekt? Może spróbuje jeszcze raz i mu się uda, a może opuści stronę. I kupi u konkurencji, a tego byśmy nie chcieli.

#10: Zadbaj o pomoc i dokumentację

Najlepszy interfejs to taki, którego nie trzeba tłumaczyć. To święte słowa i budowanie tego typu stron oraz aplikacji powinno być celem każdego UX / UI Designera.

Natomiast nie zawsze się tak da. Niektóre systemy są z założenia na tyle skomplikowane, że samouczek czy sekcja pomocy jest w nich potrzebna. Z pewnością badania użyteczności pomagają określić, czy dany serwis internetowy należy do tej kategorii.

Interfejs to nie wszystko. Często potencjalni klienci mają sporo pytań dotyczących produktów, warunków zakupu, zwrotów czy gwarancji. Rozbudowana sekcja FAQ lub dział pomocy to nie tylko wygoda dla użytkowników, ale też spora oszczędność pieniędzy dla biznesu. Bez niej wszelkie pytania byłyby zadawane mailowo, na infolinii lub przez chat, a obsługa tych kanałów wymaga dodatkowych etatów.

Podsumowanie

Heurystyki Nielsena to świetny punkt startowy do analizy serwisu internetowego pod kątem użyteczności. Ten jeden model pozwoli Ci znaleźć wiele elementów wymagających poprawy. Ich dopracowanie może znacznie podnieść współczynnik konwersji strony, co świetnie przekłada się na rezultaty biznesowe, ponieważ bez zwiększania nakładów na pozyskiwanie ruchu sprzedajesz więcej.