How to create forms that will be filled in with joy? (Joomla Day Poland 2015)

Jak tworzyć formularze, które ludzie będą z

radością wypełniać?JoomlaDay 2015, Gdańsk

Aleksander Kuczek • z wykształcenia prawnik, z zamiłowania

programista, z zawodu manager

• od 7 lat w Perfect sp. z o.o.

• projekty dla Microsoft, Qumak SA, Ministerstwa Infrastruktury i Rozwoju oraz Uniwersytetu Jagiellońskiego

• nasze pluginy pomogły 13 tys. developerów stworzyć 120 tys. stron internetowych wartych ponad miliard złotych

• współtwórca pluginów Contact Form for Joomla i Everything in Everyway for Joomla

• wykładowca na licznych Joomla Day i WordCamp

@a_kuczek

Internet bez formularzy, nie różniłby się zbytnio

od gazety

@a_kuczek

Przykłady formularzy• Formularz kontaktowy

• Dodawanie komentarzy

• Dodawanie treści w social media

• Formularz zamówienia w sklepie internetowym

• Zapisanie się na newsletter

• Sonda, ankieta

Zaplecze Joomla! to całe mnóstwo formularzy

Formularz umożliwia komunikację pomiędzy użytkownikiem, a

właścicielem strony www

S. Krug

Trzy stany formularza

1. Przed wypełnieniem

2. Po nieprawidłowej walidacji

3. Po poprawnym wypełnieniu

Różne płaszczyzny formularza

• Relacja

• Komunikacja

• Prezentacja

C. Jarrett, G. Gaffeny

Czy chce wypełnić ten formularz?

Elementy budowania relacji

• Adekwatność

• Branding

• Nagroda

• Instrukcje i podziękowania

• Właściwy dobór pytań

Przykłady nagród

Ludzie wybiorą Twój formularz tylko dlatego, że jest prostszy i

bardziej klarowny niż konkurencji

Czy pytania są adekwatne do celu

formularza?

Rodzaje odpowiedzi

• Udzielane z głowy

• Przepisywane z dokumentów

• Uzyskane od osób trzecich

• Wymyślone na poczekaniu

Błędy w imię prywatności

• [email protected]

• [email protected]

• [email protected]

• [email protected]

Ok, to gdzie mam wpisać odpowiedzi?

Płeć

Imię i nazwisko

jeden input

Adres

addressdoctor.com

Dynamicznie generowany dla kraju

Data urodzenia

• lista rozwijana

• kalendarz

• input

• combo

Projektowanie idealnego formularza

Kto jest Twoim rozmówcą?

• Jakim językiem się posługuje? Jak dobrze?

• Z jakiej kultury się wywodzi?

• Jak często wypełnia ten formularz?

• Jaki ma poziom wiedzy fachowej na ten temat?

Skrypt formularzaNazwa pola Do czego potrzebne są dane?

Imię i nazwisko* potrzebne do kontaktu

Firma analiza potencjalnego klienta

Email* potrzebne do kontaktu

Telefon potrzebne do kontaktu

Wiadomość więcej informacji o potrzebach

Jeśli nie możesz uzasadnić po Ci informacja z danego pola - usuń je z formularza.

@A_Kuczek

Wybieranie rodzaju pola

Radio jeśli:

• mniej opcji

• opcje są długie

• opcje są podobne

Gdzie dać labele?

Po lewej lub na górze

opcja „Other”

• przy listach (select i radio)

• z polem input

• cel: walidacja sensowności pre definiowanych opcji

Oznaczanie pól wymaganych

Tematy do przemyślenia

• wypełnianie na urządzeniach mobilnych

• dostępność dla osób niepełnosprawnych

• walidacja

Testowanie formularzy

Testy użyteczności sprawdzają formularze,

nie ludzi.

@a_kuczek

6 użytkowników wystarczy do testu użyteczności

A mathematical model of the finding of usability problems, Nielsen and Landauer (1993)

Testy A/B

Ludzie doceniają spójność

@a_kuczek

Więcej na ten temat

• C. Jarrett, G. Gaffney „Forms that Work: Designing Web Forms for Usability”

• S. Krug „Don’t make me think” (koniecznie w wersji Revisited)

• perfect-web.co/blog

Pytania?

Follow me on Twitter: @a_kuczek or @Perfect4Joomla

Find us on LinkedIn: Aleksander Kuczek or Perfect

Email me: [email protected]