Formularze które straszą – część 2

Opublikowany 23/11/2011

Reply

W poprzedniej części wpisu o straszących formularzach poruszyłem temat budowania formularzy rejestracyjnych w kontekście ich najważniejszej funkcji. Dziś przedstawię formularze zamówienia występujące w sklepach internetowych.

Formularze zamówienia

Ważnym typem formularzy spotykanych w internecie jest formularz kupowania produktów w sklepie internetowym. Są to dość skomplikowane formularze, stąd słuszny podział na kilka kroków etapu zamówienia produktów. Wprowadzenie opcjonalnej rejestracji zamiast wymaganej powoduje znacznie większy wzrost liczby ukończonego zamówienia. Świetnym przykładem na to, że drobna zmiana funkcjonalności może przynieść tak wymierne korzyści jest jeden z czołowych większych amerykańskich serwisów handlowych któremu na skutek wprowadzonej nieobowiązkowej rejestracji wzrosła o 45% liczba klientów.

Ważnym elementem jest nawigacja pomiędzy poszczególnymi krokami i odpowiednie ułożenie pól do wypełnienia. Elementem wspólnym dla większości formularzy są pola tekstowe ze skończoną możliwością wpisanych danych np. pola z datą, które z perspektywy użyteczności i szybszego wypełnienia formularza, powinny zawierać przycisk do wyświetlenia kalendarza albo przynajmniej 3 pola selektywne ze definiowanymi danymi takimi jak:

  • dzień (1-31),
  • miesiąc (styczeń-grudzień)
  •  rok.

Takie rozwiązanie jest także bardziej odpowiednie dla użytkowników korzystających z urządzeń bez statycznej klawiatury – nie trzeba wpisywać samemu wartości.

 

Formularze bankowe

Na potrzeby tego wpisu zrobiłem krótki research formularzy zakładania konta bankowego najpopularniejszych banków w Polsce, gdyż te wydają się dość skomplikowane i przytłaczające nadmiarem obowiązkowych pól do wypełnienia.

Począwszy od tego, że ciężko jest znaleźć na większości głównych stron banków przycisk przekierowujący na stronę zakładania konta (dość dziwne podejście banków), muszę stwierdzić, że poprawność i użyteczność samych formularzy także pozostawia wiele do życzenia.

Najbardziej zawiedziony jestem formularzem mBanku, który ze względu na swoją specyfikę powinien być wzorcowym bankiem w internecie. Głównym problemem tego formularza jest sposób przedstawienia pól, na pierwszy rzut oka może odpychać. Brak wyraźnego podziału na sekcje. Niewątpliwą wadę jest także rezygnacja z kroków na rzecz długiej przewijanej strony.

Dość dobry z perspektywy użyteczności jest formularz Banku Zachodniego WBK. wyraźny podział na kroki, sekcje i najważniejsze przyciski – button “dalej” jest duży i kolorowy w odróżnieniu do przycisku “wstecz.

Ciekawie prezentuje się proces tworzenia nowego konta bankowego w Banku Polskim PKO, który poprzedził główny proces tworzenia konta sprytną pomocą wyboru odpowiedniego konta. Sam formularz wydaje się być prostszy na pierwszy rzut oka od poprzednika.

Z kolei Bank PEKAO prezentuje uproszczony formularz maksymalnie z kilka polami na jeden krok. Całość wygląda czysto i bez zastrzeżeń. Na uwagę zasługuje system automatycznego sprawdzania inputów w czasie rzeczywistym bez konieczności klikania w przycisk dalej.


Formularze kontaktowe

Istotnym elementem komunikacji zwłaszcza na stronach firmowych jest formularz kontaktowy znajdujący się zwykle na podstronie “Kontakt”. Dobry formularz powinien wyróżniać się uporządkowaną tematycznie listą odbiorców lub listą tematów których dotyczyć będzie pytanie . Aby uskutecznić kontakt z klientem warto utworzyć dodatkowe pola na dodatkowe dane klienta lub dane usługi zależne od wybranego tematu lub odbiorcy. Ważnym elementem jest pole tekstowe” textarea”, które w przypadku zbyt wąskich rozmiarów zniechęca użytkownika do wpisania pytania.


Zasady projektowania użytecznych formularzy:

  • Wyrównanie etykiet pól do prawej ułatwia użytkownikom skanowanie tekstu i ułatwia proces wypełniania.
  • Stosowanie krótkich jednoznacznych etykiet.
  • Używanie białego tła dla pola wpisywania tekstu. Szary kolor może sugerować, że pole jest niedostępne.
  • Używanie selektorów dla skończonej liczby wartości np przy wyborze miesiąca czy województwa.
  • Na stronie z formularzem nie warto umieszczać niepotrzebnej treści oraz reklam. Obszerna instrukcja przed formularzem także nie zostanie przeczytana.
  • Pytanie użytkownika tylko o istotne informacje. Zbieranie niepotrzebnych informacji negatywnie wpływa na zaufanie użytkownika do serwisu zwiększając jego irytację
  • Informuj użytkownika o wymaganych niestandardowych danych jeszcze przed pierwszym krokiem formularza. Przygotowany użytkownik nie będzie przerywać procesu wypełniania formularza
  • Wyraźnie grupowanie pól, tworzenie sekcji oraz kroków wypełniania formularza sprzyja organizacji formularza.
  • Zautomatyzowanie zapisu wprowadzonych danych. Dzielenie ciągu cyfr w odpowiednie grupy np w przypadku pola z numerem telefonu.
  • Oznaczenie wymaganych pól w przypadku małej ilości pól, a w przypadku większej ilości pól warto stworzyć nową grupę tylko na pola wymagane i osobno na niewymagane.
  • Umieszczanie podpowiedzi wypełnienia pod polami tekstowymi.
  • Automatyczne sprawdzanie poprawności wypełnienia specyficznych pól (e-mail, telefon, itp…) bez klikania w “wyślij”

 

Warto przypomnieć, że podstawową funkcją formularzy jest wymiana informacji w jak najbardziej syntetyczny sposób między odbiorcą a nadawcą. Kierowanie się zasadą Brzytwy Ockhama w procesie tworzenia formularzy powinno być kluczowe. Zbyt obszerny formularz odstrasza potencjalnych klientów, a to przekłada się bezpośrednio na skuteczność oferty sprzedaży w internecie. Można zauważyć, że pomimo tak ważnej roli formularza, tworzone są często bez logicznego planu z dużą ilością niepotrzebnych elementów, które rozpraszają internautę. Z pewnością większa ilość wymaganych pól jest korzystniejsza z punktu widzenia marketingu (budowanie potrzeb klienta na podstawie dodatkowych informacji) , ale zniechęcenie potencjalnego klienta już na wczesnym etapie rejestracji często odnosi odwrotny skutek do zamierzonego…

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



If it’s not exceptional
than it’s not acceptable!



We are an interactive agency providing exceptional expertise in web design, branding and e-marketing strategy.

We focus on designing attractive Internet products and supporting companies in their promotion, advertising and communication with users on the Internet.



www.chilid.pl

Pages

See our office!

Design never sleeps. Chiliders never forget :-) How was your Easter time? http://t.co/VXkwYI5Z

Vimeo

Flickr photo stream

plakat_warsztatyWorkshopWorkshopWorkshop
Powrót do góry