Heurystyki Nielsena – co to?

Czym są heurystyki Nielsena?

10 heurystyki Nielsena to oprócz „– Przeczytaj Nie każ mi myśleć Kruga i Design of everyday things” Normana to takie hasło, które pojawia się często wśród porad dedykowanych początkującym projektantom. Na kanale już dawno powstał o nich materiał, załączam niżej, a tymczasem wrzucam wersję tekstową. 

Heurystyki Nielsena to ogólne zasady interakcji człowieka z maszyną, które mogą pomóc nam ocenić użyteczność rozwiązania. Możecie opierać się na nich, kiedy chcecie na przykład sprawdzić lub ocenić wasz produkt. I nie musicie zajmować się projektowaniem by to zrobić. Myślę, że mogą skorzystać z nich i programiści i osoby zarządzające projektem lub jeśli macie mały sklep albo swoją stronę, to możecie je wykorzystać. Pamiętajcie tylko, że nic nie zastąpi rozmowy z użytkownikami, którzy z niego korzystają.

Nazwa wzięła się o Jakoba Nielsena, który jest współtwórcą zasad. Oryginalny wpis (po angielsku) możecie znaleźć na tej stronie.

I oczywiście heurystyki Nielsena to nie jedyny zbiór zasad, z których możecie skorzystać – podlinkuję kilka z nich na samym końcu. No to lecimy

#1 Pokaż status system

Heurystyki Nielsena i przykłady feedbacku dla użytkownika

System powinien informować użytkowników o tym, co się dzieje dając odpowiednią informację zwrotną. Kluczowy jest również czas tej odpowiedzi. Np. jeśli wchodzimy na stronę, która musi się długo ładować, to szybko zobaczymy jakiś preloader, komponent, który pokaże, że coś się ładuje. Gdybyśmy go nie zobaczyli, tylko pustą stronę, to moglibyśmy równie dobrze uznać, że coś nie działa. Kiedy pozwalamy użytkownikom zapisywać dane albo je usuwać, to pokażmy użytkownikom np. potwierdzenie wykonanej akcji, albo fakt, że jest w toku. Np. dodanie produktu do koszyka skutkuje pojawieniem się w koszyku np. kropki z liczbą produktów. 

#2 Zachowaj zgodność systemu z rzeczywistością

System powinien mówić językiem użytkownika, używając słów, zwrotów i pojęć znanych użytkownikowi, a nie terminów zorientowanych na system. Warto czerpać z konwencji w świecie rzeczywistym, co wydaje nam się bardziej naturalne i logiczne. Jeśli ludzie nie rozumieją terminów używanych w witrynie, nie tylko poczują się niepewnie, ale wielu będzie zmuszonych udać się gdzie indziej, aby znaleźć wyjaśnienia lub nawet wykonać swoje zadanie. 

Zwróćcie uwagę jak wiele zwrotów z rzeczywistego świata przyjęło się w tym wirtualnym – kopiujemy dokumenty, wyrzucamy zdjęcia (do ikony kosza na śmieci), odhaczamy coś, żeby to zaakceptować. Nawet graficzny styl – skeumorfizm raz na kilka lat wraca do łask. 

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

Użytkownicy czasem wybierają funkcje przez pomyłkę i będą potrzebować wyraźnie oznaczonego „wyjścia awaryjnego”, aby wyjść z niechcianego stanu bez konieczności przechodzenia przez dłuższy proces. W programach graficznych i edytorach tekstu mamy opcję cofnięcia się o krok lub kilka lub ponownego wykonania akcji (jeśli przypadkiem ją cofniemy). Wychodząc przypadkiem ze strony, zanim zapiszemy dane formularza, przeglądarka może zapytać nas czy na pewno chcemy to zrobić, bo stracimy wszystkie dane. Wsparcie użytkowników w tym, żeby mogli poprawić wprowadzone dane czy usunąć je sprawi, że nasz interfejs będzie wygodniejszy i mniej stresujący w użyciu.

#4 Spełniaj standardy i utrzymaj spójność

Użytkownicy korzystają z innych rozwiązań – stron i aplikacji, które w dużej mierze będą trzymać pewne standardy – np. platform. Jeśli korzystamy z kilku aplikacji Androida albo iOSa to uczymy się, że pod gestami czy ikonami znajdziemy określone funkcje. Uczymy się pewnych wzorców korzystając z innych produktów. Te wytyczne opisane są na przykład jako Human Interface Guidelines dla Apple lub w Material Design dla Androida.

Dlatego dość ważne jest żeby mieć to z tyłu głowy, gdy projektujemy własne rozwiązania. To po prostu wspiera szybsze uczenie się obsługi interfejsu przez użytkowników. To ważne również w obrębie naszego interfejsu – żeby utrzymać tam spójność. O spójności już trochę gadałam, więc odsyłam was np. tutaj: UI: spójność w interfejsie graficznym.

#5 Zapobiegaj błędom

Najlepszy błąd jaki możemy pokazać użytkownikom to taki, którego nie będzie. Starajmy się ze wszystkich sił, żeby nie trzeba było pokazywać komunikatów błędu użytkownikom – a żeby to zrobić, powinniśmy odpowiednio zadbać o prostotę i jednoznaczność interfejsu. Myślę, że nie raz mieliście okazję ustawiać jakieś hasło w systemie, a po jego wpisaniu interfejs zwracał informację, że jest za słabe – trzeba dodać jeszcze wielką literę, cyfrę i znak specjalny.

O ile szybciej trwałby ten proces, gdyby ta informacja pojawiła się przed wpisywaniem tego hasła? I o to właśnie chodzi – informujmy użytkowników o np. wymaganych formatach jeśli takie są, o ograniczeniach albo zablokujmy zawczasu opcje, które mogą prowadzić do popełnienia błędu. Np. kiedy odpalam telefon, do którego mogę dostać po wpisaniu ciągu cyfr, to ten telefon pokazuje mi od razu klawiaturę numeryczną zamiast zwykłej – bo i tak mogę wpisać tylko cyfry i jest mniejsze ryzyko, że przez przypadek wpiszę coś innego.

#6 Daj wybór zamiast wymagać zapamiętania

Ta zasada sprowadza się do tego, że jesteśmy już bombardowani masą informacji – powiadomienia w telefonie, ktoś w tle rozmawia, leci jakiś podcast, przeglądarka w komputerze pyta o udostępnienie czegoś, więc musimy mieć świadomość, że użytkownicy korzystający z naszych rozwiązań, mają już całkiem zajętą głowę. Nie dorzucajmy im jeszcze więcej.Np. kiedy do wykonania jest jakaś skomplikowana akcja, która prawdopodobnie będzie wymagać instrukcji lub podpowiedzi, to upewnijmy się, że będzie dostępna w tym samym miejscu, tak by użytkownik nie musiał najpierw ich zapamiętywać, a potem sobie przypominać. Dajmy też wybór zamiast wpisywania informacji z pamięci – idealnym przykładem są historie wyszukiwania czy przeglądania w przeglądarkach internetowych.

#7 Zapewnij elastyczność i efektywność

Z naszych interfejsów będą korzystać osoby, które dopiero się ich uczą i zaawansowani użytkownicy, którzy dobrze już je znają. Dobrą praktyką jest dostosowanie funkcji do jednych i drugich, tak by pozwolić, tym bardziej zaawansowanym na optymalizację ich pracy. Przykładem są np. skróty klawiaturowe w programach, z których korzystamy albo wyszukiwanie zaawansowane w grafice Google czy możliwość odpalenia zaawansowanych filtrów w sklepie internetowym.

Ale to także kwestie związane z dostępnością i dostosowaniem naszych produktów do osób, które np. będą powiększać lub zmniejszać wyświetlane fonty lub będą korzystać z innych narzędzi żeby poruszać się po serwisie (np. specjalna klawiatura zamiast myszy).

#8 Zadbaj o estetykę i minimalizm

To bardzo miękka zasada, wiadomo, że będą podobać nam się różne rzeczy i jedni wolą bardziej minimalistyczne interfejsy, inni z kolei wybiorą bogactwo barw i ilustracji. Ale zasada sprowadza się nie tyle co do warstwy wizualnej (ta ma oczywiście znaczenie również w odbiorze interfejsu), ale przede wszystkim w sposobie w jaki prezentujemy treści, jakim językiem je piszemy i w jakie procesy je ubieramy. Dobrze stosować zasadę, żeby pozbywać się zbędnych elementów – jeśli nie widzimy powodu dla którego pojawia się jakiś komunikat albo jakiś krok w procesie składania reklamacji, to może oznaczać, że wcale nie jest tam potrzebny.

Jeśli aplikacja ma główną funkcję, która polega na robieniu zdjęć, to cały interfejs, jego wygląd i sposób działania powinien skupiać się właśnie na tym, a nie dodatkowych rzeczach, które wprowadzą tylko zbędny bałagan i odwrócą uwagę użytkownika.

Macie artykuł na blogu, który chcecie żeby użytkownik przeczytał – super, to może nie przerywajcie mu w połowie wyskakującym okienkiem zachęcającym do zostawienia maila albo pobrania pliku.

#9 Obsłuż błędy

Wiadomo, że chcemy z całych sił unikać popełniania błędów, ale kiedy już się pojawią, komunikaty o błędach powinny być napisane prostym językiem i dokładnie wskazywać problem i sposób jego rozwiązania. Nie wystarczy napisać, że wpisany format danych jest zły – napiszmy jaki format powinien być wpisany, żeby był poprawny itd. Unikajmy również bardzo technicznego języka – straszenie kodami błędów i nic nie mówiącymi komunikatami niespecjalnie pomaga użytkownikom cokolwiek z tym zrobić. 

#10 Udostępnij pomoc i dokumentację

zenbox.pl robi to dobrze – udziela pomocy prostym językiem, pokazuje najczęściej zadawane pytania i umożliwia bezpośredni kontakt na jednej stronie!

Dobrze by było mieć na tyle intuicyjny produkt, żeby nie wymagać tworzenia dokumentacji i instrukcji, ale warto mimo wszystko ją zapewnić. Tak jak błędy – powinny być opisane jasnym, prostym językiem i być przede wszystkim łatwe do odnalezienia. Na co komu instrukcja, której nie można znaleźć gdy jest potrzebna? Nie zalewajmy też użytkowników masą informacji – to nie konkurs na najdłuższe wypracowanie – skupmy się na konkretnych czynnościach, które trzeba wykonać żeby osiągnąć efekt.

Heurystyki Nielsena – podsumowując

Jak widzicie – heurystyki Nielsena to żadne rocket science. Choć na pierwszy rzut oka mogą wydawać się tajemnicze i niezrozumiałe, odnoszą się do podstawowych obszarów wpływających na doświadczenia użytkownika.

Mogą być nie tylko podstawą do mądrzejszego projektowania interfejsów, ale także punktem wyjścia dla analizy interfejsu – audytu jego użyteczności.

Inne zbiory zasad

No dobra to tyle jeśli chodzi o heurystyki Nielsena. Ale na samym początku wspominałam o innych zbiorach zasad. Wrzucam dla przykładu te poniższe, ale dobrze mieć świadomość, że są ich dziesiątki. Więc nie czujcie się źle, jeśli ktoś będzie miał do Was pretensje, że nie znacie na pamięć żadnych z nich ✌️

Zobacz też
grafika UI - portfolio
Czytaj dalej

Portfolio UI designera

Coraz więcej osób wchodzi w temat projektowanie interfejsów – i nic dziwnego. To wciąż poszukiwani specjaliści, którzy zarabiają całkiem porządne stawki. Dość…
Czytaj dalej