Кога да използваме безкрайно превъртане на уеб сайта си

Infinite scroll (безкрайно превъртане) е технология, която се основава през повечето време на Ajax или JavaScript асинхронно зареждане и съществува от много години, но през последните 4 – 5 се разпространява по-бързо в различни типове уеб сайт. Това е техника за проектиране на потребителското изживяване, която позволява на потребителя да има достъпно съдържанието с непрекъснато превъртане, без да променя страницата. Мненията относно внедряването на безкрайно превъртане са противоречиви: има хора, които вярват, че то има силни предимства за потребителското изживяване, и тези, които смятат, че това зависи изключително от референтния сектор. Трябва ли да използвам безкрайно превъртане или пагинация за съдържанието си? Някои уеб дизайнери все още не са сигурни кой метод да изберат за уебсайта. Всеки метод има своите силни и слаби страни и в тази публикация пиша за това, кога да използваме безкрайно превъртане на уеб сайта си.

Безкрайно превъртане на уеб сайта

За да се разбере по-добре, да започна с няколко примера, които използват метода на безкрайното превъртане за навигация по сайта.

Безкрайното превъртане в социалните мрежи

Дори и не се усещаме, но този начин за преглед на съдържание го използваме всеки ден. В социалните мрежи превъртаме емисията от най-новото към предишни публикации. Представи си как се преместваш във Facebook, Twitter, Instagram, Telegram. Продължаваш да разглеждаш и няма нужда да кликваш на втора, трета и т.н. страници.  По този начин не се отклонява вниманието и потребителят, т.е. ти, е съсредоточен в съдържанието.

Безкрайното превъртане в новинарските сайтове и блогове

Безкрайното превъртане на срещите на Chicago Bulls в сайт, който публикува актуализирани новини, държи феновете в течение на събитията и резултата по време на мачовете. Те имат най-новата актуализация в горната част на страницата и надолу – предишните новини.

Забелязваме по-малко време за зареждане, новините са подредени една под друга и по време. Информация тече непрекъснато. Пример за новинарски сайт, който използва тази практика, е mashable.com. Той използва безкрайно превъртане с Show more.

Друг известен сайт с безкрайно превъртане – това е сайтът за блогинг Medium.com. Когато попаднеш на автор с огромен брой публикации, ти трябва да превъртиш много дълго, за да стигнеш до първите.

Ясно е, че за някои сектори: социални мрежи, новини, портфолио на базата на много изображения, агрегатори на публикации, безкрайният scroll е потенциално приложим и в полза на UX – потребителското изживяване.

(adsbygoogle = window.adsbygoogle || []).push({});

Безкрайното превъртане в Google Images

Спомни си как търсиш изображение по ключова дума в Google Images: няма пагинация, продължаваш да превърташ неограничено, докато намериш съдържание, което те интересува. И в този случай безкрайното превъртане не се приема отрицателно от потребителите. То е удобно, бързо, спестява време и ресурси.

Google Images използва безкрайното превъртане, защото изображенията и визуалното съдържание са по-лесни за обработка от мозъка от текстовото съдържание. Когато потребителят търси изображения, не винаги е гарантирано, че има наистина ясна представа, какво търси. Нуждае се преди всичко от преглед. Напротив, Google Search разчита на традиционната пагинация, която дава на потребителя представа за количеството намерено съдържание и прави по-лесно ориентирането.

Извод от примерите

Извод от тези примери: Моделът на безкрайно превъртане изглежда по-подходящ, когато има интерфейс за откриване.

Но да видим в дълбочина:

Facebook използва времеви рамки на личните публични профили, които трябва да се избират с филтър; Twitter спира да зарежда туитове, ако се отиде много назад във времето; Google Images дава само част от изображенията, които има в своя индекс; Instagram също спира зареждане на стари постове. Telegram имат друга практика. Там също има безкрайно превъртане в каналите, но е много лесно човек да изтегли целия канал, избирайки кои части да включи и до какъв размер. След това може да го прегледа спокойно на браузъра си до най-старите публикации. Така че цялото съдържание е винаги достъпно. Тези социални мрежи са привидно идеални случаи на използване на безкрайно превъртане, но хибридът за тях би бил по-добрият избор.

Плюсове и минуси на безкрайното превъртане

Безкрайното превъртане е идеалният трик за откриване на интерфейси. От наблюденията в горните точки на тази публикация направихме извода, че безкрайното превъртане е особено ефективно, когато сърфираме през голямо количество информация и съдържание. Но ще бъде ли то подходящо за така наречените целеви уеб сайтове и уеб страници или приложения? В тях потребителят сърфира с предварително определено действие и цел. В тези случаи непрекъснатото зареждане на ново съдържание прави всичко друго, освен да подобрява потребителското изживяване.

Плюсове на безкрайното превъртане

Говорейки за предимствата на Infinite Scrolling, ето няколко:

По-голяма ангажираност на потребителите

Основната цел на Infinite Scrolling е да ангажира потребителите и да ги накара да останат по-дълго на уебсайта.

По-ниска степен на отпадане

С по-висока ангажираност на потребителите, средното време, което потребителят прекарва на уебсайта, се увеличава. Това в крайна сметка намалява степента на отпадане.

Идеален за мобилни потребители

Безкрайното превъртане предлага по-добро потребителско изживяване при сърфиране на потребителите на мобилни устройства. Тъй като по-голямата част от трафика на уеб сайтовете днес се генерира чрез мобилни устройства, Infinite Scroll е идеално за преглеждането им.

Спестяване ресурси за обхождане на Googlebot

Google може да преминава и индексира подстраниците, обслужвани с безкрайно превъртане по желание. Googlebot може да вижда и следва асинхронни пътища, но не е „принуден“ да го прави. Тук е удобството на технологията за безкрайно превъртане. Ако Google забележи особен интерес към определени подстраници, извиквани чрез безкрайни превъртания, тогава ще може да ги следва и дори да ги запази в индекса, в противен случай не, спестявайки планина от ресурси за обхождане. Това също обяснява, защо може би е по-добре да се запази пагинацията на ниво URI. Но това са само индуктивни разсъждения.

(adsbygoogle = window.adsbygoogle || []).push({});

Минуси на безкрайното превъртане

Трудно се достига до началото

Когато потребителите искат да продължат към по-стари публикации, сърфирането се затруднява и в един момент блокира или се прекъсва.

Връщането в най-новите публикации е трудно

Ако няма бутон за връщане в началото, след дълго сърфиране назад, връщането е досадно.

Потребителите не могат да маркират страница

Безкрайното превъртане прави невъзможна или поне трудна задачата на потребителя да разбере, къде се намира в сайта и да запази позицията си, за да се върне към нея по-късно. Той ще трябва да прегледа цялото съдържание отново при посещението си на сайта следващия път.

Отегчаване на потребителя

Непрекъснатото превъртане прави потребителя отегчен и го принуждава да се откаже.

Долният колонтитул на уеб сайта е недостижим

Потребител, който търси секцията в долния колонтитул на уеб сайта, може да намери непрекъснатото превъртане за разочароващо. Той изпитва трудност да достигне до крайната точка на страницата.

Сайтовете, които прилагат безкрайно превъртане, трябва да направят долния колонтитул достъпен, като го направят лепкав (sticky) или да преместят връзките от него към горна или странична лента.

Добро решение за проблемите, възникнали при безкрайно превъртане е, да се качва допълнителното съдържание при поискване с помощта на бутон Зареди още, Виж още и подобни. Новото съдържание няма да се зарежда автоматично, докато потребителят не щракне върху бутона. По този начин потребителите могат лесно да достигнат до долния колонтитул (футъра на всеки уебсайт), където се намират авторските права и основните канали за контакт.

Производителност на страницата

Скоростта на зареждане на страницата е важна за доброто потребителско изживяване. Дългото време за зареждане кара хората да напуснат сайта или да изтрият приложението, което води до ниски проценти на реализация. И това важи за всеки, който използва безкрайно превъртане. Колкото повече потребители превъртат надолу по една страница, толкова повече съдържание трябва да се зареди на същата страница. В резултат на това производителността на страницата ще се забавя все повече и повече.

Ресурси на устройството

Друг проблем са ограничените ресурси на устройството на потребителя. На много сайтове с безкрайно превъртане, особено тези с много изображения, устройствата с ограничени ресурси могат да започнат да се забавят или направо да блокират. Безкрайното превъртане използва твърде много RAM (памет).

Проблеми с обхождането

Тъй като безкрайното превъртане разчита на JavaScript, има проблеми с Google да достигне до цялото съдържание: Googlebot няма да спре и да чака ново съдържание да се зареди извън неговата моментна снимка.

В резултат на това нищо извън този диапазон няма да бъде обходено – и това няма да е добре за SEO.

За да направиш безкрайното превъртане удобно за Google, кодирай страницата по начин, при който, ако потребителят или ботът няма JavaScript, той ще показва връзки, които могат да бъдат щраквани или обходени вместо това. По този начин Google може да стигне до цялото съдържание, до което потребителят би стигнал, ако превърти.

Какво е пагинация?

Пагинацията е модел на потребителския интерфейс, който разделя съдържанието на отделни страници. Когато превъртиш до края на страницата, виждаш ред с числа, който показва страниците в оформлението на сайта.

Типичен пример за пагинация е резултатът от търсенето с GoogleSearch. Всеки път, когато търсим нещо в Google, той показва редица резултати, които са разделени на определен брой страници.

Плюсове и минуси на пагинацията

Плюсове на пагинацията

По-добра конверсия

Конверсията е основният фактор, който кара онлайн бизнеса да използва страници за представяне на своето съдържание. Пагинацията се оказва изключително полезна за потребители, които са влезли в уебсайта с нагласа за покупка, а не просто да разглеждат съдържанието.

По-добър контрол на долния колонтитул или горната секция

Може удобно да се достигне долния колонтитул или горната секция на уебсайта, като по този начин е осигурен по-добър контрол за разглеждане на съдържанието.

Лесно проследяване и маркиране на страници

Пагинацията улеснява проследяването на количеството консумирано съдържание. Ако вече си разгледал някои страници, не е необходимо да ги преглеждаш отново. Можеш да отидеш директно на конкретна страница и също така да я маркираш за по-късна употреба.

Усещане за контрол

Според изследване на David Kieras от University of Michigan, “Психология във взаимодействието човек-компютър”: „Достигането до крайна точка осигурява усещане за контрол“. Изследването също така показва ясно, че когато потребителите имат ограничени, но все още релевантни резултати, те могат лесно да определят дали това, което търсят, е налице или не.

Освен това, когато потребителите видят общия брой резултати (очевидно, когато общото количество данни не е безкрайно), те ще могат да преценят колко време ще им отнеме да намерят това, което търсят.

(adsbygoogle = window.adsbygoogle || []).push({});

Минуси на пагинацията

Прекъсване на потока

Пагинацията пречи на безпроблемната навигация. Тя прекъсва потока на посетителя, като го моли да премине към следващата страница, за да сърфира по-нататък. По този начин влошава потребителското изживяване.

Повече кликвания и време за зареждане

Потребителите трябва всеки път да кликват върху бутона „Напред“, когато трябва да превключват между страници. Има и губене на време при процеса на зареждане на страницата.

Дублиращи се заглавия

Атрибутът rel = „canonical“ трябва да бъде зададен, в противен случай Google съобщава за дублиращи се заглавия и описания. По-подробно виж в тази публикация: SEO-Friendly Pagination: A Complete Best Practices Guide.

Тънко съдържание

Ако на дадена страница съдържанието е недостатъчно, Google може да я сметне за недостойна за индексация и съдържанието ще остане практически невидимо. Ако можеш да гарантираш, че страницата има достатъчно съдържание, за да бъде удобна за потребителя, това няма вече да е проблем. 

Проблеми с обхождането

Възможно е Googlebot да може да обхожда и индексира всяка страница от серия с страници като отделен документ, което разрушава бюджета за обхождане.

Избягвай това с подходящ файл robot.txt, за да предотвратиш обхождане на определени страници, което ще спести бюджета за обхождане и ще позволи обхождането на важните страници.

Хибридно превъртане, плюсове и минуси на бутона „Зареди още“

Този тип превъртане, след първите няколко задействания на съдържанието. задава тип бутон „Зареди повече“. Това позволява на потребителите да придобият усещане за контрол върху своето преживяване и да зададат визуални точки за спиране, помагайки да се преборят с усещането за непреодолимо, безкрайно изживяване.

Точките за спиране помагат за намаляване на някои от проблемите, които безкрайното превъртане може да създаде. Периодичните крайни точки уведомяват потребителя, че са готови, намаляват натоварването на страницата и позволяват на потребителя да достигне до долния колонтитул.

Плюсове на бутона „Зареди още“

• Улеснява търсенето: подобно на пагинацията, за потребителя е по-лесно да се съсредоточи върху нещо конкретно на страницата, тъй като на нея количеството информация е ограничено.
• Комфортно е в мобилната версия: бутонът „Зареди повече“ е удобен за натискане както на компютъра, така и на телефона.
• Лесно е да се проследи ангажираността: ако потребител се интересува да остане на сайта, той ще продължи да кликва върху „Зареди повече“. Това е лесно за проследяване с тракерите на търсачките.

Минуси на бутона „Зареди още“

• Не позволява да се оцени предварително общия брой елементи.
• Липса на отметки: не е възможно да се копира връзка към страница с определен брой продукти, за да се върнем към избора по-късно.

Единична публикация и безкрайно превъртане

По-редки, но не и невъзможни за намиране, са уебсайтове, които предлагат безкрайни превъртания дори за отделни статии. В тези случаи е удобно да се използва технологията на безкрайно превъртане в случай, че се стремиш да увеличиш броя на показванията на страници. Но ще бъде необходимо много внимание, за да се поддържат заедно статиите, строго свързани една с друга, тъй като, ако имаш в последване страница A и страница B, Google може дори да вземе част от текста от страница B и да го вмъкне в фрагмента за описание на страница A в резултата от търсенето в serp. Случавало се е. И имай предвид, че заявката в serp може да няма нищо общо със страница B.

Безкрайно превъртане и сайтове за електронна търговия

Сега нека видим дали Infinite Scroll може да се адаптира и към сайт за електронна търговия.

Известен е примерът с Etsy:

До преди няколко години потребителите на Etsy, търсейки в определена продуктова категория, се спираха, за да прочетат продуктовия лист на даден продукт и после естествено искаха да се върнат към превъртането на другите предложения от същата предишна точка. Но това не беше възможно и вместо това биваха катапултирани обратно в горната част на дъската.

Същото се случва и с много други сайтове за електронна търговия. Безкрайното превъртане в случаи, като тези, рискува не само да влоши потребителското изживяване, но преди всичко да доведе до срив на реализациите.

Има поне два вида безкрайни превъртания, този, който превърта, зарежда повече съдържание на същата страница, без да променя URL адреса, и този, който зарежда ново съдържание при превъртане, също променя URL адреса, което прави преминаването към следващата подстраница очевидно.

Според изследвания „хибридният“ начин, който всъщност продължава да прави подстраниците на архивите да могат да се сканират, разботи по-добре.

Ползи и ограничения за електронната търговия от безкрайното превъртане

Ползи:

• По-плавно сърфиране в сайта: зареждането на съдържанието става автоматично, докато потребителят превърта, това ще предизвика у него усещане за приемственост, което вече му е познато от социалните мрежи.
• Различно потребителско изживяване: превъртането, което се зарежда непрекъснато, е уникално изживяване за потребителя, свикнал с пейджинга. Очевидно това може да бъде предимство, но и недостатък, всичко зависи от вида на сектора, броя на продуктите и правилното изпълнение на технологията.

Ограничения:

• Загуба на препратка: след преглед на много продукти, се губи онзи, който ни е харесал от предишните, без да имаме страница като препратка (както при пагинация).
• Дезориентация на потребителя: в случая от примера с Etsy.
• Нефункционален долен колонтитул: при сайтовете за електронна търговия добре знаем, че долният колонтитул съдържа връзки и важна информация за потребителя.

Все пак важно е да се помни, че целта на електронната търговия са онлайн продажбите.

Безкрайно превъртане и SEO

Какво влияние оказва безкрайното превъртане върху SEO? 

Ако е вярно, че безкрайното превъртане подобрява ангажираността на потребителя, по всяка вероятност времето, прекарано в сайта ще се увеличи и това може да има положителен ефект и от гледна точка на SEO. 

Обратното – някои SEO специалисти са на мнение, че пагинацията дава по-добри резултати за SEO. Фактът, че потребителят може да посети повече страници, може да има по-добри резултатиза органичното класиране.

Прилагане на infinite scroll – да чуем Google

Ако си решил за определен проект (било то блог, електронна търговия, портфолио или друг сайт) да активираш този метод за преглед на съдържание, ще ти бъде полезно да знаеш най-добрите практики, които Google препоръчва. Грижата ти е особено за целите на класирането в търсачката:

За да си сигурен, че търсачките могат да обхождат отделни елементи, свързани от страница с безкрайно превъртане, увери се, че твоята CMS (система за управление на съдържанието) създава серия със страници (компонентни страници), която да върви заедно с безкрайното превъртане.

• раздели съдържанието на страницата, в която искаш да активираш безкрайното превъртане, на блокове, които да са достъпни, когато JavaScript е деактивиран;
• определи колко съдържание да включиш на всяка страница;
  – Увери се, че ако търсещият дойде директно на тази страница, той лесно може да намери точния елемент, който иска.
  – Поддържай разумно време за зареждане на страницата.
• Раздели съдържанието, така че да няма припокриване между страниците на компонентите в поредицата (с изключение на буферирането).
• създай подходяща URL структура от страна на SEO ;
• виж още на съответната страница на Google Search Central Blog.

Социалното въздействие на безкрайното превъртане

Непременно трябва да се обърне внимание на ефекта на безкрайното превъртане върху човешкото поведение. Самият създател на технологията Аза Раскин изразява загриженост относно злоупотребата с техниката:

Сякаш приемат поведенчески кокаин и го пръскат по кожата ти и това е нещото, което те кара да се движиш напред-назад.

Аргументът е, че тъй като безкрайното превъртане продължава да подхранва ново съдържание, то насърчава потребителите да консумират все повече и повече. Пристрастяването към социалните медии се дължи отчасти и на тази технология.

(adsbygoogle = window.adsbygoogle || []).push({});

Включените психологически механизми

• Ефект на новината: мозъкът непрекъснато е привлечен от това, което е ново, и е завладян от търсенето на ново, потенциално по-интересно съдържание;
• Производство на допамин, или вещество на еуфория, като невротрансмитер, който регулира веригата за възнаграждение. По този начин увеличава шансовете за повторение на същия жест в бъдеще с цел усещане за лекота и удоволствие;
• Автоматизъм на жеста, води до неосъзнато желание за продължаване на действието до безкрай;
• Търсене на удовлетворение, като всяка дейност, която включва пристрастяване. В случая се достига, когато човек намери субективно интересна новина или публикация.

Новата, дигитална зависимост

Дигиталната зависимост е класифицирана във всички отношения като първично хронично разстройство до степен на създаване на когнитивни и поведенчески дисфункции в основните области на ежедневния живот (афективна, семейна и работа).

Динамиката на зависимостта от уеб може да се развие до такава степен, че да наподобява явленията на наркоманиите – с поява на толерантност, жажда и пристрастяване.

Съвети за по-добро безкрайно превъртане

Не поставяй съдържание след infinite scroll

Залепването на долния колонтитул на уебсайта под морето от безкрайно зареждащо се съдържание натоварва потребителите с трудна задача. Постави важната информация на лесно достъпно място.

Когато потребител натисне бутона „Назад“, остави го да се върне на точно същото място

Много е разочароващо да загубиш мястото си и да се наложи да превърташ едно и също съдържание, само за да се върнеш там, където си спрял. 

Предложи възможността за прескачане напред

Не карай потребителите си да губят време, като превъртат съдържанието, което знаят, че не им трябва, за да стигнат до нещата, които търсят. Включи бутон, за да им позволиш да прескачат до определена буква или цифра.

Направи го да работи за потребители с клавиатура

Създай и тествай безкрайно превъртане по такъв начин, че потребителите, които използват само клавиатура, и хората, които използват екранни четци, да могат да използват страницата по предназначение. Решението може да бъде да се включи опция за изключване на безкрайното превъртане и да се даде възможност на потребителите да използват пагинация или бутони за зареждане на повече, ако желаят.

Тествай първо

Ако уеб дизайнерите искат да увеличат времето за престой на сайта и да понижат степента на отпадане, те трябва да го прототипират, да го тестват върху потребители (включително потребители с увреждания) и да видят дали дизайнът действително поддържа целта.

Какъвто и маршрут да реши дизайнерът в крайна сметка – безкрайно превъртане, бутони за зареждане на повече страници, пагинация или дори просто лента за търсене – първо тестването и събирането на обратна връзка от потребителите е най-важната стъпка.

Заключение

Като се имат предвид всички фактори, ето моето виждане за пагинация срещу безкрайно зареждане:

1. Ако потребителското изживяване и ангажираността на потребителите са основният ти приоритет, мини на безкрайно превъртане, в противен случай се придържай към пагинация. 

2. Ако имаш ограничено съдържание на уебсайта си, което потребителят може да достигне до крайната точка след определен период от време, предпочитайте безкрайно превъртане. Оформлението на страници би имало смисъл, ако имаш обширно съдържание. 

3. Безкрайното превъртане не се препоръчва за целенасочени изследвания, като например тези, които изискват от хората да намерят конкретно съдържание или да сравняват опции, както и за повтарящи се действия. То води до по-малко кликвания.

4. За сайтовете за електронна търговия намирането на продукти при безкрайно превъртане може да бъде трудно, без техники за филтриране или навигация, които да помогнат за изолирането на търсения елемент. Освен това намирането на по-рано намерен елемент на изключително дълга страница е неефективно. 

5. Пагинацията остава по-добро решение за ясно и подредено представяне на информация и категоризиране за сайтове и приложения за електронна търговия.

6. Безкрайното превъртане показва по-добри резултати за нерешителните потребители и ги изкушава да четат все повече и повече.

7. За сайтове за електронна търговия са подходящи хибридните решения (бутонът Зареди повече е удобен за търсене, категории и мобилни телефони).

8. Бавното безкрайно превъртане отнема време, бързото – пропускат се резултати.

9. Сайтовете портфолио и тези, посветени на фотография, дизайни, се възползват много от безкрайното превъртане.

Използвай A/B тестовете на редовни интервали, за да откриеш най-ефективния начин за твоя случай.