Odwiedzający skanuje Twój formularz w dwie sekundy, zanim wpisze choćby jeden znak. Czyta rozmiary pól, odstępy, układ. Pole kodu pocztowego tak szerokie jak cały formularz krzyczy: zamieszanie. Jednowierszowy obszar tekstowy na szczegółową opinię wysyła komunikat, że nie spodziewasz się wiele.
Szerokość pola mówi użytkownikowi, ile tekstu oczekujesz. Maleńkie pole sygnalizuje: „podaj swoje imię". Wysoki obszar tekstowy sygnalizuje: „opowiedz swoją historię". Jeśli zrobisz to źle, prosisz się o zamieszanie, wysiłek przy pisaniu i porzucone formularze.
Twój formularz zawiera dwa typy pól tekstowych: jednowierszowe pole tekstowe i wieloliniowy obszar tekstowy. Wyglądają inaczej, zachowują się inaczej i rozwiązują inne problemy. Wybór właściwego nie jest skomplikowany, ale ma znaczenie dla tego, jak użytkownicy odbierają formularz i czy go wypełnią.
Czym jest pole tekstowe
Pole tekstowe to jednowierszowe pole, w którym użytkownicy wpisują krótki tekst. Nie zawija się do nowego wiersza, gdy dojdziesz do krawędzi. Nie obsługuje wielu akapitów. Naciśnij Enter, a formularz zostanie wysłany (albo przejdzie do następnego pola). Jest zaprojektowane do krótkich, ograniczonych danych.
Pole tekstowe wymusza mentalną umowę z użytkownikiem. Prosisz o coś szybkiego. Imię. E-mail. Kod pocztowy. Datę. Jedną informację.
Czym jest obszar tekstowy
Obszar tekstowy to wieloliniowe pole tekstowe, które rośnie w miarę pisania. Naciśnij Enter, a dostaniesz nowy wiersz tekstu. Przewija się w pionie, gdy treść przekracza widoczny obszar. Sygnalizuje użytkownikowi, że oczekujesz więcej niż kilku słów. Akapity są tu mile widziane. Szczegółowe myśli są oczekiwane.
Obszar tekstowy usuwa ograniczenie. Użytkownik wie, że może napisać tyle, ile potrzebuje, bez upychania odpowiedzi w jednym wierszu.
Kiedy używać jednowierszowego pola tekstowego
Użyj pola tekstowego, gdy oczekiwana odpowiedź mieści się w jednym wierszu, a użytkownik może odpowiedzieć kilkoma słowami lub krócej.
Dane kontaktowe
Imię i nazwisko, e-mail, numer telefonu. Te pola są zawsze jednowierszowe. Użytkownik oczekuje, że wpisze imię i pójdzie dalej, a nie otworzy edytora tekstu na swój numer telefonu.
Krótkie identyfikatory
Nazwa użytkownika, numer konta, kod pocztowy, hasło. Mają określoną długość albo oczekuje się, że będą krótkie. Jednowierszowe pole ma sens.
Pola lokalizacji i logistyki
Miasto, województwo, kraj, ulica (pierwszy wiersz). To zazwyczaj wpisy jednowierszowe. Adres możesz podzielić na kilka jednowierszowych pól zamiast jednego dużego obszaru tekstowego.
Wyszukiwanie i filtrowanie
Pola wyszukiwania. Filtry produktów. Zakresy dat. Oczekuje się tu szybkiego wpisu, a nie akapitu. Jednowierszowe pola wydają się właściwe.
Daty i liczby
Każde pole, w którym użytkownik wpisuje konkretną datę, godzinę, ilość lub cenę. Jednowierszowe pole. Czasem chcesz użyć wyspecjalizowanego typu pola dla dat (jak wybierak daty), ale model interakcji nadal jest jednowierszowy.
Kiedy używać obszaru tekstowego
Użyj obszaru tekstowego, gdy oczekujesz, że użytkownik napisze więcej niż jedno zdanie, albo gdy odpowiedź jest z natury dłuższa niż jeden wiersz.
Komentarze i opinie
Jeśli pytasz „Jaką masz opinię?", użytkownik myśli akapitami, a nie pojedynczymi słowami. Obszar tekstowy sygnalizuje, że jest miejsce na całą myśl. Nie poczuje się ściśnięty.
Formularze wiadomości i zapytań
Gdy odwiedzający wypełnia formularz kontaktowy z polem wiadomości, potrzebuje miejsca, by wyjaśnić swoją sytuację. Ilość tekstu bardzo się różni. Obszar tekstowy pomieści zarówno szybkie pytanie w dwóch zdaniach, jak i szczegółową prośbę na dwa akapity.
Pola opisu i szczegółów
Opisy produktów, briefy projektów, wymagania dotyczące usług. Każde pole, które prosi użytkownika o podanie kontekstu lub szczegółów. Obszar tekstowy zachęca do tych szczegółów.
Uwagi i specjalne instrukcje
Pole z napisem „Dodaj specjalne życzenia" albo „Uwagi do dostawy" często potrzebuje obszaru tekstowego, bo nie da się przewidzieć, czy użytkownik ma do dodania dwa słowa, czy dwa akapity.
Zasada rozmiaru: szerokość pola podpowiada oczekiwaną długość
Rozmiar pola wysyła komunikat, zanim użytkownik wpisze jakikolwiek znak. Pole kodu pocztowego rozciągnięte na całą szerokość formularza tworzy zamieszanie. Użytkownik widzi tyle miejsca i myśli: „czy dobrze rozumiem, o co jestem proszony?"
Stosuj tę regułę: wizualny rozmiar pola powinien odpowiadać oczekiwanej długości odpowiedzi.
Krótkie pola tekstowe
Dla kodu pocztowego zrób wąskie pole. Może 80 do 120 pikseli szerokości na komputerze. Ten sygnał wizualny mówi użytkownikowi: „wpisz pięć cyfr, a nie akapit".
Dla pola imienia i nazwiska użyj średniej szerokości. Może 200 do 300 pikseli. Dość długie na „Aleksander Kowalczyk", ale nie tak szerokie, by zapraszało do wpisania biografii.
Obszary tekstowe
Obszary tekstowe rozszerzają się w poziomie i w pionie. Obszar tekstowy o wysokości czterech wierszy sygnalizuje większą odpowiedź niż obszar o wysokości dwóch wierszy. Dopasuj obszar tekstowy do oczekiwanego wysiłku.
Jeśli oczekujesz kilku zdań, zacznij od trzech do pięciu widocznych wierszy. Jeśli prosisz o szczegółową opinię, zacznij od sześciu do ośmiu wierszy. Użytkownicy mogą zmienić rozmiar pola, jeśli potrzebują więcej miejsca, ale początkowy rozmiar ustawia ich oczekiwania.
Zasady projektowania pól tekstowych
Zawsze łącz z etykietą
Nigdy nie używaj tekstu zastępczego jako substytutu widocznej etykiety. Tekst zastępczy znika, gdy użytkownik zaczyna pisać, co psuje dostępność i zostawia go z domysłami, czego chciało pole. Użyj jasnej etykiety nad polem lub obok niego, a tekst zastępczy stosuj tylko jako delikatną podpowiedź.
Zły przykład: pole bez etykiety, tylko szary tekst zastępczy „Wpisz swoje imię".
Dobry przykład: etykieta „Imię" nad polem, z opcjonalnym tekstem zastępczym, np. „Jan Kowalski".
Jasno oznaczaj pola wymagane
Oznacz pola wymagane gwiazdką (*) lub słowem „(wymagane)" w nawiasie. Nie zostawiaj użytkowników z domysłami, czy pole jest opcjonalne.
Waliduj wcześnie, naprawiaj z wdziękiem
Jeśli użytkownik wpisze nieprawidłowy adres e-mail lub źle sformatowany numer telefonu, nie czyść jego wpisu. Pokaż komunikat o błędzie, który konkretnie wyjaśnia problem, i zachowaj częściowy wpis, aby mógł go poprawić, zamiast wpisywać od nowa.
Obsługuj oczekiwany typ danych
Dla e-maila użyj type="email", aby użytkownicy telefonów dostali klawiaturę dostosowaną do e-maili. Dla telefonu użyj type="tel". Dla liczb użyj type="number". Te wyspecjalizowane typy pól poprawiają wygodę na telefonie, nie dodając Ci pracy.
Zasady projektowania obszarów tekstowych
Niech obszar tekstowy rośnie wraz z treścią
Jeśli użytkownik pisze długą wiadomość, a obszar tekstowy ma stały rozmiar, musi przewijać wewnątrz pola w trakcie pisania. To psuje doświadczenie pisania. Użyj CSS lub JavaScriptu, aby obszar tekstowy rozszerzał się automatycznie wraz z dodawaniem kolejnych wierszy. Użytkownik pisze naturalnie, pole rośnie, bez przewijania wewnątrz samego pola.
Pokaż jasno rozmiar początkowy
Obszar tekstowy powinien mieć wystarczającą widoczną wysokość, by sygnalizować, że oczekujesz więcej niż jednego wiersza. Pokaż co najmniej trzy do pięciu wierszy pustego miejsca, aby użytkownicy rozumieli, że to nie jest jednowierszowe pole.
Ustaw rozsądny limit znaków, jeśli trzeba
Niektóre obszary tekstowe mają limity. Formularz obsługi klienta może ograniczać opinię do 5000 znaków. Jeśli masz limit, pokazuj pozostałą liczbę znaków w trakcie pisania. Niech użytkownik widzi, ile miejsca mu zostało, zamiast odkrywać to, gdy uderzy w ścianę.
Używaj czcionki o stałej szerokości dla kodu lub danych technicznych
Jeśli obszar tekstowy służy do fragmentów kodu lub danych technicznych, użyj czcionki o stałej szerokości (monospace), aby odstępy i wyrównanie miały znaczenie wizualne. Dla zwykłego tekstu, jak wiadomości czy opinie, użyj domyślnej czcionki bezszeryfowej, która pasuje do Twojej marki.
Częste błędy w polach tekstowych
Takie same szerokości wszystkich pól tekstowych
Jeśli każde pole w formularzu ma tę samą szerokość, tracisz sygnał wizualny o oczekiwanej długości. Pole kodu pocztowego nie powinno być tak szerokie jak pole imienia i nazwiska. Niech rozmiar komunikuje oczekiwanie.
Tekst zastępczy zamiast etykiet
Wspomniano o tym wyżej, ale to kluczowe. Tekst zastępczy pomaga jako podpowiedź, a nie jako etykieta. Użytkownik z czytnikiem ekranu nie zobaczy tekstu zastępczego. Użytkownik, który wypełnił część pól i wrócił, zapomni, czego chciało pole.
Brak błędów walidacji w kontekście
Jeśli użytkownik wpisze nieprawidłowy e-mail, a komunikat o błędzie pojawi się na górze formularza, podczas gdy pole e-mail jest na dole, musi przewijać, by znaleźć problem. Trzymaj komunikaty o błędach blisko pola, które je wywołało, w kolorze (czerwonym lub pomarańczowym) z ikoną sygnalizującą „coś jest nie tak".
Brak cofnięcia po wyczyszczeniu
Jeśli użytkownik przypadkowo wyczyści pole albo formularz ma przycisk „Wyczyść", który kasuje wszystko, upewnij się, że może cofnąć tę akcję. Jedno stuknięcie przycisku nie powinno niszczyć pięciu minut wypełniania formularza.
Częste błędy w obszarach tekstowych
Obszary tekstowe o stałym rozmiarze, które się nie rozszerzają
Obszar tekstowy, który zachowuje ten sam rozmiar, gdy treść się przepełnia i wymaga przewijania, zmusza użytkownika do pisania w malutkim okienku. Jego doświadczenie wydaje się zepsute. Spraw, by obszar tekstowy rozszerzał się wraz z treścią.
Brak wyraźnej informacji o limicie znaków
Jeśli Twój obszar tekstowy ma maksymalną długość, użytkownik powinien o tym wiedzieć, zanim go osiągnie. Pokaż licznik znaków aktualizowany w trakcie pisania. „Pozostało 500 znaków" lub „2 z 5000 znaków" mówi od razu, ile jest miejsca.
Zbyt mały start
Obszar tekstowy o wysokości jednego wiersza nie komunikuje „chcę Twojej szczegółowej opinii". Wygląda, jakby nadal był jednowierszowym polem. Zacznij od co najmniej trzech lub czterech widocznych wierszy, aby użytkownik rozumiał, że może napisać więcej.
Przykłady: pole tekstowe a obszar tekstowy w kontekście
Formularz kontaktowy
Pole imienia i nazwiska: jednowierszowe pole tekstowe. Dość szerokie na długie imię, ale wystarczająco wąskie, by sygnalizować „tylko Twoje imię".
Pole e-mail: jednowierszowe pole tekstowe z type="email".
Pole telefonu: jednowierszowe pole tekstowe z type="tel".
Pole wiadomości: obszar tekstowy, dość wysoki na kilka akapitów.
Formularz opinii o produkcie
Twoje imię: jednowierszowe pole.
Twój e-mail: jednowierszowe pole z type="email".
Ocena (od 1 do 5 gwiazdek): wyspecjalizowany typ pola, ale nie obszar tekstowy.
Twoja opinia: obszar tekstowy.
Polecam innym: pole wyboru, a nie pole tekstowe.
Formularz zamówienia
Imię, nazwisko, e-mail, telefon: wszystko to pola jednowierszowe.
Adres wysyłki (ulica, miasto, województwo, kod pocztowy): zazwyczaj kilka pól jednowierszowych, a nie jeden obszar tekstowy na cały adres.
Specjalne instrukcje dostawy: obszar tekstowy. Użytkownik może mieć jedno lub trzy zdania, zależnie od potrzeb.
Formularze WEMASY: budowanie pól tekstowych i obszarów tekstowych
Kreator formularzy WEMASY zawiera zarówno pola tekstowe, jak i obszary tekstowe. Gdy dodajesz pole do formularza, wybierasz jego typ w zależności od tego, o co pytasz.
W formularzu kontaktowym w WEMASY dodasz pole tekstowe na imię i nazwisko oraz e-mail, a potem obszar tekstowy na wiadomość. WEMASY automatycznie zajmuje się stylem, aby Twoje pola tekstowe i obszary tekstowe pasowały do kolorów i typografii marki. Ty skupiasz się na zadawaniu właściwych pytań. Kreator formularzy zajmuje się układem i zachowaniem pól.
Jeśli potrzebujesz wyspecjalizowanego pola (jak wybierak daty czy walidacja e-maila), WEMASY to także obsługuje. Rozmiar pola, zachowanie i walidacja współpracują, by poprowadzić użytkownika do ukończenia formularza.