Formularz może działać bezbłędnie. Dane są przetwarzane, zgłoszenia przechodzą, wszystko działa zgodnie z projektem. Ale jeśli formularz nie reaguje wizualnie na to, co robią ludzie, i tak uznają, że jest zepsuty. Klikną to samo pole dwa razy, bo nie będą pewni, czy pierwsze kliknięcie zadziałało. Zaczną się zastanawiać, czy pojawił się komunikat o błędzie albo czy wysłanie naprawdę się udało. Zamieszanie obniża współczynnik wypełnienia formularza szybciej niż jakikolwiek błąd projektowy. Rozwiązaniem są mikrointerakcje, czyli małe animacje i wizualne reakcje, które mówią ludziom, że ich działanie zadziałało.
Mikrointerakcja to natychmiastowa reakcja, która pojawia się, gdy ktoś korzysta z formularza. Obramowanie podświetla się po kliknięciu pola. Komunikat o błędzie lekko drży, aby przyciągnąć uwagę. Spinner obraca się, gdy zgłoszenie jest przetwarzane. Znaczek zaznaczenia pojawia się, gdy dane są poprawne. Te animacje trwają ułamki sekundy, ale robią kluczową robotę. Odpowiadają na ciche pytanie, które każdy użytkownik formularza zadaje przy każdym działaniu: czy to cokolwiek zrobiło? Ten artykuł wyjaśnia, co robią mikrointerakcje, jak dobrać ich czas i dlaczego bezpośrednio wpływają na to, czy ludzie dokończą formularz, czy porzucą go w połowie.
Co robią mikrointerakcje w formularzach
Mikrointerakcja ma jedno zadanie: dać natychmiastową informację zwrotną o konkretnym działaniu. Ktoś wpisuje hasło i wypełnia się wskaźnik siły. Ktoś zostawia puste wymagane pole i pojawia się błąd z czerwonym tłem. Ktoś klika wyślij i przycisk zmienia się, pokazując przetwarzanie. Żadna z tych interakcji nie jest niespodzianką. Są oczekiwane. I trwają krócej niż pół sekundy.
Mikrointerakcje w formularzach służą czterem celom. Po pierwsze, potwierdzają, że system zarejestrował działanie. Formularz wydaje się zepsuty, gdy klikasz i nic się nie zmienia. Subtelna animacja mówi, że działanie się udało. Po drugie, prowadzą ludzi do następnego kroku. Świecący przycisk wysyłania podpowiada, w co kliknąć. Komunikat o błędzie, który podświetla problematyczne pole, pokazuje, na czym się skupić. Po trzecie, zmniejszają niepokój w niepewnych momentach. Spinner obracający się podczas wysyłania mówi "coś się dzieje, poczekaj". Bez niego ludzie zastanawiają się, czy formularz się zawiesił. Po czwarte, sprawdzają dane na bieżąco. Znaczek zaznaczenia przy poprawnym adresie e-mail informuje, że wszystko jest dobrze, bez czekania na wysłanie.
Najważniejsze, co robią mikrointerakcje, to natychmiastowa odpowiedź na jedno pytanie. Czy to zadziałało? Gdy ktoś widzi odpowiedź, idzie dalej z pewnością. Gdy jej nie widzi, wątpi w siebie albo niepotrzebnie powtarza działania.
Stany fokusu i pokazywanie aktywnego pola
Stan fokusu to mikrointerakcja, która pojawia się, gdy ktoś kliknie pole formularza. Pole zmienia wygląd, pokazując, że jest aktywne i gotowe na wpisywanie. Bez stanu fokusu ktoś może nie wiedzieć, do którego pola właśnie kliknął, zwłaszcza na telefonie lub gdy formularz jest pełen pól.
Prosty stan fokusu to zmiana koloru obramowania. Pole ma jasnoszare obramowanie. Po fokusie zmienia się na kolor Twojej marki lub miękki niebieski. Zajmuje to od 100 do 150 milisekund. Ta szybkość to różnica między zauważalnym a niewidocznym. Zbyt szybko, a ludzie to przegapią. Zbyt wolno, a zmiana wydaje się ociężała.
Druga opcja to zmiana koloru tła. Tło pola jest białe, gdy pole jest nieaktywne. Po kliknięciu zmienia się na bardzo jasny odcień koloru marki. Jasnoszary na nieco jaśniejszy niebieski. Nie dramatyczna zmiana. Tylko tyle, by pole się wyróżniło.
Unikaj obu zmian naraz. Zmiana koloru obramowania plus zmiana tła plus cień plus poświata to za dużo. Wybierz jedną i zrób ją wyraźną. Pole z fokusem powinno być w tym momencie najjaśniejszym elementem formularza.
Pomocny bywa też tekst zastępczy, który znika, gdy pole dostaje fokus. Tekst zastępczy pokazuje przykład tego, co wpisać. "przyklad@email.com" w polu e-mail. Gdy ktoś kliknie, by pisać, tekst zastępczy blednie i robi miejsce na wpis. To też mikrointerakcja, choć często pomijana.
Walidacja na bieżąco
Walidacja na bieżąco oznacza, że formularz sprawdza dane w trakcie pisania i mówi, czy są poprawne. Pole e-mail sprawdza każdy znak i pokazuje znaczek zaznaczenia lub X, zanim skończysz pisać. Pole hasła pokazuje siłę w miarę dodawania znaków. Pole kodu pocztowego potwierdza, że format jest poprawny.
Mikrointerakcją jest tu pojawienie się znaczka zaznaczenia lub X oraz zmiana koloru z neutralnego na zielony (poprawnie) lub czerwony (błędnie). Dzieje się to natychmiast, gdy osoba pisze. Bez czekania. Bez konieczności wysyłania.
Walidacja na bieżąco zmniejsza liczbę błędów przy wysyłaniu. Jeśli ktoś widzi X przy swoich danych, poprawia je przed kliknięciem wyślij. Nie wypełnia całego formularza tylko po to, by na końcu dowiedzieć się, że jedno pole było błędne. Oszczędza to frustracji i podnosi współczynnik wypełnienia formularza.
Czas ma znaczenie. Walidacja powinna uruchamiać się, gdy osoba przestanie pisać na około 500 milisekund. Sprawdzanie po każdym naciśnięciu klawisza może wydawać się nachalne. Krótka pauza pozwala dokończyć myśl, zanim pojawi się informacja zwrotna.
Wizualna reakcja powinna być natychmiastowa. Bez kręcącego się loadera podczas walidacji. Pokaż znaczek zaznaczenia lub błąd od razu. Większość walidacji (format e-maila, długość hasła, format kodu pocztowego) odbywa się natychmiast na urządzeniu. Nie ma zapytania do serwera. Pokaż tę szybkość.
Komunikaty o błędach z wizualnym wyróżnieniem
Gdy ktoś wyśle formularz z błędem, komunikat o błędzie musi pojawić się tak, by nie dało się go przeoczyć. Zwykły tekst na dole formularza łatwo pominąć. Mikrointerakcja sprawia, że błędu nie da się zignorować.
Najlepsza mikrointerakcja dla błędu to połączenie kilku elementów. Pole z błędem dostaje czerwone obramowanie. Etykieta robi się czerwona lub pogrubiona. Komunikat o błędzie pojawia się pod polem z czerwoną ikoną. Subtelna animacja drżenia (10 do 20 pikseli w lewo i w prawo, trwająca 300 milisekund) przyciąga uwagę bez drażnienia. Drżenie mówi: "hej, to ważne".
Sam komunikat o błędzie powinien być jasny i konkretny. Nie "Nieprawidłowe dane". Raczej "Adres e-mail musi zawierać znak @". Albo "Hasło musi mieć co najmniej 8 znaków". Gdy ludzie widzą błąd, muszą wiedzieć dokładnie, co poszło nie tak i jak to naprawić.
Czerwony jest standardem dla błędów, bo ludzie rozumieją go jako "stop" lub "problem". Nie używaj innego koloru, żeby pasował do marki. Rozpoznawanie czerwieni jako błędu jest powszechne. Trzymaj się tego.
Stany ładowania i przetwarzania
Gdy ktoś kliknie wyślij, formularz przesyła dane na serwer. To trwa. W tym czasie osoba czeka i się zastanawia. Czy coś się stało? Czy to w ogóle się skończy? Mikrointerakcja stanu ładowania wypełnia tę ciszę.
Najprostszy stan ładowania to wyłączenie przycisku wysyłania i zmiana jego tekstu z "Wyślij" na "Wysyłanie..." lub "Ładowanie...". Przycisk powinien też lekko zblednąć lub zszarzeć, aby pokazać, że nie można już w niego kliknąć. Zapobiega to wielokrotnemu klikaniu wyślij.
Krok dalej to dodanie animacji spinnera. Mała okrągła ikona obraca się, gdy formularz jest przetwarzany. To bardziej angażuje niż statyczny tekst i tworzy poczucie ruchu i aktywności.
Czas stanu ładowania zależy od tego, jak długo naprawdę trwa wysyłanie. Przy formularzach, które wysyłają się poniżej sekundy, stan ładowania może wydawać się zbędny. Przycisk może po prostu na chwilę przyciemnieć. Przy formularzach trwających od dwóch do pięciu sekund (na przykład przy złożonym przetwarzaniu danych) pokaż spinner. Wypełnia czas oczekiwania i zmniejsza niepokój.
Spinner powinien obracać się z prędkością około jednego pełnego obrotu na sekundę. Szybciej wygląda nerwowo. Wolniej wygląda na zawieszony. Jeden obrót na sekundę daje poczucie stałego postępu.
Potwierdzenie sukcesu i informacja o zakończeniu
Po udanym wysłaniu formularza użytkownik musi wiedzieć, że się udało. Oczywistym rozwiązaniem jest strona lub komunikat o sukcesie. Ale mikrointerakcja może uczynić ten moment przyjemniejszym i bardziej zapadającym w pamięć.
Zielony znaczek zaznaczenia, który pojawia się z subtelną animacją powiększenia (skalowanie od 80% do 100% rozmiaru przez 300 milisekund), sygnalizuje zakończenie. Znaczek jest jak nagroda. Mówi: "udało się". W połączeniu z komunikatem o sukcesie w zielonym kolorze potwierdza, że formularz został wysłany.
Drugie podejście to pasek postępu, który wypełnia się do 100% po zakończeniu wysyłania. Jeśli formularz ma kilka kroków, pasek postępu u góry pokazuje, jak daleko doszła osoba. Po ukończeniu ostatniego kroku pasek wypełnia się całkowicie i robi się zielony. To jak przekroczenie linii mety.
Sam komunikat o sukcesie powinien być krótki i jasny. Nie "Twoje zgłoszenie zostało pomyślnie odebrane przez nasz system". Raczej "Dzięki. Dostaliśmy Twoją wiadomość". Ton powinien być osobisty i ciepły. Osoba wykonała zadanie. Doceń to wprost.
Jeśli po sukcesie formularz przekierowuje na nową stronę, nie usuwaj formularza od razu. Pozwól animacji sukcesu trwać od 500 do 800 milisekund przed przekierowaniem. Daj ludziom chwilę, by zobaczyli, że się udało, zanim przeniesiesz ich na kolejną stronę.
Czas i szybkość w mikrointerakcjach
Szybkość mikrointerakcji decyduje o tym, czy wydaje się responsywna, czy ociężała. Idealny zakres to od 200 do 500 milisekund. To wystarczająco szybko, by wydawało się natychmiastowe, i wystarczająco wolno, by zostało zauważone i zrozumiane.
Zmiana stanu fokusu powinna być na szybkim końcu. Od 100 do 200 milisekund. To niemal natychmiast, ale daje oku dość czasu, by zarejestrować zmianę.
Drżenie pola przy błędzie powinno trwać około 300 milisekund. Jest zauważalne, ale nie drażni. Szybciej wygląda szaleńczo. Wolniej wydaje się spóźnione.
Spinner ładowania lub animacja sukcesu mogą być wolniejsze, od 500 do 800 milisekund. To momenty, w których osoba spodziewa się czekać. Wolniejsza animacja wydaje się bardziej treściwa i satysfakcjonująca.
Nigdy nie używaj w formularzu animacji dłuższych niż sekunda. To wydaje się powolne. Interakcje w formularzu powinny być żwawe i responsywne. Jeśli animacja trwa dłużej niż sekundę, ludzie zaczną się zastanawiać, czy coś się zepsuło.
Testuj mikrointerakcje na prawdziwych urządzeniach i w prawdziwych sieciach. To, co wydaje się szybkie na komputerze ze światłowodem, może się ciąć na telefonie z 4G. Projektuj pod najwolniejsze prawdopodobne warunki.
Dostępność w mikrointerakcjach
Niektórzy nie widzą animacji. Używają ustawień dostępności, które wyłączają ruch. Mikrointerakcja oparta wyłącznie na animacji będzie dla nich niewidoczna. Informacja zwrotna musi działać także bez ruchu.
Kolor to najważniejszy sygnał zwrotny. Czerwone obramowanie pola z błędem działa niezależnie od tego, czy pojawia się z animacją. Zielony znaczek przy poprawnych danych działa z animacją powiększenia lub bez niej. Kolor przekazuje informację natychmiast, bez ruchu.
Tekst też jest kluczowy. Komunikat o błędzie musi być tekstem, a nie tylko czerwoną ikoną. Stan sukcesu potrzebuje tekstu "Formularz został wysłany", a nie tylko znaczka. Gdy coś pójdzie źle albo dobrze, powiedz to słowami.
Użyj ustawienia prefers-reduced-motion w CSS. Jeśli ktoś ustawił na urządzeniu ograniczenie ruchu, usuń lub uprość dla niego animacje. Zostaw informację kolorem i tekstem. Zostaw stan fokusu. Usuń drżenie, powiększanie i obracanie. Nadal dostają pełną informację zwrotną, tylko bez ruchu.
Częste błędy w mikrointerakcjach formularzy
Mikrointerakcje mogą przynieść odwrotny skutek, jeśli są źle zrobione. Najczęstszy błąd to animacje zbyt wolne lub zbyt długie. Animacja fokusu pola trwająca 500 milisekund wydaje się ociężała. Przejście przycisku wysyłania trwające dwie sekundy wygląda na zawieszone. Utrzymuj je żwawe.
Drugi błąd to animacje bez wyraźnego celu. Kręcąca się ikona, która nie ma nic wspólnego z ładowaniem, albo zmiana koloru, która nie sygnalizuje zmiany stanu, myli ludzi. Każda mikrointerakcja powinna odpowiadać na pytanie albo wskazywać konkretną zmianę.
Trzeci błąd to niespójne mikrointerakcje. Stan fokusu w jednym formularzu to zmiana koloru obramowania. Stan fokusu w innym formularzu na tej samej stronie to zmiana tła. Ludzie zauważają tę niespójność i nie są pewni, co się dzieje. Używaj tego samego stylu mikrointerakcji we wszystkich formularzach na stronie.
Czwarty błąd to nadmiar animacji. Każde pole z fokusem daje poświatę. Każde naciśnięcie klawisza wywołuje reakcję. Każdy stan najechania ma ruch. Formularz zaczyna rozpraszać zamiast pomagać. Używaj mikrointerakcji tam, gdzie wnoszą wartość. Pomijaj je tam, gdzie są zbędne.
Piąty błąd to słabe komunikaty o błędach. Czerwone pole bez wyjaśniającego tekstu zostawia ludzi z domysłami, co poszło nie tak. Zawsze łącz wizualną reakcję z jasnym, konkretnym komunikatem o błędzie.
Jak WEMASY pomaga dodać mikrointerakcje do formularzy
Kreator formularzy WEMASY ma wbudowane mikrointerakcje dla najczęstszych momentów w formularzu. Gdy ktoś kliknie pole, stany fokusu pojawiają się automatycznie w kolorach Twojej marki. Gdy ktoś zostawi puste wymagane pole, komunikat o błędzie wyświetla się z wizualnym wyróżnieniem. Gdy ktoś wyśle formularz, pojawia się stan ładowania pokazujący postęp. Gdy wysłanie się uda, komunikat o sukcesie potwierdza zakończenie.
Możesz dostosować te mikrointerakcje do swojej marki bez dotykania kodu. Zmień kolor komunikatów o błędach. Dostosuj szybkość animacji stanów ładowania. Wybierz między spinnerem a tekstem dla stanu wysyłania. Te ustawienia są dostępne w kreatorze formularzy.
Walidacja na bieżąco jest dostępna dla typowych typów pól. Pola e-mail sprawdzają format w trakcie pisania. Pola telefonu sprawdzają format. Pola hasła pokazują siłę. Pola kodu pocztowego sprawdzają format. Te walidacje pokazują znaczki zaznaczenia i ikony błędów ze zmianą koloru, wszystko wbudowane.
Przy bardziej złożonych formularzach lub zaawansowanych animacjach WEMASY pozwala programistom dodać własny JavaScript. Ale domyślne mikrointerakcje pokrywają 95% przypadków i nie wymagają kodowania.
Sprawdź, jakie funkcje formularzy zawiera Twój pakiet WEMASY.