powrot do bloga

Błędy na stronach internetowych – poprawa konwersji

Błędy na stronach internetowych – poprawa konwersji

Przeprowadzając audyty, przeglądając strony internetowe lub je optymalizując, często spotykamy się z wieloma błędami w obszarze UX (ang. User Experience), które czynią je słabo użytecznymi. Poniżej przedstawiamy 19 błędów, z którymi mieliśmy do czynienia w ostatnim czasie i które najbardziej zwróciły naszą uwagę. Tego typu nieprzemyślane, źle zakodowane elementy stron internetowych zdarzają się niestety często i wpływają na niekorzystny odbiór strony przez odwiedzającego. Zobacz jak metody wykonania audytu UX

Zbyt duże odstępy sekcji strony

duze odstepy pomiedzy sekcjami na stronie
zbyt duże odstępy sekcji pomiędzy sobą

Jak widać na powyższym przykładzie, między sekcją tekstową a górnym sliderem powstała zbyt duża przerwa, która wygląda nieestetycznie i znacząco ogranicza funkcjonalność witryny. Tak duża przestrzeń między jedną sekcją a drugą powoduje, że strona internetowa znacząco traci na atrakcyjności.

W wersji na mniejsze ekrany ( RWD ) strona internetowa zostaje niepotrzebnie wydłużona, nieodpowiednio ustawione, za duże odstępy np. pomiędzy nagłówkiem a treścią, guzikem więcej mogą sugerować ich przynależność do sekcji sąsiedniej ( wcześniejszej lub następnej).

Złe wykorzystanie szerokości strony

zle skalowanie strony na urzadzeniu mobilnym
zła szerokość strony

W tym przykładzie zastosowano nieprawidłową szerokość witryny względem umieszczonej w niej treści. Powoduje to, że rozkład tekstu oraz innych elementów staje się nieatrakcyjny wizualnie, a tym samym obniża intuicyjność witryny. Warto byłoby tu stworzyć trzy estetyczne kolumny w poziomie zamiast jednej.

Zachodzenie paska sidebaru na treść strony internetowej

zachodzenie sekcji i elementow na siebie
zachodzenie nawigacji na treść

zachodzenie na tresc
oraz zachodzenie sekcji bocznej

Sztywne przyklejenie sidebaru to rozwiązanie pozwalające na umieszczenie dodatkowych komunikatów na stronie internetowej w odnośników do ważnych podstron. Jak widać na powyższych screenach –  pochodzących z tej samej strony www – pasek sidebaru został na stałe przytwierdzony do krawędzi strony internetowej, co uniemożliwia jego prawidłowe dopasowywanie się do wymiarów wyświetlanej witryny na urządzeniach mobilnych. Użytkownicy mobilni raczej nie są zadowoleni z takiego rozmieszczenia bocznego menu, dlatego jeżeli już je stosujemy dobrze je ukryć na mniejszych ekranach.

Zachodzenie elementów na siebie

zle skalowanie i wdrozona responsywnosc strony
zachodzenie elementow na siebie

Przy modulowaniu szerokością wyświetlania responsywnej strony internetowej często zdarza się, że poszczególne elementy zachodzą na siebie. Podczas projektowania stron www wiele osób wciąż nie weryfikuje, jak będzie wyglądać ich witryna na urządzeniach mobilnych. Odpowiednio przemyślana koncepcja strony internetowej (projekt strony na wielkości urządzeń mobilnych) powinna na etapie projektowym rozwiązać takie problemy poprzez uwzględnienie zmiany szerokości ekranu i dopasowanie elementów do siebie lub ich skalowanie / zmniejszenie.

Zbyt szeroki i źle sformatowany tekst na banerze

zbyt szerokie pola tekstowe
zbyt szeroki nagłówek na zdjęciu

Na tym screenie widać kilka błędów związanych z formatowaniem tekstu. Po pierwsze istnieją zbyt duże różnice między wielkością hasła „zamów” a pozostałą częścią opisu. Poza tym sam dolny opis jest zdecydowanie zbyt długi, przez co jego czytanie nastręcza sporo problemów. Dlatego też warto byłoby go złamać i jednocześnie zwiększyć jego czcionkę. Warto również zwrócić uwagę na mały kontrast między banerem a tekstem.

Za mały obszar aktywny buttona

zbyt male pola aktywne dla buttonow
za mały obszar aktywny dla elementów nawigacji

Ten poglądowy screen prezentuje niezwykle mały, a przez to nieintuicyjny i nieużyteczny obszar aktywny buttona. Ograniczenie tego obszaru sprzyja frustracji użytkowników oraz powstawaniu trudności w nawigowaniu ich po stronie.

Bardzo dobrym rozwiązaniem z zakresu UX/UI jest poszerzenie/powiększenie elementu jeżeli wskaźnik myszy jest w pobliżu.

Za duża grafika wczytywania jako obrazek na stronie internetowej

Przeładowanie strony grafikami w zbyt dużej rozdzielczości prezentuje powyższy screen.

Zbyt duża grafika w stosunku do wymaganego rozmiaru pojemnika przeznaczonego na jej wyświetlenie np. slider, slider z logotypami, galeria (miniatury) to problem administratorów stron www. Dodając grafiki powyżej wymaganej wielkości zwiększamy niepotrzebnie jej czas wczytania.

Często zamieszczane grafiki na stronie internetowej zmniejszane są na stronie dynamicznie poprzez kod css lub skrypt .js co powoduje że posiadają one w dalszym ciągu swoją oryginalną wagę. Dodane zdjęcie jest małe optycznie i wygląda dobrze w kontenerze ale zmniejszone jest do niej poprzez wspomniany kod, który tylko je skaluje na stronie zachowując jego oryginalną wagę.

Posiadając galerie, sekcje składające się ze zdjęć lub nawet pojedyncze zdjęcie, należałoby umieszczać je w docelowym wymiarze co wymaga dodatkowej edycji zdjęcia czyniąc pracę przy stronie mało wygodną i pochłaniającą dużą ilość czasu. Idealnym wyjściem z sytuacji jest zautomatyzowanie tego procesu poprzez tzw. ‚croppowanie’ automatycznie przez stronę dodawanego zdjęcia (przycinanie zdjęcia po zeskalowaniu do mniejszego formatu – w wyniku czego otrzymujemy zdjęcie mniejsze fizycznie i ważące nie 1mb czy 500kb a 100kb).

duze zdjecia wczytane na stronie
miniatury które są skalowane dynamicznie z większych rozmiarów

skalowanie zdjec dynamicznie na stronie
duża grafika faktycznie wgrana w formie miniatury

Wysunięte menu bez guzika zamykającego wymuszające ponowne kliknięcie w pozycję menu

brak guzika zamykajacego w menu
brak możliwości zamknięcia wysuniętego menu

Brak zamykającego buttona obniża wygodę korzystania ze strony, wymuszając na użytkowniku ponowne kliknięcie sekcji, do której chce się przenieść lub w której chce pozostać.

Aby wyeliminować ten oczywisty problem, wystarczy dodać przycisk „X”, który umożliwiłby zamknięcie menu i przeglądanie strony w jej pełnej okazałości.

Przycinanie grafiki tekstu w mniejszych rozdzielczościach

przyciete ikony w kaflach i sekcjach
przycięte ikony

Jak widać na tym screenie, obniżenie rozdzielczości wyświetlania witryny internetowej przycina dolne ikony, co wygląda nieestetycznie i z pewnością ujemnie wpływa na user experience.

W tym przypadku należało by zmniejszyć wielkość fontu i ikon lub odpowiednio zaprojektować widok kafli pod mniejsze ekrany.

Nieczytelny baner na stronie WWW

nieczytelny baner i za maly kontrast tekstu
zbyt mały kontrast tekstu i tła utrudnia czytanie

Zacznijmy od litanii rzeczy, które w tym przypadku wymagają poprawy. Pierwszym, co rzuca się w oczy, jest zbyt duży rozstaw liter, który utrudnia czytanie tekstu. Poza tym problemem jest również zbyt duża ilość treści, a także jej źle określona hierarchia. Górny tekst powinien być umieszczony w dolnej części baneru lub być zapisany większym fontem. Cały projekt baneru powoduje że jest on nieczytelny, biały tekst na względnie jasnym tle.

Nieczytelne i mało praktyczne menu

nieczytelne menu
Zły UX. Rozwiązanie mało praktyczne dla użytkownika

Po najechaniu na baner pojawia się dolne menu poziome, które po pierwsze wizualne wygląda źle, jest nieczytelne i całkowicie niepraktyczne.

Takie rozwiązanie marnuje dużo przestrzeni oraz wymaga od użytkownika wczytywania się w małą czcionkę, która będzie tym bardziej nieczytelna przy większych rozdzielczościach ekranu. Dodatkowo menu poziome jest trudnym w użytkowaniu dla osób starszych lub gorzej obeznanych z internetem.

Brak menu w wysuwanym panelu

brak menu i problemy ze skryptami js
brak menu po wysunięciu burgera, błąd na poziomie kodowania frontend

Jest to ewidentny błąd w kodzie witryny. W rozwijanym menu nie widać żadnej treści, która mogłaby prowadzić do podstron strony internetowej. Takie błędy są niedopuszczalne przy tworzeniu użytecznych, funkcjonalnych i eleganckich witryn.

Zbyt mały kontrast elementów aktywnych

zbyt maly kontrast elementow nieaktywnych
zbyt mały kontrast dla pozycji menu nieaktywnej

Widzicie tekst w górnym buttonie po prawej stronie? My i zapewne inni użytkownicy również nie. Wystarczyłoby jedynie zmienić kolor podświetlenia buttona lub tekstu, aby rozwiązać ten problem. Zwykle też aby zwrócić uwagę dobrze jest wyraźnie zasygnalizować użytkownikowi zmianę po najechaniu na element aktywny właśnie mocniejszą / kontrastową / zmianą koloru tła, napis na guziku.

Zbyt długa lista wyboru select

zbyt dluga lista wyboru wlacza scroll
zbyt długa lista pozycji w submenu powoduje automatyczne włączenie scrolla

Dla odmiany na tym screenie prezentujemy poprawnie wykonane buttony składające się na listę select. Niemniej przykład ten nie jest bez wad. O wiele lepszym rozwiązaniem w tym przypadku byłoby stworzenie krótszej listy. Tak długie wylistowania nierzadko okazują się trudne w nawigacji.

Inną opcją jest wykonanie okna na całą szerokość i zaprezentowanie pozycji w np. dwóch kolumnach lub przygotowanie układu szerszego tzw. mega menu z podziałem na np. kategorie.

Brak aktywnych kafelków

Zwykle zdarza się, że spotykamy się z nieaktywnymi sekcjami kafelków z jednym buttonem. Rozwiązanie to jest mniej intuicyjne i mniej korzystne pod względem UX niż stworzenie każdego aktywnego kafelka z osobna.

Cały ‚klikalny’ (aktywny) kafelek jest również bardziej przyjazny dla użytkownika mobilnego.

Brak aktywności całego obszaru buttona

Podobną sytuację spotykamy w przypadku buttonów. Najczęściej w buttonach złożonych z ramki, szerszego tła niż napis (guzik z dużym paddingiem – marginesem wewnętrznym) jedynie napis buttona jest aktywny, co ogranicza powierzchnię interakcji użytkownika z guzikiem.

Nie wiesz od czego zacząć projektowanie strony internetowej ? 

Zobacz do nasz poradnik projektowania stron, w którym opisaliśmy etapy jej realizacji.

Jak poprawić konwersję strony internetowej pomimo naprawy błędów ?

W realizacji poprawienia konwersji strony internetowej może również pomóc wykonanie audytu SEO, który wskarze jej słabe strony oraz techniczne problemy powodujące słabą widoczność w wyszukiwarce Google.

Zamów audyt ux swojej strony internetowej, popraw widoczność w Google oraz skuteczność dla użytkownika.

Komentarze do wpisu naszych czytelników : 

Dodam jeszcze często spotykany błąd na stronach firmowych, jest nim brak kontaktu w widocznym miejscu bez przewijania strony. Najlepiej prawy górny róg wykorzystać na kontakt telefoniczny, email, można dodać też godziny pracy. Ma to bardzo duży wpływ na konwersję i zatrzymuje użytkownika dłużej na stronie. Przebadane

FASON

Hej brakuje mi odpowiedzi na częsty błąd: Mała czcionka utrudnia czytanie tekstu. Warto dodać Pozdrawiam,

MARCIN KORDOWSKI

Nie wiem czy wlicza się także szybkość strony, ale na pewno odpowiednia kolorystyka – nie misz masz :)) ewentualnie można pomyśleć na accesibility, bardziej niszowa część użytkowników ale o ich wygodzie warto tez porozmawiać.

ŁUKASZ

Na wersji mobilnej poważny błąd to nieklikalny numer telefonu. Doprowadza to często do irytacji użytkownika bo musi kopiować numer lub przepisać na kartkę i wklepać do telefonu.

ORSANA

UX szczególnie jest ważne w wersji mobilnej, gdzie usability może znacznie wpłynąć na czas użytkownika z klientem. Tak jak zostało już skomentowane czytelnie przedstawiony i łatwo “klikalny” kontakt jest kluczowym elementem. Ale generalnie odpowiedni odstęp i wielkość elementów klikalnych pomaga w odbiorze strony przez klienta.

ERGOEXPERT

Kole(żank)ga Fason słusznie napisał o danych kontaktowych w widocznym miejscu. Karygodne jest zmuszanie użytkownika do przewijania strony, ale niewybaczalne wręcz jest autmatyczne dogrywanie nowych postów czy aktualności tak, że zjazd na sam dół (do kontaktu) jest praktycznie niemożliwy. To zniechęca i odrzuca nawet jeśli strona sama w sobie jest schludna i estetyczna.

KAROLINA