Take It to the Limit — przegląd stron internetowych o długim przewijaniu

Opublikowany: 2022-03-11

Strony internetowe z długim przewijaniem lub nieskończonym przewijaniem są dokładnie takie: strony są znacznie dłuższe niż „przeciętna” strona witryny i dlatego przewijają się „w nieskończoność”. Tego typu witryny stały się popularne w serwisach społecznościowych i witrynach takich jak Pinterest, które zawierają wiele treści tworzonych przez użytkowników, a także w niektórych witrynach z wiadomościami i blogami — osobiste witryny i portfele również zaczynają stosować techniki długiego przewijania w celu zwiększenia zaangażowanie użytkowników i czas, jaki ludzie spędzają w witrynie.

Nieskończone przewijanie stało się popularnym i powszechnym wzorcem projektowym, jednak istnieją pewne potencjalne pułapki, o których projektanci interfejsu użytkownika powinni pamiętać podczas projektowania witryny wykorzystującej długie przewijanie. Istnieją również rodzaje witryn, w których stosowanie długiego wzorca projektowego przewijania nie jest właściwe.

Cel i zalety długiego przewijania

Jedną z największych zalet witryn z długim przewijaniem jest to, że dłużej utrzymują odwiedzających. Kiedy ludzie nie muszą podejmować świadomej decyzji o konsumowaniu większej ilości treści, są mniej skłonni do klikania.

Pomyśl o tym jako podobnym do sposobu, w jaki Facebook, YouTube, Netflix i podobne witryny automatycznie odtwarzają filmy, gdy kończy się ten, który ogląda użytkownik. Wiedzą, że jeśli odwiedzający musi się postarać, aby kliknąć nowy film, jest tak samo prawdopodobne, że przejdzie do zupełnie innej witryny. Ale jeśli filmy będą nadal odtwarzane, jest bardziej prawdopodobne, że będą nadal oglądać.

Gdy witryny z długim przewijaniem są odpowiednio zakodowane, ładują nowy adres URL z każdym nowym elementem treści. Odpowiada to większej liczbie odsłon witryny, co może zwiększyć przychody z reklam i ogólną wartość witryny.

Długie przewijanie jest popularne w witrynach z wiadomościami, które ładują więcej treści w miarę przewijania przez użytkownika
Strona główna Mashable automatycznie ładuje więcej treści w miarę przewijania treści przez użytkownika, utrzymując je na stronie na dłużej.

Podobnie jak w przypadku każdej decyzji dotyczącej UX, przed podjęciem decyzji o formacie ważne jest, aby rozważyć zalety i wady osób, które będą faktycznie korzystać z witryny. Długie przewijanie może być świetną opcją dla niektórych typów witryn, podczas gdy w innych sytuacjach tylko frustruje użytkowników. Ważne jest, aby poznać różnicę między tymi dwoma.

Kiedy używać długiego przewijania (a kiedy nie)

Kluczową rzeczą do zapamiętania przy rozważaniu długiego przewijania jest to, że treść powinna dyktować format bez względu na rodzaj projektowanej witryny. Witryny z długim przewijaniem świetnie nadają się do niektórych rodzajów treści, ale mogą przedstawiać ogromną awarię UX w przypadku innych typów.

Ogólnie rzecz biorąc, witryny zorientowane na zadania i cele nie korzystają z projektów nieskończonego przewijania (np. witryny eCommerce i samouczki lub inne witryny edukacyjne, w których użytkownicy chcą widzieć wyraźny postęp). Tego typu witryny muszą dawać użytkownikom poczucie ukończenia i osiągnięcia, co jest trudniejsze do osiągnięcia przy długich przewijanych witrynach.

Na przykład Etsy wypróbowało projekt nieskończonego przewijania w 2012 roku i ostatecznie przerzucił się z powrotem na paginację. Odkryli, że chociaż klienci nadal kupowali mniej więcej w tym samym tempie, zaangażowanie użytkowników znacznie spadło. Spadły nawet takie rzeczy, jak liczba przeprowadzonych wyszukiwań.

Etsy zrezygnowało z długiej strony z przewijaniem i wróciło do paginacji
Etsy ostatecznie porzucił długi zwój na rzecz powrotu do stronicowanych wyników wyszukiwania po przeprowadzeniu testów.

Jedną z opcji, które niektóre witryny eCommerce dają odwiedzającym, jest opcja „Wyświetl wszystko” podczas przeglądania stron produktów. Daje to użytkownikowi możliwość przeglądania witryny w nieskończonym formacie przewijania, jeśli zdecyduje się to zrobić, zachowując krótsze strony wyników dla użytkowników preferujących ten format.

Paginacja jest również pomocna, gdy ważne jest, aby ludzie przeglądali informacje w porządku chronologicznym. Tam, gdzie przewijana jedna strona internetowa może zachęcać ludzi do przeglądania i przeskakiwania do przodu, paginacja spowalnia odwiedzających i zwiększa prawdopodobieństwo, że zużyją informacje we właściwej kolejności.

Witryna z przewijaniem jednej strony może naprawdę błyszczeć, to witryny, w których czytanie dodatkowych treści lub artykułów jest naturalnym przepływem. Dotyczy to na przykład witryn z wiadomościami lub blogów tematycznych. Użytkownicy tych witryn często chcą jednocześnie pobierać duże ilości informacji, a nieskończone przewijanie ułatwia to.

Innym oczywistym obszarem, w którym nieskończone przewijanie jest popularnym wyborem UX, są serwisy społecznościowe lub witryny z dużą ilością treści generowanych przez użytkowników. Facebook, Pinterest i Twitter używają nieskończonego przewijania. Te witryny chcą utrzymać użytkowników w witrynie tak długo, jak to możliwe, a nieskończone przewijanie robi to dobrze.

Psychologiczne koszty długiego zwoju

Skutki psychologiczne każdej decyzji projektowej należy zawsze dokładnie rozważyć. Jeśli chodzi o strony internetowe z przewijaniem jednej strony, istnieją efekty psychologiczne zarówno za, jak i przeciw.

Pierwszą rzeczą do rozważenia jest to, że użytkownicy nie mają nic przeciwko celowemu klikaniu. Klikanie jest częścią komputerów, graficznych interfejsów użytkownika i Internetu praktycznie od samego początku. Ludzie są przyzwyczajeni do tego konkretnego rodzaju interakcji i nie zostaną wyłączeni, jeśli będą musieli kliknąć kilka linków, aby uzyskać więcej treści.

Wielu użytkowników domyślnie nie lubi nieskończonego przewijania. Konfrontacja z wyjątkowo długą stroną do przewijania może trochę przypominać tonięcie w niekończącym się morzu informacji. Gdy użytkownicy szukają konkretnych informacji, przewijanie rzadko jest najskuteczniejszym sposobem ich znalezienia.

Ponieważ nie wyświetla dokładnie długości strony, nieskończone przewijanie przerywa pasek przewijania z boku strony. Chociaż nie każdy użytkownik korzysta z paska przewijania, pod tym względem ci, którzy to robią, mogą uznać nieskończone przewijanie za frustrujące.

Nieskończone przewijanie usuwa również poczucie ukończenia, które użytkownicy zyskują po zakończeniu zadania lub osiągnięciu celu na jednej stronie, a następnie kliknięciu na następną. Utrata tego poczucia spełnienia może zniechęcić użytkowników i spowodować, że będą szukać innych źródeł tych samych informacji lub zadań.

Innym negatywnym psychologicznym wpływem, jaki mogą mieć strony z długim przewijaniem, jest to, że użytkownicy mają tendencję do oglądania treści znajdujących się w dalszej części strony jako mniej ważnych niż treści na górze. Korzystanie z nagłówków może w tym pomóc, ponieważ w pewnym sensie „resetuje” mózg odwiedzającego o tym, gdzie znajduje się „góra”.

Najlepsze praktyki dotyczące długiego przewijania strony internetowej

Jeśli ustalono, że projekt strony internetowej nadaje się do projektowania długiego przewijania, należy pamiętać o kilku najlepszych praktykach, aby zapewnić optymalne wrażenia użytkownika.

Najpierw porzuć stopkę! Gdy treść jest stale ładowana, stopka będzie stale wypychana z dołu strony. Oznacza to, że wszelkie treści lub informacje zawarte w stopce pozostaną niewidoczne. Jeszcze gorzej jest, gdy użytkownicy dostrzegają stopkę, ale tracą ją z oczu, zanim będą mogli cokolwiek kliknąć. Jednym ze sposobów na obejście tego jest użycie przyklejonej stopki, chociaż całkowite pozbycie się stopki jest często lepszą opcją.

Świetny sposób na przerwanie długiego przewijania UX: umieść ważne informacje w stopce
Barbican nigdy nie pozwala zobaczyć wszystkich cennych informacji w swojej stopce, ponieważ jak tylko do niej dojdziesz, więcej treści ładuje się, wypychając ją z ekranu.

Korzystanie ze wskazówek wizualnych jest ważne, zwłaszcza jeśli po załadowaniu ekranu głównego nie jest od razu oczywiste, że na stronie jest więcej treści. Witryny z dużym obrazem nagłówka lub treścią wizualną, która wypełnia ekran podczas wczytywania strony, często zawierają strzałkę (czasem animowaną) lub podobne obrazy wskazujące, że poniżej jest więcej treści.

Wskazówki wizualne są ważne w przypadku witryn przewijanych po jednej stronie
Dynamit zawiera małą strzałkę u dołu ekranu głównego, która wskazuje odwiedzającym, że powinni przewijać.

Nawigacja powinna być stale widoczna, przy użyciu przyklejonego nagłówka lub nieruchomego paska bocznego z linkami nawigacyjnymi. Wyjątkiem są urządzenia mobilne, gdzie przyklejone nagłówki mogą zajmować cenną powierzchnię ekranu. Facebook dobrze sobie z tym radzi, ponieważ nagłówek znika, gdy użytkownicy przewijają w dół, ale pojawiają się ponownie, gdy zaczynają przewijać z powrotem.

Przeglądarka internetowa Chrome robi coś podobnego z ich kontrolkami u dołu ekranu; znikają, gdy użytkownik przewija w dół, i pojawiają się ponownie, gdy zaczną przewijać w górę. Jest to bardzo intuicyjny sposób tworzenia interfejsu, który maksymalizuje dostępną powierzchnię ekranu.

Jedną z istotnych funkcji UX, która na szczęście stała się bardziej powszechna w witrynach z nieskończonym przewijaniem, jest zmiana adresu URL podczas przewijania każdej sekcji. Niektórzy robią to za pomocą wewnętrznych zakładek na stronie. Inne witryny, w szczególności witryny z wiadomościami i blogi, aktualizują cały adres URL, gdy użytkownik przewija. Jest to ważne, ponieważ umożliwia użytkownikom linkowanie dokładnie do treści, do których chcą się połączyć, niezależnie od zmian na samej stronie.

Niektórzy projektanci stron internetowych decydują się na stworzenie czegoś, co można uznać za „hybrydową” witrynę z długim przewijaniem, z przyciskiem „załaduj więcej”, który ładuje zawartość bezpośrednio na tę samą stronę. Niektórzy projektanci interfejsu użytkownika używają tego wielokrotnie na stronie, podczas gdy inni decydują się na uwzględnienie go tylko raz, a następnie przekształcają witrynę w bardziej tradycyjny format z długim przewijaniem.

Oprócz tych aspektów związanych z długim przewijaniem stron internetowych, inne najlepsze praktyki dotyczące interfejsu użytkownika i UX dotyczące tworzenia dobrych projektów nadal mają zastosowanie do witryn, które wykorzystują nieskończone przewijanie.

Przykłady długiego przewijania wykonanego prawidłowo

Animacja przewijania strony internetowej poprawia wrażenia użytkownika
Witryna Story of Zohra używa wizualnych wskazówek, gdy zaczynasz przewijać.


Portfolio to dobra okazja do stworzenia jednostronicowej strony internetowej
Witryna Merbis Photography & Filmmaking jest doskonałym przykładem witryny z portfolio, która wykorzystuje nieskończone przewijanie.


Witryna z przewijaniem jednej strony
Witryna Windows of New York ładuje całą zawartość bezpośrednio na stronie głównej.


Techniki przewijania paralaksy stron internetowych są często łączone z długim przewijaniem
Witryna Like There Is No Tomorrow łączy długie przewijanie z technikami przewijania paralaksy.


Subtelna animacja przewijania strony zwiększa zachwyt użytkownika
Witryna Faces of New York Fashion Week — długi kanał ze zdjęciami z wydarzenia — jest idealnym kandydatem do formatu długiego scrolla.


Przykład unikalnej witryny z nieskończonym przewijaniem
Witryna Johna Balla przyjmuje nieco inne podejście: obrazy tła przewijają się w nieskończoność, podczas gdy treść tekstu pozostaje nieruchoma.


Linki do każdej litery po prawej stronie poprawiają UX na tej jednostronicowej witrynie z przewijaniem
Witryna Fake It Digital używa długiego przewijania, aby wyświetlić humorystyczne alternatywne definicje popularnych terminów biznesowych, projektowych i marketingowych.

Jest też ta strona od Andrew McCarthy'ego. Chociaż projekt jest wyjątkowy, nieskończenie przewija się z tymi samymi informacjami w kółko. Ponieważ McCarthy jest projektantem, prawdopodobnie jest to świadomy wybór, aby wyróżnić się z tłumu.

Projektanci często bawią się długimi przewijanymi formatami

I kolejny przykład od Sama Rosena, który również stale powtarza tę samą treść, chociaż ta witryna zapętla się z powrotem na górę, zamiast ponownie ładować całą zawartość.

Techniki przewijania w nieskończoność mogą się znacznie różnić w różnych witrynach

Wniosek

Witryny z długim przewijaniem nie są niczym nowym, ale osiągają nowy poziom dojrzałości. Projektanci nie używają ich już jako kolejnej „wielkiej” rzeczy i zamiast tego zwracają uwagę na to, jak wzór wpływa na wrażenia użytkownika.

Postępowanie zgodnie z najlepszymi praktykami podczas tworzenia witryn z nieskończonym przewijaniem pozwala projektantom stworzyć UX, który zachwyca użytkowników, a nie frustruje ich. Jednocześnie prawidłowo zaimplementowane strony z długim przewijaniem mogą również pomóc markom w osiągnięciu ich celów związanych z witryną.

• • •

Dalsza lektura na blogu Toptal Design:

  • Projekt perswazyjny: efektywne wykorzystanie zaawansowanej psychologii
  • Psychologia projektowania i neuronauka niesamowitego UX
  • Doświadczenie jest wszystkim — ostateczny przewodnik po UX
  • The Ultimate UX Hook – projektowanie przewidujące, przekonujące i emocjonalne w UX
  • Sprawdzone i prawdziwe prawa UX (z infografiką)