0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>9 мар 2022</li>
2
<ul><li>9 мар 2022</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><h2>Бесконечная прокрутка, пагинация и "Показать ещё". Что и когда лучше использовать</h2>
4
</ul><h2>Бесконечная прокрутка, пагинация и "Показать ещё". Что и когда лучше использовать</h2>
5
<p>Рассказываем, для чего дизайнеры делят контент страницы и какой из способов лучше использовать для своего проекта.</p>
5
<p>Рассказываем, для чего дизайнеры делят контент страницы и какой из способов лучше использовать для своего проекта.</p>
6
<p>Иллюстрация: Катя Павловская для Skillbox Media</p>
6
<p>Иллюстрация: Катя Павловская для Skillbox Media</p>
7
<p>Продуктовый дизайнер. Работает со стартапами. Много путешествует. Постоянно читает, на ходу и на лету.</p>
7
<p>Продуктовый дизайнер. Работает со стартапами. Много путешествует. Постоянно читает, на ходу и на лету.</p>
8
<p>Если на одной странице расположить сразу 50 карточек с товарами или 2 тысячи новостных заметок, сайт или приложение будет грузиться очень долго. Чтобы этого избежать, дизайнеры делят контент на части и показывают их с помощью пагинации, бесконечной прокрутки или кнопки "Показать ещё".</p>
8
<p>Если на одной странице расположить сразу 50 карточек с товарами или 2 тысячи новостных заметок, сайт или приложение будет грузиться очень долго. Чтобы этого избежать, дизайнеры делят контент на части и показывают их с помощью пагинации, бесконечной прокрутки или кнопки "Показать ещё".</p>
9
<p><strong>Пагинация</strong> - распределение информации постранично, как в поисковиках Google и "Яндекс". Каждая страница пронумерована и на ней всегда фиксированное количество информации.</p>
9
<p><strong>Пагинация</strong> - распределение информации постранично, как в поисковиках Google и "Яндекс". Каждая страница пронумерована и на ней всегда фиксированное количество информации.</p>
10
<p>Бесконечная прокрутка - распределение всей информации на одной странице, как в социальных сетях Facebook**, Instagram*, Twitter. Во время прокрутки контент подгружается незаметно для пользователя, из-за чего страница кажется бесконечной.</p>
10
<p>Бесконечная прокрутка - распределение всей информации на одной странице, как в социальных сетях Facebook**, Instagram*, Twitter. Во время прокрутки контент подгружается незаметно для пользователя, из-за чего страница кажется бесконечной.</p>
11
<p><strong>"Показать ещё"</strong> - компромисс между пагинацией и бесконечной прокруткой. На странице отображается фиксированное количество контента, а новый появляется по нажатию кнопки "Показать ещё".</p>
11
<p><strong>"Показать ещё"</strong> - компромисс между пагинацией и бесконечной прокруткой. На странице отображается фиксированное количество контента, а новый появляется по нажатию кнопки "Показать ещё".</p>
12
<p>У каждого из этих видов есть и достоинства, и недостатки. Поэтому использовать одно и то же решение во всех проектах не выйдет.</p>
12
<p>У каждого из этих видов есть и достоинства, и недостатки. Поэтому использовать одно и то же решение во всех проектах не выйдет.</p>
13
<ul><li>Ощущение контроля: разбивка на страницы позволяет заранее увидеть приблизительное количество информации на сайте.</li>
13
<ul><li>Ощущение контроля: разбивка на страницы позволяет заранее увидеть приблизительное количество информации на сайте.</li>
14
<li>Простой поиск: пользователям гораздо проще выбрать что-то из ограниченного количества информации.</li>
14
<li>Простой поиск: пользователям гораздо проще выбрать что-то из ограниченного количества информации.</li>
15
</ul><em>Изображение: Анна Турос для Skillbox Media</em><ul><li>Клик дорого стоит: чтобы переключить страницу, пользователю придётся принять решение, подготовиться к смене контента и последующей загрузке. Поэтому многие изучают только первую или несколько первых страниц.</li>
15
</ul><em>Изображение: Анна Турос для Skillbox Media</em><ul><li>Клик дорого стоит: чтобы переключить страницу, пользователю придётся принять решение, подготовиться к смене контента и последующей загрузке. Поэтому многие изучают только первую или несколько первых страниц.</li>
16
<li>Вынужденное ожидание: при медленном интернете загрузка нового контента может быть слишком долгой, из-за чего пользователь может отвлечься и потерять интерес к сайту.</li>
16
<li>Вынужденное ожидание: при медленном интернете загрузка нового контента может быть слишком долгой, из-за чего пользователь может отвлечься и потерять интерес к сайту.</li>
17
<li>Дискомфорт в мобильной версии: кнопки переключения между страницами могут оказаться очень мелкими, из-за чего попасть по ним пальцем бывает трудно.</li>
17
<li>Дискомфорт в мобильной версии: кнопки переключения между страницами могут оказаться очень мелкими, из-за чего попасть по ним пальцем бывает трудно.</li>
18
</ul><ul><li>Отсутствие кликов: пользователю не нужно нажимать никаких кнопок, чтобы посмотреть весь контент страницы. Поэтому потенциальный посетитель будет больше времени проводить на сайте, так как при просмотре он тратит меньше энергии.</li>
18
</ul><ul><li>Отсутствие кликов: пользователю не нужно нажимать никаких кнопок, чтобы посмотреть весь контент страницы. Поэтому потенциальный посетитель будет больше времени проводить на сайте, так как при просмотре он тратит меньше энергии.</li>
19
<li>Комфорт в мобильной версии: в любом телефоне стандартные приложения, например записная книжка или настройки, уже имеют бесконечную прокрутку - поэтому пользователям кажется логичным, что всё в телефоне может работать так же.</li>
19
<li>Комфорт в мобильной версии: в любом телефоне стандартные приложения, например записная книжка или настройки, уже имеют бесконечную прокрутку - поэтому пользователям кажется логичным, что всё в телефоне может работать так же.</li>
20
<li>Почти полное отсутствие задержек: вся информация появляется сразу по мере прокрутки. Благодаря этому пользователь не ждёт, пока прогрузится новая страница.</li>
20
<li>Почти полное отсутствие задержек: вся информация появляется сразу по мере прокрутки. Благодаря этому пользователь не ждёт, пока прогрузится новая страница.</li>
21
</ul><em>Изображение: Анна Турос для Skillbox Media</em><p>Конечно есть:</p>
21
</ul><em>Изображение: Анна Турос для Skillbox Media</em><p>Конечно есть:</p>
22
<ul><li>Переизбыток выбора:<a>исследования</a>показывают, что слишком широкий ассортимент может привести к дополнительным сомнениям и пользователь будет дольше принимать решение о клике и покупке.</li>
22
<ul><li>Переизбыток выбора:<a>исследования</a>показывают, что слишком широкий ассортимент может привести к дополнительным сомнениям и пользователь будет дольше принимать решение о клике и покупке.</li>
23
<li>Сложный поиск: если пользователь знает, что именно он хочет, ему придётся потратить больше времени на прокрутку ненужных ему вариантов в ленте. Эту проблему можно решить поиском, но в выдаче может оказаться и 200 разных товаров или ссылок.</li>
23
<li>Сложный поиск: если пользователь знает, что именно он хочет, ему придётся потратить больше времени на прокрутку ненужных ему вариантов в ленте. Эту проблему можно решить поиском, но в выдаче может оказаться и 200 разных товаров или ссылок.</li>
24
<li>Практически невозможно запомнить местоположение нужной информации.</li>
24
<li>Практически невозможно запомнить местоположение нужной информации.</li>
25
<li>Отсутствие закладок: невозможно скопировать ссылку на страницу с определённым количеством товаров, чтобы вернуться к выбору позже.</li>
25
<li>Отсутствие закладок: невозможно скопировать ссылку на страницу с определённым количеством товаров, чтобы вернуться к выбору позже.</li>
26
<li>Сложный доступ к "подвалу": бесконечная прокрутка не даёт прокрутить сайт до конца, поэтому пользователь не сможет увидеть важные ссылки внизу сайта.</li>
26
<li>Сложный доступ к "подвалу": бесконечная прокрутка не даёт прокрутить сайт до конца, поэтому пользователь не сможет увидеть важные ссылки внизу сайта.</li>
27
<li>Не позволяет заранее оценить общее количество элементов.</li>
27
<li>Не позволяет заранее оценить общее количество элементов.</li>
28
<li>Проблема привыкания: пользователям сложно перестать скроллить ленту. Доктор философии Мичиганского университета Даниэль Крюгер в <a>своей статье</a>пишет, что бесконечная прокрутка способна заставить человека просматривать всё больше и больше контента вне зависимости от его желания. Изобретатель бесконечного скролла Аза Раскин публично извинился за своё изобретение в <a>Twitter</a>, так как эта прокрутка заставляет пользователей бесконтрольно тратить время на социальные сети.</li>
28
<li>Проблема привыкания: пользователям сложно перестать скроллить ленту. Доктор философии Мичиганского университета Даниэль Крюгер в <a>своей статье</a>пишет, что бесконечная прокрутка способна заставить человека просматривать всё больше и больше контента вне зависимости от его желания. Изобретатель бесконечного скролла Аза Раскин публично извинился за своё изобретение в <a>Twitter</a>, так как эта прокрутка заставляет пользователей бесконтрольно тратить время на социальные сети.</li>
29
</ul><ul><li>Простой поиск: как и в пагинации, пользователю проще сконцентрироваться на чём-то конкретном, так как количество информации на странице ограничено.</li>
29
</ul><ul><li>Простой поиск: как и в пагинации, пользователю проще сконцентрироваться на чём-то конкретном, так как количество информации на странице ограничено.</li>
30
<li>Комфорт в мобильной версии: кнопку "Показать ещё" удобно нажимать как на компьютере, так и на телефоне.</li>
30
<li>Комфорт в мобильной версии: кнопку "Показать ещё" удобно нажимать как на компьютере, так и на телефоне.</li>
31
<li>Легко отследить вовлечённость: если пользователю интересно находиться на вашем сайте, он будет продолжать нажимать на "Показать ещё" - это легко отследить трекерами "Яндекса" и Google.</li>
31
<li>Легко отследить вовлечённость: если пользователю интересно находиться на вашем сайте, он будет продолжать нажимать на "Показать ещё" - это легко отследить трекерами "Яндекса" и Google.</li>
32
</ul><em>Изображение: Анна Турос для Skillbox Media</em><ul><li>Не позволяет заранее оценить общее количество элементов.</li>
32
</ul><em>Изображение: Анна Турос для Skillbox Media</em><ul><li>Не позволяет заранее оценить общее количество элементов.</li>
33
<li>Отсутствие закладок: невозможно скопировать ссылку на страницу с определённым количеством товаров, чтобы вернуться к выбору позже.</li>
33
<li>Отсутствие закладок: невозможно скопировать ссылку на страницу с определённым количеством товаров, чтобы вернуться к выбору позже.</li>
34
</ul><p>Это зависит от задачи. Вам могут пригодиться все варианты, но в разных проектах.</p>
34
</ul><p>Это зависит от задачи. Вам могут пригодиться все варианты, но в разных проектах.</p>
35
<ul><li>Страницу с обычной пагинацией можно легко сохранить в закладки, а выбрать что-то конкретное проще, если количество товаров на странице ограничено. Поэтому такой способ хорошо сработает в дизайне интернет‑магазина. Обычная пагинация есть, например, на сайтах<a>Farfetch</a>,<a>Wildberries</a>и <a>Lamoda</a>.</li>
35
<ul><li>Страницу с обычной пагинацией можно легко сохранить в закладки, а выбрать что-то конкретное проще, если количество товаров на странице ограничено. Поэтому такой способ хорошо сработает в дизайне интернет‑магазина. Обычная пагинация есть, например, на сайтах<a>Farfetch</a>,<a>Wildberries</a>и <a>Lamoda</a>.</li>
36
</ul><ul><li>Бесконечная прокрутка позволяет показать большое количество контента и не требует от пользователя дополнительных усилий. Поэтому такой способ подходит, если вы хотите задержать пользователя на сайте. Бесконечная прокрутка используется во всех популярных социальных сетях и большинстве мобильных приложений: от фитнес-трекеров до календарей.</li>
36
</ul><ul><li>Бесконечная прокрутка позволяет показать большое количество контента и не требует от пользователя дополнительных усилий. Поэтому такой способ подходит, если вы хотите задержать пользователя на сайте. Бесконечная прокрутка используется во всех популярных социальных сетях и большинстве мобильных приложений: от фитнес-трекеров до календарей.</li>
37
</ul><ul><li>"Показать ещё" помогает отслеживать вовлечённость пользователей и упрощает поиск чего-то конкретного. Этот способ подойдёт для дизайна интернет-магазинов, новостных сайтов. Например, "Показать ещё" используется в редакциях Skillbox Media или на сайте<a>ТАСС</a>.</li>
37
</ul><ul><li>"Показать ещё" помогает отслеживать вовлечённость пользователей и упрощает поиск чего-то конкретного. Этот способ подойдёт для дизайна интернет-магазинов, новостных сайтов. Например, "Показать ещё" используется в редакциях Skillbox Media или на сайте<a>ТАСС</a>.</li>
38
</ul><p>Все эти варианты можно комбинировать. Например, у поисковика<a>Google</a>в версии для компьютеров используют пагинацию, а в мобильной версии - кнопку "Показать ещё".</p>
38
</ul><p>Все эти варианты можно комбинировать. Например, у поисковика<a>Google</a>в версии для компьютеров используют пагинацию, а в мобильной версии - кнопку "Показать ещё".</p>
39
<p>Что бы вы ни выбрали - тестируйте. Только с помощью обратной связи от пользователей вы сможете определить, правильно ли организовали навигацию и насколько комфортно её использовать.</p>
39
<p>Что бы вы ни выбрали - тестируйте. Только с помощью обратной связи от пользователей вы сможете определить, правильно ли организовали навигацию и насколько комфортно её использовать.</p>
40
<p><strong>А что ещё у вас можно почитать о дизайне интерфейсов?</strong></p>
40
<p><strong>А что ещё у вас можно почитать о дизайне интерфейсов?</strong></p>
41
<p>* Решением суда запрещена "деятельность компании Meta Platforms Inc. по реализации продуктов - социальных сетей Facebook* и Instagram* на территории Российской Федерации по основаниям осуществления экстремистской деятельности".</p>
41
<p>* Решением суда запрещена "деятельность компании Meta Platforms Inc. по реализации продуктов - социальных сетей Facebook* и Instagram* на территории Российской Федерации по основаниям осуществления экстремистской деятельности".</p>
42
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>
42
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>