Jak odstraszyć klienta

rzecz o formularzach interaktywnych

2

Formularze - zasady

• Użytkownik nie potrzebuje rejestracji• Serwuj na deser, a nie na przystawkę• Przesłuchanie - to nie jest dobry

pomysł• Organizacja formularzy• Chroń pracę użytkownika• Dostajesz spam? To TWÓJ problem...

3

Zastosowanie formularzy interaktywnych – Twój punkt widzenia• Rejestracja i logowanie• Wyszukiwanie• Koszyk• Przeprowadzenie symulacji, złożenie

wniosku• Przeprowadzenie transakcji• Pozyskanie informacji

4

5

6

7

8

A więc uważasz, że rejetracja to wygoda dla użytkownika• Użytkownik nie chce wypełniać

formularza rejestracyjnego. Użytkownik chce podać adres, na który wyślesz zamówiony towar.

• Naprawdę sądzisz, że użytkownik woli zarejestrować się w n-tym sklepie? Że w ogóle zapamięta sam fakt rejestracji w Twoim akurat serwisie? Że będzie pamiętał login i hasło?

9

„sign-up forms must die”- Luke Wroblewski, Senior Principal of Product Ideation and Design @ Yahoo!

• Nigdy, przenigdy nie wymagaj od użytkownika przejścia przez formularz na początku interakcji z serwisem

• Stopniuj zaangażowanie użytkownika

• Nie wymuszaj rejestracji, nawet jeżeli użytkownik wypełnia formularz danymi (np. dane dostawy paczki z zamówieniem)

10

Spróbuj przewidzieć wszystkie możliwości...

11

Nie każ użytkownikom wypełniać PIT

• Czy wypełnianie PIT jest przyjemne? ;-)

• Czy podałbyś obcej osobie, spotkanej na ulicy wszystkie dane, o jakie prosisz Twoich klientów?

12

Rozmawiaj z użytkownikami

• Zadawaj pytania językiem naturalnym, jak podczas zwykłej rozmowy twarzą w twarz– 14 na 15 osób testujących formularz umożliwiający obliczenie

wysokości składki ubezpieczeniowej dla swojego auta nie zrozumiało etykiety „Początek ochrony ubezpieczeniowej”, w konsekwencji nie wypełniając stosownego pola. (źródło: badania własne, Komitywa.com)

• Zdarza się, że rozmowa ma naturalne wątki, organizacja w formie wątków jest naturalna także dla dialogu poprzez formularze

13

Przed zmianami...

14

15

Po zmianach...

16

Etykiety• Zależy Ci na szybkości

wypełniania, a dane są łatwe do przywołania przez użytkowników (np. proste dane osobowe) – umieszczaj etykiety nad polem.

• Jeżeli użytkownicy muszą wnikliwie przeczytać i zrozumieć etykietę – wyrównuj do lewej

• Wyrównanie do prawej to bliskość etykiety i pola, ale utrudnione skanowanieŹródło: Web Form Design, Fillin in the Blanks, Luke Wroblewski & badania własne, Komitywa.com

17

Hierarchia wizualna

• Dbaj o czystość hierarchii wizualnej

• Odpowiednie zagłębianie tekstu• Spójne nagłówki• Wyrównanie tekstu• interlinia

Czytelna hierarchia wizualna

Zaburzona hierarchia wizualna

18

PrzyciskiOstrożnie planuj hierarchię• Primary action• Secondary action

Rezultat świadomej decyzji projektowej

Brak hierarchii

Wyraźna hierarchia

19

Przetwarzanie formularzy

Przetwarzaj na bieżąco – błędy, poprawki użytkowników, sekcje w rozgałęzionym formularzu

Wyróżniaj nietypowy stan aplikacji• Widoczne podsumowanie błędów• Wyróżnione miejsca popełnienia

błedu

A przede wszystkim: uniemożliwiaj powstawanie błędów

• Wartości domyślne• Inteligentne pola, które

uniemożliwiają podanie danych w innym formacie niż pożądany

!

20

Dlaczego warto zapobiegać błędom

21

Dostajesz spam? Co robić?

Można spróbować tak:

„Walczymy ze spamem!Dział Bezpieczeństwa Naszej Klasy Sp. z o.o. współpracując z Komendami Wojewódzkimi Policji w Katowicach i Łodzi pomógł w ujęciu przestępców zajmujących się rozsyłaniem niezamówionej informacji handlowej. Zarzuty przedstawiono 4 osobom. Przestępcom może grozić nawet do 10 lat więzienia. Nasza-klasa.pl w trosce o Wasze bezpieczeństwo i komfort korzystania z serwisu nie będzie tolerować tego typu działalności.

zespół nasza-klasa.pl”

http://nasza-klasa.pl/news/87

22

Dostajesz spam? Co robić?Większość robi to tak:

...niektórzy proponują tak:

23

Zasada jest prosta...

Spam to niestety TWÓJ problem.

Nie przerzucaj rozwiązania na klienta.

24

Gdzie szukać rozwiązania?

• Analiza przesłanej zawartości• Wzorce nawigacji (inne w przypadku

przeglądarek, inne dla robotów)• Analiza charakterystyk związanych z

siecią

25

Czego możesz spróbować?

• filtrowanie wiadomości po stronie serwera• podstawianie fałszywego URL dla robotów

(sfałszowana akcja przycisku) – wywołanie prawidłowej akcji dla formularza może nastąpić wyłącznie przez przeglądarkę

• stosowanie ukrytych pól formularza, wypełnianych wyłącznie przez roboty, etykiety pól mogą być generowane dynamicznie

• filtrowanie formularzy wysyłanych bez uprzedniego zapytania GET, porównywanie SID (GET-POST)

• filtrowanie wielokrotnych zapytań

26

A po drodze testuj, testuj i jeszcze raz testuj...

Koledzy mówili (albo będą mówić):• O metodyce projektowania

zorientowanego na użytkownika (UCD), zakładającej zaangażowanie użytkowników

• O miejscu dla testów w metodyce UCD

• O eye-trackingu, click-trackingu

27

Masz dobre pomysły? Masz pytania?

Zostaw wizytówkę po konferencji

Dziękuję z cierpliwość.

eryk@komitywa.commobile 605 103 742gg 2765