szymonszoldra / designing-effective-forms Goto Github PK

Każde pole w formularzu powinno być opatrzone etykietą, która jasno wskazuje, do czego to pole służy. Nie używaj placeholdera jako etykiety! Znika on, gdy tylko użytkownik go wybierze i często może dezorientować użytkownika. Umieszczenie etykiety nad polem pomaga użytkownikom w szybkim skanowaniu i wypełnianiu formularzy. Zapewnia krótszy czas wypełnienia formularza. Dodając etykiety zwiększysz dostępność dla osób niepełnosprawnych. Jeśli pole wymaga większego skupienia, lub podania zaawansowanych danych skorzystaj z etykiety znajdującej się po lewej stronie pola. Etykiety powinny być krótkie i rzeczowe.

Skorzystaj z dostarczonego kodu znajdującego się w pliku script.js i wywołaj metodę getCountryByIP() oraz getCountryCode() tak, aby użytkownik nie tracił czasu na uzupełnienie tych pól. Oczywiście nie zapomnij o pozostawieniu możliwości zmiany - np. gdyby użytkownik wypełniał formularz będą na wakacjach w innym kraju.

Do pola wyboru kraju dodaj możliwość przeszukania pola z wyświetleniem podpowiedzi pod polem formularza.

Zmień małe selecty (do 5 - 6 elementów) na wybór radio. Możesz dodać ikony wyboru dla inputu radio, aby przyspieszyć wypełnienie formularza.

Zmień formularz tak, aby znajdował się w jednej kolumnie. Postaraj się, aby wysokość formularza nie przekraczała wysokości viewportu - czyli tak, aby formularz zmieścił się w jednej kolumnie w widocznym okienku przeglądarki. Układy z jedną kolumną są bardziej intuicyjne dla użytkowników i pomagają uniknąć przypadkowego pomijania pól.

Dodaj obsługę wysłania formularza przez klawiaturę (po naciśnięciu enter), dodaj również inne potrzebne skróty klawiaturowe.

Pomyśl i spróbuj znaleźć pozostałe techniki, które uproszczą, zmniejszą czas wypełnienia i zmniejszą ilość kliknięć użytkownika. Dodaj ikony. Dodaj walidację formularza, jeśli pola ma złożone wymagania co do zawartości dodaj informację w jakim formacie należy podać dane. Zwiększ dostępność formularza dla osób z niepełnosprawnościami.