4 rzeczy, których nie chcesz na swojej stronie internetowej, ale (być może) jeszcze o tym nie wiesz.

1. Plansza powitalna, tzw. preloader

Zadaniem preloadera jest “przywitanie” użytkownika strony oraz ukrycie jeszcze niepełnej treści, która jest dopiero renderowana przez przeglądarkę. Problem w tym, że zamiast zachęcać i “budować pozytywne napięcie”, zwiększa wyczekiwanie i powoduje zniecierpliwienie. 

Jak pokazują badania, im dłuższy czas oczekiwania na wyrenderowanie treści strony, tym większe ryzyko, że użytkownik ją opuści. Wg. Pingdom, średni czas ładowania strony powinien wynosić nie więcej niż 3.21 sekundy, zatem nie warto marnować cennych pierwszych sekund na wyświetlanie treści, które nie są docelowymi. Powinniśmy maksymalnie przyśpieszyć ładowanie witryny w taki sposób, aby jej najważniejsze elementy pokazywały się możliwie najwcześniej. Plansze powitalne i animowane preloadery są zbędne i mogą zwiększać współczynnik odrzuceń na stronie. Lepiej pokazać użytkownikowi stopniowe pokazywanie się elementów strony, niż kazać mu czekać sekundę dłużej na zobaczenie pełnej treści. Należy przy tym zadbać, aby poszczególne elementy pojawiały się możliwie najszybciej, a więc o odpowiednią optymalizację witryny.

Od powyższej reguły istnieje jednak wyjątek. Jeżeli mamy do czynienia ze skomplikowaną aplikacją webową, której ładowanie musi chwilę potrwać, preloader jest cenną informacją dla użytkownika – informuje o postępie ładowania aplikacji, a nie o jej bezczynności. Jest to jednak inna sytuacja niż preloader przy otwieraniu strony internetowej, dlatego nie należy ich zrównywać.

2. Wyskakujące reklamy i okienka pop-up

Irytującego odciągania uwagi od treści witryny można doświadczyć na niemal każdym portalu informacyjnym. Od wejścia na stronę zasypują nas dziesiątki reklam – bardzo kolorowe, krzykliwe, pojawiają się w tle, wokół treści lub przysłaniając je. Podobne praktyki można zrozumieć na portalach, których głównym źródłem dochodów są reklamy. Niezależnie jednak od motywacji ich umieszczenia – zawsze zniechęcą użytkownika do pozostania na stronie.

Jak pokazują badania przeprowadzone przez Iab Polska, aż 8,8 mln polskich użytkowników blokuje reklamy online, z czego najwięcej na urządzeniach stacjonarnych.

Podobne odczucia budzą w użytkownikach wyskakujące okienka (tzw. pop-up) mające zachęcać do interakcji (kontaktu, zapisu do newslettera, dokonania zakupu) lub innej aktywności. Pojawiające się tuż po wejściu na stronę okienko zostanie zauważone jednak odniesie odwrotny skutek do zamierzonego. Zamiast zainteresowania wzbudzi irytację – tym większą, im trudniej będzie je zamknąć. W najlepszym wypadku zirytowany użytkownik zamknie okienko, w najgorszym – stronę.

Warto jednak pamiętać, że nie każde użycie okienek pop-up jest błędem! Korzystanie z nich w wyjątkowych sytuacjach może przynieść wiele korzyści – da nam pewność, że użytkownik nie przegapi zmiany godzin otwarcia sklepu stacjonarnego, nowych danych kontaktowych lub naszego urlopu. Należy jednak zadbać o łatwe wyłączanie okienka widocznym przyciskiem oraz nie nadużywać go.

Okienka pop-up możemy też wykorzystać w przypadku dłuższego braku aktywności użytkownika na stronie lub podczas próby jej opuszczenia. Jeżeli użytkownik nie wykazuje zainteresowania możemy jeszcze zawalczyć o jego uwagę przedstawiając mu np. atrakcyjną promocję. Przy zerowym ryzyku (użytkownik i tak chciał opuścić stronę) mamy szansę na odzyskanie uwagi użytkownika.

3. Nadmiar animacji

Współczesne technologie, takie jak JavaScript czy CSS3 wraz z HTML5, oferują wiele animacji, które mogą być świetnym wzbogaceniem treści i podniesieniem wizualnej atrakcyjności strony. Warto jednak pamiętać, że nadużywanie animacji, zamiast przyciągać uwagę, spowoduje wizualny chaos, rozproszy uwagę użytkownika, a nawet odciągnie go od najistotniejszych treści. Zamiast nachalnych animacji możemy wykorzystać, nieco subtelniejsze, efekty hover lub stopniowe wyłanianie się elementów na stronie podczas jej przewijania.

Dobrą praktyką jest też rezygnacja z animacji w górnych częściach strony, gdzie treść powinna pojawiać się jak najszybciej. Jak pokazują badania – użytkownicy są gotowi zrezygnować ze skomplikowanych animacji na rzecz szybszego działania witryny. Niezależnie od rodzaju strony nie warto stosować na niej przesadnych animacji, a odpowiedni ich rodzaj jest tematem typowo projektowym w sferze UX oraz UI.

4. Slider (karuzela)

Jeszcze przed pojawieniem się smartfonów, a przynajmniej stron responsywnych, slidery (czyli popularne karuzele) były niemal standardem na stronach www. Ich celem było przekazanie najważniejszych informacji zaraz po wejściu na stronę. Dodatkowo, dzięki animowanym przejściom, miały przyciągać wzrok i zachęcać użytkownika do interakcji. Wraz z rozwojem badań nad zachowaniami użytkowników (User Experience) okazało się, że efekt jest odwrotny.

Spowalniają stronę

Aby slider zadziałał, potrzebuje skryptów JavaScript i CSS, które muszą załadować się zaraz po otwarciu strony. Kolejno ładowane są grafiki i zdjęcia, a także renderowany jest tekst. Tuż po otwarciu strony pobieranych jest dużo zasobów, które mogą blokować renderowanie strony i/lub najważniejszych jej elementów. Co więcej, slidery mają skomplikowaną strukturę kodu oraz zawierają dużo zagnieżdżonych elementów HTML, co wymaga od przeglądarki dodatkowego czasu i zasobów na wyrenderowanie karuzeli, w konsekwencji obniżając wydajność strony.

Są nieczytelne

Po otwarciu strony użytkownik od razu powinien zorientować się w jej treści, a także bez problemu odnaleźć się w jej nawigacji. Wykorzystując karuzelę już na początku strony możemy niechcąco wprowadzić chaos i przytłoczyć użytkownika nadmiarem informacji. Ruchome elementy odciągają uwagę od najważniejszych treści, a zmieniające się zbyt szybko (często także przeładowane) slajdy uniemożliwiają użytkownikowi zapoznanie się z ich pełną treścią. Co ważne, uwagę przykuwa głównie pierwszy slajd, każdy kolejny jest coraz mniej zauważalny.

Źle wpływają na SEO

Karuzele powodują też problemy wpływające na skuteczność pozycjonowania strony. Z punktu widzenia robotów indeksujących informacje na stronie powinny być łatwo dostępne, najlepiej od razu po jej otwarciu. Wykorzystanie slidera utrudnia dostęp do najważniejszych treści i “spycha” je na dalszą część strony.

Dynamiczne ładowanie treść karuzeli, brak semantycznej struktury HTML (np. brak nagłówków H1 lub ich wielokrotne użycie) czy duża ilość zagnieżdżonych niepotrzebnych elementów HTML powoduje spadek jakości strony z punktu widzenia Google i innych wyszukiwarek. Wpływa to też negatywnie na skuteczność strony – obniża konwersję, utrudnia kontakt czy sprzedaż.

Użytkownicy nie wchodzą w interakcję ze sliderami

Badania przeprowadzone przez The University of Notre Dame dowodzą, że tylko 1% użytkowników dokonuje jakiejkolwiek interakcji ze sliderem. Jeżeli już do tego dochodzi, dotyczy to (w ogromnej większości) tylko pierwszego slajdu. Większość użytkowników traktuje karuzelę jak tradycyjny baner wchodząc w interakcję tylko z pierwszym “kafelkiem”.

Z tej perspektywy obciążanie strony dodatkowym kodem JavaScript czy innymi zasobami jest niepotrzebne, a tę samą informację można przekazać w prostszy i lżejszy sposób (np. za pomocą sekcji Hero) nie tracąc na wydajności i czytelności dla wyszukiwarek.oraz jej czytelność dla wyszukiwarek internetowych.

Slidery nie są przyjazne urządzeniom mobilnym

Karuzele były wykorzystywane jeszcze przed pojawieniem się smartfonów oraz responsywnych stron www. Problem zaczyna się pojawiać, kiedy do dyspozycji pozostaje niewielki obszar ekranu mniejszego urządzenia. Użytkownicy są przyzwyczajeni do intuicyjnego przewijania zawartości strony pionowym ruchem palca. Nie ma tu miejsca na interakcję z karuzelą ponieważ użytkownicy traktują ją jak baner lub w ogóle ją pomijają. 

Mimo że, wraz z rozwojem technologii webowych, slidery doczekały się np. obsługi gestów na ekranach dotykowych, to nie zawsze działają prawidłowo. Problemem jest zbyt duża ilość informacji w stosunku do wielkości ekranu, a ilość i waga plików potrzebnych do działania slidera znacząco obniżają wydajność strony. Wydłuża to czas potrzebny do reakcji strony, zwłaszcza na słabszych łączach internetowych.

Podsumowanie

Wielu właścicieli stron www (a także część projektantów) nie zdaje sobie sprawy z mariażu branży projektowej z psychologią. Na przestrzeni ostatnich lat dostrzeżono, jak wielki wpływ na osiągnięcie celu strony (np. sprzedaży, nawiązaniu kontaktu) mają emocje użytkowników. To właśnie UX (User Experience) pozwala badać te emocje i zachowania – nie tylko na stronach www, ale też w aplikacjach (w telefonie czy przeglądarce), a nawet z fizycznymi produktami. 

Obsługa nowoczesnych samochodów czy telewizorów lub odnalezienie się w sklepie stacjonarnym, wywołują określone emocje. Branża UX to nieustanne badania reakcji użytkowników, co pozwala na wyciąganie wniosków i projektowanie rozwiązań tak, aby były jednocześnie wygodne w użytkowaniu, i spełniały określony cel biznesowy. 

Nie zawsze nasze wyobrażenie idzie w parze z rzeczywistymi potrzebami użytkowników, a przydatne rozwiązania okazują się działać zupełnie odwrotnie – pokazują to wymienione wyżej elementy. Warto zdać się na specjalistów zatrudnianych ze względu na ich wiedzę i doświadczenie, które pozwolą nam uniknąć (czasami banalnych) błędów.

Źródła:

1. https://www.pingdom.com/blog/page-load-time-really-affect-bounce-rate/
2. https://www.iab.org.pl/aktualnosci/raport-zjawisko-blokowania-reklam-wyniki-badania
3. https://www.vennmarketing.com/blog/sliders-are-dead/
4. https://erikrunyon.com/2013/01/carousel-interaction-stats/
5. https://www.searchenginejournal.com/news-sliders-ask-seo/448291/
6. https://cxl.com/blog/dont-use-automatic-image-sliders-or-carousels/
7. https://yoast.com/opinion-on-sliders/