Jeśli formularz prosi o datę, a odwiedzający zamiast ją wpisać rezygnują, masz problem z polem daty. Brzmi to prosto. Wybierz datę. Wpisz godzinę. Ale drobne decyzje projektowe dotyczące tego, jak o to prosisz, odpowiadają za zaskakująco dużą część porzuconych formularzy.
Pola daty i godziny z perspektywy projektanta wyglądają prosto. Wyzwanie polega na tym, że odwiedzający korzystają z nich różnie, zależnie od tego, jakiej daty szukają, z jakiego urządzenia korzystają i czy muszą przewijać miesiące, czy wpisywać cyfry. Zaprojektuj pole dobrze, a ludzie przejdą przez formularz bez tarcia. Zrób to źle, a zrezygnują, zanim w ogóle spróbują.
Dlaczego pola daty i godziny mają znaczenie dla odsetka wypełnień formularza
Pola daty to punkty decyzyjne. Odwiedzający wypełniający formularz rezerwacji musi wybrać termin wizyty. Ktoś rejestrujący się na wydarzenie musi wpisać rok urodzenia. Klient ustawiający zamówienie cykliczne musi wybrać datę rozpoczęcia. W każdym przypadku koszt interakcji tego jednego pola może zdecydować, czy ktoś dokończy, czy odejdzie.
Weźmy rezerwację wizyty. Badania pokazują, że wybieraki dat sprawdzają się, gdy odwiedzający wybierają daty w niedalekiej przyszłości. Ten sam wybierak staje się frustrujący, gdy odwiedzający wpisuje datę urodzenia i musi cofnąć się o 40 lat. Model interakcji, który wydaje się łatwy dla przyszłego miesiąca, wydaje się zepsuty dla roku 1985.
Pola godziny tworzą podobny problem. Odwiedzający, który próbuje umówić wizytę na 14:30, nie powinien przeklikiwać osobnych list rozwijanych dla godzin, minut i AM/PM. Sposób, w jaki zbudujesz te pola, bezpośrednio wpływa na to, czy ktoś zarezerwuje wizytę, czy zamknie przeglądarkę.
Pola tekstowe a wybieraki dat: jak wybrać właściwą interakcję
Wybór między polem tekstowym a kalendarzowym wybierakiem daty nie jest uniwersalny. Zależy od tego, o jaką datę prosisz.
Używaj pól tekstowych dla dat z dalekiej przeszłości lub przyszłości
Gdy ktoś wpisuje datę urodzenia, szuka daty, która może być sprzed 30, 40 lub 50 lat. Kalendarzowy wybierak wymaga przeklikania dziesiątek miesięcy, by tam dotrzeć. Lepiej działają trzy osobne pola tekstowe z etykietami Dzień, Miesiąc i Rok. Odwiedzający szybko wpisuje dane w każde pole, przechodząc automatycznie z jednego do następnego. Osiem do dziesięciu naciśnięć klawiszy i gotowe. Wybierak daty do tej samej czynności wymaga znacznie więcej stuknięć lub kliknięć.
Jeśli używasz jednego pola tekstowego zamiast trzech osobnych, wyraźnie pokaż oczekiwany format etykietą w rodzaju „DD.MM.RRRR" lub „MM/DD/YYYY", zależnie od regionu. Nie używaj tekstu zastępczego, który znika po kliknięciu. Etykieta pozostaje widoczna i mówi, czego chcesz.
Używaj wybieraków dat dla dat w niedalekiej przyszłości
Kalendarzowy wybierak daty ma sens, gdy ktoś rezerwuje wizytę na przyszły tydzień albo wybiera termin podróży w przyszłym miesiącu. Wybierak domyślnie pokazuje bieżący miesiąc, a użytkownik klika lub stuka żądaną datę. Wizualna metafora kalendarza pasuje do tego, jak ludzie już myślą o planowaniu.
Kluczowa zasada: dla dat przyszłych ustaw domyślnie w kalendarzu bieżący miesiąc. Nie zmuszaj do przeklikiwania miesięcy w poszukiwaniu właściwego. A jeśli dat nie można wybrać, pokaż niedostępne daty bezpośrednio w wybieraku. Wyszarzone lub wyłączone daty oszczędzają frustracji wyboru daty tylko po to, by po wysłaniu zobaczyć błąd „niedostępne".
Najlepsze praktyki dla wybieraków dat: jak sprawić, by działały dla odwiedzających
Wybierak daty jest tak użyteczny, jak łatwo odwiedzający mogą z niego korzystać. Zasady, które mają znaczenie:
Obsługuj ręczne wpisywanie obok wybieraka
Nie każdy chce korzystać z interfejsu kalendarza. Niektórzy odwiedzający wolą wpisać datę bezpośrednio. Zawsze zezwalaj na wpisywanie z klawiatury. Jeśli ktoś wpisze „15.03.2026", przyjmij to, nie zmuszając go do użycia wybieraka. Nie wymagaj znaków specjalnych. Przyjmuj „15-03-2026" lub „15 03 2026" tak samo. Elastyczne formatowanie usuwa tarcie.
Używaj typów pól HTML5 na telefonach
Urządzenia mobilne mają natywne wybieraki daty i godziny wbudowane w system operacyjny. Użyj type="date" lub type="time" w polu formularza HTML. Na iPhonie uruchamia to kołowy wybierak daty iOS. Na Androidzie pokazuje wybierak daty platformy. Odwiedzający oczekują takiej interakcji na telefonie, a natywny wybierak jest zoptymalizowany pod urządzenia mobilne.
Ogranicz zakres dat, by uniknąć niekończącego się przewijania
Jeśli prosisz o datę przyszłą, ogranicz wybierak do miesięcy z najbliższych 2-3 lat, a nie 50. Jeśli prosisz o datę historyczną, ustaw rozsądny punkt startowy. Dla „daty urodzenia" ustaw domyślnie 30 lub 50 lat wstecz, a nie 100.
Pokazuj kontekst niedostępnych dat
Jeśli niektórych dat nie można wybrać (bo terminy są już zajęte albo pogoda uniemożliwia usługę), oznacz te daty inaczej w wybieraku. Wyszarz je, wyłącz albo pokaż wskaźnik wizualny. Zapobiega to ślepemu zaułkowi, w którym ktoś wybiera datę tylko po to, by zobaczyć komunikat o niedostępności.
Projekt pola godziny: jak pomóc odwiedzającym wybrać właściwy moment
Pola godziny mają własne wyzwania. Odwiedzający wybierający godzinę wizyty nie powinien wybierać godzin, minut i AM/PM w osobnych listach rozwijanych. Połącz je mądrze.
Oferuj godziny co 30 minut
Większość systemów rezerwacji nie potrzebuje dokładności do minuty. Przedziały co trzydzieści minut pokrywają wizyty, konsultacje i rezerwacje. Oferuj godziny w rodzaju 9:00, 9:30, 10:00 i tak dalej. Zmniejsza to liczbę opcji bez utraty funkcjonalności.
Pokazuj godzinę w formacie, którego odwiedzający już używają
Dla odbiorców z USA użyj formatu 12-godzinnego z AM/PM. W Polsce i w kontekstach międzynarodowych lub przy grafikach zmianowych sensowny może być format 24-godzinny. Bądź spójny w całym formularzu. Nigdy nie przełączaj się między formatami w środku jednego formularza.
Ustaw domyślną godzinę lub pokaż bieżący czas
Pole godziny nigdy nie powinno być zupełnie puste. Wstępnie wybierz typową godzinę wizyty (jak 10:00) albo pokaż bieżący czas. Daje to odwiedzającym punkt wyjścia i pokazuje, jakiego formatu oczekujesz.
Uwagi o urządzeniach mobilnych dla pól daty i godziny
Formularze mobilne mają inne ograniczenia niż na komputerze. Miejsca jest mało. Obszary dotyku muszą być większe. Klawiatury zasłaniają pół ekranu.
Używaj natywnych wybieraków mobilnych, gdy to możliwe
Pola daty i godziny HTML5 uruchamiają na telefonie wybierak systemu operacyjnego. Jest on szybszy i bardziej znany użytkownikom niż własny wybierak, który zaprojektujesz. Kołowy wybierak daty iOS i wybierak daty Androida są już zoptymalizowane pod interakcję mobilną.
Zrób obszary dotyku wystarczająco duże do stukania
Jeśli budujesz własny wybierak, upewnij się, że przyciski i daty mają co najmniej 44 na 44 piksele. Małe kwadraty kalendarza, które dobrze działają na komputerze, stają się niemożliwe do stuknięcia na telefonie.
Unikaj automatycznego wysyłania
Nie wysyłaj automatycznie formularza ani nie przeskakuj do następnego pola w chwili wybrania daty. Pozwól odwiedzającym potwierdzić wybór i iść dalej we własnym tempie. Automatyczne wysyłanie może uwięzić użytkowników w złej dacie lub godzinie i ich sfrustrować.
Komunikaty o błędach i walidacja: jak prowadzić użytkowników do właściwej daty
Nawet przy dobrym projekcie odwiedzający czasem wybierają nieprawidłowe daty. Wpisują datę powrotu przed datą wyjazdu. Wybierają datę, która jest już zajęta. Przez pomyłkę wpisują „13/45". Obsługa błędów decyduje, czy naprawią problem, czy porzucą formularz.
Waliduj w czasie rzeczywistym
Nie czekaj z informacją, że data jest zła, aż formularz zostanie wysłany. Waliduj w trakcie wpisywania lub wybierania. Jeśli ktoś wybierze datę powrotu przed datą wyjazdu, powiedz mu od razu. Jeśli data jest niedostępna, daj znać natychmiast, by mógł wybrać inną.
Pisz komunikaty o błędach, które wyjaśniają, co poszło nie tak
Zły komunikat mówi „Nieprawidłowa data". Pomocny mówi „Wpisz datę w formacie DD.MM.RRRR" albo „Ta data jest niedostępna. Wybierz inną."
Nazwij konkretny problem i zaproponuj rozwiązanie. Komunikat o błędzie to nie kara. To pomocna wskazówka.
Zapobiegaj logicznie niemożliwym wyborom
Jeśli prosisz o datę wyjazdu i datę powrotu, wyłącz daty powrotu przypadające przed wybraną datą wyjazdu. Jeśli prosisz o wizytę, wyłącz daty, które są już w pełni zarezerwowane. Spraw, by niemożliwe wybory były niedostępne, zamiast prosić odwiedzających o wybór, a potem go odrzucać.
Wzorce z praktyki: co działa w różnych zastosowaniach
Najlepszy projekt pola daty zależy od typu formularza. Oto typowe wzorce.
Formularze rezerwacji i wizyt
Użyj kalendarzowego wybieraka daty. Ustaw domyślnie bieżący miesiąc lub następny dostępny miesiąc. Pokaż niedostępne daty. Przyjmuj ręczne wpisanie daty jako rozwiązanie zapasowe.
Pola daty urodzenia
Użyj trzech pól tekstowych (Dzień, Miesiąc, Rok) albo jednego pola tekstowego z elastycznym formatowaniem. Unikaj wybieraków dat, bo data jest tak daleko w przeszłości, że wybierak staje się nieporęczny.
Data rozpoczęcia zamówień cyklicznych lub subskrypcji
Użyj prostego wybieraka daty z domyślnie ustawioną najbliższą dostępną datą. Większość odwiedzających akceptuje domyślną datę albo wybiera datę w ciągu najbliższego miesiąca.
Wybór godziny wydarzenia
Jeśli wydarzenie ma stałą datę, ale odwiedzający wybierają przedział godzinowy, użyj prostego wybieraka godziny z przedziałami co 30 minut lub co godzinę. Pokaż, które terminy są dostępne, a które zajęte.