Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

846 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Jak tworzyć formularze, które ludzie będą z radością wypełniać? JoomlaDay 2015, Gdańsk
  2. 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. 3. Internet bez formularzy, nie różniłby się zbytnio od gazety @a_kuczek
  4. 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. 5. Zaplecze Joomla! to całe mnóstwo formularzy
  6. 6. Formularz umożliwia komunikację pomiędzy użytkownikiem, a właścicielem strony www S. Krug
  7. 7. Trzy stany formularza 1. Przed wypełnieniem 2. Po nieprawidłowej walidacji 3. Po poprawnym wypełnieniu
  8. 8. Różne płaszczyzny formularza • Relacja • Komunikacja • Prezentacja C. Jarrett, G. Gaffeny
  9. 9. Czy chce wypełnić ten formularz?
  10. 10. Elementy budowania relacji • Adekwatność • Branding • Nagroda • Instrukcje i podziękowania • Właściwy dobór pytań
  11. 11. Przykłady nagród
  12. 12. Ludzie wybiorą Twój formularz tylko dlatego, że jest prostszy i bardziej klarowny niż konkurencji
  13. 13. Czy pytania są adekwatne do celu formularza?
  14. 14. Rodzaje odpowiedzi • Udzielane z głowy • Przepisywane z dokumentów • Uzyskane od osób trzecich • Wymyślone na poczekaniu
  15. 15. Błędy w imię prywatności • you@example.com • test@test.com • mickey@disney.com • joe@doe.com
  16. 16. Ok, to gdzie mam wpisać odpowiedzi?
  17. 17. Płeć
  18. 18. Imię i nazwisko
  19. 19. jeden input
  20. 20. Adres
  21. 21. addressdoctor.com
  22. 22. Dynamicznie generowany dla kraju
  23. 23. Data urodzenia • lista rozwijana • kalendarz • input • combo
  24. 24. Projektowanie idealnego formularza
  25. 25. 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?
  26. 26. 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
  27. 27. Jeśli nie możesz uzasadnić po Ci informacja z danego pola - usuń je z formularza. @A_Kuczek
  28. 28. Wybieranie rodzaju pola
  29. 29. Radio jeśli: • mniej opcji • opcje są długie • opcje są podobne
  30. 30. Gdzie dać labele?
  31. 31. Po lewej lub na górze
  32. 32. opcja „Other” • przy listach (select i radio) • z polem input • cel: walidacja sensowności pre definiowanych opcji
  33. 33. Oznaczanie pól wymaganych
  34. 34. Tematy do przemyślenia • wypełnianie na urządzeniach mobilnych • dostępność dla osób niepełnosprawnych • walidacja
  35. 35. Testowanie formularzy
  36. 36. Testy użyteczności sprawdzają formularze, nie ludzi. @a_kuczek
  37. 37. 6 użytkowników wystarczy do testu użyteczności A mathematical model of the finding of usability problems, Nielsen and Landauer (1993)
  38. 38. Testy A/B
  39. 39. Ludzie doceniają spójność @a_kuczek
  40. 40. 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
  41. 41. Pytania? Follow me on Twitter: @a_kuczek or @Perfect4Joomla Find us on LinkedIn: Aleksander Kuczek or Perfect Email me: a.kuczek@perfect-web.co

×