Przeprowadzaj test przydatności, a nie kopiuj listę trendów
Przegląd Figma na 2026 rok wymienia immersyjne 3D, eksperymentalną nawigację, żywe palety, ruch, grywalizację i doświadczenia wspomagane AI. To eksploracja, a nie dowód, że każda strona powinna je kopiować. Strony usługowe i kont często zyskują więcej dzięki przewidywalnym ścieżkom.
Napisz zadanie strony zanim wybierzesz zabieg. Porównaj wersję konwencjonalną i prowadzoną trendem na tym samym zadaniu i miarze sukcesu. Sama uwaga to nie sukces.
Nazwij główną akcję i spraw, by jej etykieta, miejsce i rezultat były zrozumiałe bez hovera, gestu czy samouczka.
Zachowaj konwencjonalną drogę do podstawowej treści i łatwy sposób usunięcia ulepszenia, jeśli dowody będą słabe.
Buduj responsywne systemy wokół treści i komponentów
Responsywny design nadal ma dużą wartość, ponieważ rozmiar ekranu nie przewiduje intencji ani metody wprowadzania. Google rekomenduje punkty przerwania prowadzone treścią (content-led breakpoints), unikanie poziomego overflow i niewycinanie informacji tylko dlatego, że układ jest wąski. Zacznij od małego, potem rozszerzaj, gdy treść potrzebuje więcej miejsca.
Container queries dopasowują komponent do przestrzeni udostępnionej przez element nadrzędny, więc jedna karta może działać w kolumnie głównej i w sidebarze. Nie zastępują media queries: MDN opisuje zapasowe podejścia z gridem, flexem i zapytaniami względem viewportu.
Ograniczaj długie linie tekstu na szerokich ekranach i potwierdź, że powiększanie (zoom) nie tworzy obciętych kolumn ani poziomego przewijania.
Podawaj wymiary obrazów, aby przeglądarka mogła przydzielić miejsce przed załadowaniem i zmniejszyć przesunięcia układu.
Stawiaj dostępność interakcji na pierwszym miejscu
Projektowanie z priorytetem dostępności rozwiązuje, jak ludzie obsługują serwis, więc przetrwa modę wizualną. WCAG 2.2 to rekomendacja W3C. Jej nowsze kryteria dają konkretne przypadki przeglądu: fokus klawiatury nie może być całkowicie ukryty przez treści tworzone przez autora na poziomie AA; przeciąganie wymaga prostej alternatywy wskazującej; a cele wskazujące mają minimum 24 na 24 CSS-piksele przy poziomie AA, chyba że ma zastosowanie wyjątek.
Przekształć te przypadki w zasady systemowe. Nie pozwól, aby nagłówki, kontrolki ciasteczek, uruchamiacze czatu czy banery zasłaniały fokus. Pokaż wyraźny stan fokusu. Tam, gdzie lista może być zmieniana przez przeciąganie, zaoferuj inną prostą operację. WCAG 2.2 porusza też pomoc, wielokrotne wprowadzanie i dostępne uwierzytelnianie. W przypadku wyjątków związanych z bezpieczeństwem uzyskaj kwalifikowaną opinię z zakresu bezpieczeństwa i dostępności.
Przejdź klawiszem Tab przez kluczowe ścieżki w każdym układzie i potwierdź, że kontrolka w fokusu jest widoczna i możliwa do zidentyfikowania.
Zmierz kompaktowe kontrolki ikon i odstępy między nimi, szczególnie w menu i formularzach.
Wsparcie dla menedżerów haseł i wklejania może zmniejszyć obciążenie poznawcze; nie osłabiaj zabezpieczeń bez kwalifikowanej opinii z zakresu bezpieczeństwa.
Używaj ruchu jako opcjonalnego przewodnika
Ruch może wyjaśnić potwierdzenie zapisu, rozwinięty panel czy następny krok. Szkodzi użyteczności, gdy opóźnia wybór, wielokrotnie odciąga uwagę od treści lub jest jedynym sposobem zrozumienia zmiany stanu. To kierunek, a nie wymóg.
Respektuj prośbę o ograniczenie nieistotnego ruchu. MDN dokumentuje prefers-reduced-motion do wykrywania preferencji użytkownika, by usunąć, ograniczyć lub zastąpić ruch. Zachowaj informacje i komunikaty o ukończeniu, ale zastąp duże panoramy, paralaksę czy autoplay cichszymi zmianami wizualnymi.
Określ, jaką informację przekazuje każda animacja; usuń ją, jeśli nie ma jasnej odpowiedzi.
Włącz ograniczenie ruchu na poziomie systemu operacyjnego i zweryfikuj, czy strona nadal ma sens.
Uczyń wydajność i stabilność kryteriami akceptacji projektu
Wydajność to ograniczenie projektu, a nie zadanie końcowe. Obecne Core Web Vitals Google’a to Largest Contentful Paint dla ładowania, Interaction to Next Paint dla responsywności oraz Cumulative Layout Shift dla stabilności wizualnej. Rekomendowane progi to LCP 2,5 sekundy lub mniej, INP 200 milisekund lub mniej oraz CLS 0,1 lub mniej na 75. percentylu, z podziałem na urządzenia mobilne i desktop. To użyteczne cele, ale nie zastępują testów zadaniowych.
Ustal budżet przed dodaniem hero wideo, niestandardowej czcionki, sekwencji obrazów, efektu po stronie klienta czy zewnętrznego asystenta. Testy laboratoryjne wykrywają regresje przed wydaniem, ale pomiar w polu jest niezbędny, bo warunki się różnią.
Rezerwuj miejsce na obrazy, osadzenia, reklamy i elementy interfejsu ładujące się później.
Używaj kontroli laboratoryjnych podczas budowy i danych rzeczywistych użytkowników po wydaniu; przeglądaj oddzielnie mobile i desktop.
Traktuj immersję, eksperymenty i interfejsy AI jako warunkowe eksperymenty
3D, nieliniowa nawigacja, wizualne opowiadanie historii i konwersacyjne wsparcie mogą pomóc, gdy zmniejszają niepewność, której nie usuwa statyczna treść. Są złymi domyślnymi rozwiązaniami, gdy odwiedzający potrzebuje ceny, znanego celu, formularza lub odpowiedzi. Zachowaj bezpośrednią drogę, opis w postaci zwykłego tekstu i użyteczną ścieżkę, gdy ulepszenie się ładuje lub zawiedzie.
Prototypuj najmniejszą możliwą wersję najpierw. Zdefiniuj, co uzasadni jej pozostawienie, np. mniej błędnych wyborów lub szybsze znajdowanie odpowiedzi. Zarejestruj wagę zasobów, wykonywanie skryptów, koszty utrzymania, zależności od dostawcy, przegląd prywatności i alternatywy dostępnościowe. Efektowny demo nie dowodzi związku przyczynowego.
Zachowaj podstawowy tekst, główną nawigację i główną akcję użyteczną bez warstwy immersyjnej lub asystenta.
Ogranicz wczesną ekspozycję, porównuj wyniki i zachowaj decyzję o wycofaniu.
Wdrażaj zmiany projektowe jako odporne zmiany produktowe
Układ może zmienić dostarczanie zasobów, zachowanie JavaScript, narzędzia zgody i usługi zewnętrzne. Traktuj redesign jako zmianę produkcyjną. Status Is UP wspiera proaktywne optymalizacje dostępności i naprawy: zidentyfikuj słabe zależności przed uruchomieniem, ustaw kontrole, przygotuj rollback i naprawiaj powtarzające się ryzyka dostawy. To różni się od obserwowania przestojów dopiero, gdy użytkownicy są dotknięci.
Zachowaj poprzednią ścieżkę, dopóki nowa nie przejdzie kontroli zadania, dostępności i wydajności. Określ, kto może zatrzymać funkcję. Powtórnie sprawdź po zmianach treści, przeglądarki, dostawców lub kampanii.
Sprawdź kluczowe ścieżki, zasoby, formularze, zachowanie zgody i zależności przed szerokim wdrożeniem.
Udokumentuj przetestowaną ścieżkę przywrócenia, właściciela decyzji i oczekiwany stan odwiedzającego.