Pięć decyzji o odstępach, które naprawiają większość interfejsów

Kiedy interfejs sprawia wrażenie nieudanego, a trudno powiedzieć dlaczego, odpowiedzią zwykle są odstępy. Nie paleta, nie krój pisma – przerwy. Odstępy to niewidzialny system, który mówi oku, co należy do siebie, co jest osobne i co liczy się najbardziej, a zawodzi po cichu: żaden domyślny linter nie zgłasza przerwy 13px, żaden recenzent nie napisze „rytm jest zepsuty”. Po latach audytowania własnych interfejsów i cudzych niemal każda poprawka odstępów, jaką wprowadzam, jest jedną z tych samych pięciu decyzji. {.answer-block}

TL;DR

• Warto przyjąć skalę i odrzucać wszystko, co poza nią wykracza. 4, 8, 16, 24, 32, 48, 64. Przerwa 13px nie jest decyzją projektową; to dryf.
• Odstęp między grupami musi przewyższać odstęp wewnątrz grup. Ta jedna reguła Gestalt zastępuje większość obramowań i ramek.
• Każdy kontener powinien mieć jedną wartość paddingu, wyprowadzoną z jego roli (komponent 16, karta 24, sekcja 32-48), zamiast dobierania każdej krawędzi na oko.
• Niech hierarchię buduje biała przestrzeń, zanim sięgnie się po separatory. Obramowania to odstępy, które się poddały.
• Rytm pionowy należy naprawić na poziomie tekstu – line-height minimum 1.5, mniejszy odstęp po nagłówku niż przed nim – inaczej nic powyżej nie uratuje strony.

1. Przyjąć skalę, a potem odrzucać wszystko, co poza nią wykracza

Wybór konkretnych wartości to mniejsza połowa pierwszej decyzji; większą jest zgoda co do tego, że istnieje zbiór wartości. Mój opiera się na bazie 4px: 4, 8, 16, 24, 32, 48, 64 – siedem wartości, każda z własnym tokenem. (Gęste powierzchnie, takie jak tabele danych i paski narzędzi, czasem uzasadniają 12; jeśli tak jest w danym projekcie, warto zrobić z tego token. Zbrodnią jest wartość bez nazwy, a nie ósmy token.)

Konkretne liczby znaczą mniej niż samo odrzucenie. Wartości przypadkowe (13px, 7px, 22px) łamią rytm w sposób, który oko rejestruje jako niechlujstwo, nie potrafiąc go nazwać. Reguła, której się trzymam: każda wartość odstępu pochodzi ze skali albo ma udokumentowane uzasadnienie. W praktyce udokumentowane wyjątki niemal nigdy nie przechodzą przeglądu, bo „wtedy wyglądało dobrze” to dokładnie ten dryf, któremu skala ma zapobiegać.

Skala redukuje też liczbę decyzji. Bez niej każda przerwa jest osobnym osądem podejmowanym w tempie implementacji; z nią większość przerw ma dokładnie jeden sensowny token, a przegląd projektu spiera się o ciekawe przypadki zamiast o arytmetykę.

2. Odstęp między grupami > odstęp wewnątrz grup

Jeśli z tego tekstu zostać ma jedno zdanie: przerwa między grupami musi być widocznie większa niż przerwa wewnątrz nich. To zasada bliskości z psychologii Gestalt wykonująca pracę nośną – oko odczytuje względną odległość jako relację, automatycznie i przed słowami.

Formularz, w którym etykieta stoi 8px od swojego pola, a pola dzieli 24px, nie potrzebuje żadnych ramek, separatorów ani przebarwień tła: grupowanie jest oczywiste samo z siebie. Wystarczy spłaszczyć te odległości do jednolitych 16px, a ten sam formularz zmienia się w mgłę równo rozstawionych wierszy, które użytkownik musi analizować świadomie. Te same trzy pola, dwa razy:

grouped (8 within / 24 between)     flattened (16 everywhere)

Name                                Name
[______________]
                                    [______________]

Email                               Email
[______________]
                                    [______________]

Phone                               Phone
[______________]
                                    [______________]

Po lewej każda etykieta bez wątpliwości należy do swojego pola. Po prawej każda wewnętrzna etykieta unosi się w równej odległości od dwóch pól – bliskość przestała głosować, a czytelnik ustala przynależność z kolejności czytania, a nie ze wzroku.

Typowa awaria to niemal zawsze kompresja na złym poziomie: projektant zacieśnia przerwę między grupami, żeby zmieścić więcej nad linią zgięcia, proporcja się załamuje, a potem – czując, że grupowanie się rozpływa – dodaje obramowania, żeby je przywrócić. Co prowadzi do decyzji czwartej. Ale najpierw:

3. Jeden padding na kontener, wyprowadzony z roli

Kontenery gromadzą asymetryczny padding tak, jak kuchnie gromadzą szuflady z rupieciami – drobna korekta tutaj, żeby zmieścił się przycisk, poprawka tam ze względu na ikonę, aż karta ma 18px u góry, 14px z lewej i nikt nie pamięta dlaczego. Lekarstwem jest stała reguła wyprowadzania: padding kontenera wynika z jego roli, a nie z jego zawartości.

• Komponenty (przyciski, pola, chipy): 16px
• Karty i zgrupowana treść: 24px
• Sekcje: 32-48px
• Obszary na poziomie strony i sekcje hero: 48-64px

Kiedy treść nie mieści się w paddingu wynikającym z roli, to treść nie pasuje do kontenera – należy ją podzielić, skrócić albo awansować kontener o poziom. Dopasowanie paddingu, by ratować jedno niesforne dziecko, psuje rytm całemu rodzeństwu, a asymetria czyta się jak błąd nawet dla użytkowników, którzy nigdy o niej nie wspomną.

4. Biała przestrzeń przed obramowaniami

Większość separatorów to przeprosiny. Obramowanie pod każdym wierszem listy, ramka wokół każdej sekcji formularza, włoskowata linia między kartami – każde z nich to odstęp, który się poddał. Granice rzeczywiście tworzą grupy (gestaltowska zasada wspólnego obszaru jest prawdziwa), ale to mocny lek: głośny wizualnie, addytywny i kumulujący się. Każde obramowanie to kolejna linia, którą oko musi przetworzyć.

Moja kolejność pracy: najpierw proporcja bliskości (decyzja druga). Jeśli grupy nadal się nie rozdzielają, warto spróbować zmiany tła zamiast kreski – przebarwienie tworzy obszar bez dodawania linii, to grupowanie przez wspólny obszar w najcichszej postaci i wygrywa z obramowaniem zawsze, gdy grupa potrzebuje spójności, ale nie krawędzi; naprzemienne pasy w tabelach to ta sama reguła w najbardziej znanej odsłonie. Po obramowania należy sięgać wtedy, gdy obszary naprawdę wymagają twardych krawędzi – tabele, obszary edytowalne, zagnieżdżone karty – i wówczas trzymać się ich konsekwentnie. Interfejs, który raz grupuje białą przestrzenią, a raz obramowaniami, czyta się jak dwa design systems w sporze.

Test, który stosuję podczas przeglądu: usunąć każde obramowanie, które nie oznacza usankcjonowanej twardej krawędzi – tabele, pola edytowalne – i spojrzeć na to, co zostało. Grupowanie, które przetrwa, było prawdziwe; to, co się rozpłynie, było długiem odstępów, który obramowania obsługiwały.

5. Rytm pionowy naprawić na poziomie tekstu

Systemy odstępów umierają od dołu. Jeśli tekst główny ma line-height 1.2, żadna ilość odstępów między sekcjami nie uratuje strony – same akapity czytają się ciasno, a wszystko, co na nich zbudowano, dziedziczy to napięcie. Minimum: tekst 16px, line-height 1.5 (do 1.75 przy długich formach) i szerokość łamu około 65ch. Część dotycząca line-height jest tą empiryczną: wytyczne dostępności nie bez powodu wskazują 1.5, a ciasna interlinia to najczęstszy zabójca rytmu w sieci. Limit 65ch to raczej praktyka niż prawo: długie wiersze potrafią wypaść dobrze w izolowanym teście, ale powrót wzroku do kolejnego wiersza staje się trudniejszy do trafienia, a czytelnicy napotykają ścianę tekstu na długo przed napotkaniem argumentu.

Powyżej akapitu obowiązuje reguła, która porządkuje całą resztę: nagłówek stoi bliżej treści, którą wprowadza, niż treści, po której następuje. Odstęp przed większy niż odstęp po – zwykle dwukrotnie. Nagłówek unoszący się w równej odległości między sekcjami nie należy do żadnej z nich; to asymetria wiąże go z jego własną treścią. Ten sam nagłówek, dwa razy:

bound (before wide / after tight)   floating (equal both sides)

...end of previous section.         ...end of previous section.


Shipping address                    Shipping address
[Street___________]
[City_____________]
                                    [Street___________]
                                    [City_____________]

Po lewej nagłówek widocznie posiada swoje pola. Po prawej wisi między sekcjami, a czytelnik przypisuje go zwyczajowo, a nie wzrokiem. To znów decyzja druga, działająca wewnątrz kolumny tekstu, i o to właśnie chodzi: rytm pionowy nie jest osobną dyscypliną, to reguła bliskości zastosowana w najmniejszej skali.

Audyt

Pięć decyzji sprowadza się do listy kontrolnej, którą przechodzę przy każdym ekranie:

1. Czy każda przerwa pochodzi ze skali? (Warto sprawdzić te dziwne – zawsze są przypadkiem.)
2. Czy każda przerwa między grupami jest większa niż przerwy wewnątrz tych grup?
3. Czy każdy kontener ma jeden padding wyprowadzony z roli?
4. Czy któreś obramowanie dałoby się usunąć po naprawieniu odstępów, które za nim stoją?
5. Czy kolumna tekstu utrzymuje własny rytm – line-height 1.5 lub więcej, nagłówki związane ze swoją treścią?

Większość ekranów oblewa dwa lub trzy z tych punktów, a ich poprawienie zmienia odbiór bardziej niż jakakolwiek zamiana palety czy kroju pisma. We własnych aplikacjach na iOS pierwsze pytanie egzekwowane jest mechanicznie: zanim commit trafi dalej, bramka przeglądu przeszukuje diff pod kątem surowych liczb paddingu, a wszystko, co nie jest tokenem z kitu, musi mieć nazwany powód, żeby przetrwać. Odstępy to miejsce, w którym kryje się rzemiosło, właśnie dlatego, że nikt nie potrafi ich wskazać palcem.

Często zadawane pytania

Jakiej skali odstępów powinien używać design system?

Skala o bazie 4px – 4, 8, 16, 24, 32, 48, 64 – pokrywa niemal każdą potrzebę interfejsu. Dokładne wartości znaczą mniej niż wyłączność: każda przerwa pochodzi ze skali albo ma udokumentowane uzasadnienie. Wartości przypadkowe (7px, 13px, 22px) łamią rytm wizualny w sposób, który użytkownicy czują, ale nie umieją nazwać.

Jak grupować elementy interfejsu bez obramowań?

Za pomocą proporcji bliskości: odstęp między grupami musi widocznie przewyższać odstęp wewnątrz nich. Przerwa 8px między etykietą a polem oraz 24px przed kolejną etykietą grupuje formularz zupełnie bez ramek. Obramowania warto zarezerwować dla obszarów wymagających twardych krawędzi – tabel, obszarów edytowalnych – a jako krok pośredni wybierać zmianę tła.

Ile paddingu powinny mieć karty i przyciski?

Należy go wyprowadzić z roli kontenera: ~16px dla komponentów (przycisków, pól), 24px dla kart, 32-48px dla sekcji i więcej dla sekcji hero. Jedna wartość na kontener – jeśli treść nie mieści się w paddingu wynikającym z roli, lepiej zmienić treść albo awansować kontener, niż ręcznie dobierać krawędzie.

Czym jest rytm pionowy w typografii?

To spójny wzorzec odstępów w dół kolumny tekstu: tekst główny co najmniej 16px z line-height 1.5-1.75, około 65 znaków w wierszu i nagłówki umieszczone bliżej treści, którą wprowadzają, niż tej, po której następują. Wszystko, co większe, dziedziczy z tego poziomu – jeśli akapity są ciasne, żaden odstęp między sekcjami nie naprawi strony.