🧩 Teoria i nauka

Zasady Dona Normana

Zasady projektowania z 'The Design of Everyday Things' i 'Emotional Design'. Fundamenty interaction designu.

Wszystkie zasady

01

Affordance Affordance

Affordance to właściwość obiektu, która sugeruje sposób użycia. Klamka sugeruje pociągnięcie, przycisk wypukły sugeruje naciśnięcie. W interfejsie element, który wygląda na klikalny (ma cień, zmienia kursor), zachęca do kliknięcia. Płaski tekst tego nie robi.

Tip: Każdy klikalny element w Twoim interfejsie powinien wyglądać klikalnie: przyciski mają cień lub wyraźne tło, linki mają podkreślenie lub kolor, karty mają hover effect. Jeśli element jest klikalny, ale tego nie widać, masz problem z affordance.
02

Sygnalizatory Signifiers

Sygnalizatory to wizualne wskazówki, które mówią użytkownikowi, gdzie i jak wchodzić w interakcję. Strzałka na karuzeli mówi 'przesuń', pasek na dole szuflady mówi 'pociągnij w górę', podkreślenie tekstu mówi 'kliknij'. Bez sygnalizatorów użytkownik nie wie, że interakcja jest możliwa.

Tip: Przejdź przez swój interfejs i sprawdź każdy interaktywny element. Czy nowy użytkownik, który widzi ten element po raz pierwszy, domyśli się, że można z nim wejść w interakcję? Jeśli nie, dodaj wizualny sygnalizator.
03

Mapowanie Mapping

Dobry mapping oznacza, że relacja między kontrolką a jej efektem jest oczywista. Suwak głośności przesuwa się w prawo, żeby pogłośnić. Scrollbar przesuwa się w dół, żeby pokazać niższą część strony. Jeśli kontrolka robi coś, czego użytkownik się nie spodziewał, mapping jest zły.

Tip: Sprawdź, czy układ przycisków odpowiada układowi elementów, na które wpływają. Np. przyciski 'lewo/prawo' na karuzeli powinny być po lewej i prawej stronie, a nie jeden nad drugim.
04

Model konceptualny Conceptual Model

Model konceptualny to obraz systemu w głowie użytkownika. Koszyk zakupowy działa, bo użytkownik ma model konceptualny wózka w sklepie. Pulpit komputera działa, bo nawiązuje do biurka. Jeśli Twój system nie pasuje do żadnego znanego modelu, użytkownik musi się uczyć od zera.

Tip: Zanim zaprojektujesz nową funkcję, zastanów się: do jakiego obiektu ze świata rzeczywistego mogę ją porównać? Folder na pliki, koszyk na produkty, skrzynka na wiadomości. Użyj tej metafory konsekwentnie.
05

Informacja zwrotna Feedback

Każda akcja użytkownika wymaga natychmiastowej, widocznej odpowiedzi systemu. Kliknięcie przycisku powinno zmienić jego wygląd, przesłanie formularza powinno pokazać potwierdzenie, a błąd powinien być wyraźnie oznaczony. Brak feedbacku sprawia, że użytkownik klika ponownie i ponownie.

Tip: Po każdym kliknięciu przycisku zmień jego stan wizualnie w ciągu 100ms (zmiana koloru, animacja, spinner). Użytkownik musi widzieć, że system zarejestrował jego akcję, nawet jeśli wynik pojawi się dopiero po kilku sekundach.
06

Ograniczenia Constraints

Ograniczenia uniemożliwiają użytkownikowi wykonanie błędnej akcji. Wyszarzony przycisk, którego nie da się kliknąć. Date picker, który nie pozwala wybrać przeszłej daty przy rezerwacji. Pole numeryczne, które nie przyjmuje liter. To wszystko ograniczenia, które zapobiegają błędom.

Tip: Dla każdego pola formularza i każdej akcji zastanów się: jakie wartości lub sekwencje są nieprawidłowe? Zablokuj je na poziomie UI, zanim użytkownik będzie mógł popełnić błąd. Lepiej zablokować niż potem wyświetlać komunikat o błędzie.
07

Przepaść wykonania Gulf of Execution

To dystans między intencją użytkownika a tym, co musi zrobić, żeby ją zrealizować w systemie. Jeśli użytkownik chce zmienić zdjęcie profilowe, ale musi przejść przez Ustawienia, Profil, Edytuj, Upload, Zapisz, przepaść jest duża. Im mniej kroków, tym mniejsza przepaść.

Tip: Zmierz liczbę kliknięć potrzebnych do wykonania 5 najczęstszych zadań w Twoim produkcie. Jeśli którekolwiek wymaga więcej niż 3 kliknięcia, poszukaj sposobu na skrócenie ścieżki.
08

Przepaść oceny Gulf of Evaluation

To dystans między stanem systemu a tym, jak łatwo użytkownik go odczytuje. Jeśli po kliknięciu 'Zapisz' nic się nie zmienia na ekranie, użytkownik nie wie, czy się udało. Przepaść jest duża, gdy status systemu jest ukryty, niejasny lub opóźniony.

Tip: Po każdej akcji użytkownika pokaż wyraźny, natychmiastowy sygnał wyniku: toast z potwierdzeniem, zmiana koloru pola, animacja checkmark. Nigdy nie zostawiaj użytkownika w niepewności, czy jego akcja się powiodła.
09

Design wisceralny Visceral Design

Pierwszy poziom reakcji emocjonalnej na produkt, oparty na wyglądzie, kolorach i formie. Zanim użytkownik cokolwiek kliknie, ocenia produkt wizualnie w ciągu sekund. Atrakcyjny wizualnie interfejs buduje zaufanie i zachęca do interakcji.

Tip: Zainwestuj czas w stronę główną i ekran logowania. To pierwsze ekrany, które widzi użytkownik. Profesjonalna typografia, spójna paleta kolorów i czytelny layout budują zaufanie, zanim użytkownik przetestuje funkcjonalność.
10

Design behawioralny i refleksyjny Behavioral and Reflective Design

Design behawioralny dotyczy przyjemności z użytkowania (szybkość, łatwość, satysfakcja z wykonania zadania). Design refleksyjny to wrażenie, które pozostaje po użyciu, poczucie prestiżu, tożsamość z marką. Najlepsze produkty działają na obu poziomach: są łatwe w użyciu i budują pozytywne wspomnienie.

Tip: Po zakończeniu kluczowego zadania (np. zakup, rejestracja) dodaj element celebracji, animację sukcesu, podziękowanie. To buduje pozytywne wspomnienie i sprawia, że użytkownik chętnie wróci.

Powiązane kategorie

Chcesz wiedzieć więcej?

Przeprowadź review projektu z zasadami Normana

Sprawdź Design Review Checklist →