Artykuły, Opinie i Wywiady
comment 1

Błędy w UX i UI – jakie najczęściej popełniamy?

W październiku zeszłego roku podzieliliśmy się z Wami najlepszymi źródłami do nauki UX. Chcieliśmy pociągnąć ten temat zwłaszcza, że problematyka UX i dyskusje o projektowaniu inerfejsu (UI) cieszy się ostatnio dużą popularnością. Jakie są najczęściej popełniane błędy w UX ? Czego musicie się wystrzegać i na co zwracać szczególną uwagę? Przygotowaliśmy listę najczęściej popełnianych błędów w UX/UI.

Nie od dzisiaj wiemy,
że pozytywne doświadczenie użytkownika w trakcie korzystania z aplikacji
czy portalu wpływa na biznes i zadowolenie klientów. Niestety, badania przeprowadzone przez Uxeria.com wykazują, że aż 44% klientów sklepów internetowych źle ocenia sklep, który odwiedzili, a dla ponad 40% umieszczenie produktów na stronach jest nieintuicyjne. Nie jest dobrze.

 

Funkcjonalność, intuicyjność, użyteczność a w przypadku np. sklepów internetowych – konwersja – to główne zasady jakie powinny przyświecać projektom webowym dla szerokiej publiczności. Często jednak dzieje się tak, że projektanci skupiają się bardziej na efekcie wizualnym niż na użyteczności. Na pewno wielu z Was złapało się na tym, że chcieliście stworzyć stronę na efekcie „łał”, i chcieliście, żeby to „łał” wystarczyło do zaangażowania użytkownika. Ładnie wyglądająca strona to jednak nie wszystko.

Jakie są główne grzechy w User Experience? Czego musicie się wystrzegać i na co zwracać szczególną uwagę? Przygotowaliśmy listę najczęściej popełnianych błędów w UX/UI.

Błędy w UX

Nieprzemyślany interfejs

Czytelna architektura informacji i prosta nawigacja to elementy, które umożliwiają bezproblemowe poruszanie się po serwisie/aplikacji i nie wprowadzają użytkownika w zakłopotanie.
Na początek zadaj sobie parę pytań: O czym jest projektowana strona? W jaki sposób użytkownik będzie się po niej poruszał? Ile kroków powinien wykonać, aby osiągnąć cel X (rejestracja, zakup, odnalezienie informacji)?
Wiele osób popełnia dość poważny błąd – projektują serwis nie biorąc pod uwagę jego rozwoju lub wielojęzyczności. Jeśli jest to na przykład sklep internetowy warto przemyśleć kategorie (czy pojawią się nowe?) albo wziąć pod uwagę rozrastającą się liczbę produktów.

Przykłady dobrze zaprojektowanych interfejsów i info o tym, jak robić to świetnie znajdziecie np. tutaj:

10 przykazań dobrego UI

 

Książki:

Ignorowanie wzorców czytania

Użytkownicy czytają w określony sposób i dobrze zbadać lub poznać wzorce, którymi oko ludzkie się kieruje. Jeśli projektujecie nie planując, gdzie użytkownik powinien najpierw zawiesić wzrok, jest spora szansa, że Wasz cel nie zostanie zrealizowany (Np. rejestracja, zakup itp.) Na podstawie znanych wzorców czytania możecie ułożyć elementy UI
w taki sposób, aby najważniejsze informacje znajdowały się właśnie w tych  punktach.

Wzorzec „Z” dobrze obrazuje strona logowania/rejestracji Facebook’a. „Zetka” świetnie sprawdza się w przypadku stron, w których nie ma zbyt wiele tekstu,
a ich głównym celem jest „call to action”, czyli wezwanie do działania (np. rejestracja, zalogowanie, zapisanie się do newslettera itd.) Wzrok użytkownika najpierw wędruje na lewy górny róg (logo facebook), następnie przenosi się wzdłuż linii horyzontalnej w prawo (login input), potem w dół, w lewy róg (grafika) i kończy
w dolnym prawym rogu (formularz rejestracji z przyciskiem „Sign up”).

 

pattern z

O narzędziach, które umożliwią Wam śledzenie wzroku użytkowników i generowaniu heatmapy możecie przeczytać w naszym poście o testowaniu użyteczności tutaj. 

Drugi wzorzec to wzór F, który możemy zobaczyć na przedstawionej heatmapie. Tam, gdzie kolor jest czerwony, tam najdłużej użytkownik trzyma wzrok.
O wzorcu F pamiętajcie kiedy projektujecie stronę z dużą ilością treści. Najważniejsze teksty czy nagłówki układajcie po lewej stronie.

Więcej o wzorcach czytania tutaj. 

reading pattern

Mylne wyobrażenie o testach użyteczności

Wielu projektantów wychodzi z założenia, że potrzebują kilkunastu specjalistów,
w tym analityków, projektantów i ogromnej liczby respondentów do wyłapania błędów użyteczności. Okazuje się, że niekoniecznie jest to prawdą. Jakob Nielsen pisze, że wystarczy przebadać 5 respondentów, którzy są w stanie wychwycić
do 80% błędów użyteczności na stronie.  Błędy w UX mogą więc zostać wykryte przy niskim budżecie.Miejcie jednak na uwadze to, że zespół pracujący nad serwisem czy aplikacją może błędnie zinterpretować wyniki testów.


Przeczytacie więcej na temat metod badań użyteczności w tych miejscach:

 

Ignorowanie Fold line (obszar strony widoczny bez przewijania w dół)

Pamiętajcie o tym, że strona główna do fold line jest pierwszą stroną, z którą użytkownik ma styczność. Nie może być ona przeładowana informacjami! Ma za zadanie zachęcić userów do przewinięcia strony w dół, jeśli uznają, że znajdą coś interesującego. Pamiętajcie też
o responsywności – inaczej portal wygląda na desktopie, tablecie, a jeszcze inaczej na smartfonie (zmniejsza się jej pole „robocze”, może wobec tego przedstawić mniej informacji?)

Dla przykładu to strona desktopowa mBanku:

mbank desktop

 

A to wersja mobilna:

mbank mobile

W wersji mobilnej oprócz przycisku logowania i logo mbanku jedynym elementem widocznym jest tak naprawdę slider i informacje o ekoncie. W wersji desktopowej, oprócz informacji widocznych na ekranie smartfona, klient widzi też inne produkty mBanku (Ubezpieczenia, inwestycje, karty kredytowe).

Niekorzystanie z biblioteki wzorców projektowych

Może nie jest to jakimś karygodnym błędem, jednak zawsze warto przejrzeć biblioteki wzorców projektowych, czyli poszczególne elementy interfejsu. Możecie czerpać z nich inspiracje i zapoznać się z obecnymi trendami. Polecamy między innymi strony:

Niepoprawna kolejność przycisków

Wszelkie przyciski z akcjami negatywnymi (takie jak „Anuluj”, „Usuń” itp.) powinny znajdować się po prawej stronie, a wszystkie akcje zatwierdzające –
po lewej stronie. W ten sposób unikniecie sytuacji, w którym użytkownik klika niechcący w przycisk z akcją negatywną. Niestety, GUI dla Windowsa i Apple
są różne: Windows swój przycisk umieszcza po lewej stronie, Apple – po prawej.
Jeśli więc projektujesz interfejs lub aplikację dla jednego z tych dwóch platform, rozwiązanie jest jedno – zawsze stosuj się do zaleceń GUI.

 

błędy w ux

 

Zbyt rozbudowane formularze

Formularze powinny krótkie i zrozumiałe. Pamiętajcie, że im więcej pól użytkownik musi wypełnić, tym mniejsze prawdopodobieństwo, że to zrobi.  Decydując się na długi i bezsensowny formularz kładziecie na szali powodzenie całego serwisu. W konsekwencji użytkownicy porzucają koszyki, nie kończą rejestracji, nie zapisują się do newslettera.

Pamiętajcie, aby nazywać przyciski i etykiety w prosty i zrozumiały sposób. Możecie korzystać z różnych typów pól w zależności jakie informacje chcecie uzyskać – mogą to być checkboxy, radio buttony czy pola tekstowe.

I jeszcze jedna sprawa – nie ma chyba nic bardziej irytującego niż niedostatecznie oznaczone błędy. Absolutną koniecznością jest wyraźnie oznaczenie i wyjaśnienie charakteru błędu w polu. Dobrym rozwiązaniem jest też uzupełnienie błędnego pola przykładem poprawnych wartości i formatów (np. data urodzenia)

błędy w ux

Hamburger

Morten Rand-Hendriksen w swoim artykule na temat Hamburger Menu pisze:
„Menu z zakładkami (Tab menu) na stronie docelowej zwiększa zaangażowanie użytkowników, a co za tym idzie – przychód firmy.”
Hendriksen wyjaśnia, że wszyscy zaangażowani przy projekcie aplikacji/serwisu wiedzą ze swojego własnego doświadczenia, że ikona hamburgera oznacza menu
i zakładają, że jest intuicyjne. Hamburger nie jest intuicyjny – użytkownicy muszą nauczyć się jego funkcji. Sam znak hamburgera oznacza w matematyce „identyczność” , „równy do”.

błędy w ux hamburger menu

Jakie rozwiązania możecie zastosować zamiast Hamburgera? Hendriksen podpowiada:

  • Użyjcie słowa „Menu”
  • Użyjcie wysuwającego się Menu i skorzystajcie z interaktywnego tabu identyfikującego akcję
  • Użyjcie strzałki w dół
  • Rozważcie ponownie pozycję menu i funkcje

Mobile-first, czyli rozmiar ma znaczenie

Już ponad 46% ruchu w sieci w Polsce to ruch ze smartfonów. Co więcej,  14% zakupów internetowych odbywa się na ekranach telefonów. Rzeczą, o której wielu projektantów zapomina to fakt, że użytkownicy inaczej korzystają z serwisów przeglądanych na laptopie, a inaczej na telefonie. Nie tylko inny rozmiar ekranu ma znaczenie. Oprócz wdrożenia zasad responsywności, lub zaprojektowania odrębnej wersji mobilnej należy się zastanowić jakie funkcjonalności i informacje są ważne dla użytkowników smartfonów, a jakie dla użytkowników urządzeń stacjonarnych. Możemy dojść do wniosku, że smartfony stają się niejako kręgosłupem serwisu (bazą z najważniejszymi funkcjami), który rozbudowuje się z myślą o urządzenia stacjonarne.

 

mobile traffic błędy w ux

Dotarliście do końca listy. Mamy nadzieję, że dowiedzieliście się czegoś nowego, co pozwoli Wam stać się lepszymi projektantami. Czy widzicie inne rażące błędy w UX i projektowaniu interfejsu? Dajcie znać w komentarzach 🙂

 

  • What services you recommend to generate heatmaps?