Zasady projektowania stron, które działają
Wiele z tego, co mówi się o projektowaniu stron, to preferencja podana jako zasada. Istnieje jednak niewielki zbiór reguł, który wytrzymuje próbę praktyki i który widać, gdy go zabraknie.
Ten przewodnik omawia te reguły, z tym, co każda rozwiązuje i jak sprawdzić, czy jest spełniona.
Hierarchia: powiedzieć, co jest najważniejsze#
Hierarchia najsilniej wpływa na to, czy ludzie rozumieją stronę, i najłatwiej ją zweryfikować.
- Jedna rzecz jest najważniejsza na każdym ekranie. Jeśli są trzy, odwiedzający nie wybierze żadnej.
- Rozmiar, grubość i przestrzeń wokół komunikują ważność lepiej niż kolor.
- Główne działanie musi wizualnie odstawać od reszty strony.
- Grupuj powiązane elementy bliskością; odległość komunikuje rozdzielenie.
- Nie używaj więcej niż dwóch, trzech poziomów nagłówków. Więcej przestaje być czytane jako hierarchia.
- Sprawdź przez zmrużone oczy: co pozostaje czytelne, to ludzie widzą najpierw.
Test zmrużonych oczu trwa pięć sekund i wyłapuje większość problemów z hierarchią.
Przestrzeń, kontrast i czytelność#
Trzy mierzalne rzeczy, które oddzielają strony wygodne od męczących.
| Element | Zasada praktyczna | Częsty błąd |
|---|---|---|
| Długość wiersza | 60 do 80 znaków | Wiersze na całą szerokość ekranu |
| Rozmiar tekstu | 16 px lub więcej na mobile | 14 px «żeby więcej się zmieściło» |
| Interlinia | 1,5 w tekście podstawowym | Ciasna interlinia, gęsty blok |
| Kontrast tekstu | Co najmniej 4,5:1 | Jasnoszary na białym |
| Odstęp między sekcjami | Hojny i konsekwentny | Wszystko sklejone, bez oddechu |
| Cele dotyku | Minimum 44 px | Małe linki na mobile |
| Liczba krojów pisma | Jeden lub dwa | Cztery kroje na jednej stronie |
Spójność i jasność#
Spójność pozwala nauczyć się strony raz, zamiast uczyć się jej od nowa na każdej podstronie.
- Ten sam element zachowuje się tak samo w całym serwisie.
- Przyciski o tej samej wadze zawsze wyglądają tak samo.
- Linki są rozpoznawalne jako linki bez najeżdżania myszą.
- Etykiety mówią, co się stanie: «Poproś o wycenę» zamiast «Wyślij».
- Pisz językiem klienta, nie językiem wewnętrznym.
- Błędy formularza pojawiają się przy polu i mówią, jak je poprawić.
- Elementy, które nie są klikalne, nie powinny wyglądać na klikalne.
Zasada etykiet daje największy zwrot: zmiana «Wyślij» na «Poproś o wycenę» podnosi konwersję bez żadnej innej zmiany.
Co jest gustem, a nie zasadą#
Powtarzane reguły, które nie wytrzymują danych i kosztują czas dyskusji.
| Twierdzenie | Rzeczywistość |
|---|---|
| Wszystko musi być nad linią zgięcia | Ludzie przewijają; jasność liczy się bardziej |
| Mniej kliknięć zawsze lepiej | Właściwe kliknięcia biją nieliczne |
| Karuzela na wejściu jest obowiązkowa | Ma zwykle bardzo niską interakcję |
| Minimalizm zawsze lepszy | Za mało kontekstu utrudnia decyzję |
| Nigdy nie otwierać linków w nowym oknie | Zależy od kontekstu; dokumenty to wyjątek |
| Czerwony jest agresywny | Zależy całkowicie od branży i kultury |
| Strona musi być oryginalna | Znajomość wzorca pomaga w obsłudze |
Znane wzorce to nie brak kreatywności: to powód, dla którego ludzie umieją obsłużyć stronę, której nigdy nie widzieli.
Najczęstsze pytania
Czy ładna strona konwertuje lepiej?
Jasna strona konwertuje lepiej; estetyka pomaga przez wiarygodność w pierwszych sekundach. Estetyka zawodzi, gdy konkuruje ze zrozumieniem — animacje opóźniające, niski kontrast w imię elegancji, kreatywne etykiety, których nikt nie rozumie. Najpierw jasność, estetyka w jej służbie.
Ilu kolorów używać?
Jeden kolor marki, jeden akcentowy dla działań i skala szarości. Poza tym każdy dodatkowy kolor wymaga uzasadnienia funkcjonalnego — stany błędu, sukcesu, ostrzeżenia. Duże palety utrudniają wyróżnienie tego, co ważne, bo wszystko konkuruje ze wszystkim.
Czy podążać za trendami w projektowaniu?
Z umiarem. Trendy datują stronę i wymuszają przebudowy z powodów estetycznych zamiast funkcjonalnych. Dobrze starzeją się czytelna typografia, hojna przestrzeń i solidna hierarchia — zasady mające dekady. Przyjmuj trendy tam, gdzie tanio je cofnąć, i unikaj ich w strukturze.
Skąd wiem, czy mój projekt działa?
Patrz na zachowanie: czy ludzie docierają do głównego działania, czy odchodzą? Gdzie zatrzymują się w formularzach? Nagrania sesji i analiza formularzy pokazują to w minuty. Wewnętrzna opinia o estetyce to najgorszy dostępny wskaźnik, bo zespół widzi stronę codziennie, a odwiedzający raz.
zasady projektowania stronhierarchia wizualnaczytelność w siecikontrast tekstuużyteczność stronyprojekt a konwersja
