Discover how to create forms that works. Think of forms as a form of conversation. Learn how to organise form design process. Avoid common mistakes.

1. Jak tworzyć formularze,
które ludzie będą z
radością wypełniać?
JoomlaDay 2015, Gdańsk

2. 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

3. Internet bez formularzy,
nie różniłby się zbytnio
od gazety
@a_kuczek

4. 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

5. Zaplecze Joomla! to całe
mnóstwo formularzy

7. Formularz umożliwia komunikację
pomiędzy użytkownikiem, a
właścicielem strony www
S. Krug

8. Trzy stany formularza
1. Przed wypełnieniem
2. Po nieprawidłowej walidacji
3. Po poprawnym wypełnieniu

9. Różne płaszczyzny
formularza
• Relacja
• Komunikacja
• Prezentacja
C. Jarrett, G. Gaffeny

10. Czy chce wypełnić ten
formularz?

11. Elementy budowania relacji
• Adekwatność
• Branding
• Nagroda
• Instrukcje i podziękowania
• Właściwy dobór pytań

12. Przykłady nagród

13. Ludzie wybiorą Twój formularz
tylko dlatego, że jest prostszy i
bardziej klarowny niż konkurencji

14. Czy pytania są
adekwatne do celu
formularza?

15. Rodzaje odpowiedzi
• Udzielane z głowy
• Przepisywane z dokumentów
• Uzyskane od osób trzecich
• Wymyślone na poczekaniu

16. Błędy w imię prywatności
• you@example.com
• test@test.com
• mickey@disney.com
• joe@doe.com

17. Ok, to gdzie mam
wpisać odpowiedzi?

18. Płeć

20. Imię i nazwisko

22. jeden input

23. Adres

24. addressdoctor.com

25. Dynamicznie
generowany dla kraju

26. Data urodzenia
• lista rozwijana
• kalendarz
• input
• combo

27. Projektowanie
idealnego formularza

31. 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?

32. Skrypt formularza
Nazwa 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

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

34. Wybieranie rodzaju
pola

35. Radio jeśli:
• mniej opcji
• opcje są długie
• opcje są podobne

36. Gdzie dać labele?

37. Po lewej lub na górze

38. opcja „Other”
• przy listach (select i radio)
• z polem input
• cel: walidacja sensowności pre definiowanych
opcji

39. Oznaczanie pól
wymaganych

40. Tematy do przemyślenia
• wypełnianie na urządzeniach mobilnych
• dostępność dla osób niepełnosprawnych
• walidacja

41. Testowanie formularzy

42. Testy użyteczności
sprawdzają formularze,
nie ludzi.
@a_kuczek

43. 6 użytkowników wystarczy
do testu użyteczności
A mathematical model of the finding of usability problems, Nielsen and Landauer (1993)

44. Testy A/B

45. Ludzie doceniają
spójność
@a_kuczek

46. 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

47. Pytania?
Follow me on Twitter: @a_kuczek or @Perfect4Joomla
Find us on LinkedIn: Aleksander Kuczek or Perfect
Email me: a.kuczek@perfect-web.co