📋 Teoria i nauka

Heurystyki Nielsena

10 heurystyk użyteczności Jakoba Nielsena. Najpopularniejszy framework do oceny jakości interfejsów na świecie.

Wszystkie zasady

01

Widoczność statusu systemu Visibility of System Status

System powinien zawsze informować użytkownika, co się dzieje, przez odpowiedni feedback w rozsądnym czasie. Ładowanie danych? Pokaż spinner. Formularz się wysyła? Pokaż progress bar. Użytkownik nigdy nie powinien patrzeć na nieruchomy ekran i zastanawiać się, czy coś się dzieje.

Tip: Przejdź przez każdą akcję w swoim produkcie i sprawdź, czy po kliknięciu użytkownik dostaje natychmiastową odpowiedź wizualną. Jeśli cokolwiek trwa dłużej niż 1 sekundę bez feedbacku, dodaj wskaźnik ładowania.
02

Zgodność systemu z rzeczywistością Match Between System and Real World

System powinien mówić językiem użytkownika, nie językiem programistów. Zamiast 'Error 404: Resource not found' napisz 'Nie znaleźliśmy tej strony'. Ikony, kolejność informacji i metafory powinny odpowiadać temu, jak użytkownik myśli o danym zadaniu w realnym świecie.

Tip: Przeczytaj każdy komunikat w swoim interfejsie i zastanów się, czy Twoja mama by go zrozumiała. Jeśli nie, zamień techniczny żargon na prosty język. 'Sesja wygasła' zamień na 'Zostałeś wylogowany. Zaloguj się ponownie.'
03

Kontrola i wolność użytkownika User Control and Freedom

Użytkownicy często wykonują akcje przypadkowo i potrzebują wyraźnego 'wyjścia awaryjnego'. Każdy modal powinien mieć przycisk zamknięcia, każda akcja powinna mieć opcję cofnięcia, a formularz wieloetapowy powinien pozwalać wrócić do poprzedniego kroku.

Tip: Dodaj 'Cofnij' wszędzie, gdzie to możliwe. Po usunięciu maila pokaż 'Cofnij usunięcie' przez 5 sekund. Po wysłaniu formularza daj opcję edycji. Użytkownik powinien czuć się bezpiecznie, eksperymentując z interfejsem.
04

Spójność i standardy Consistency and Standards

Użytkownicy nie powinni musieć zgadywać, czy różne słowa, sytuacje lub akcje oznaczają to samo. Jeśli w jednym miejscu przycisk nazywa się 'Zapisz', a w innym 'Zatwierdź', a robi to samo, użytkownik się gubi. Spójność dotyczy słów, ikon, kolorów, layoutu i zachowań.

Tip: Stwórz listę wszystkich akcji w swoim produkcie i ich nazw. Jeśli ta sama akcja ma różne nazwy w różnych miejscach, ujednolicaj. Jeden przycisk zapisu, jeden styl linku, jeden kolor błędu w całym produkcie.
05

Zapobieganie błędom Error Prevention

Lepiej zapobiegać błędom niż wyświetlać dobre komunikaty o błędach. Wyszarzenie niedostępnych opcji, potwierdzenie przed usunięciem, ograniczenie formatu daty do date pickera zamiast pola tekstowego, to wszystko zapobiega błędom zanim się pojawią.

Tip: Przejrzyj 10 ostatnich zgłoszeń błędów od użytkowników. Dla każdego zastanów się: czy mogłem temu zapobiec na poziomie UI? Np. zamiast walidować email po wysłaniu, waliduj w trakcie wpisywania i blokuj przycisk, gdy email jest niepoprawny.
06

Rozpoznawanie zamiast przypominania Recognition Rather Than Recall

Minimalizuj obciążenie pamięci użytkownika przez widoczne obiekty, akcje i opcje. Instrukcje powinny być widoczne lub łatwo dostępne, a nie wymagać zapamiętywania z poprzednich ekranów. Każdy ekran powinien zawierać kontekst potrzebny do podjęcia decyzji.

Tip: Na każdym ekranie wielokrokowego procesu pokazuj podsumowanie wcześniejszych wyborów. W koszyku zakupowym wyświetlaj miniaturki wybranych produktów, a nie same nazwy.
07

Elastyczność i efektywność Flexibility and Efficiency of Use

Interfejs powinien obsługiwać zarówno początkujących, jak i zaawansowanych użytkowników. Skróty klawiaturowe, akcje masowe i personalizacja pozwalają doświadczonym użytkownikom pracować szybciej, nie przeszkadzając nowicjuszom.

Tip: Dodaj skróty klawiaturowe do najczęstszych akcji i pokaż je w tooltipach przycisków. Np. 'Zapisz (Ctrl+S)'. Zaawansowani użytkownicy je odkryją, a początkujący ich nie zauważą.
08

Estetyczny i minimalistyczny design Aesthetic and Minimalist Design

Każda dodatkowa informacja na ekranie konkuruje z informacjami istotnymi i zmniejsza ich widoczność. Interfejs powinien zawierać tylko to, co potrzebne w danym momencie. Dekoracyjne elementy, które nie pełnią funkcji, to szum wizualny.

Tip: Przeglądnij każdy ekran i dla każdego elementu zadaj pytanie: czy usunięcie tego pogorszy doświadczenie użytkownika? Jeśli nie, usuń to. Zacznij od dekoracyjnych ikon, zbędnych opisów i nadmiarowych przycisków.
09

Pomoc w rozpoznawaniu i naprawianiu błędów Help Users Recognize, Diagnose, and Recover from Errors

Komunikaty o błędach powinny być w prostym języku (bez kodów), wskazywać konkretny problem i sugerować rozwiązanie. 'Błąd 500' nie pomaga. 'Nie udało się zapisać zmian. Sprawdź połączenie internetowe i spróbuj ponownie.' pomaga.

Tip: Każdy komunikat o błędzie powinien zawierać trzy rzeczy: co się stało, dlaczego i co użytkownik powinien zrobić. Np. 'Hasło jest za krótkie. Musi mieć minimum 8 znaków. Dodaj jeszcze 3 znaki.'
10

Pomoc i dokumentacja Help and Documentation

Nawet jeśli system powinien być używalny bez dokumentacji, pomoc powinna być łatwo dostępna. Kontekstowe tooltippy, inline hints przy polach formularza i przeszukiwalne FAQ są lepsze niż 100-stronicowa instrukcja w PDF.

Tip: Przy każdym nieoczywistym polu formularza dodaj ikonę '?' z tooltipem wyjaśniającym, czego oczekujesz i dlaczego. To tańsze niż obsługa błędów i zgłoszenia do supportu.

Powiązane kategorie

Chcesz wiedzieć więcej?

Sprawdź swój projekt według heurystyk Nielsena

Sprawdź Design Review Checklist →