powrot do bloga
/
/
uiux
/
Błędy na stronach internetowych – poprawa konwersji

Błędy na stronach internetowych – poprawa konwersji

Błędy na stronach internetowych – poprawa konwersji

Czym może być zły UX design na Twojej stronie internetowej ? 

Poznaj przykłady błędów na stronach i dlaczego istotne jest wykonać analizę i audyt.

Przeprowadzając audyty UX, przeglądając strony internetowe lub je optymalizując, często spotykamy się z wieloma błędami w obszarze UX (ang. User Experience) design, które czynią je słabo użytecznymi. Większość z podanych poniżej błędów wynika z zbyt słabej jakości wdrożenia responsywności strony internetowej (zobacz to jest responsywnosć ? ) lub nieprzemyślanej logiki i struktury.

spis treści:

Błędy na stronach internetowych

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 również jak wygląda optymalizacja strony na wordpress

Artykuł podzielony został na dwa obszary : błędy w dopasowaniu komunikacji i budowaniu pozytywnych doświadczeń użytkowników oraz błędy techniczne na stronach internetowych.

Pozytywne doświadczenia użytkowników na Twojej stronie internetowej

Brak określenia grupy docelowej

Strona internetowa powinna być dedykowana dla Twojej grupy Klientów. W procesie tworzenia stron internetowych powinieneś zbudować profile person i określić kim dokładnie jest Twój Klient oraz jakie ma oczekiwania względem Twojej strony, która oferuje konkretne usługi, produkty.

Brak logiki i intuicyjności podczas poruszania się po stronie internetowej

Poprawnie zaprojektowana architektura strony internetowej daje poczucie ładu i intuicyjności w poruszaniu się po niej. Odpowiednio nazwane kategorie, menu główne oraz brak kolejnych poziomów jest dobrą praktyką w projektowaniu UX design. W procesie prototypowania powinniśmy zwrócić uwagę na priorytety treści oraz odpowiednie ułożenie struktury strony tak by informacje najważniejsze były od razu widoczne z głównego menu i kategorii.

Niewłaściwy dobór kolorystyki i brak spójności komunikacji strony z marką

Strona powinna być tożsama z kierunkiem w jakim podąża marka. Spójna kolorystyka, wykorzystanie key visual marki oraz spójna stylistyka to podstawowe założenia które powinna kontynuować strona internetowa jak kolejny punkt styku Klienta z Twoją marką.

Nieczytelne komunikaty oraz statusy

Wysyłasz formularz ale nie wiesz czy dotarł ? Użytkownik nie otrzymał powiadomienia ze strony lub jest ono poniżej guzika CTA 'wyślij' ? To częsty problem braku informowania użytkowników o statusie po wykonaniu zadania.

Zbyt długie nagłówki lub źle zaprojektowane ich miejsce na stronie to także częsty problem na stronach internetowych. Brak spójności w ustaleniu jednej stylistyki dla nagłówków typu h2-h3 lub ich zła ekspozycja na stronie może powodować brak czytelności i zaburzenia spójności całej strony internetowej.

Typowe i najczęściej popełniane błędy na stronach internetowych

Poniżej przedstawiamy problemy stron związane z ich użytecznością, o której warto pamiętać, gdyż strona internetowa tworzona jest przede wszystkim dla użytkowników.

Zbyt długie formularze

Nikt nie lubi długich i nudnych formularzy z wieloma polami oraz gwiazdkami. Warto przemyśleć aby formularz z zapytania lub karty produktu był możliwe krótki. Warto dodać odpowiednie ułatwienia i zaprojektować stany pól : wypełnione, źle wypełnione lub jeszcze nie wypełnione.

Zbyt długa do przewijania podstrona z jednolitym blokiem tekstu

Czy wiesz że użytkownicy przewijają stronę do około 50-60% jej długości. Warto zwrócić uwagę na ten fakt i dostosować treści dla podstron usługowych, sprzedażowych do ich możliwości percepcji. Teksty dłuższe oddzielaj przestrzenią, a nową myśl zacznij od stosownego nagłówka.

Niskiej jakości zdjęcia

Zbyt długo ładujące się zdjęcia wpływają na techniczną optymalizację strony. Nie warto ładować zbyt dużych zdjęć lub powyżej 1mb. Z kolei słabej jakości skompresowane zdjęcia również nie zachęcą do zakupu produktu. Zdjęcie powinno być duże i czytelne, zwłaszcza jeżeli mówimy o ecommerce.

Wyskakujące okna popup

Lubią być irytujące i przeszkadzać. Jeżeli już potrzebujesz pokaż je raz i po 1 sekundzie. Zastosuj czytelny guzik zamknięcia X popup ooraz możliwość zamknięcia popup klikając poza jego obszarem. Zobacz jak zrobić popup na stronie

Duplikacja treści w obrębie podstron

Twórz ciekaw i angażujące treści. Staraj się nie powielać tych samych treści w obrębie strony gdyż wpłynie to negatywnie na kwestię SEO i osłabi jakość całej strony internetowej.

Brak jednoznacznej komunikacji w buttonach CTA

Istnieje złota zasada - użytkownik powinen wiedzieć dokąd prowadzi konkretny button. Gdzie zostanie przeniesiony. Staraj się opisywać funkcją każdy CTA zamiast stosować ogólne 'więcej'.

Błąd 404

W przypadku błędów na stronie warto zadbać także o odpowiednie ich komunikowanie poprzez dedykowaną podstronę zgłaszającą błąd 404 w przypadku braku odpowiedniej podstrony

Problemy stron internetowych po ich wdrożeniu

Zobacz poniższe problemy z jakimi spotykamy się analizując strony internetowe, które nie osiągają zadowalających wyników sprzedażowych i konwersji.

Zbyt duże odstępy sekcji strony internetowej

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).

Zobacz poprawnie wdrożone strony internetowe naszej agencji interaktywnej z Krakowa

Złe wykorzystanie szerokości strony internetowej

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

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

Problem z sidebarem na stronie internetowej

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 menu i logo na stronie www

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.

UX i baner na stronie internetowej

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. Zobacz czym jest baner (slider) na stronie

Buttony CTA - za mały obszar aktywny

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

Ten poglądowy screen prezentuje niezwykle mały, a przez to nieintuicyjny i nieużyteczny obszar aktywny buttona CTA. 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 CTA jeżeli wskaźnik myszy jest w pobliżu. Co to jest CTA i jak projektować

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

Złe przykłady UX na stronie internetowej - menu mobilne

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.

Źle dopasowane grafiki na stronach mobilnych

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.

Zły UX strony internetowej - 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.

Zły UX menu pionowego - 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ąć tworzenie stron internetowych ? 

Zobacz do tworzenie stron internetowych w naszej agencji digital, poznaj etapy oraz nasze założenia.

Jak poprawić konwersję strony internetowej ?

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.

Zobacz nasz audyt ux strony internetowej, popraw widoczność w Google oraz skuteczność dla użytkownika. Sprawdź co to jest współczynnik odrzuceń i jak go zmniejszyć

Komentarze do wpisu : zły ux strony internetowej: 

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