Bezpłatna konsultacja
Strona internetowa to skuteczne narzędzie zdobywania zaufania i generowania leadów. Jednak liczy się to czy jest dopasowana do grupy docelowej oraz jej problemów. Innymi słowy czy wchodząc na podstronę Twojej strony internetowej użytkownik znajduje to czego szuka, a sama strona jest czytelna i intuicyjna. Brak odpowiedniej komunikacji oraz wartości dla użytkownika powoduje ponowne wejście do wyszukiwarki w poszukiwaniu lepszego źródła informacji.
Poznaj przykłady błędów na stronach, które skutecznie generują puste wejścia oraz podnoszą bounce rate.
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:
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.
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.
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.
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ą.
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.
Zobacz czym jest dostępność cyfrowa stron internetowych oraz jak tworzyć strony uniwersalnie dla osób z niepełnosprawnościami.
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.
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.
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.
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.
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
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.
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'.
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
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.
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
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.
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.
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.
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
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ć
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
Zobacz do tworzenie stron internetowych w naszej agencji digital, poznaj etapy oraz nasze założenia.
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
Agencja digital Hauerpower sp z o.o.
31-408 Kraków, Al. 29 Listopada 85
NIP 945-225-31-35
Copyrights 2010-2024
