Użyteczność cyfrowych produktów ma kluczowy wpływ na ich sukces rynkowy. Ważnym narzędziem wspierającym pracę nad usability aplikacji czy serwisów są heurystyki Nielsena. Wyjaśniamy, na czym one polegają w oparciu o konkretne przykłady.

W uszach laików brzmią enigmatycznie i ogólnikowo. Profesjonalni projektanci UX mają je w małym palcu i doskonale wiedzą, jak się nimi posługiwać. W największym uproszczeniu heurystyki Nielsena to swojego rodzaju checklista dla designerów użyteczności. Dzięki zawartym w nim wytycznym projektanci są w stanie ocenić stopień UX-owej przyjazności poszczególnych rozwiązań i wskazać ewentualne mankamenty. Heurystyki Nielsena pomagają zidentyfikować błędy na wczesnym etapie tworzenia aplikacji czy serwisu, a w efekcie – stworzyć narzędzie, które będzie skutecznie realizować przyjęte cele biznesowe.

1. Pokazuj status systemu

Chodzi o konieczność utrzymania ciągłej komunikacji z użytkownikiem i przekazywania mu niezbędnych informacji opisujących kontekst, w którym aktualnie się znajduje. Jeśli zatem użytkownik kliknie w przycisk na stronie lub w aplikacji, musi od razu otrzymać informację, że to zrobił, a jego działanie zostało zarejestrowane i przyniosło określony rezultat. Może ona przybrać formę preloadera lub paska postępu, jeśli pożądany efekt nie jest możliwy do wyświetlenia bezpośrednio po wykonaniu działania.

Niedopuszczalna jest sytuacja, w której po kliknięciu w przycisk aplikacja wysyła zapytanie do bazy danych, czeka na odpowiedź, by ostatecznie wyświetlić informację lub przeładować stronę po dwóch, trzech sekundach. W takim przypadku użytkownik kliknie w przycisk kilka razy, zanim zorientuje się, że następuje opóźnienie. Równie niedopuszczalny – z punktu widzenia dobrych praktyk UX – jest brak adekwatnej informacji lub wyświetlanie informacji niejasnych.

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

W tłumaczeniu na język praktyczny druga heurystyka Nielsena oznacza przejrzystą komunikację z użytkownikiem. W najprostszym sensie zalecenie sprowadza się do unikania „przekombinowania”: należy stosować prostą terminologię i łatwe rozwiązania, by osoba korzystająca z produktu nie poczuła się zagubiona.

Obejmuje ono również intuicyjność i obrazowość narzędzi i funkcji. Przykładem może być cyfrowy kontroler dźwięku w postaci pokrętła czy wskazywanie na mapach obiektów takich, jak nieruchomości do wynajęcia lub punkty odbioru przesyłek.

Druga heurystyka nakazuje również zachowanie logiki i chronologii procesów. Załóżmy, że użytkownik rejestruje się w serwisie. By aktywować konto, musi kliknąć w link, który otrzyma mailem. Taka informacja powinna pojawić się od razu, by user mógł dokonać potwierdzenia rejestracji i swobodnie poruszać się po serwisie. Czasem jednak wymóg egzekwowany jest z opóźnieniem, ponieważ twórcy rozwiązania wychodzą z założenia, że lepiej „wpuścić” użytkownika do serwisu lub aplikacji i pozwolić mu działać. Tylko że user może oderwać się od ekranu, przejść do innej karty lub aplikacji i powrócić do narzędzia po godzinie lub kilku dniach. Link aktywacyjny straci ważność lub zniknie w powodzi maili i proces będzie wymagał powtórzenia – jeśli użytkownik wyrazi takie życzenia. Pozorny drobiazg może skutkować utratą potencjalnych klientów.

3. Daj użytkownikowi pełną kontrolę

System musi być elastyczny. Nie powinien narzucać użytkownikowi ściśle określonych rozwiązań i utrudniać mu osiągania celów. Załóżmy, że user popełnia błąd podczas wypełniania wieloetapowego formularza. Z informatycznego punktu widzenia wygodniej byłoby zmusić go do powrotu do punktu wyjścia i rozpoczęcia całego procesu od podstaw. Jednak z punktu widzenia usability takie rozwiązanie to dramat. Mogą sobie na nie pozwolić instytucje publiczne, którym nie zależy na petentach, ale nie firmy zabiegające o klientów. Użytkownik zmuszony do wpisywania danych do formularza „od zera” najpewniej skomplementuje aplikację w nieprzychylnych słowach i skorzysta z alternatywnego rozwiązania. Dobre praktyki UX nakazują wyposażenie formularza w przycisk „wstecz” i zapewnienie userowi możliwości korekty bez potrzeby powtarzania całego procesu.

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

Spójność, klarowność, logika zastosowanych rozwiązań są niezbędne, by produkt był łatwy w obsłudze i przyswajalny dla użytkownika. Istotna jest również czytelność komunikacji – konsekwencja w doborze słów, elementów graficznych, sugerowanych działań. Userzy nie powinni zgadywać, co autor miał na myśli, a projektanci wynajdować koła na nowo. Dlatego istotne jest przestrzeganie przyjętych w danym obszarze standardów. Zazwyczaj są one oparte na wieloletniej praktyce i pomagają unikać kosztownych błędów.

Do tego typu standardów należą tzw. wzorce projektowe (ang. design patterns). To sprawdzone rozwiązania częstych problemów występujących w tworzeniu produktów cyfrowych. Popularnymi przykładami wzorców projektowych są choćby breadcrumbsy czy filtry. Metody tworzenia tych narzędzi są na tyle utrwalone, że ich podważanie zaskoczyłoby użytkowników i niemal na pewno nie opłaciło się projektantom.

Design patterns świetnie sprawdzają się jako zestawy dobrych praktyk, ale w obszarze projektowania istnieją również bardziej szczegółowo ustalone schematy postępowania. Chodzi o tzw. design systems, czyli systemy designu lub systemy projektowania (analogicznym rozwiązaniem w obszarze projektowania graficznego jest Księga Znaku). Stosują je przede wszystkim duże firmy, które tworzą tego typu wytyczne na użytek własny – a także dla swoich współpracowników, podwykonawców czy klientów.

Do najbardziej znanych systemów tego typu należą Google’owy Material Design czy opracowany przez Apple Human Interface. W oparciu o zawarte w nich wytyczne i narzędzia developer jest w stanie zaprojektować aplikację o wysokich walorach UX i parametrach przyjaznych dla użytkownika. Jest w stanie – co nie znaczy, że to zrobi. Design systems nie prowadzą developera za rękę, ale wspierają jego kompetencje i kreatywność.

Wykorzystanie systemów projektowania jest zalecane w przypadku rozwiązań, które stawiają przede wszystkim na użyteczność, a w mniejszym stopniu na indywidualność rozwiązań. Pomaga to zminimalizować ryzyko odrzucenia danego produktu. Przykładem produktu stworzonego w oparciu o Google’owy Material Design jest zaprojektowana przez nas aplikacja IdeaFactor24.

5. Zapobiegaj błędom

Najlepszy sposób radzenia sobie z błędami to prewencja. Projektant powinien umieć zidentyfikować element systemu lub procesu, w którym występuje ryzyko pomyłki ze strony użytkownika i zawczasu wyeliminować słaby punkt. Często chodzi o relatywnie prostą korektę.

Mniej więcej z takim przypadkiem mieliśmy do czynienia podczas pracy nad systemem dla firmy faktoringowej – jednego z naszych klientów. W ramach tych działań realizowaliśmy projekt przeznaczony dla spółek z o.o., które zgłaszają się po usługę faktoringu. Problem, z którym mieliśmy do czynienia, dotyczył weryfikacji konta spółki, niezbędnej do złożenia wniosku. Wielu użytkowników niewłaściwie rozumiało komunikat i zamiast zweryfikować spółkę, logowało się na swoje prywatne konto. W efekcie dostawca usługi tracił klientów, który nie mogli połapać się w dość skomplikowanym procesie i odpływali do konkurencji. Na szczęście usterka – po wnikliwym zdiagnozowaniu sytuacji – okazała się łatwa do naprawienia. Poprawki dotyczyły przede wszystkim komunikacji. Zadbaliśmy o to, by użytkownik zapoznał się z jasno określonymi wymaganiami przed przystąpieniem do weryfikacji.

Częstym i prostym sposobem zapobiegania błędom jest walidacja. Na przykład w postaci prostej funkcji, która umożliwia sprawdzenie poprawności formatu podawanego przez użytkownika numeru telefonu czy adresu e-mail.

6. Pozwalaj wybierać zamiast zmuszać do pamiętania

Należy „oszczędzać” pamięć użytkownika. Interfejs powinien być zrozumiały i łatwy w obsłudze. Wykonanie kolejnych kroków w ramach danego procesu nie powinno zależeć od zdolności przywołania informacji zawartych w innym miejscu. Niezbędne dane powinny być łatwe do zauważenia lub odnalezienia. To główne wytyczne płynące z szóstej heurystyki Nielsena.

Prostym przykładem ich zastosowania w obszarze e-commerce jest wyświetlanie ostatnio przeglądanych przedmiotów. Dzięki temu udogodnieniu użytkownik, który przerwał proces zakupu, może swobodnie do niego powrócić bez nadwyrężania pamięci. W podobny sposób założenia szóstej heurystyki realizują zakładki w przeglądarkach internetowych.

Zasada „Pozwalaj wybierać zamiast zmuszać do pamiętania” postuluje również oszczędność informacyjną i adekwatność prezentowanych informacji do potrzeb użytkownika. Może to dotyczyć np. wyświetlania ofert ściśle dopasowanych do wybranych kryteriów – bez zbędnej nadwyżki, która mogłaby wprowadzać chaos i obciążać „pamięć operacyjną” użytkownika.

7. Zapewnij elastyczność i efektywność

Zacznijmy od przykładu – autotematycznego. Załóżmy, że użytkownik czyta nasz tekst „Audyt UX może poprawić wyniki biznesowe twojej firmy. Sprawdź, na czym polega”, w którym wspominamy o heurystykach Nielsena. Elastycznym i efektywnym rozwiązaniem będzie umieszczenie w artykule odsyłacza do niniejszego tekstu, który rozwija wątek heurystyk. Można to zrobić na zasadzie linku w tytułowym anchor tekście lub komunikatu w rodzaju „Dowiedz się więcej o (...)”.

A teraz coś z e-commerce. Użytkownik szuka butów górskich w sklepie obuwniczym online. Znalazł kuszącą ofertę i jest o krok od podjęcia decyzji, ale ma wątpliwości odnośnie rozmiaru: nie jest pewien, czy numeracja, którą posługuje się producent, jest zgodna z tą, z którą zwykle ma do czynienia. Przewidujący e-sklep, zaprojektowany z dbałością o usability, ma rozwiązanie na taką sytuację: zaprezentuje userowi tabelę rozmiarów, by rozwiać jego obawy i pomóc mu sfinalizować transakcję.

Założeniom siódmej heurystyki Nielsena odpowiadają również rozmaite formy personalizacji, w tym podpowiedzi zakupowe. Użytkownikowi, który kupuje górskie obuwie, można zasugerować zaopatrzenie się w impregnat lub raczki.

Nielsenowska elastyczność i efektywność oznacza zatem taką wygodę rozwiązań, która pomaga szybciej osiągnąć cel w ramach danego systemu. To również postulat stosowania logicznych dróg na skróty w interfejsach – takich jak, nomen omen, skróty klawiaturowe.

Ponadto elastyczność wiąże się z zapewnieniem użytkownikom możliwości osiągania celów na różne sposoby i korzystania z metod, które odpowiadają im najbardziej. Choćby po to, by zaawansowani userzy mogli poruszać się po systemie szybciej i sprawniej, a mniej zaawansowani – w sposób bardziej przejrzysty i, z ich punktu widzenia, bezpieczny.

8. Dbaj o estetykę i umiar

Estetyka ma znaczenie – to oczywiste. Aplikacja lub witryna zaprojektowana z dbałością o warstwę wizualną zapewnia użytkownikowi przyjemne doznania i zwiększa prawdopodobieństwo jego powrotu. W designie produktów cyfrowych uroda powinna jednak łączyć się z minimalizmem. Trzeba pamiętać, że klient korzysta z narzędzia w określonym celu. Im łatwiej go osiągnie, tym bardziej będzie zadowolony. Prostota sprzyja temu dążeniu, ponieważ zwiększa czytelność interfejsu i ułatwia nawigację. Dlatego o atrakcyjną warstwę graficzną nie warto zabiegać kosztem przejrzystości. Lepiej unikać elementów, które są czystymi ozdobnikami, niewnoszącymi nic do funkcjonalności.

W kontekście ósmej heurystyki warto przywoływać pojęcie drzwi Normana (Norman Door). To przykład nieudanego designu, wymyślony przez amerykańskiego psychologa poznawczego i pioniera badań nad user experience Donalda Normana. Dotyczy on informacji „wysyłanych” przez rozmaite obiekty na temat tego, co można z nimi zrobić. Niektóre rozwiązania lub przedmioty zaprojektowane są w taki sposób, że łatwo się domyślić, jak ich użyć. Inne nie oferują takich wskazówek. Również drzwi za pomocą klamki lub określonego typu uchwytu mogą sygnalizować, jak należy je otworzyć (np. pchając, ciągnąć lub przesuwając). Drzwi, po których konstrukcji nie sposób domyślić się sposobu ich otwierania, to właśnie drzwi Normana.

W przypadku produktów cyfrowych obowiązują podobne standardy. Aplikacja czy witryna internetowa – oraz ich komponenty – powinny być zaprojektowane tak, by nie pozostawiać użytkownikowi wątpliwości co do sposobu ich obsługi. Wskazówki powinny stanowić integralny element kompozycji. Przykładowo pole funkcji drag & drop powinno być oznaczone przerywaną linią, a miejsce wyłączenia okna najlepiej wskazać za pomocą „znajomego” krzyżyka.

Na gruncie rozwiązań globalnych minimalizm oznacza również odpowiednią hierarchizację treści. Przykładowo w sklepie internetowym na „czołówce” powinna być widoczna oferta lub innego typu istotne informacje handlowe (np. o kuszących rabatach), a nie porcja wiedzy o działaniach CSR firmy.

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

Chodzi o sytuacje, w których użytkownik, mimo świadomego działania, nie jest w stanie uzyskać oczekiwanego rezultatu. Tego typu zdarzenia są nieuchronne. Błędy o charakterze nawigacyjnym lub „operacyjnym” popełniają nawet osoby zaznajomione ze specyfiką działania systemu. Dlatego projektując narzędzie, należy zadbać o to, by pozwalało ono użytkownikom na łatwe wybrnięcie z wszelkich możliwych do przewidzenia trudności. Służy temu m.in. jasna komunikacja: informowanie o błędach, ich przyczynach i sposobach rozwiązywania problemów językiem zrozumiałym dla przeciętnego człowieka.

Przykładem dobrej praktyki w zakresie dziewiątej heurystyki Nielsena są formularze zawierające czytelne, precyzyjne komunikaty o błędnym wpisaniu danych. Jeśli podczas wypełniania trzystronicowego formularza użytkownik popełnił błąd na samym początku, nie należy skazywać go na domysły. Lepiej będzie wyświetlić mu komunikat, w którym miejscu występuje problem i – jeśli nie jest to oczywiste – jaka jest jego przyczyna. Jeszcze lepiej będzie przenieść usera do miejsca błędnego (lub pominiętego) wpisu, by ten mógł szybko i sprawnie dokonać korekty.

10. Zadbaj o pomoc i dokumentację

Idealna aplikacja powinna zapewniać pełną wygodę użytkowania i być wolna od wszelkich niejasności. Trudno jednak zaspokoić potrzeby wszystkich użytkowników, niezależnie od ich kompetencji. Nie zawsze też da się zaprojektować interfejs w taki sposób, by rozwiązywał wszystkie przewidziane problemy. Dlatego nieodzownym komponentem usability danego systemu są rozmaite formy pomocy i dokumentacji. Począwszy od FAQ, przez tutoriale, po czat czy infolinię. Oczywiście należy zadbać o właściwe osadzenie tych funkcji w interfejsie aplikacji czy witryny i ich łatwą dostępność.

Właściwe zrozumienie heurystyk Nielsena i wdrożenie płynących z nich wskazówek wymaga dużego doświadczenia w dziedzinie projektowania user experience. Wyzwanie warto jednak potraktować poważnie. Profesjonalne i sumienne podejście do kwestii związanych z użytecznością procentuje na gruncie wyników biznesowych. I odwrotnie. Zaniedbania w zakresie usability prędzej czy później przełożą się na przychody. Źle zaprojektowane rozwiązanie będzie generować ich mniej, niż oczekujemy.

Jeśli chcesz skonsultować swój projekt pod kątem jego użyteczności lub wykonać audyt UX istniejącego systemu, skontaktuj się z nami!

Przeprowadzimy audyt UX Twojej strony! Odezwij się!