UX - Codovado – Agencja Interaktywna z Katowic

Dlaczego nie potrzebujemy już sliderów?

Wydaje się, że slidery to idealne rozwiązanie, aby przekazać użytkownikowi coś ważnego albo nawet kilka skompresowanych informacji… a może to jednak problematyczne rozwiązanie? Czy slidery na stronie są przydatne czy bezcelowe?

Slider może wydać się atrakcyjną formą powitania użytkowników, ale wbrew pozorom slidery prawie zawsze to zły pomysł.

Oto sześć powodów, dlaczego powinniśmy przestać używać sliderów raz na zawsze.

Brak interakcji ze strony użytkownika

Badania UX pokazują, że mniej niż 1% użytkowników wchodzi w jakąkolwiek interakcję ze sliderem. Dzieje się to dlatego, że użytkownicy wchodząc na stronę, najczęściej szukają konkretnego typu informacji, a slider najczęściej pokazuje to co chce przekazać właściciel strony.

Znaczna większość użytkowników scrolluje strony w czasie do 5 sekund od momentu przejścia na stronę i nie wchodzi w interakcje ze sliderem, a tym bardziej nie zapoznaje się z jego zawartością. Dodatkowo, bardzo często slider kojarzy się użytkownikowi z reklamami, w które po prostu nie lubi klikać.

Wyjątkiem są karuzele kontekstowe – jeżeli na stronie biura nieruchomości użytkownik szuka mieszkania w Warszawie i na podstronie znajduje się slider wyświetlający wyróżnione ogłoszenia mieszkań, prawdopodobnie jest to sytuacja, w której faktycznie użytkownik wejdzie w interakcje na dłużej. Jeżeli slider zawiera np. tylko zdjęcia stockowe, wówczas użytkownik prawdopodobnie nie wejdzie w żadną interakcję.

Są jedną z przyczyn spowalniania strony

Slidery to w wielu przypadkach duże grafiki, często w większej liczbie. Takie grafiki przeglądarka ładuje poza ekranem. Biorąc pod uwagę czas, w którym użytkownik zaczyna scroll i prawdopodobnie nigdy nie obejrzy tych grafik – ładowane są tutaj zbędne zasoby. Zdarzają się nawet sytuacje w których użytkownicy ładują zdjęcia ogromnych rozmiarów, nie zoptymalizowane pod kątem stron internetowej, a to już może krytycznie spowolnić stronę.

Szybkość ładowania strony ma wpływ na SEO oraz wydajność. Google chce zapewnić jak najlepsze doświadczenia, a chyba wszyscy wiemy jak denerwująca potrafi być wolno ładująca się strona.

Dodatkowo od technicznego punktu widzenia slider to także dodatkowy kod CSS oraz JS, który musi się pobrać i wykonać, aby slider zadziałał. 

Jakie może to mieć konsekwencje w praktyce?

Brak stosowania odpowiednich praktyk zabezpieczających może grozić naprawdę nieprzyjemnymi konsekwencjami. Jak w praktyce objawia się atak na naszą stronę?

  • Google będzie zrzucać stronę z pozycji wyników wyszukiwania, a w najgorszym wypadku może ona zostać z nich całkowicie wykluczona. Twoja strona może atakować inne strony, co może skutkować wpisaniem jej na czarną listę domen, a proces przywracania jest długi i czasem kosztowny.
  • Kampanie reklamowe Google Ads będą odrzucane, co zresztą samo Google argumentuje, że próbujemy kierować na zainfekowaną stronę.
  • Pod twoją domeną będą indeksowane spamerskie linki np. witryn pornograficznych, reklamowych lub próbujących zawirusować komputer użytkownika. 
  • Dodatkowo mogą zostać ustawione przekierowania na ww. strony w momencie wejścia na naszą stronę, co może negatywnie wpływać na wizerunek firmy.

Brzmi groźnie? Bo takie właśnie jest!

Nie są przyjazne dostępności 

Osoby ze specjalnymi potrzebami, korzystające z internetu, mają duże problemy ze sliderami. Stanowią one bardzo często punkt zawieszenia się lub przeszkadzają w odbiorze innych treści.

W przypadku nieumiejętnego dostosowania slidera pod kątem dostępności,  każda zmiana slidera będzie odczytywana przez czytnik ekranowy bez względu na to, w którym miejscu znajduje się użytkownik, jeżeli slider występuje na tej podstronie.

Dodatkowo problematyczna sama w sobie jest nawigacja takim sliderem. Czy małe kropki blisko siebie, będące często problemem dla zdrowego człowieka, będą intuicyjne? Raczej nie. Istnieją jeszcze oczywiście metody kontroli, takie jak strzałki czy przycisk odtwarzania. 

Nie ma spójności w tym, w jaki sposób użytkownicy obsługują slidery, a niektóre z tych elementów powodują dodatkowe problemy podczas używania technologii asystujących.

Można ten fakt połączyć jeszcze ze sliderem, który zawiera grafiki z nałożonymi tekstami i to już totalnie przekreśla jego dostępność.

Negatywnie wpływają na CLS (Cumulative Layout Shift)

O tym, czym jest CLS pisaliśmy w naszym kompendium dotyczącym Core Web Vitalis. Źle zaprojektowany lub zaprogramowany slider może generować przesunięcia układu w przypadku, gdy użytkownik wgra zdjęcia różnych rozmiarów.

Będzie to o tyle frustrujące dla użytkownika, że istnieje duże ryzyko że każda zmiana slidera będzie przesuwać wszystko, co znajdzie się pod nim.

Warto brać pod uwagę, że wyniki Core Web Vitals wpływają na ocenę strony i mogą przełożyć się na niższą pozycję w wynikach wyszukiwania.

Są problematyczne w swojej responsywności

Responsywność jest kluczowa – zwłaszcza, że większość ruchu na stronach pochodzi z urządzeń mobilnych. Jeżeli strona albo jakaś treść nie wyglądają dobrze na telefonie – użytkownicy chętniej wychodzą.

Slidery, aby miały sens zarówno na telefonach i komputerach, wymagałyby tak naprawdę zaprojektowania dwóch różnych slajdów, bo często proporcjonalne skalowanie slidera kończy się tym, że slider jest po prostu za mały, by cokolwiek z niego odczytać. Brak odpowiedniej wiedzy w implementacji często kończy się zbędnym ładowaniem obu wersji tych grafik niezależnie od ekranu (niepotrzebnie) lub mocno przekombinowanymi rozwiązaniami.

Istnieją również gotowe rozwiązania do “wyklikania” sliderów, ale mocno przekładają się na wydajność strony – nadmierny DOM, duża ilość dodatkowego kodu js albo arkusza stylu. 

Były popularne w 2009 roku

Swój szczyt popularności slidery miały w 2009 roku, a od 2015 roku kierunki i trendy projektowe zaczęły mocno odchodzić od wykorzystywania sliderów na rzecz bardziej statycznych i przemyślanych pod kątem osiągania celów rozwiązań. W 2023 roku na slidery to mocno archaiczne rozwiązanie.

Podsumowanie

Slidery są denerwujące, zakłócają odbiór treści oraz nie pomagają odwiedzającemu w odnalezieniu tego, czego szuka. Dlatego w 2023 roku zdecydowanie powinniśmy odejść od wykorzystywania sliderów – tym bardziej, że istnieje wiele świetnych alternatyw jak np. statyczny obraz z jednym zdaniem i wezwaniem do działania tz. hero image czy prosta animacja.

Polepsz odbiór Twojej strony! codoUX #1

Czym jest UX?

Na początek określmy krótko, czym jest zagadnienie UX. User Experience, czyli Doświadczenie Użytkownika, to dziedzina polegająca na projektowaniu w taki sposób, aby odbiorcy w trakcie korzystania z produktów czy usług mogli w pełni polegać na swoich przyzwyczajeniach, umiejętnościach itp. Dzięki temu odbiór przekazu jest jak najbardziej użyteczny, przekonujący oraz intuicyjny. 

Dziedzina ta dotyczy większości przedmiotów, które nas otaczają. Za przykład niech posłużą drzwi. Jeden przedmiot, 3 rodzaje możliwości interakcji – na tym właśnie polega UX. W tym artykule jednak swoją uwagę skupiamy przede wszystkim na polepszeniu odbioru stron internetowych.

#tip1: Zbuduj hierarchię przycisków.

Przyciski na stronie odgrywają bardzo ważną rolę, jednak często zdarza się, że struktura i cel takich przycisków nie jest do końca przemyślana. Warto zastanowić się nad tym, w jaki sposób chcemy prowadzić użytkownika po naszej stronie przy pomocy przycisków.

Button spełniający rolę wezwania do działania powinien być wypełniony wyróżniającym się kolorem, aby zwrócić uwagę użytkownika i zachęcić do kliknięcia. Alternatywnie, jeżeli w obrębie danego miejsca stosujemy kilka takich przycisków, to taki najważniejszy element możemy ozdobić np. cieniem, aby wyróżnić go na tle innych elementów strony.

Natomiast zwykły przycisk wypełniony powinien spełniać standardową rolę poruszania się po ważnych elementach strony. Istnieją również buttony obramowane, tzn. przyciski duchy, które spełniają rolę przycisków neutralnych i są zazwyczaj stosowane jako uzupełnienie.

Kolejność hierarchiczna w praktyce: wyróżniony przycisk wezwania do działania, przycisk wezwania do działania, przycisk wypełniony i przycisk duch.

#tip2: Nie utrudniaj, tylko ułatwiaj.

Jeżeli na Twojej stronie istnieje jakiś proces lub akcja, postaraj się je maksymalnie skrócić i ułatwić interakcję z nimi. Nie marnuj czasu użytkownika wdrażaniem popupa ze zdjęciem, przez które nie będzie widać przycisku zamknięcia. Istnieje duża szansa, że użytkownik, który będzie miał problem ze znalezieniem sposobu na zamknięcie takiego popupa po prostu wyjdzie ze strony.

W przypadku e-commerce istnieje wiele elementów, które można skrócić np. dodanie produktu do koszyka z poziomu katalogu produktów dla klientów, którzy chcą szybko coś kupić, dynamiczny cross selling, formularz zamówienia bez ładowania kolejnych podstron itp.

#tip3: Nie justuj tekstu.

W Internecie tekstu nie justujemy. Tekst justowany jest automatycznie dopasowywany do obszaru w którym definiujemy umieszczenie treści. W przypadku obszaru opływowego przy skalowaniu strony nie ma gwarancji, w jaki sposób dany tekst będzie wyświetlany na ekranie np. przez użytkownika korzystającego z narzędzi wspomagających (powiększenie) czy też urządzenia mobilne.

Sposób wyświetlania tego tekstu może być różny w zależności od urządzenia, rozdzielczości oraz przeglądarki.

Ponadto, justowanie tekstu bardzo często tworzy puste przestrzenie między słowami oraz błędy w przypadku umieszczenia spójników i przyimków na końcu linii, które traktowane są jako uchybienie typograficzne. Próba przerzucenia takiego spójnika miękkim enterem spowoduje powstanie jeszcze większej pustej przestrzeni, a te wpływają na finalny odbiór tekstu sprawiając, że czytany tekst nie jest ani czytelny, ani estetyczny.

#tip4: Nie używaj niebieskiego koloru dla tekstu.

Są dwie cechy, dzięki którym użytkownicy mogą rozpoznać link – niebieski kolor oraz podkreślenie. Jeżeli nasza treść nie jest linkiem, nie ustawiajmy jej niebieskiego koloru, bo taki zabieg wprowadza użytkownika w błąd. Niebieski kolor zostawmy tylko dla hiperłączy.

Jeżeli z jakiegoś powodu musimy zmienić kolor hiperłącza, to zadbajmy o widoczność drugiej cechy – podkreślenia. Jest to również przydatne dlatego, że w przypadku gdy na naszą stronę trafi osoba ze ślepotą barw, np. tritanopią, to dzięki podkreśleniu będzie wiedziała, że w danym miejscu znajduje się link.

#tip5: Używaj sprawdzonych wzorców.

W dobrze przemyślanych aplikacjach i stronach można zauważyć powielające się elementy. Na przestrzeni lat użytkownicy przyzwyczaili się do określonych znaków i tego, co się za nimi kryje. Za najprostszy przykład mogą posłużyć ikonki ustawień.

Użytkownik widzący ikonki po lewej stronie od razu wie, że kryją się pod nimi ustawienia. Przykładową ikona po prawej stronie pobraliśmy z innej strony, a kliknięcie w nią kieruje do procesu rejestracji.

#tip6: Zaplanuj priorytety ładowania treści.

Jednym z czynników nadchodzącego CWV jest CLS czyli Cumulative Layout Shift. W wielkim skrócie: chodzi o to, aby zapewnić użytkownikowi stabilność elementów na stronie internetowej w momencie ładowania oraz po jej pełnym załadowaniu.

Za przykład może posłużyć zwykły tekst okraszony obrazkiem. W momencie ładowania strony zadbajmy o to, aby w pierwszej kolejności załadował się tekst, aby użytkownik mógł go już czytać, a dopiero potem obrazek. Pilnujmy również tego, aby w momencie załadowania obrazka nie spowodować przesunięcia się treści, które wpływa bezpośrednio na czynnik CLS.

#tip7: Zadbaj o użyteczność mobilną.

90% ruchu odbywa się za pomocą telefonów komórkowych. Jest wiele czynników użytkowych, nad którymi warto się zastanowić i dopracować.

Sprawdź, czy wszelkiego rodzaju linki tekstowe lub buttony nie są za małe i wymagają od użytkownika precyzyjnego trafienia w punkt. Zdarzają się użytkownicy, którzy obsługują stronę małym palcem ponieważ odstępy między elementami są dla nich za małe i wywołują niepożądane akcje. Zapewnij każdemu elementowi klikalny obszar o minimalnym rozmiarze 1x1cm.

Osoby korzystające z tabletów najczęściej posługują się tylko kciukami przy przeglądaniu strony. Zadbaj o to, aby elementy nawigacyjne lub linki nie wymagały zaangażowania pozostałych palców lub obracania urządzenia. Testując stronę sprawdź, jak wygląda ich użyteczność przy korzystaniu z jednej lub dwóch rąk.

#tip8: Zapewnij wiele ścieżek nawigacji i skracaj je najbardziej, jak to możliwe.

Jeżeli twoja strona posiada złożoną hierarchię stworzoną do tego, aby dostać się do celu np. Nawigacja -> Oferta -> Budowa domów -> Budowa domów jednorodzinnych -> Podstrona oferty budowy jednorodzinnych, to najwyższy czas na zmianę projektu twojej strony. Pomóż użytkownikowi dostać do podstrony ofertowej już z poziomu strony głównej albo z poziomu oferty.

Zastanów się również nad samymi elementami nawigacyjnymi strony. Przy długiej stronie, gdzie użytkownik pokonuje długi  dystans scrollując stronę, warto przykleić nawigację do góry strony, aby bez konieczności powracania tą samą droga mógł przejść do innej podstrony.

Dodatkowo, na dole strony warto umieścić przycisk powrotu do góry, ponieważ w dalszym ciągu duży % użytkowników wraca do góry strony w celu wejścia w nawigację, nawet jeżeli taka nawigacja jest przyklejona.

W przypadku nawigacji mobilnej rozważ wyszczególnienie najważniejszych elementów, np. numer telefonu w formie przycisku na belce nawigacji lub button z linkiem do formularza kontaktowego.

#tip9: Slider – zrób to dobrze, a najlepiej… wcale.

Nie ma się co okłamywać – slidery już dawno wyszły z mody i nie mają wiele wspólnego z użytecznością. Według analityki tylko 1% użytkowników klika w slajdy, dlatego nie powinieneś przywiązywać szczególnej uwagi do tego rozwiązania.

Jeżeli jednak decydujemy się na slider, to pamiętajmy o kilku sprawach. Jeżeli Twój slider automatycznie się przewija, to zapewnij użytkownikowi manualne sterowanie w momencie, gdy wchodzi w nim w interakcje. Unikaj szybkiej zmiany slajdów, aby użytkownik mógł wystarczająco się skupić i zapoznać ze slajdem. 

Zapewnij użytkownikom również odpowiednią nawigację w wersji mobilnej. Kropki nawigacyjne postawione blisko siebie, bez możliwości ręcznego przewijania slajdów nie wydają się być dobrą opcją.

#tip10: Zadbaj o typografię.

ypografia na stronie jest bardzo ważnym czynnikiem, ponieważ jest głównym elementem odbioru tego, co chcemy przekazać na stronie internetowej.

Zadbaj o odpowiednie proporcje nagłówków, aby użytkownik mógł rozróżnić nagłówek główny od nagłówka nadrzędnego. 

Postaraj się także ujednolicić typografię na Twojej stronie – użyj 1 kroju i maksymalnie 2 grubości, zamiast 5 różnych fontów. Opracuj interlinię oraz zadbaj o to, aby użytkownicy z dysleksją nie mieli problemu z odczytaniem tekstu np. poprzez unikanie używania kursywy.

I najważniejsze – tekst czytany dla ekranów w telefonach nie powinien być mniejszy, niż ten widoczny na ekranie komputera czy laptopa. Dobrą praktyką w tym przypadku jest nawet powiększenie takiego tekstu o 1-2 punkty.

Podsumowanie

Wydawać by się mogło, że wszystkie powyższe rzeczy są dość oczywiste. Niestety realnie wygląda to tak, że wielu twórców stron internetowych nie zwraca uwagi na aspekty użyteczności przed oraz w trakcie realizacji i nawet w żaden sposób nie analizuje zachowania użytkowników na ich stronie już po jej uruchomieniu.

I niestety za niedługo bardzo wiele stron odczuje brak przywiązania uwagi do użyteczności, dlatego warto popracować nad tym już teraz. Dla wielu będzie oznaczało to całkowitą budowę strony internetowej na nowo pod kątem użyteczności, a tą uda się uzyskać tylko przy współpracy ze specjalistami UX oraz projektantami.