Heurystyki Nielsena to oprócz „– Przeczytaj Nie każ mi myśleć Kruga i Design of everyday things” Normana, takie hasło, które pojawia się często wśród porad dla początkujących projektantów. 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. Również jeśli macie mały sklep albo swoją stronę, możecie je wykorzystać. Pamiętajcie tylko, że nic nie zastąpi rozmowy z użytkownikami, którzy z produktu 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:
10 heurystyk Nielsena – co oznaczają?
#1 Pokaż status system
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ć, pokażmy użytkownikom np. potwierdzenie wykonanej akcji, albo fakt, że jest w toku. Dodanie produktu do koszyka skutkuje pojawieniem się w koszyku np. kropki z liczbą produktów. Wyskakujące błędy są również przykładem tej zasady.
#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 (czyli bardzo technicznych). 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. O tę zgodność dbamy więc zarówno w warstwie tekstowej (prosty język), jak i interakcji.
#3 Daj pełną kontrolę użytkownikowi
Użytkownicy czasem wybierają jakąś opcję 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ć. Bardzo podoba mi się również opcja dostępna w Gmail – gdy usuniemy przypadkiem wiadomość albo zbyt szybko wyślemy ją – możemy cofnąć te akcje. W obu przypadkach w dolnym rogu pojawi się notyfikacja dostępna przez kilkanaście sekund z możliwością cofnięcia akcji.
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.
Przykładem takiego trzymania się standardów na stronach internetowych, jest np. umieszczanie nawigacji głównej w górnej części serwisu lub z lewej strony ekranu. W sklepach internetowych przywykliśmy, że koszyk znajduje się w górnym prawym rogu (dla języków LTR).
#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 uzupełniam w formularzu pole z numerem telefonu, to pole zablokuje mi możliwośc wpisania innych znaków niż cyfry. I np. od razu pokaże 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.
Bywa, że pytamy o informacje, które mogą wymagać od naszych użytkowników chwili namysłu. Zaproponujmy im prawdopodobne rozwiązania do wyboru i ewentualnie możliwość dopisania swojej, innej opcji. Dzięki temu jest szansa, że nie utkną za długo przy grubszych rozkminach.
#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ę
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 to nie wszystko. 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 ✌️
- 8 Golden Rules of Interface Design: https://bit.ly/2XKhqon
- Ergonomic Criteria for the Evaluation of HCI: https://bit.ly/3dkx2p6
- First Principles of Interaction Design: https://bit.ly/2yN8E0b
