Embed Size (px)
Citation preview
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
Ok, to gdzie mam wpisać odpowiedzi?
Płeć
Imię i nazwisko
jeden input
Adres
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]
