Dlaczego strona wygląda na przeładowaną
Wrażenie przeładowania nie zawsze wynika z nadmiaru treści. Czasem na stronie są tylko najważniejsze informacje, ale nagłówki, opisy, zdjęcia i przyciski stoją zbyt blisko siebie. Czytelnik musi wtedy sam odgadnąć, które elementy tworzą jedną całość i gdzie zaczyna się kolejny temat. Odstępy pomagają mu rozpoznać tę strukturę bez dodatkowych ramek, kolorów i ozdobników.
Wyobraź sobie stronę małej firmy z opisem usług, cennikiem i formularzem kontaktowym. Jeśli wszystkie części mają podobny, niewielki odstęp, całość może przypominać jeden długi blok. Gdy powiązane informacje są bliżej siebie, a kolejne sekcje wyraźniej rozdzielone, stronę łatwiej przejrzeć. Nie chodzi o to, by zostawiać jak najwięcej pustego miejsca. Przestrzeń powinna pokazywać związki między elementami.
Zacznij od grupowania treści
Przed zmianą odstępów nazwij główne części strony: na przykład wprowadzenie, ofertę, odpowiedzi na pytania i kontakt. W każdej części ustal, co należy czytać razem. Nagłówek powinien być bliżej akapitu, który zapowiada, niż poprzedniego bloku. Opis usługi i prowadzący do niej przycisk również powinny wyglądać na powiązane. To prosta zasada, którą można zastosować zarówno na stronie firmowej, jak i w artykule blogowym czy katalogu.
Następnie wprowadź kilka powtarzalnych poziomów odstępu: niewielki między ściśle związanymi elementami, większy między blokami treści i największy między głównymi sekcjami. Nie musisz zaczynać od konkretnych liczb. Najpierw sprawdź, czy różnice są widoczne i konsekwentne. Jeśli każdy fragment ma inny odstęp, układ może sprawiać wrażenie przypadkowego, nawet gdy poszczególne części wyglądają dobrze.
Daj tekstowi i elementom miejsce
W tekście zwróć uwagę na szerokość kolumny, odstęp między wierszami oraz przerwy między akapitami. Zbyt ciasne wiersze utrudniają czytanie, a bardzo długie wiersze mogą utrudniać odnalezienie początku następnego. Akapity warto rozdzielać na tyle wyraźnie, by można było szybko wrócić do przerwanego miejsca. Sam większy odstęp nie naprawi jednak tekstu, który jest niejasny lub pozbawiony śródtytułów.
Podobnie jest z kartami usług, pozycjami katalogu i formularzami. Tekst nie powinien przylegać do krawędzi karty, a etykieta pola powinna być łatwa do skojarzenia z właściwym polem. Między sąsiednimi przyciskami i linkami zostaw miejsce ograniczające ryzyko przypadkowego kliknięcia, szczególnie na ekranie dotykowym. Zachowaj też miejsce na widoczny stan zaznaczenia elementu podczas poruszania się po stronie klawiaturą. Wygodny odstęp wspiera dostępność, ale nie zastępuje czytelnych etykiet ani odpowiedniego kontrastu.
Sprawdź układ na wąskim ekranie
Odstępy ustawione dla dużego monitora nie muszą działać na telefonie. Szerokie marginesy mogą zostawić zbyt mało miejsca na treść, a ciasno ustawione karty po ułożeniu jedna pod drugą mogą zlewać się w jeden ciąg. Otwórz stronę na różnych szerokościach ekranu i zobacz, czy da się szybko odróżnić koniec jednej sekcji od początku następnej. Sprawdź też, czy przyciski pozostają wygodne w użyciu.
Przyjrzyj się stronie po powiększeniu tekstu lub całego widoku w przeglądarce. Dłuższe tytuły i etykiety mogą wtedy zajmować więcej wierszy, niż zakładał pierwotny projekt. Ważne, by nie nachodziły na inne elementy i nie były ucinane. Nie oceniaj układu wyłącznie na przykładzie krótkich, idealnie dopasowanych tekstów; rzeczywista zawartość lepiej pokazuje, gdzie potrzeba więcej elastyczności.
Poprawiaj odstępy prostym testem
Wybierz jedną podstronę i przejrzyj ją bez czytania całych akapitów. Czy od razu widać główne sekcje? Czy przycisk wygląda na część właściwej oferty? Czy nagłówek nie zostaje samotnie na końcu bloku? Zapisz miejsca, w których musisz się zatrzymać, by zrozumieć układ. Następnie zmień jeden rodzaj odstępu naraz, na przykład przerwy między sekcjami, i ponownie oceń stronę.
Na koniec porównaj kilka podstron. Te same typy elementów powinny zwykle korzystać z podobnych odstępów, aby odwiedzający nie musiał za każdym razem uczyć się układu od nowa. Nie oznacza to sztywnego szablonu dla każdej treści: dłuższy formularz lub ważna informacja mogą wymagać innego rozwiązania. Celem jest strona, na której przestrzeń pomaga zrozumieć treść, zamiast odciągać od niej uwagę.
