4 formy formularza Wskazówki UX, które powinieneś znać (z przykładami)

Mamy tendencję do myślenia o formularzach jako po prostu o sposobie gromadzenia danych użytkownika, ale czasami są one również jednym ze sposobów jedyny sposób, dla naszych użytkowników Połącz się z nami. Prawdopodobnie urojenie jest myśleć, że możemy tworzyć użytkowników miłość wypełnianie formularzy, ale z pewnością jest to możliwe znaleźć rozwiązania, które nie drażnią ich zbytnio, i pomóż im w tym procesie.

Podczas przeglądania sieci możemy znaleźć czasami zaskakujące rozwiązania, które są poprawne programowo, ale są zaprojektowane w sposób najbardziej prawdopodobny sprawia, że ​​wielu użytkowników rezygnuje z witryny z powodu słabego doświadczenia użytkownika.

Jeśli nasze formularze są dobrze zaprojektowane, będziemy mogli nie tylko zadowolić naszych użytkowników, ale także zespół zaplecza, z którym mogą sobie poradzić znacznie mniej błędów wprowadzania danych przez użytkownika. Dlatego w tym artykule przyjrzymy się, jak możemy minimalizuj błędy wprowadzania danych przez użytkownika i nadal zachowaj zadowolenie naszych użytkowników.

Przewiduj potrzeby użytkowników

Strony i aplikacje mają różne bazy użytkowników i cele, a nawet ta sama lokalizacja może obsługiwać wiele formularzy, które gromadzą różne rodzaje danych, aby wymienić najczęściej występujące:

• Formularze logowania
• Formularze rejestracyjne
• Formularze profilu użytkownika
• Formularze rejestracji newslettera
• Formularze do kasy
• Ankiety użytkowników
• Formularze kontaktowe
• Formularze komentarzy
• Formularze wyszukiwania

Wszystkie te typy formularzy wymagają różnych rzeczy. Przy projektowaniu formularzy kasowych ważne jest wiarygodne zapewnienie użytkowników o bezpieczeństwie, podczas gdy w przypadku formularzy komentarzy dobrym pomysłem jest dodaj emotikony lub inne metody, które pozwalają użytkownikom wyrazić swój rzeczywisty nastrój.

Jednak nawet podobne typy formularzy mogą wymagać innego zaprojektowania, ponieważ wszystkie witryny mają swoje unikalna baza użytkowników. Przed rozpoczęciem procesu projektowania zawsze dobrze jest przewidzieć, czego potrzebują nasi użytkownicy, i odpowiednio zaprojektuj.

Przykład: Loginy społecznościowe Kierowanie na potrzeby użytkowników

Formularz logowania Codepen zawiera trzy loginy społecznościowe z Github na górze. Ten wybór byłby nierozsądny dla większości witryn.

Ale jest idealny dla Codepen, ponieważ ich baza użytkowników składa się z programistów, z których wielu będzie chciało się zalogować przy użyciu kont Github lub połączyć ze sobą swoje konta programistyczne.

Think Mobile-First

Użytkownicy mobilni i desktopowi mają różne potrzeby, ale jak wypełnianie formularzy jest znacznie większym wyzwaniem na ekranie telefonu komórkowego, za pomocą gestów ręcznych niż na klawiaturze fizycznej, a mobilne pierwsze podejście może nas zabrać dalej, gdy chcemy zaprojektować użyteczne formy.

Co więcej, wiele wzorców interfejsu użytkownika, które działają dobrze na urządzeniach mobilnych, będzie dobrze działać również na komputerach.

Przykład: Kontrole Tappable

Bez formy nie można sobie wyobrazić wysokiej jakości formularzy mobilnych widoczne kontrolki na którym użytkownicy mobilni mogą łatwo dotknąć palcami.

Formularz subskrypcji biuletynu konferencji projektowania stron internetowych Event Apart dostosowuje się do sposobu, w jaki użytkownicy mobilni uzyskują dostęp do ekranu - zawiera dwa łatwe do wybrania pola wprowadzania i a przycisk wielkości palca.

Pola wprowadzania tekstu są wyższe niż zwykle, dzięki czemu użytkownicy mobilni mogą łatwo je stuknąć, a duży, pomarańczowy przycisk z ikoną zaznaczenia dodatkowo zachęca użytkowników do przesłania formularza.

Wersja pulpitu witryny używa tego samego wzoru formularza, ponieważ wygląda dobrze i działa dobrze na większych ekranach.

Przykład: Niezbędne dane wejściowe

Podczas projektowania formularzy dla urządzeń przenośnych zawsze ważne jest, aby zastanowić się, jak możemy to zrobić zminimalizować przestrzeń, której używamy. The zbędny wkład Wzorzec projektowania interfejsu użytkownika stał się ostatnio bardzo popularny i działa szczególnie dobrze na urządzeniach mobilnych.

Booking.com wykorzystuje ten wzór w formularzu wyszukiwania na swojej stronie mobilnej. Gdy użytkownik dotyka pola wyszukiwania, rozszerza się, aby zostaw więcej miejsca na gesty, a poniżej znajduje się lista wyboru z zaleceniami.

Gdy użytkownik dotknie pola, kurczy się, a dodatkowe informacje znikają.

Przykład: Przycisk Morphing

Przyciski zmiany kształtu weź wzorzec nakładu jednorazowego o krok dalej, ponieważ użytkownicy najpierw widzą przycisk, który wtedy przekształca się w formę kiedy go dotkną.

Poniższy zrzut ekranu pochodzi z genialnego artykułu The Startup na temat innowacyjnego projektu formy, który przedstawia wiele innych kreatywnych rozwiązań.

Ułatw wejście wejścia

Długie formy zniechęcają użytkowników. Najlepsze, co możemy zrobić, to pytaj tylko o dane, których naprawdę potrzebujemy. Jest to ważne nie tylko z punktu widzenia użytkownika, ale użytkownicy mogą również wahać się przed przekazaniem zbyt wielu danych osobowych z powodu obawy dotyczące prywatności.

Czasami jednak my nadal muszą iść w parze z dłuższymi formami. W tym przypadku dobrze jest podzielić je na mniejsze części, i obsługuj kawałki jako kolejne ekrany.

Wiele witryn handlu elektronicznego (np. Amazon) korzysta z tego rozwiązania w celu zmniejszenia współczynników porzucania koszyka.

Jeśli chcemy ułatwić wypełnianie pól formularza, regułą jest zmniejszyć zarówno rozproszenie uwagi, jak i działania użytkownika tak dużo jak to możliwe.

Przykład: Spersonalizowany selektor wprowadzania

Różni zbieracze treści, tacy jak zbieracze dat lub selektory kolorów, nie tylko ułatwiają wprowadzanie właściwych danych, ale także tworzą formę bardziej atrakcyjny, i znacząco zmniejszyć błędy użytkownika.

Aplikacja do pobierania list Todoist daje spersonalizowane wskazówki wewnątrz selektora daty, gdy użytkownik najedzie kursorem na dni.

Na przykład na poniższym zrzucie ekranu użytkownik może zobaczyć, że 31 sierpnia ma już 2 należne zadania i może wziąć te informacje pod uwagę przy podejmowaniu decyzji o właściwej dacie zadań. To doskonały pomysł na aplikację, w której wydajność jest głównym problemem użytkownika.

Przykład: Wprowadzanie metodą „przeciągnij i upuść”

Projekty „przeciągnij i upuść” zwykle działają dobrze z polami do przesyłania plików, zwłaszcza gdy użytkownicy mają przesyłać obrazy.

Prawdopodobnie nie zmniejszają akcji użytkownika w porównaniu do zwykłego przycisku Prześlij plik, ale znacznie ułatwiają wybierz plik, który użytkownik chce przesłać, zmniejszając tym samym szansę na przesłanie niewłaściwego pliku.

WordPress.com zapewnia elegancki i intuicyjny interfejs wprowadzania danych metodą przeciągnij i upuść w swoim edytorze postów. The małe miniaturki i wizualna reprezentacja już załadowanych plików dodatkowo pomagają użytkownikom szybko wykonać przesyłanie.

Przykład: nakładka do usuwania zakłóceń

Jeśli użytkownicy są rozproszeni podczas wypełniania naszego formularza, są bardziej podatni na błędy i łatwiej się denerwują

Nakładki zawartości stanowią doskonałą alternatywę dla minimalistycznego wzornictwa. Są one wykorzystywane przez bardziej złożone witryny które chcą wyświetlać różne rodzaje informacji na tym samym ekranie.

Na poniższym zrzucie ekranu możesz zobaczyć wersję pulpitu Booking.com. Gdy użytkownicy najeżdżają na formularz wyszukiwania, dostaje się reszta treści pokryte szarawą nakładką pomóc im skup się na procesie wypełniania formularzy.

Przekaż opinię użytkownikom

Dając właściwa informacja zwrotna w odpowiednim czasie może znacząco poprawić komfort użytkowania.

W projektowaniu formularzy są dwa rodzaje informacji zwrotnych od użytkowników:

1. Podano informację zwrotną przed złożenie formularza - w celu zmniejszyć błędy i tworzyć stawki rezygnacji, takie jak śledzenie postępu, natychmiastowa weryfikacja danych wejściowych, która natychmiast nagradza użytkowników za poprawne dane wejściowe, lub podpowiedzi pomocnicze
2. Podano informację zwrotną po złożenie formularza - w celu poinformowania użytkowników popełnili błąd, takie jak komunikaty o błędach

Opinie użytkowników, których nasi użytkownicy potrzebują, w dużym stopniu zależą od charakterystyki naszej grupy docelowej i celu naszej witryny.

Przykład: śledzenie postępu

Formularze dłuższe niż jedna strona, takie jak ankiety i większość formularzy kasowych w e-Commerce, mogą wykorzystać dźwignię śledzenie postępu wzór projektu. Trackery postępu dają natychmiastowa wizualna informacja zwrotna do użytkowników o ich statusie i zachęć ich do kontynuowania procesu.

Aplikacja internetowa kreatora ankiet SnapSurveys pokazuje niewielki tracker postępu tuż nad przyciskami przesyłania, dzięki czemu użytkownicy mogą naturalnie go zauważam.

śledzenie postępu nie używa żadnych etykiet, ale sposób, w jaki został zaprojektowany czyni cel jasnym - liczba okręgów wskazuje liczbę kroków, wykonane już kroki stają się niebieskie, a użytkownicy mogą łatwo zobaczyć, ile kroków jeszcze przed nimi.

Przykład: Walidacja w czasie rzeczywistym

Sprzedawca kosmetyków Body Shop używa walidacja w czasie rzeczywistym w formularzu Profil użytkownika, aby wyeliminować błędy i poprawić UX procesu wypełniania formularzy.

Dane wejściowe są sprawdzane, gdy użytkownicy wypełniają formularz, a prawidłowe i nieprawidłowe odpowiedzi są natychmiast wskazywane przez łatwo rozpoznawalne ikony trochę dalej po prawej, ale wciąż w widocznym obszarze.

Przykład: Ekspresowe podpowiedzi

Zrozumiała mikrokopia jest również istotną częścią udanych opinii użytkowników w projektowaniu formularzy. Z definicji składa się z mikrokopi witryny małe kawałki tekstu używane w różnych elementach - etykiety, przyciski, komunikaty o błędach, podpowiedzi itp.

W formularzu logowania grupa bankowa Barclay odpowiada na pytania, które potencjalnie mogą zadawać użytkownicy za pomocą dobrze zaprojektowane podpowiedzi to zawiera łatwy do zrozumienia mikrokopia.

Podpowiedzi są ukryte za mało? ikony nie rozpraszać użytkowników którzy wiedzą, jak wypełnić formularz logowania, ale być zawsze obecnym dla użytkowników, którzy nie są pewni.

Niektóre podpowiedzi zawierają nawet trochę wizualnej adnotacji karty debetowej aby użytkownicy mogli łatwo znaleźć dane, które muszą wprowadzić do formularza logowania.