Prawa Gestalt

Tip: Zmierz odległość między labelką a jej polem, a potem odległość do następnego pola. Jeśli ta druga jest mniejsza lub równa, powiększ spacing między polami. To najprostszy test poprawnej bliskości.

Tip: Przejrzyj swój interfejs i sprawdź, czy elementy o tej samej funkcji mają ten sam styl wizualny. Jeśli masz dwa przyciski, które wyglądają tak samo, ale jeden zapisuje, a drugi usuwa, zmień ich wygląd.

Tip: Kiedy projektujesz wieloetapowy proces (np. checkout), ułóż kroki w jednej linii wizualnej i połącz je elementem ciągłym, np. linią lub strzałkami. Unikaj układów, w których kolejny krok jest w zupełnie innym miejscu ekranu.

Tip: Zamiast ramek wokół kart, użyj cienia lub subtelnej zmiany tła. Interfejs będzie lżejszy wizualnie, a mózg użytkownika i tak domknie granice elementu.

Tip: Przy każdym modalu i overlayie dodaj ciemne, półprzezroczyste tło (backdrop). Bez niego użytkownik nie odróżni warstwy pierwszoplanowej od tła i nie wie, gdzie klikać.

Tip: Jeśli animujesz grupę powiązanych elementów (np. listę powiadomień), animuj je jako całość z tym samym timingiem i kierunkiem. Oddzielne animacje dla każdego elementu sugerują, że są niezależne.

Tip: Kiedy masz grupę powiązanych elementów (np. dane kontaktowe w formularzu), zamknij je we wspólnym kontenerze z subtelnym tłem lub ramką. To silniejszy sygnał grupowania niż sam spacing.

Tip: W wizualizacjach danych i diagramach łącz powiązane elementy cienką linią. W stepperach i timelinach rysuj linię między krokami. Połączenie wizualne jest silniejsze niż sam spacing.

Tip: Kiedy projektujesz layout porównawczy (np. tabela cen, before/after), zachowaj symetrię kolumn. Użyj tej samej szerokości, wysokości i struktury. Asymetria sugeruje, że jedna opcja jest ważniejsza od drugiej.

Tip: Pokaż swój interfejs komuś na 5 sekund, a potem zakryj ekran. Jeśli ta osoba nie potrafi opisać struktury strony, jest za skomplikowany. Upraszczaj, aż główne sekcje będą rozpoznawalne natychmiast.