DARMOWY AUDYT SEO

8 porad zwiększających użyteczność formularzy

8 porad zwiększających użyteczność formularzy

Lukas Bieri/Pixabay.com

Formularze to jeden z najważniejszych komponentów używanych przez strony internetowe. Odgrywają one kluczową rolę w procesie zakupowym każdego e-commerce, ponieważ to dzięki niemu użytkownik określa adres dostawy oraz wybiera sposób zapłaty. Są one także podstawową formą kontaktu z wieloma usługodawcami.

Źle zaprojektowany formularz może zadecydować o tym, czy koszyk zostanie pomyślnie zrealizowany czy też porzucony.

W tym wpisie przedstawię kilka porad, które pomogą Wam zadbać o użyteczność waszych formularzy.

1. Pytaj o to, co naprawdę konieczne

Wyświetlajmy pola dotyczące tego, czego faktycznie w danym momencie potrzebujemy od użytkownika. Na przykład, nie zapytamy w formularzu kontaktowym naszego usera o kod pocztowy czy datę urodzenia.

Formularz kontaktowy - dobry/zły

Jeśli jednak z jakiegoś biznesowego powodu potrzebujemy takiej informacji, należy poinformować użytkownika, dlaczego takie pole zostało mu pokazane.

Formularz kontaktowy - przykład

Sprawdź: Na czym polegają testy użyteczności?

2. Grupuj powiązane informacje

Nic tak nie ułatwia czytania jak odpowiednia hierarchia treści. Jeżeli nasz formularz zawiera wiele pól, zastanówmy się, czy jesteśmy w stanie je jakoś pogrupować.

Dzielenie pól według tematyki i wyróżnianie ich graficznie znacznie ułatwi użytkownikom ich zrozumienie, a korzystanie z formularza stanie się dużo wygodniejsze.

Formularz kontaktowy - grupowanie

Pamiętajmy jednak, że zbyt wiele podziałów i ozdobników może wytworzyć nam szum informacyjny.

3. Wyróżnij kolejne kroki

Niekiedy formularze bywają długie i wymagają podzielenia ich na kilka etapów.

Dobrą praktyką jest pokazywanie na osi czasu wszystkich kroków w formularzu. Dzięki temu twój użytkownik łatwo odnajdzie się w formularzu i z łatwością będzie mógł nawigować po jego etapach.

Formularz kontaktowy

Sprawdź: 10 heurystyk użyteczności Nielsena i Molicha

4. Unikaj wielu kolumn

Stosowanie wielu kolumn w formularzach utrudnia ich czytanie. Wynika to z tego, że nasz wzrok, biorąc za punkt odniesienia pierwsze pole, nie wie, czy powinien od razu przejść do pola obok czy tego pod spodem.

Dobrą praktyką jest więc stosowanie tylko jednej kolumny, by nie męczyć wzroku i zachować logiczną ciągłość pól.

Poprawne rozmieszczenie kolumn w formularzu

5. Wyróżniaj akcje pierwszorzędne

Nawigowanie po formularzu jest równie istotne co układ jego pól. Dlatego tak istotną kwestią jest wyróżnienie najbardziej typowych i pożądanych akcji przez użytkownika.

Najważniejsze elementy nawigacji, najczęściej są to przyciski, powinny zostać wyróżnione kolorem, wielkością, a niekiedy również ikoną.

Wyróżniaj akcje!

6. Oznacz pola wymagane lub opcjonalne

Często wymagamy od użytkowników uzupełniania niektórych pól bądź przeciwnie, nie wymagamy ich uzupełnienia. Każde pole wymagane lub opcjonalne powinno być oznaczone. Nie należy jednak wyróżniać jednocześnie pól wymaganych i opcjonalnych, ponieważ może to doprowadzić do szumu komunikacyjnego.

Dlatego też:

  • Oznacz pola wymagane, jeśli większość jest opcjonalna.
  • Oznacz pola opcjonalne, jeśli większość jest wymagana.
  • Pola wymagane można oznaczyć gwiazdką, a gwiazdkę opisać pod formularzem.
  • Pola opcjonalne opisz etykietą, nie gwiazdką.

Pola wymagane lub opcjonalne w formularzu

7. Unikaj etykiet w polach

Bardzo często spotykanym rozwiązaniem jest stosowanie w formularzach etykiet umieszczonych wewnątrz pól. Nie jest ono jednakże poprawne, ponieważ takie etykiety mogą mylić się z wprowadzonymi treściami lub być traktowane jako wartości domyślne. Innym problemem jest fakt, że etykiety te znikają w trakcie wprowadzania treści, co później utrudnia lub uniemożliwia wprowadzanie poprawek.

Prawidłową praktyką jest więc stosowanie etykiet obok pól / nad polami.

Etykiety w formularzu kontaktowym

8. Dobierz rodzaj wyrównania etykiet

Poprzez etykiety rozumiemy tutaj nazwy wyświetlane obok pól. To, w jakim miejscu przy polu wyświetlimy etykietę może zwiększyć wygodę użytkowników z korzystania z formularza.

Rozpatrzyć powinniśmy 3 warianty:

Wyrównanie prawostronne – rozwiązanie to pozwala na czytelne połączenie etykiety z polem i daje nam szybkość wypełniania.

Kiedy warto?

  • gdy mamy krótkie i zrozumiałe etykiety
  • gdy mamy mało przestrzeni w pionie, a dużo w poziomie

Formularz kontaktowy - etykiety

Wyrównanie lewostronne – umożliwia nam łatwe skanowanie etykiet.

Kiedy warto?

  • gdy informacje są trudne lub słabo znane
  • gdy etykiety mają podobny rozmiar
  • gdy mało przestrzeni w pionie, a dużo w poziomie

Dobre praktyki

Etykiety nad polami – szybkie wypełnianie i mało fiksacji. Elastyczność dla nietypowych pól.

Kiedy warto?

  • gdy typowe, znane informacje
  • gdy mało dostępnej przestrzeni w poziomie, a dużo w pionie

Responsywny formularz

Słowem podsumowania

Stosując się do powyższych rad nie tylko zadbamy o dobre praktyki w projektowaniu formularzy, ale też zwiększymy wygodę z ich obsługi i zmniejszymy ryzyko popełnienia błędu przez użytkownika.

Jeżeli potrzebujesz konsultacji lub audytu użyteczności swojego serwisu, pisz do nas śmiało przez nasz formularz. Na pewno pomożemy!

Spodobał Ci się artykuł? Oceń go! Masz stronę internetową i chciałbyś wreszcie zacząć zarabiać? Zapraszamy na konsultację z naszymi analitykami SEO! Na spotkaniu dowiesz się jak pozycjonowanie może wspomóc Twój biznes.

Zobacz również
Grupa iCEA
Grupa iCEA
Kategoria: SXO
Ostatnie wpisy

    Zastanawiasz się, dlaczego Twoja strona NIE SPRZEDAJE?
    Umów się na bezpłatną konsultację SEO i dowiedz się, jak możemy poprawić Twoje wyniki sprzedażowe.
    Wysyłanie
    Oceń tekst
    Średnia ocen 5/5 - Liczba ocen: 1

    Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

    *

    Chcesz zobaczyć o czym jeszcze pisaliśmy?

    Różnice pomiędzy UI a UX
    Różnice pomiędzy UI a UX
    Podczas budowy strony WWW należy uwzględnić kwestie techniczne oraz perspektywę internautów. Do realizacji tego zadania potrzeba wiedzy i doświadczenia.
    Projektowanie strony internetowej – top 8 porad
    Projektowanie strony internetowej – top 8 porad
    Prowadzisz stronę internetową i chcesz, aby wyróżniała się spośród innych? Sprawdź, co zrobić, aby zachwycić użytkowników!
    SXO – mały krok dla SEOwca, wielki krok w stronę użyteczności
    SXO – mały krok dla SEOwca, wielki krok w stronę użyteczności
    Sprawdź, czym dokładnie jest SXO, dlaczego narobiło wokół siebie tyle szumu i – co najważniejsze – jak może pomóc w zwiększeniu zysków także Twojej firmy!

      Wysyłanie

      Rozpocznij

      od bezpłatnej
      konsultacji SEO

      Zainwestuj w szczegółową konsultację SEO i dowiedz się więcej na temat wydajności Twojego sklepu internetowego. Przeprowadzimy dla Ciebie kompleksową analizę, dzięki której uzyskasz jasny obraz tego, co należy poprawić.

      • I Nasz ekspert SEO skontaktuje się z Tobą telefonicznie.
      • II Umówimy się na bezpłatną konsultację w dogodnym dla Ciebie terminie.
      • III SEO konsultant przeprowadzi audyt Twojej witryny i przedstawi Ci strategiczne rekomendacje, dzięki którym poprawisz wydajność swojego sklepu internetowego.
      • IV Otrzymasz szczegółowy raport SEO biorący pod uwagę szereg ważnych czynników rankingowych Google.

      Dziękujemy za kontakt.

      Pozycjonujemy biznesy od 2007 roku. Pozwól, że zrobimy to za Ciebie!

      Wrócimy z odpowiedzią w ciągu 72 godzin. Sprawdź swoją skrzynkę e-mailową, aby uzyskać więcej informacji.

        Chcesz poznać
        ofertę?
        Skontaktujemy się z Tobą w ciągu kilku minut! Jesteśmy dostępni w dni robocze w godzinach 9-15.
        Niestety aktualnie nasz konsultant nie jest dostępny. Skontaktujemy się z Tobą w godzinach otwarcia biura.
        Wyrażam zgodę na przetwarzanie moich danych w celu telefonicznego przedstawienia mi oferty firmy iCEA. Więcej w Polityce prywatności.
        Wysyłanie
        Masz pytania? Kliknij i skontaktuj się z nami telefonicznie lub poprzez czat!
        Rozpocznij chat
        Zamów rozmowę