Kolor Twojej marki na przycisku wysyłania podpowiada, w co kliknąć. Ten sam kolor na etykiecie pola utrudnia czytanie tekstu. Czcionka Twojej marki w nagłówku wygląda wyrafinowanie. Ta sama czcionka w etykiecie pola staje się nieczytelna przy 12 pikselach. To podstawowe napięcie w projektowaniu formularzy z marką. Elementy, które czynią markę rozpoznawalną, mogą utrudniać wypełnienie formularza.
Strategia nie polega na usunięciu marki. Polega na używaniu jej selektywnie. Stosuj kolor marki tam, gdzie prowadzi ludzi do działania. Używaj typografii marki tam, gdzie pozostaje czytelna. Usuwaj osobowość marki tam, gdzie tworzy tarcie. Ten artykuł omawia konkretne decyzje, dzięki którym formularz jest jednocześnie spójny z marką i użyteczny.
Gdzie stosować kolor marki w formularzu
Główny kolor marki należy do przycisku wysyłania. Gdy ktoś dociera do końca formularza, musi wiedzieć, w co kliknąć. Przycisk w kolorze marki jest od razu rozpoznawalny. Ta osoba widziała ten kolor na całej Twojej stronie. Wie, że oznacza działanie. Przycisk w barwach marki sygnalizuje: "to należy do Twojej marki i można bezpiecznie kliknąć".
Zachowaj neutralne tło formularza. Białe, złamana biel albo bardzo jasnoszare. Jasne tło sprawia, że pola się wyróżniają, a tekst jest czytelny. Wiele marek używa na stronach ciemnych teł. Ciemny granat może wyglądać wyrafinowanie w nagłówku. Użyj go jednak jako tła formularza, a biały tekst w polach nagle trudniej odczytać. Ludzie mrużą oczy. Zastanawiają się, czy formularz nie jest zepsuty. Formularz przestaje być atutem marki i staje się tarciem.
Stosuj kolor marki subtelnie w stanach fokusa pól. Gdy ktoś kliknie pole formularza, pole potrzebuje wizualnej informacji zwrotnej. Pojawia się obramowanie albo zmienia się tło, by pokazać, że pole jest aktywne. Użyj tu jaśniejszego odcienia koloru marki. Nie pełnego nasycenia koloru głównego. Łagodniejsza wersja sygnalizuje zaznaczenie pola, nie przytłaczając formularza.
Komunikaty o błędach potrzebują własnego koloru. Standardem jest czerwony. Ludzie rozumieją czerwień jako "stop" lub "coś jest nie tak". Nie używaj koloru marki dla błędów, nawet jeśli Twoja marka jest czerwona. Jeśli jest, dodaj ciemniejszy lub bardziej nasycony odcień specjalnie dla błędów. To tworzy wizualną różnicę między "normalnie" a "błąd", którą ludzie rozpoznają natychmiast.
Komunikaty o sukcesie mogą być zielone. Zieleń sygnalizuje ukończenie i ruch naprzód. Jest powszechnie rozumiana. Gdy ktoś wyśle Twój formularz, strona lub komunikat o sukcesie w zieleni działa jak potwierdzenie.
Kolory linków w formularzu powinny być w kolorze marki. Linki mają wyróżniać się kolorem. Tekst pomocniczy czy linki wyjaśniające powinny sprawiać wrażenie powiązanych z marką, ale wyraźnie oddzielonych od pól formularza.
Problem dostępności w paletach kolorów marek
Wiele palet kolorów marek nie spełnia standardów kontrastu WCAG AA. Jasna miętowa zieleń, która pięknie wygląda w księdze znaku, może mieć kontrast 2 do 1 względem bieli. WCAG AA wymaga 4,5 do 1. Wyrafinowany fiolet może nie spełniać wymagań na wybranym tle pól. To częste. Da się to też naprawić.
Przetestuj kolory marki, zanim użyjesz ich w formularzach. Skorzystaj z narzędzia do sprawdzania kontrastu. Jeśli kolor marki nie spełnia WCAG AA, masz opcje. Użyj ciemniejszej lub bardziej nasyconej wersji tego koloru. Miętowa zieleń może mieć w palecie wariant leśnej zieleni, który spełnia wymagany współczynnik. Albo użyj koloru marki tylko jako akcentu na przyciskach, gdzie kontrast jest naturalnie wyższy. Do tekstu, który wymaga kontrastu, użyj ciemnego neutralnego koloru, jak grafit.
Jest to szczególnie ważne dla etykiet. Jeśli etykiety mają jasny kolor marki, osoba słabowidząca będzie miała trudności. Osoba oglądająca formularz na jasnym ekranie telefonu na zewnątrz też. Etykiety to nie dekoracja. To kluczowa informacja. Zachowaj je ciemne, z mocnym kontrastem. Kolor marki zostaw na przyciski i akcenty, gdzie nie poświęca czytelności.
Jak wybrać typografię dla czytelności formularza
Twoja marka prawdopodobnie ma charakterystyczny krój pisma. Szeryfy sygnalizują wyrafinowanie dla kancelarii prawnych. Geometryczne kroje bezszeryfowe wydają się nowoczesne dla firm technologicznych. Zabawne kroje ręczne pasują do marek kreatywnych. Te czcionki to cenne zasoby marki. Pomagają rozpoznać markę. W formularzu sprawiają problemy.
Etykiety formularzy muszą być łatwe do przejrzenia i czytelne w małych rozmiarach. Większość ozdobnych czcionek marek takie nie jest. Krój imitujący pismo odręczne jest piękny w nagłówku o rozmiarze 36 pikseli. Przy 13 pikselach w etykiecie jest prawie nieczytelny. Cienki krój geometryczny wygląda elegancko w większych rozmiarach. Przy 12 pikselach staje się trudny do czytania. Ozdobny krój szeryfowy z zawijasami tworzy wizualny szum w polu, które powinno być czyste i użytkowe.
Rozwiązaniem jest użycie czystego kroju bezszeryfowego dla całego tekstu formularza. Etykiety, tekst pomocniczy, tekst zastępczy, komunikaty o błędach. Wszystko powinno być w prostej, czytelnej czcionce. Zwykły krój bezszeryfowy lub nowoczesna czcionka systemowa. To nie jest porzucenie marki. To wybór jasności tam, gdzie ma znaczenie. Marka objawia się w kolorze przycisku, układzie, ogólnej estetyce. Etykiety formularza nie muszą dźwigać całego ciężaru tożsamości marki.
Jeśli Twoja marka używa czystego, czytelnego kroju bezszeryfowego, przetestuj go w rozmiarze 12-14 pikseli na telefonie. Czy da się go wyraźnie przeczytać? Jeśli tak, możesz użyć go w formularzu. Jeśli nie, użyj czcionki zastępczej.
Tekst przycisku wysyłania może używać czcionki marki, jeśli jest czytelna przy 14-16 pikselach. Tekst przycisku jest większy niż tekst etykiet. Ozdobna czcionka ma więcej miejsca. Ale jeśli czcionka marki zawodzi przy rozmiarach etykiet, zawiedzie też w polach formularza. Najpierw czytelność, potem osobowość marki.
Budowanie hierarchii wizualnej, gdy typografia i kolor współpracują
Hierarchia wizualna w formularzu prowadzi osobę od góry do dołu. Które elementy są najważniejsze? Które drugorzędne? W formularzu hierarchia jest prosta i konkretna. Etykiety pól są pierwszoplanowe. Tekst pomocniczy jest drugorzędny. Przycisk wysyłania to wezwanie do działania.
Wspieraj tę hierarchię rozmiarem czcionki. Etykiety powinny mieć 13-16 pikseli. Tekst pomocniczy powinien być mniejszy i nieco jaśniejszy, około 12 pikseli. Komunikaty o błędach powinny być tak samo czytelne jak etykiety. Nie rób tekstu błędów mniejszego ani jaśniejszego. Ludzie muszą widzieć błędy od razu. Niech tekst błędu będzie tak samo wyraźny jak etykieta, którą poprawia.
Kolor marki wspiera tę hierarchię. Przycisk wysyłania ma główny kolor marki i wyraźnie różni się od etykiet pól. Sam kolor mówi użytkownikowi: "to akcja, którą wykonujesz dalej". Etykiety powinny być ciemne i neutralne. Każdy kolor marki w etykietach powinien być subtelny i podporządkowany czytelności.
Nagłówki sekcji w dłuższym formularzu mogą używać koloru marki. Tworzy to wizualne przerwy między grupami pól. Nagłówek sekcji nie jest polem wprowadzania. Ma więcej miejsca na wyrazistość niż etykiety. Wykorzystaj to, zachowując etykiety czytelne.
Kiedy stosować osobowość marki, a kiedy ją usuwać
Formularz to narzędzie, którego ktoś używa, by coś załatwić. Ta osoba chce przejść przez formularz szybko. Każda decyzja projektowa powinna albo jej w tym pomagać, albo zniknąć.
Osobowość marki ma miejsce tam, gdzie buduje pewność. Ogólna jakość wizualna formularza, odstępy między polami, spójność kolorów i typografii, wszystko to sygnalizuje, że marka dba o szczegóły. Dopracowany, profesjonalny formularz należy do dopracowanej, profesjonalnej marki. To osobowość marki w działaniu. Pomaga zdobyć zaufanie.
Osobowość marki nie ma miejsca tam, gdzie tworzy tarcie. Nie używaj etykiet pisanych wielkimi literami dlatego, że wyglądają bardziej władczo. Nie używaj bardzo jasnego tekstu na ciemniejszym tle dlatego, że wydaje się bardziej wyrafinowane. Nie używaj wąskiego, ozdobnego kroju, by zmieścić więcej tekstu, bo pasuje do estetyki marki. Te wybory szkodzą użyteczności. Spowalniają ludzi. Projektowanie formularzy to jedno z niewielu miejsc, gdzie marka musi powiedzieć: "moja estetyka ustępuje miejsca pomaganiu ludziom w wykonaniu zadania".
Przetestuj wybory projektowe marki na telefonie. Jeśli wybory dotyczące osobowości marki utrudniają wypełnienie formularza na małym ekranie, nie dodają wartości. Usuń je. Odchudzaj formularz, aż będzie łatwy na telefonie. Dopiero potem dodawaj elementy marki, które nie zakłócają tej łatwości.
Jak utrzymać spójność w różnych typach formularzy
Marka może mieć różne typy formularzy. Formularz kontaktowy jest krótki i rozmowny. Formularz zamówienia jest dłuższy i bardziej uporządkowany. Ankieta jest eksploracyjna. Zapis do newslettera jest minimalny. Każdy ma inny cel. Ale każdy powinien wyglądać i działać jak część tej samej marki.
Podstawowy język wizualny powinien pozostać taki sam we wszystkich formularzach. Przycisk wysyłania zawsze ma główny kolor marki. Etykiety zawsze mają tę samą czytelną czcionkę. Odstępy między polami podlegają temu samemu wzorcowi. Gdy ktoś przechodzi od formularza kontaktowego do zamówienia i ankiety, powinien czuć, że jest w tym samym doświadczeniu marki, mimo że formularz ma inny cel.
Stwórz przewodnik stylu formularzy i zapisz swoje decyzje. Czcionką etykiet jest czcionka bezszeryfowa 14 pikseli. Kolorem głównego przycisku jest dokładny kod koloru Twojej marki. Stan fokusa pola to ten konkretny jasny odcień koloru marki. Tekst pomocniczy jest szary, 12 pikseli. Gdy te decyzje są udokumentowane, każdy formularz budowany przez Twój zespół będzie spójny. Budowanie staje się też szybsze, bo decyzje już zapadły.
Jak WEMASY pomaga budować formularze z marką
Kreator formularzy WEMASY pozwala kontrolować każdy element wizualny, zachowując standardy dostępności. Ustaw kolor marki jako kolor przycisku. Wybierz czcionki etykiet z biblioteki czcionek bezpiecznych dla sieci. Kontroluj odstępy między polami i układ. Obejrzyj podgląd formularza na telefonie przed publikacją.
Zapisz swoje wybory projektowe jako szablon. Każdy formularz, który utworzysz potem, dziedziczy ten sam spójny styl. Zbuduj formularz kontaktowy, zamówienia, ankietę. Wszystkie wyglądają jak Twoja marka, bo wszystkie używają tego samego szablonu.
Formularze WEMASY automatycznie spełniają wymagania kontrastu WCAG AA dla elementów formularza. Jeśli wybierzesz kolor marki dla przycisków lub akcentów, system dba o to, by kontrast pozostał czytelny. Możesz mieć pewność, że Twój formularz z marką jest zarazem wyrazisty i dostępny.
Sprawdź, jakie funkcje formularzy zawiera Twój pakiet WEMASY.