Błędy na stronach internetowych wpływające na konwersję i ux

bledy na stronie internetowej

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.

 

1. Zbyt duże odstępy sekcji strony

blad na stronie - duze odstapy sekcji na stronie internetowej

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

 

2. Złe wykorzystanie szerokości strony

bledy na stronie - złe wykorzystanie szerokości stronyW 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.

 

3. Zachodzenie paska sidebaru na treść strony internetowej

bledy na stronie internetowej - zachodzenie sidebaru

bledy na stronie www - przyklejony sidebar

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.

 

4. Zachodzenie elementów na siebie

 

blad na stronie internetowej - zachodzenie elementów 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.

5. Zbyt szeroki i źle sformatowany tekst na banerze

blad na stronie www zle sformatowany tekst
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.

 

6. Za mały obszar aktywny buttona

za mały obszar buttona na stronie www - blad
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.

 

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

błedy na stronie www - wielkosc galerii obrazków

za duża wielkość grafiki na stronie www

 

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

 

brak guzika zamykającego na stronie www

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.

 

9. Przycinanie grafiki tekstu w mniejszych rozdzielczościach

przycinanie grafiki w sekcjach strony internetowej - blad
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.

 

10. Nieczytelny baner na stronie WWW

blad czytelnosci strony - nieczytelny baner
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.

 

11. Nieczytelne i mało praktyczne menu

blad nieczytelnego menu na stronie internetowej

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.

 

12. Brak menu w wysuwanym panelu

 

blad ux - zle kodowanie menu na stronie
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.

 

13. Zbyt mały kontrast elementów aktywnych

blad zbyt malego kontrastu elementow aktywnych
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.

 

14. Zbyt długa lista wyboru select

blad na stronie - pole selec
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.

 

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

 

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

Dorota - SEO copywriter, redaktor i twórca contentu na strony internetowe. Na co dzień zajmuje się tworzeniem tekstów na www i blogi współpracujących firm. Projektuje i wdraża strategie promocji w sieci, administruje profilami klientów w mediach społecznościowych.

All author posts
2 komentarze
  • Odpowiedz Fason

    Kwiecień 10, 2019, 1:50 pm

    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 🙂

  • Odpowiedz Marcin Kordowski

    Październik 3, 2019, 8:17 am

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

Write a comment

5 × 1 =