User Experience to ważny aspekt każdego projektu internetowego. Im większą przykładamy do niego wagę tym łatwiej naszym użytkownikom korzystać z witryny. Dzięki temu chętnie do nas wracają i polecają nas innym. Jeśli temat zamiatamy pod dywan – użytkownicy bardzo szybko uciekną bo od konkurencji dzieli ich jedno kliknięcie.
User Experience w erze mobile
O to czy era mobile była już dawno, jest czy dopiero nadejdzie, toczą się liczne spory. Dla mnie osobiście nadeszła nieodwołalnie od kiedy posiadam wygodny telefon, przy użyciu którego mogę załatwić niemal wszystko. Każde zadanie, które wymaga włączenia laptopa wywołuje u mnie wyraźną niechęć. Najpierw zastanawiam się czy na pewno nie da się go wykonać na telefonie, a jeśli nie, to często nie wykonuję go wcale. Tylko krytyczne tematy związane np. z urzędami, które muszę załatwić używając komputera mają szansę na to, że się zmuszę, przetrę kurz z obudowy i go włączę.
W tym artykule opiszę jak możesz łatwo poprawić użyteczność swojej strony, bloga lub sklepu internetowego. Na cel obrałam formularze. Były one zawsze ważnym elementem strony i sposób ich budowy wpływał niejednokrotnie na to, czy dobrze spełniały swoją rolę – pozwalały mierzyć i oceniać realizację celów witryny. Ich budowa nabiera jeszcze większego znaczenia w kontekście wersji mobilnej.
Formularz w wersji mobilnej
W mojej ocenie najszybszym i najprostszym sposobem na to, aby poprawić użyteczność formularzy w wersji mobilnej, jest pamiętanie o nadawaniu odpowiednich typów polom “input”. To te pola, w które użytkownik wpisuje poszczególne dane uzupełniając formularz. Typ nadaje się w kodzie formularza, co dla wielu osób może wydawać się problemem. Postaram się pokazać, że nie zawsze będzie to kłopotliwe i często uda Ci się to zrobić bez pomocy programisty. Jeśli jednak masz na stronie formularze, do których nie masz możliwości wprowadzać zmian samodzielnie – będziesz wiedzieć o co poprosić Twojego programistę
Czemu typy pól są tak ważne? Decydują o tym jaki typ klawiatury dotykowej pojawia się na urządzeniu mobilnym. Odpowiednia klawiatura, dostosowana do typu danych jakie użytkownik ma wprowadzić w danym polu, bardzo ułatwi mu zadanie. Dodatkowo wpłynie na szybkość wypełnienia formularza i ograniczy błędy jakie może popełnić szukając potrzebnych znaków.
Sprawdź na komórce!
Imię:
Pole, do którego użytkownik ma wpisać tekst (np. imię) powinno mieć dodany kod:
type=”text”
E-mail:
Pole, do którego użytkownik ma wpisać swój adres e-mail powinno mieć dodany kod:
type=”email”
Telefon:
Pole, do którego użytkownik ma wpisać swój numer telefonu powinno mieć dodany kod:
type=”tel”
Nr mieszkania:
Pole, do którego użytkownik ma wpisać numer (np. numer mieszkania) powinno mieć dodany kod:
type=”number”
Hasło:
Pole, do którego użytkownik ma wpisać hasło powinno mieć dodany kod:
type=”password”
Data:
Pole, do którego użytkownik ma wpisać datę powinno mieć dodany kod:
type=”date”
Miesiąc:
Pole, do którego użytkownik ma wpisać datę i godzinę powinno mieć dodany kod:
type=”month”
Szukaj:
Pole wyszukiwarki również powinno mieć dodany kod:
type=”search”
Typy klawiatur
type=”text”
Klawiatura z alfabetem, domyślnie z dużymi literami
type=”email”
Klawiatura z @ i .
type=”tel”
Klawiatura numeryczna
type=”number”
Klawiatura z cyframi
i znakami specjalnymi
type=”password”
Klawiatura z alfabetem, domyślnie bez dużych liter
type=”date”
Klawiatura z datami
type=”month”
Klawiatura z miesiącem
i rokiem
type=”search”
Klawiatura z alfabetem, domyślnie z dużymi literami
Zastosuj to w praktyce!
Jak dodać odpowiedni kod w formularzu? Pokażę Ci na przykładzie formularza zapisu do newslettera. Większość stron taki posiada. Często kod formularza, który generowany jest przez firmy tworzące rozwiązania do e-mail marketingu np. freshmail, mailchimp, getresponse itp. nie posiada określonych odpowiednich typów pól. Jak to poprawić? Skopiuj kod i osadź na swojej stronie wprowadzając zmiany.
Oto przykładowy kawałek kodu:
Jak widzisz na powyższym przykładzie elementy input nie posiadają określonych typów. Trzeba to poprawić i robimy to dopisując odpowiedni typ do każdego pola input:
Mała zmiana = wielki efekt 🙂 Zadowoleni użytkownicy urządzeń mobilnych -> bezcenne.
A jeśli nie masz możliwości zmian w kodzie?
Przetestuj swoje formularze używając telefonu. Sprawdź jakie pola nie mają określonego typu lub jest on określony błędnie (np. do adresu e-mail otwiera się klawiatura jak do pola tekstowego – brakuje tam @ i . co utrudnia uzupełnienie pola i nie jest wygodne. Swoje uwagi zgłoś programiście, z którym współpracujesz lub producentowi oprogramowania i poproś o poprawę.
Jeśli masz jakiekolwiek pytania – nie wahaj się napisać w komentarzu. Postaram się pomóc. Jeśli uważasz, że wpis jest przydatny – podziel się nim z innymi.
Tak sobie myślę, że pracując nad user experience trzeba mieć w sobie umiejętność patrzenia na znaną nam rzecz (np. na sklep internetowy, który chcemy ulepszyć) – zupełnie świeżym okiem. Z doświadczenia wiem, że jest to bardzo trudne 😉
Zgadza się! To jest najtrudniejsze w tym wszystkim. Warto poprosić co jakiś czas kilka osób, żeby przetestowało sklep. Nawiązując do tego co napisał Steve Krug w książce Nie każ mi myśleć – wystarczy 5 osób, aby wyłapały 95% problemów na stronie 🙂
Szkoda, że tak wielu wykonawców stron www zapomina o typach inputów. Trafia mnie coś, kiedy ewidentnie mam przed sobą pole typu email, a klawiatura wyswietla się do zwykłego text. Tylko ja tak mam, czy inni userzy również??
Zdecydowanie inni też tak mają 😛