8 porad zwiększających użyteczność formularzy

Formularze to jeden z najważniejszych komponentów używanych przez strony internetowe. Odgrywają one kluczową rolę w procesie zakupowym każdego e-commerce, ponieważ to dzięki niemu użytkownik określa adres dostawy oraz wybiera sposób zapłaty. Są one także podstawową formą kontaktu z wieloma usługodawcami.

Źle zaprojektowany formularz może zadecydować o tym, czy koszyk zostanie pomyślnie zrealizowany czy też porzucony.

W tym wpisie przedstawię kilka porad, które pomogą Wam zadbać o użyteczność waszych formularzy.

1. Pytaj o to, co naprawdę konieczne

Wyświetlajmy pola dotyczące tego, czego faktycznie w danym momencie potrzebujemy od użytkownika. Na przykład, nie zapytamy w formularzu kontaktowym naszego usera o kod pocztowy czy datę urodzenia.

Jeśli jednak z jakiegoś biznesowego powodu potrzebujemy takiej informacji, należy poinformować użytkownika, dlaczego takie pole zostało mu pokazane.

2. Grupuj powiązane informacje

Nic tak nie ułatwia czytania jak odpowiednia hierarchia treści. Jeżeli nasz formularz zawiera wiele pól, zastanówmy się, czy jesteśmy w stanie je jakoś pogrupować. 

Dzielenie pól według tematyki i wyróżnianie ich graficznie znacznie ułatwi użytkownikom ich zrozumienie, a korzystanie z formularza stanie się dużo wygodniejsze.

Pamiętajmy jednak, że zbyt wiele podziałów i ozdobników może wytworzyć nam szum informacyjny.

3. Wyróżnij kolejne kroki

Niekiedy formularze bywają długie i wymagają podzielenia ich na kilka etapów. 

Dobrą praktyką jest pokazywanie na osi czasu wszystkich kroków w formularzu. Dzięki temu twój użytkownik łatwo odnajdzie się w formularzu i z łatwością będzie mógł nawigować po jego etapach.

4. Unikaj wielu kolumn

Stosowanie wielu kolumn w formularzach utrudnia ich czytanie. Wynika to z tego, że nasz wzrok, biorąc za punkt odniesienia pierwsze pole, nie wie, czy powinien od razu przejść do pola obok czy tego pod spodem. 

Dobrą praktyką jest więc stosowanie tylko jednej kolumny, by nie męczyć wzroku i zachować logiczną ciągłość pól.

5. Wyróżniaj akcje pierwszorzędne

Nawigowanie po formularzu jest równie istotne co układ jego pól. Dlatego tak istotną kwestią jest wyróżnienie najbardziej typowych i pożądanych akcji przez użytkownika.

Najważniejsze elementy nawigacji, najczęściej są to przyciski, powinny zostać wyróżnione kolorem, wielkością, a niekiedy również ikoną.

6. Oznacz pola wymagane lub opcjonalne

Często wymagamy od użytkowników uzupełniania niektórych pól bądź przeciwnie, nie wymagamy ich uzupełnienia. Każde pole wymagane lub opcjonalne powinno być oznaczone. Nie należy jednak wyróżniać jednocześnie pól wymaganych i opcjonalnych, ponieważ może to doprowadzić do szumu komunikacyjnego. 

Dlatego też:

  • Oznacz pola wymagane, jeśli większość jest opcjonalna.
  • Oznacz pola opcjonalne, jeśli większość jest wymagana.
  • Pola wymagane można oznaczyć gwiazdką, a gwiazdkę opisać pod formularzem.
  • Pola opcjonalne opisz etykietą, nie gwiazdką.

7. Unikaj etykiet w polach

Bardzo często spotykanym rozwiązaniem jest stosowanie w formularzach etykiet umieszczonych wewnątrz pól. Nie jest ono jednakże poprawne, ponieważ takie etykiety mogą mylić się z wprowadzonymi treściami lub być traktowane jako wartości domyślne. Innym problemem jest fakt, że etykiety te znikają w trakcie wprowadzania treści, co później utrudnia lub uniemożliwia wprowadzanie poprawek.

Prawidłową praktyką jest więc stosowanie etykiet obok pól / nad polami.

8. Dobierz rodzaj wyrównania etykiet

Poprzez etykiety rozumiemy tutaj nazwy wyświetlane obok pól. To, w jakim miejscu przy polu wyświetlimy etykietę może zwiększyć wygodę użytkowników z korzystania z formularza.

Rozpatrzyć powinniśmy 3 warianty:

Wyrównanie prawostronne – rozwiązanie to pozwala na czytelne połączenie etykiety z polem i daje nam szybkość wypełniania.

Kiedy warto?

  • gdy mamy krótkie i zrozumiałe etykiety
  • gdy mamy mało przestrzeni w pionie, a dużo w poziomie

Wyrównanie lewostronne – umożliwia nam łatwe skanowanie etykiet.

Kiedy warto?

  • gdy informacje są trudne lub słabo znane
  • gdy etykiety mają podobny rozmiar
  • gdy mało przestrzeni w pionie, a dużo w poziomie

Etykiety nad polami – szybkie wypełnianie i mało fiksacji. Elastyczność dla nietypowych pól.

Kiedy warto?

  • gdy typowe, znane informacje
  • gdy mało dostępnej przestrzeni w poziomie, a dużo w pionie

Słowem podsumowania

Stosując się do powyższych rad nie tylko zadbamy o dobre praktyki w projektowaniu formularzy, ale też zwiększymy wygodę z ich obsługi i zmniejszymy ryzyko popełnienia błędu przez użytkownika.

Jeżeli potrzebujesz konsultacji lub audytu użyteczności swojego serwisu, pisz do nas śmiało przez nasz formularz. Na pewno pomożemy!

Użyteczność to nie User Experience

Temat wraca do mnie w trakcie codziennych zadań, gdy słyszę jak wiele osób używa zamiennie pojęć UX (ang. User Experience) oraz użyteczności (ang. Usability). W tym artykule postaram się więc opisać krótko te dwa pojęcia oraz wytłumaczyć istniejącą między nimi różnicę.

Co to jest użyteczność?

Miara wydajności, skuteczności i satysfakcji użytkownika, z jaką dany produkt może być używany dla osiągnięcia danych celów przez danych użytkowników.

UŻYTECZNOŚĆ WG NORMY ISO 9241-11

Przez użyteczność (ang. usability) możemy rozumieć więc to, jak łatwo i sprawnie użytkownik osiąga swój cel korzystając bezpośrednio z danego produktu.

Należy zwrócić uwagę, że mówimy tutaj o bezpośrednim kontakcie użytkownika grupy docelowej z produktem. Miara satysfakcji podana w normie ISO rozumiana jest tu jako brak czynników stresogennych i przeszkadzających w korzystaniu z produktu.

Użyteczny produkt posiada następujące cechy:

  • skuteczny (pozwala osiągnąć mój cel),
  • wydajny (działa szybko i sprawnie),
  • bezstresowy (korzystanie z niego nie rodzi problemów).
Ta poduszka jest bardzo wygodna i pozwoli wyspać się właścicielowi bez obawy o ból karku. Możemy tu mówić o użytecznej poduszce, ale czy o produkcie z dobrym UX? Jeszcze nie.

Co to jest UX?

Całość postrzegania i reakcji osoby, które są wynikiem korzystania lub przewidywanego korzystania z produktu, usługi lub systemu.

USER EXPERIENCE WG NORMY ISO 9241-210

Czym jest i czemu służy UX zasługuje na osobny artykuł, więc skupmy się jedynie na zakresie tego pojęcia.

UX (ang. User Experience) to całokształt obcowania użytkownika z danym produktem lub usługą. W odróżnieniu od użyteczności, UX skupia się również na wyglądzie, emocjach i psychice użytkownika danej grupy docelowej, przez co jest znacznie szerszym pojęciem.

W książce Badania jako podstawa projektowania User Experience autorki piszą, że UX najprościej opisują trzy cechy :

  • użyteczność (osiągnięcie celu, wydajność, ergonomia)
  • atrakcyjność (pożądanie, chęć korzystania, ładny wygląd)
  • pozytywne emocje (radość z użytkowania)1
Ta poduszka, o cechach jak poprzednia (użyteczna), jest dodatkowo atrakcyjna wizualnie i może wzbudzać pozytywne emocje u domatora.

Usability a User Experience

Piramida potrzeb użytkownika w kontekście cech produktu. Na ilustracji zaznaczony obszar związany bezpośrednio z UX.

Słowem podsumowania, Użyteczność ogranicza się do bezpośredniego kontaktu z danym produktem (np. w trakcie korzystania z intefejsu), User Experience dotyczy doświadczenia użytkownika na wszystkich punktach styczności i obejmuje jego opinię, emocje i reakcje psychofizyczne.

Użyteczny produkt pozwoli użytkownikowi po prostu osiągnąć swój cel bez stresu, zaś produkt z dobrym UX sprawi, że użytkownik będzie czuł przyjemność w trakcie użytkowania, a nawet emocjonalne przywiązanie.

10 heurystyk użyteczności Nielsena i Molicha

Heurystyki użyteczności Nielsena-Molicha to takich 10 przykazań w świecie UX. Po raz pierwszy przedstawił je w roku 1990 Jakob Nielsen wraz z Ralfem Molichem (często zapominanym w innych artykułach). Przez lata były one pod ostrzałem różnych krytyków i publicystów zajmujących się użytecznością. Pomimo tego, heurystyki opracowane przez tych dwóch panów są do dziś podstawową techniką analizy interfejsów.

W tym artykule opisuję krótko wszystkie z dziesięciu heurystyk użyteczności Nielsena-Molicha.

Analiza heurystyczna

Stworzenie heurystyk dało istnienie analizie heurystycznej. Jest to technika oceny interfejsów przy wykorzystaniu wybranych heurystyk. Heurystyki Nielsena-Molicha to nie jedyny zbiór, jaki istnieje, niemniej jest on zdecydowanie najpopularniejszy z uwagi na swoją uniwersalność jak i skuteczność.

Analiza heurystyczna jest podstawową metodą analizowania użyteczności danego serwisu. Jej zdecydowaną zaletą jest jej szybkość i niewielki koszt. Można ją zastosować praktycznie w większości etapów procesu projektowego – przy wczesnych szkicach lub makietach, na prototypie jak i gotowym projekcie. Służy przede wszystkim do zdiagnozowania podstawowych kwestii i elementów niezgodnych z dobrymi praktykami UX.

Niestety jest też druga strona medalu. Heurystyki zazwyczaj nie pomogą nam ujawnić nietypowych problemów związanych z użytecznością. Analiza heurystyczna bywa również często skażona uprzedzeniami i widzimisię badaczy.

Analiza heurystyczna nie rozwiąże wszystkich problemów użyteczności, ale może zaoszczędzić sporo czasu w trakcie badań z użytkownikami.

Heurystyki Nielsena-Molicha – omówienie

1. Pokazuj status systemu

Użytkownicy zawsze powinni wiedzieć, w jakim miejscu serwisu się znajdują i móc łatwo sprawdzić, jak tam trafili. W witrynie powinny znajdować się informacje o tym, co się w danej chwili dzieje, aby użytkownik mógł zwracać na to uwagę na bieżąco. Mogą to być animacje, mikrointerakcje, powiadomienia lub tekst z objaśnieniami. 

Przykłady:

  • potwierdzenie wykonania akcji
  • pasek postępu
  • animacja pokazująca aktywność systemu
  • kroki i umiejscowienie użytkownika
  • informacja o zakończeniu przetwarzania
Informacja o wykonywaniu przez system akcji. Źródło: https://www.trivago.pl/

2. Zachowaj spójności między systemem a rzeczywistym światem

Tekst w witrynie WWW powinien być  napisany w sposób zrozumiały dla użytkowników. Nie należy używać terminów technicznych i żargonu. Interakcje powinny wyglądać jak najbardziej naturalnie. Informacje należy przedstawiać w sposób logiczny, z wykorzystaniem znanych konwencji. 

Przykłady:

  • prosty język
  • zrozumiała symbolika
  • logiczna kolejność
Przykład stosowania języka przyjaznego dla użytkownika. Źródło: https://www.inea.pl/

3. Zapewnij użytkownikowi kontrolę i swobodę działania

Użytkownicy powinni mieć poczucie kontroli w interakcji z witryną. Dlatego warto zadbać o możliwość łatwego cofania i anulowania rozpoczętych procesów. W trakcie przeglądania witryny użytkownik musi zawsze mieć możliwość zmiany podanych informacji lub cofnięcia czynności, jeśli ma wrażenie, że popełnił błąd. Użytkownicy powinni być zachęcani do eksploracji witryny, co pozwoli zwiększyć ich zaangażowanie.

Przykłady:

  • możliwość wyjścia lub przerwania działania
  • możliwość podglądu wprowadzanych zmian,
  • możliwość cofnięcia operacji
  • możliwość zamknięcia okna
Przykład możliwości cofnięcia operacji usunięcia wątku w poczcie elektronicznej. Źródło: https://mail.google.com/

4. Zachowaj spójność i standardy

Ważne jest przestrzeganie standardów i spójności w kwestii sposobu przedstawiania różnych usług w witrynie oraz reakcji na działania użytkowników.  Dzięki temu odbiorcy nie będą mieli wątpliwości, jakie czynności powinni wykonać ani co oznaczają obrazy i słowa. Zastosowanie standardów w rodzaju iOS Human Interface Guidelines i Material Design Google pomoże Ci w zachowaniu takiej spójności. Użytkownicy mają konkretne oczekiwania w tym zakresie, które najczęściej formułowane są na podstawie poznanych wcześniej konwencji. Przykładem jest ikona koszyka zakupów, która jednocześnie wskazuje na stronę realizacji zamówień w sklepie internetowym. Znalezienie jej powinno być łatwe, ponieważ powszechnie uznawanym standardem jest umieszczanie jej w prawym górnym rogu witryny.

Przykłady:

  • spójny styl linków, przycisków i pól
  • spójne działania kontrolek i poleceń
  • te same elementy tak samo nazywane
  • przewidywalne (raz nauczone) działania
Przykład stosowania ikony koszyka w każdym kontekście dotyczącym zakupu. Źródło: https://www.zalando.pl/

5. Zapobiegaj błędom

Dobry projekt powinien utrudniać użytkownikom popełnianie błędów. Można tego dokonać poprzez zapobieganie występowaniu problematycznych sytuacji lub przez zrozumiałe informowanie o ich wystąpieniu. Wymaga to wykonania projektu zgodnie z mentalnym modelem użytkownika na temat konkretnych funkcjonalności. Możesz także wyświetlać zapytania o potwierdzenie, kiedy użytkownik chce coś usunąć, ale staraj się nie polegać na nich nadmiernie. Ich zbyt duża liczba sprawi, że użytkownik się do nich przyzwyczai i będzie je przeklikiwał bez przeczytania. Przykładem zapobiegania błędom jest stosowanie pól formularzy, np. numer telefonu, w których użytkownicy mogą podawać numery na różne sposoby: ze spacjami lub bez, z nawiasami i dewizami. Pola mają działać zgodnie z modelami mentalnymi użytkowników, a nie zmuszać ich do przyjmowania określonej formy zapisu. 

Przykłady:

  • dynamiczna walidacja
  • wymogi przed akcją użytkownika
  • ograniczanie opcji w oparciu o wcześniejsze akcje
  • sugerowanie kolejnego kroku
Przykład ograniczenia destynacji na podstawie wprowadzonego lotniska wylotu. Źródło: https://www.ryanair.com/pl/pl

6. Umożliwiaj rozpoznawanie zamiast przypominania

Ludziom łatwiej przychodzi rozpoznawanie obiektów, zwrotów i działań niż konieczność przypominania sobie o ich istnieniu. Witryna powinna ograniczać obciążenie poznawcze użytkownika poprzez zapewnienie odpowiedniej widoczności wszystkich interaktywnych obiektów i opcji. Użytkownicy przechodząc przez określony proces w trakcie korzystania z witryny, nie powinni być zmuszeni do zapamiętywania informacji z poszczególnych kroków. Powinny być one widoczne lub miejsce ich dostępności powinno być powszechnie znane. Przykładem są funkcje wyszukiwarki wewnętrznej, które podsuwają propozycje haseł wyszukiwania, kiedy użytkownik zaczyna je wpisywać. Dzięki temu miał pod ręką potencjalne hasła, co znacznie ułatwia szukanie, jeśli np. nie pamięta dokładnie pisowni danego terminu.

Przykłady:

  • przypominanie o dokonanych wyborach
  • autopodpowiadanie, autouzupełnianie
  • ostatnio oglądane, używane itp.
  • podgląd i wizualizacja opcji
Przykład przypominania użytkownikowi o dokonanym wyborze w dalszych krokach formularza zakupu. Źródło: https://www.zalando.pl/

7. Zadbaj o elastyczność i efektywność

Pozwól użytkownikom spersonalizować sposób, w jaki korzystają z witryny. Jest to ważne zwłaszcza w odniesieniu do często wykonywanych czynności. Zaoferuj zaawansowanym użytkownikom sprawniejsze sposoby wykonywania zadań, jednocześnie ułatwiając początkującym użytkownikom obsługę witryny. Przykładem jest możliwość wykorzystywania filtrów lub możliwość dodania produktu w sklepie do obserwowanych.

Przykłady: 

  • skróty klawiszowe
  • szybkie linki, schowki
  • zapisywanie filtrów, wyszukiwania itp.
  • najpopularniejsze opcje na wierzchu, reszta dostępna, ale trochę schowana
  • ułatwianie wyboru przez rekomendacje
Przykład systemu filtrowania z pokazanymi najczęściej stosowanymi filtrami dla danej kategorii produktowej. Źródło: https://www.morele.net/

8. Zachowaj estetykę i minimalizm

Każdy element i informacja zawarta w UI powinna służyć konkretnemu celowi. Interfejs nie powinien być przeładowany elementami, ponieważ wtedy poszczególne treści będą walczyć ze sobą o uwagę użytkownika. Przykładem są mocno rzucające się w oczy obrazy użyte w tle i wymyślne kroje pisma, które zmniejszają czytelność i odciągają uwagę użytkownika od najistotniejszych elementów.

Przykład estetycznego formularza, wykorzystującego marginesy, interlinie i odstępy. Źródło: https://rankomat.pl/

9. Ułatwiaj wykrywanie, diagnozowanie i naprawianie błędów

Komunikaty o błędach powinny być zapisywane prostym, nietechnicznym językiem. Powinny zostać skonstruowane w taki sposób, aby od razu można było się zorientować, co poszło nie tak i co wobec tego zrobić. Komunikaty powinny być widoczne i występować w odpowiednim kontekście. Przykładem jest błąd oznaczający wprowadzenie przez użytkownika niepoprawnych danych w polu formularza. Komunikat powinien zostać wyświetlony obok tego pola i być wyróżniony na różne sposoby, np. pogrubieniem i innym kolorem, aby użytkownik odnalazł błąd bez najmniejszego problemu.

Przykłady:

  • język komunikatów o błędzie dostosowany do użytkownika
  • podpowiedź rozwiązania przy komunikacie
  • pomoc kontekstowa w postaci wyróżnika kolorystycznego
Komunikat o nieznalezionych wynikach wyszukiwania z podpowiedzią hasła o poprawnej pisowni. Źródło: https://allegro.pl/

10. Zapewnij pomoc i dokumentację

W teorii idealna witryna nie powinna potrzebować dodatkowej dokumentacji. W praktyce zdarza się, że intuicyjne podpowiedzi umożliwiają uniknięcie frustracji i sprawiają, że wrażenia z użytkowania witryny są lepsze. Jeśli oferujesz użytkownikowi pomocne informacje spraw, aby były widoczne i łatwe do odszukania. Ważne jest również, aby podawały konkretne działania do podjęcia. Jeśli na przykład sklep oferuje różne możliwości dostawy, to na stronie realizacji zamówienia powinien być widoczne link do informacji o dostępnych formach dostarczenia zamówienia. 

Przykłady:

  • przejrzysta i czytelna pomoc
  • zróżnicowane formy pomocy, wizualizacje
  • kierunkowskazy i wsparcie w pierwszych kontrakcie z systemem (onboarding)
Przykład modułu pomocy zawierającej dokumentację wszystkich funkcjonalności serwisu. Źródło: https://allegro.pl/pomoc