Wytyczne UX i normy interfejsu

1) Zasady

Jasność przed pięknem. Znaczenie i działanie są oczywiste w ciągu 1-2 sekund.
Jeden cel na ekran. Wszystko inne jest wtórne lub ukryte.
Spójność. Te same wzory = te same oczekiwania.
Domyślna dostępność. Kontrast, skupienie, klawiatura, głos.
Kontekst. Porady i teksty są dokładnie tam, gdzie są potrzebne.
Lokalizacja pierwsza. Długości linii, formaty, kultura - w projekcie początkowo.
Odwracalność. Każde ryzykowne działanie może zostać anulowane/potwierdzone.
Wymierność. Każda reguła jest z metryką (konwersja kroku, czas, błędy).

2) Siatka, tiret i rytm

Siatka: 4/8 pkt skoku; kolumny: 12 (pulpit), 6 (tablet), 4 (mobile).
Wewnętrzne tiret składowe: wielokrotność 4; zewnętrzne - 8/ 12/16/24.
Rytm pionowy: tytuł → napisy → → treść akcji (CTA).
Granice i dzielniki: ekonomiczne; wolą „powietrze” i hierarchię typografii.

3) Typografia

Skala pinów: 12/14/ 16/20/24/32/40 (ciało 16).
Wysokość wiersza: 1. 4–1. 6 dla tekstu, 1. 2–1. 3 dla tytułów.
Długość linii: 45-75 znaków (pulpit), 35-55 (mobilny).
Podkreślenie: odważne dla semantycznych akcentów; czapki - tylko w etykietach.
Czytelność na głos: teksty powinny brzmieć naturalnie.

4) Kolor i kontrast

Semantyka: 'success/info/warning/error/neutral'.
Kontrast: WCAG minimum 2. 1 AA (tekst/tło ≥ 4. 5:1; duże ≥ 3:1).
Kolor i jedyny sygnał. Dodaj ikonę/tekst/formularz.
Pierścień ostrości: zawsze widoczny (nie wyłączać w CSS).

5) Architektura nawigacyjna i informacyjna

Ścieżka użytkownika: "Gdzie jestem? Co tu jest? Co dalej?" - oczywiście.
Hierarchia menu: ≤ 2 poziomy w nawigacji głównej.
Okruchy chleba: dla głębokich odcinków.
Wyszukiwanie: dostępne na całym świecie w skomplikowanych katalogach; hotkey '/'.
Stan nawigacji: Aktywna karta/strona jest wyróżniona tokenami.

6) Komponenty i wzory

Używamy elementów systemu projektowego (bez „domowej roboty”).
Jeden podstawowy-CTA na ekranie; pozostałe są drugorzędne/wyższe.
Stany: domyślne/hover/focus/active/disabled/loading - obowiązkowe dla każdej interaktywnej.
Puste stany: kontekst + wartość + CTA (+ link wtórny).
Wspólne wpisy: jedna strona-alert na ekran + lokalne wiersze inline.

7) Formularze, walidacja i błędy

Etykieta jest obowiązkowa. Placeholder jest przykładem formatu, a nie wymiany.
Walidacja inline dla zacierania, skrócone błędy do przesłania.
Komunikat o błędzie: co jest nie tak + jak naprawić + ograniczenie/format.
Automatyczne przewijanie i skupienie się na pierwszym błędzie; 'aria-invalid', 'aria-descripedby'.
Maski i formaty: szybkie, ale nie łamać wejścia (paist jest możliwe).
Bezpieczeństwo danych: nie trać nic podczas ponownego uruchomienia/błąd.

8) Warunki i informacje zwrotne

Sukces: toast 2-4 s, neutralny i pozytywny ton, CTA „co dalej”.
Info/notice: soft banner/type, nie blokuje strumienia.
Ostrzeżenie/błąd/krytyczne: hierarchia wizualna/semantyczna; critical - modal/banner z wyraźnym działaniem.
Załadunek: szkielet> spinner; ocena czasu oczekiwania> 3 s.

9) Zawartość i mikrokopia

Zasada trzech odpowiedzi: co się dzieje → dlaczego → co robić dalej.
CTA: action verb + object („Zapisz zmiany”, „Pass verification”).
Numery/daty/waluty: formaty lokalne.
Ton: przyjazny; w krokach stresujących (płatność/bezpieczeństwo) - neutralne.

10) Dostępność (A11y)

Pełna nawigacja klawiatury; logiczny porządek tabbingu.
Role i 'aria-' dla interaktywnych, żywych regionów dla tostów/statusów.
Kontrasty, pierścienie ostrości, wielkości interaktywne ≥ 44 × 44 px.
Alternatywy tekstowe dla ikon/obrazów; tabele z „th ”/„ zakresem”.
Sprawdzenie: automatyczne (liniowiec/skaner) + ręczne skrypty czytnika ekranu.

11) Lokalizacja i internacjonalizacja

Wszystkie ciągi są w kontekście i18n klawiszy.
Test „języków długich” (DE/TR), tryby RTL.
Liczby/waluty/czasy - narzędzia formatowania.
Mapa dźwiękowa: stopień formalności/emocji według scenariusza (wejście na pokład/płatności/bezpieczeństwo).

12) Responsywność i †

Punkty graniczne: 360/768/1024/1280 +.
Mobile-first: Ścieżka krytyczna dostępna jedną ręką, CTA w obszarze kciuka.
Gesty i klawiatura: gesty są powielane za pomocą przycisków; na pulpicie - hotkeys.
Gęstość: na pulpicie - „powietrze”, na mobilnym - oszczędności pionowe bez uszczerbku dla kliknięcia.

13) Ciemny motyw

Utrzymuje się kontrast WCAG; unikać „czystej czerni” dla tła (ciemnoszary).
Blask/cienie - osłabione; kontrast pierścienia ostrości.
Ilustracje i logo - z odwróconymi wersjami.
Zasady przejścia: zapisz wybór użytkownika (system/światło/ciemność).

14) Animacje i ruch

Czas trwania: 120-200 ms (małe), 200-300 ms (przejścia).
Funkcje przyspieszenia są naturalne (sześcienno-bezier z niewielkim opóźnieniem).
Animacje nie powinny blokować przepływu i utrudniać czytelności.
Szacunek „preferuje zredukowany ruch”.

15) Wydajność

LCP ≤ 2. 5s, TTI/TBT w kolorze zielonym; łączenie kodów; leniwe obciążenie mediów.
Wirtualizacja długich list; buforowanie danych.
Szkielet do percepcji prędkości; zminimalizować układ „śmieci”.

16) Bezpieczeństwo i prywatność w UI

Jasne wyjaśnienia przyczyn wniosków (kamera, KYC, geo).
Przejrzyste terminy/prowizje/limity; bez „natychmiastowego”, jeśli możliwe są opóźnienia.
Poufne dane - maskowanie, wyraźne „show/hide”.
potwierdzenia nieodwracalnych działań; Dziennik aktywności/Powiadomienia logowania.

17) Metryka jakości UX

Krok konwersji i czas do zakończenia.
Wskaźnik błędów według pól/kroków i czasu do naprawy.
CTR według CTA i powtarzalności scenariusza.
Drop-off po błędzie/po załadowaniu> N sekund.
Wsparcie połączeń według tematu (przed/po zmianach).
A11y-defects do uwolnienia (cel - 0 krytyczny).

18) Listy kontrolne

Ekran przed zwolnieniem

• Jeden główny cel i jeden pierwotny - CTA.

[Nawigacja] i status gdzie-jestem są oczywiste.

• Krótka treść: 1-2 zdania na blok.
• Państwa: załadunek/puste/błąd/sukces są pokryte.
• A11y: kontrast AA, nacisk widoczny, „aria-” na interaktywny.
• Lokalizacja: długość łańcucha/formaty/RTL zaznaczone.
• Wydajność: Nie „ciężkie” bloki niepotrzebnie.

Formularz wstępnego zwolnienia

• Etykiety i formaty próbek są obecne.
• Inline validation + streszczenie do przedłożenia.
• Przewiń do pierwszego błędu, skupić się w polu.
• Wiadomości: co/jak/dlaczego; bez 500/400 kodów dla użytkownika.
• Dane nie są tracone na błędach/ponownym uruchomieniu.

19) Anty-wzory

„OK” jako CTA na krokach semantycznych.
Odtwórca zamiast etykiety.
Kolor jako jedyny sygnał stanu.
Spinners bez oszacowania czasu i bez alternatywy.
Okna modalne bez pułapki ostrości i zamknięcia ESC.
Mieszanie stylów/ikon, powielanie elementów poza systemem projektowania.
Humor/emoji w krytycznych scenariuszach (płatność/bezpieczeństwo).

20) Przykłady przed/po

Błąd formularza

Przed: „Błąd 400”

Po: "Nieprawidłowy format daty. Użyj DD. MM. RRRR"

Stan pusty

Przed: „Tu jest pusto”

Po: "Historia operacji po pierwszym uzupełnieniu pojawi się tutaj. [Doładuj]"

Komunikat o sukcesie

Do: „Zrobione”

Po: "Płatność zaakceptowana. Saldo zaktualizowane. [Zobacz historię]"

Nawigacja

Przed: Nie jest jasne, gdzie jest użytkownik

Po: aktywna zakładka + okruszki chleba + wyraźny tytuł strony

21) Szablony do przeglądu projektu

Rama ekranu

Tytuł → krótki opis → treść/lista → opinie/statusy → działania.

Ramka formy

Nagłówek → prompt → pole (label + helper + error) → CTA → działania wtórne → notatki.

Szablon mikrokopii

Tytuł (ex)

Zdanie 1-2: kontekst + kolejny krok

CTA: działanie + obiekt

Link wtórny: pomoc/zasady

22) Procesy i utrzymanie norm

Definicja gotowego (UX): układ + teksty + stany + A11y + i18n + metryki.
Przegląd UX w PR: lista kontrolna z sekcji 18-21.
Dokumentacja: każda funkcja dodaje/aktualizuje przewodnik po wiki/Storybook.
Audyt raz na kwartał: zawartość, A11y, wydajność, spójność.

Końcowy arkusz oszustwa

Jeden cel, jeden główny CTA.
Stany i opinie są projektowane z wyprzedzeniem.
A11y i lokalizacja - od podstaw, a nie „później”.
Mniej kolorów - więcej semantyki i rytmu.
Pomiar: konwersja, błędy, czas, cofnięcia.
Wszystko przez system projektowania: te same zasady → te same oczekiwania → przewidywalne UX.

Mogę uzupełnić ten przewodnik gotowymi szablonami dla kluczowych scenariuszy (rejestracja/CUS, depozyt/wypłata, bonusy/turnieje) i zebrać listy kontrolne dla procesu przeglądu.