Etykiety wewnątrz pól tekstowych zaczynają być popularnym trendem w formularzach. Im bardziej stają się popularne, tym więcej projektantów będzie chciało z nich skorzystać. Ale zanim zdecydujesz się umieścić swoje etykiety w swoich polach tekstowych, jest kilka rzeczy, które powinieneś wiedzieć.
Zalety etykiet wewnątrz pól tekstowych
Umieszczanie etykiet wewnątrz pól tekstowych może przynieść korzyści Twojemu formularzowi.
Po pierwsze redukuje długość i szerokość twoich formularzy.
Ponieważ etykieta znajduje się w polu tekstowym, masz więcej miejsca poza polem tekstowym, aby uzyskać bardziej zwarty układ.
Zmniejsza także liczbę fiksacji wizualnych z etykiety do pola tekstowego.
Ponieważ pole tekstowe i etykieta znajdują się jeden na drugim, wystarczy jedna wizualna fiksacja, aby znaleźć etykietę do której należy pole tekstowe.
Dzięki temu formularze są łatwiejsze do przetworzenia i szybciej można je wypełniać.
Wady pól z placeholderem
Jest wiele korzyści z umieszczania etykiet wewnątrz pól tekstowych ale istnieją również wady. Największym wyzwaniem jest wspieranie rozpoznawania przez wycofanie. Gdy użytkownicy zaczynają wypełniać pole tekstowe, etykieta w polu tekstowym znika. Utrudnia to użytkownikom rozpoznanie informacji, które wprowadzili, gdy spojrzą wstecz na formularz. Brak żadnego znaku, jaki rodzaj informacji znajduje się w formularzu, zmusza użytkowników do przypomnienia etykiet na podstawie wprowadzonych informacji, zwiększając obciążenie poznawcze ich pamięci.
Grupowanie i etykietowanie
Aby ułatwić użytkownikom rozpoznanie rodzaju wprowadzonych informacji,
należy pogrupować pola tekstowe na podstawie rodzaju informacji,
które użytkownicy będą wypełniać i wyraźnie oznaczać każdą sekcję.
Na przykład informacje o wysyłce użytkownika różnią się od informacji o płatności.
Dlatego ważne jest, aby nie mieszać tych pól tekstowych razem.
Zamiast tego grupuj je osobno i oznacz etykietę sekcji, więc gdy użytkownicy spojrzą wstecz, mogą łatwo rozpoznać każdy z nich
jako informacje o wysyłce lub informacje o płatności.
Etykiety w podsekcji są również potrzebne, jeśli masz dużo pól tekstowych.
Na przykład informacje o wysyłce użytkownika często zawierają informacje kontaktowe i informacje adresowe.
Grupowanie i oznaczanie pól kontaktowych jako jednej podsekcji i pól tekstowych adresu jako innej pozwoli
użytkownikom odróżnić ich dane kontaktowe od ich danych adresowych po wypełnieniu formularza.
Komunikaty o błędach
Większość komunikatów o błędach w formularzach informuje użytkowników,
że pozostawili puste pole tekstowe lub wprowadzili nieprawidłowe informacje.
W przypadku etykiet formularzy wewnątrz pól tekstowych te ogólne komunikaty o błędach nie są wystarczające.
Komunikat o błędzie informujący, że wprowadzone informacje są nieprawidłowe, nie pomaga im zbyt wiele,
ponieważ nie widzą etykiety pola tekstowego.
W rezultacie utrudnia im poprawianie pola tekstowego, ponieważ nie wiedzą,
do czego odnoszą się informacje w polu tekstowym.
Dlatego twoje komunikaty o błędach powinny odwoływać się ponownie do rodzaju informacji, które zbiera pole tekstowe.
Powiedzenie pola tekstowego jest "nieprawidłowe", nie pomoże użytkownikom rozpoznać i poprawić treści w polu tekstowym.
Będziesz musiał dostosować każdy komunikat o błędzie do każdego pola tekstowego.
Następnie użytkownicy będą mogli poprawić swoje błędy bez konieczności ponownego wyświetlania etykiety.
Wizualna informacja
Kolejnym wyzwaniem związanym z umieszczaniem etykiet wewnątrz pól tekstowych jest wizualna informacja zwrotna, którą otrzymuje użytkownik. Użytkownicy powinni uzyskać wizualną informację zwrotną po wybraniu i wpisaniu pola tekstowego. Powinni także uzyskać wizualną informację zwrotną, gdy usuwają informacje i odznaczają pole tekstowe. Gdy twoje pola tekstowe wykonają to poprawnie, użytkownicy będą mogli wypełnić formularz bez problemu.
Wybór pola tekstowego i pisanie
Kiedy użytkownicy po raz pierwszy patrzą na twoje etykiety w polu tekstowym, powinny one wyglądać szaro, aby różniły się od czarnego tekstu,
który będzie wyświetlany po wpisaniu.
Etykiety powinny zniknąć, gdy użytkownicy zaczynają pisać, ale nie powinny znikać, gdy użytkownik wybierze pole tekstowe za pomocą myszy.
Zamiast tego pole tekstowe powinno być podświetlone, a etykieta powinna być słabo widoczna,
aby użytkownicy wiedzieli, że etykieta wkrótce zniknie podczas pisania.
Nie powinien całkowicie zniknąć zanim użytkownik wpisze,
ponieważ niektórzy użytkownicy wybiorą pole tekstowe i zapomną jakie informacje wpisać w polu tekstowym.
Pozostawienie etykiety widocznej, dopóki nie zaczną pisać, nie zmusi użytkowników do polegania na ich pamięci,
aby przywołać etykietę pola tekstowego.
Usuwanie informacji i odznaczanie pola tekstowego
Gdy użytkownicy usuwają informacje z pola tekstowego i usuwają zaznaczenie, pole tekstowe powinno wrócić do pierwotnego stanu.
Oznacza to, że etykieta pola tekstowego powinna być wyświetlana ponownie.
Niektóre pola tekstowe spowodują zniknięcie etykiety nawet po przywróceniu jej oryginalnego stanu.
Etykieta powinna pojawić się ponownie, gdy użytkownicy usuwają informacje i usuwają zaznaczenie pola tekstowego,
aby mogli ponownie przeczytać etykietę, jeśli zajdzie taka potrzeba.
Umieszczanie etykiet wewnątrz Twoich pól tekstowych ma wiele zalet i wyzwań.
Gdy ją wyłączysz, Twój formularz będzie wyglądać czyściej, prościej i szczuplej niż większość formularzy w sieci.
Zaimponujesz użytkownikom, tym jak szybko i łatwo wypełnią formularz.
Ale dotarcie tam zajmie pracę.
Ten artykuł nie wykona pracy za Ciebie, ale może pchnąć Cię we właściwym kierunku,
więc gdy wszystko zostało już powiedziane i zrobione, nie masz o co się martwić.