Пагинация в тильде что это: Пагинация для блога

Содержание

Навигация по сайту — примеры как сделать навигацию удобной

Практические советы по созданию понятного сайта

Tilda Education

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

Мы рассмотрим 13 способов улучшения навигации на сайте с помощью простых инструментов за минимальное количество времени. В Тильде есть много готовых блоков с элементами навигации, из которых можно выбрать наиболее подходящий для вашего проекта вариант.

Содержание

Сделать меню навигации для сайта лаконичным
Поставить ссылку на главную страницу на логотип
Сделать меню на одностраничном сайте
Зафиксировать меню
Выделить активный пункт меню для постраничной навигации
Добавить индикаторы (точки) для определения местоположения
Показать процесс загрузки и прокрутки страницы
Выделить кнопку с более важным действием
Скрыть часть контента
Добавить кнопку навигации «Наверх»
Проследить, чтобы в конце страницы не было «тупика»
Задать понятный URL адрес страницы
Сделать «хлебные крошки»
Подведение итогов

Сделать меню навигации для сайта лаконичным

Меню — один из главных инструментов навигации на сайте. Его удобство будет критическим.

При создании меню старайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если пунктов меню все-таки получается много, как вариант, можно использовать меню «гамбургер».

Советы и инструкции по дизайну удобного меню сайта

sistersbakery.ru

www.linelo.ru

fyrclothes.tilda.ws/story01

Поставить ссылку на главную страницу на логотип

Пункт «Главная» в меню — это пережитки навигации сайта 90-х. Вместо этого сделайте кликабельный логотип.

Сейчас уже сложилась устойчивая модель: при клике на логотип происходит переход в начало главной страницы. Поэтому смело удаляйте «Главная» из меню и не забывайте добавить ссылку для логотипа.

Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока.

Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.

Сделать меню на одностраничном сайте

Меню также может быть навигатором внутри одной страницы, когда вы делаете лендинг или лонгрид.

Если информации много, добавьте меню с ссылками на разделы страницы — это упростит навигацию.

Чтобы сделать на Тильде меню с ссылками на разные блоки внутри страницы, в настройках контента меню пропишите в ссылках номера этих блоков (номер каждого блока указан в его настройках), либо используйте якорные ссылки.

Якоря и ссылки внутри страницы

Зафиксировать меню

Чтобы посетитель в любой момент мог найти нужный раздел, можно сделать фиксированное меню — оно всегда будет оставаться в поле зрения при скролле. Такая навигация для сайта будет хорошим решением.

Для того, чтобы сделать фиксированное меню в настройках блока в разделе «Основные настройки» выберите вариант позиционирования меню «Фиксация при скролле».

Выделить активный пункт меню для постраничной навигации

Меню может показывать в каком разделе сайта находится пользователь, выделяя пункт, который относится к данному разделу.

В настройках Тильды можно установить дополнительные параметры отображения активного пункта меню. Есть несколько вариантов выделения активного пункта меню: можно изменить его насыщенность, непрозрачность и цвет. Кроме того, активный пункт меню можно подчеркнуть или зачеркнуть.

Такие же настройки можно применить и для пункта меню, на который наведена мышь. Не стоит переусердствовать, пункт меню достаточно выделить одним или двумя параметрами.

Добавить индикаторы (точки) для определения местоположения

Индикаторы в виде точек не отвлекают внимание от контента, но подсказывают в какой части страницы находится посетитель.

На Тильде у таких навигаторов есть также всплывающая подсказка с названиями разделов для удобной навигации по сайту . Блок находится в категории «Меню» под номером ME604.

Показать процесс загрузки и прокрутки страницы

Анимация загрузки страницы подскажет пользователю, что процесс идет, и контент загружается.

На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.

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

Индикатор прокрутки страницы — очень наглядный пример навигации. Он подсказывает, в каком месте страницы находится пользователь, и загружается по мере прокрутки страницы вниз. Использовать индикатор прокрутки страницы есть смысл, когда длина страницы превышает 3−4 экрана.

Чтобы добавить индикатор прокрутки на Тильде, используйте блок T333 из категории «Другое». В настройках блока можно задать цвет и толщину индикатора.

Выделить кнопку с более важным действием

Из двух соседних кнопок более важная должна визуально выделяться.

Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает».

archskills.ru

Самое простое — использовать яркий цвет для фона кнопки. Она должна быть контрастной по отношению к кнопке меньшего значения. Для второй кнопки достаточно использовать цветной бордюр без заливки, либо фон нейтрального цвета.

Помимо настроек стиля кнопок в Тильде есть дополнительные настройки, где можно отрегулировать стиль кнопки при наведении на нее мышью. В настройках можно указать цвет кнопки, бордюра, поменять насыщенность, цвет и шрифт текста, а также добавить тень и отрегулировать скорость анимации при наведении.

Скрыть часть контента

Много однотипных элементов просматривать утомительно. Используйте кнопку, которая скроет часть элементов и покажет их только по клику.

Хороший прием — написать на кнопке какое именно количество элементов, она скрывает.

Скрыть часть контента можно несколькими способами:

Кнопка «Показать еще». Она находится в разделе «Форма и кнопка» под номером BF703.

Текст в раскрывающихся блоках. Отличный вариант для длинных списков с услугами или ответами на вопросы. Его можно найти в разделе «Текстовый блок» под номером TX16.

Вкладки с раскрывающимся контентом. Находятся в разделе «Меню» под номерами ME602 и ME603. Эти блоки позволяют создавать на странице несколько вкладок и показывать разный контент по клику на соотвествующую вкладку в рамках одной страницы.

Кнопка «Показать еще»

Текст в раскрывающихся блоках

Вкладки с раскрывающимся контентом

Добавить кнопку навигации «Наверх»

Кнопка «Наверх» помогает пользователю из любого места страницы быстро попасть в ее начало.

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

В Тильде блок с кнопкой «Наверх» находится в разделе «Форма и кнопка» под номером BF702.

Проследить, чтобы в конце страницы не было «тупика»

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

Если вы сделали лендинг — самое время повторить призыв к действию. Если на странице находится статья, в конце можно поставить ссылки на другие статьи похожей тематики. В Тильде для этой цели можно использовать блоки из разделов «Плитка и ссылка» либо «Список страниц».

piece-of-cake.ru/absorption

britishsummer.tilda.ws/page2203.html

togdazine.ru/project/airzero

ayuev.com/estetica

fyrclothes. tilda.ws/2016

ohmy.moscow/books2

Задать понятный URL адрес страницы

URL (Uniform Resource Locator) — это единообразный адрес, указывающий путь к интернет ресурсу. Иными словами, это ссылка, которая отображается в адресной строке браузера.

Названия разделов помогают пользователю ориентироваться на сайте по адресу и, к тому же, положительно влияют на релевантность страницы.

Для понятных упорядоченных URL адресов существует термин ЧПУ (человекопонятный URL). ЧПУ состоит из понятных пользователю слов, а не из системного адреса (в Тильде системный адрес страницы будет выглядеть, например, так: /page4652188. html).

Пример, как устроена структура адреса:

https://www. mysite.com/shop/men/shirts

Первая часть (https://) показывает метод, который используется для получения доступа к интернет ресурсу. Протокол HTTP используется чаще всего.

Вторая часть адреса — это имя вашего домена, адрес, по которому сайт можно найти в сети. Если сайт многостраничный, www.mysite.com будет адресом главной страницы, все остальные разделы и подразделы по порядку прибавляются к адресу через косую черту.

Если это одностраничный лендинг с разделами, лучше использовать якорные ссылки с понятными названиями, например #about или #contacts, так как они тоже отображаются в адресной строке.

Адрес страницы в Тильде можно поменять в разделе «Настройки страницы». Если вы хотите использовать несколько слов в адресе страницы, прописывайте их через дефис «-» либо через символ подчеркивания «_». Например, /about-us или /our_works.

Сделать «хлебные крошки»

«Хлебные крошки» (навигационная цепочка) — это навигационный элемент, который помогает пользователю отслеживать свой путь перемещения по сайту.

Обычно они располагаются в начале страницы и показывают путь от главной страницы к разделам сайта. Все пункты навигационной цепочки являются ссылками из предыдущего раздела.

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

Хлебные крошки выглядят таким образом:

Главная страница > Раздел сайта > Подраздел сайта > Страница

Хлебные крошки чаще всего используются в сайтах со сложной структурой, большим количеством страниц и контента. Например, их часто используют в онлайн-магазинах, где много категорий товаров.

www.adidas. ru/muzhchiny-botinki

www.lamoda.ru

www.tehnosila.ru

Для того, чтобы сделать путь из хлебных крошек на Тильде, достаточно добавить на страницу блок ME605 «Хлебные крошки» из раздела «Меню». Разместить его можно, например, под обложкой. В контенте блока пропишите названия пунктов и проставьте ссылки на соответствующие страницы. Блок можно копировать из одной страницы и вставлять в другую, добавляя по одному новому пункту навигационной цепочки.

Подведем итоги

Уделите внимание структуре и дизайну меню сайта. Не загромождайте его большим количеством элементов и выделяйте активные пункты меню.

Акцентируйте внимание пользователя на значимых кнопках. Сделайте их ярче и задайте дополнительные настройки для анимации кнопки при наведении мышью.

Используйте индикатор загрузки страницы, который подскажет пользователю что контент в процессе загрузки и вот-вот появится.

Используйте индикатор прокрутки на длинных страницах или блок с точками, чтоб помочь пользователю понять, в каком месте страницы он находится.

Кнопка «Наверх» поможет пользователю быстро вернуться в начало страницы. Используйте ее на страницах с большим количеством контента для удобной навигации на сайте.

Избегайте «тупика» в конце страницы. Предложите пользователю просмотреть похожие материалы по теме страницы либо установите ссылки, которые ведут на главную, следующую или предыдущую страницы.

Пропишите понятные адреса страниц сайта, на лендинге проставьте якорные ссылки с названиями, соответствующими разделу. Это еще один способ создания навигации на сайте.

Используйте хлебные крошки,если у вашего сайта сложная структура и большое количество разделов с подразделами, чтоб помочь пользователю ориентироваться.

Текст: Ира Смирнова и Юлия Засс
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Читайте также:

Белое пространство: способы вёрстки контента на сайте

Виджеты для сайта бесплатно — Прокачай Тильду!

Картинки для сайта — как подбирать фото и изображения на фотостоках

Как создать презентацию: правила создания эффективных презентаций

Где скачать иконки для сайта бесплатно?

Где найти фото — руководство по поиску картинок для сайта или статьи

Анализ и подготовка контента при создании сайта

Как написать текст для лендинга — создание текста для landing page

Шрифт для сайта — как выбрать или поменять шрифты

Размеры изображений для 7 социальных сетей — справочник

Как создать сайт. Пошаговое руководство

Показать больше

Пагинация, бесконечный скролл или кнопка «Загрузить еще»

Вы должны полагаться на один из этих трех паттернов, когда у вас много контента для загрузки. Итак, что лучше? Что понравится вашим пользователям? Что используют большинство платформ? Вот вопросы, которые мы рассмотрим сегодня.

Прежде чем начать, я бы порекомендовала прочитать мои две предыдущие статьи: одна о поиске и просмотре, а вторая о сетках и списках. Хотя они не важны для понимания этих паттернов, они дадут некоторую предысторию и контекст.

Введение

Представьте, что вы счастливый маленький сервер в большой серверной комнате. Вы можете справиться с несколькими задачами одновременно, в основном, просто отправляя контент людям, когда они об этом просят. Жизнь прекрасна. И вот однажды вас просят отправить 926 триллионов элементов 4 миллионам разных людей. Вы, вероятно, сойдете с ума и умрете*, а люди, пославшие вам запрос, тоже умрут (но от скуки, в ожидании, пока загрузятся данные). И именно поэтому у нас есть пагинация, бесконечный скролл и кнопка «Загрузить еще».

Эти паттерны позволяют серверу отправлять пользователю только часть контента за раз, тем самым сокращая время загрузки. Но у каждого из них есть свои сильные и слабые стороны, и вы должны решить, что лучше подходит для вашего продукта.

В двух словах:

Пагинация (разбивка на страницы, постраничный вывод информации, англ. – Pagination) – это просто страницы контента. Этот паттерн можно встретить в большинстве интернет-магазинов.

Бесконечный скролл (бесконечная прокрутка, англ. – Infinite scroll) заставляет вас думать, что весь контент уже был загружен, но на самом деле он загружается при прокрутке страницы. Например, Instagram.

Кнопка «Загрузить еще» (Load more button) – это кнопка внизу страницы, которая позволяет загружать больше результатов. Например, кнопка «Еще результаты» в Google Images.

Пример пагинации, бесконечного скролла и кнопки «Загрузить еще»

*Я понятия не имею, как умирают серверы. Я представляю, что при этом они поют «Не плачь по мне, Аргентина». Но это не точно.

2. Пагинация

После многих часов онлайн шоппинга, могу с уверенностью сказать, что пагинация по-прежнему остается самым популярным способом отображения продуктов. И, если вы не верите мне, статья в Smashing Magazine утверждает тоже самое.

Когда пользователь находится в «режиме поиска» , он ищет что-то конкретное. Следующие сайты используют пагинацию в результатах поиска:

  • Google (десктопнный вариант)
  • Amazon
  • Udemy
  • eBay
  • Shutterstock

2.1. Справка

Хотя некоторые из приведенных ниже пунктов являются исследованными фактами, многие из них просто отражают мое личное мнение. Поэтому, пожалуйста, при выборе подходящего паттерна, принимайте их с определенной долей скепсиса.

Плюсы:

  • Популярен на сайтах электронной коммерции.
  • Позволяет пользователям исследовать страницы и ссылаться на них («Серьги, что мне понравились, были на странице 3»).
  • Подходит для сайтов, где важен заказ товаров.

Минусы:

  • Людям кажется, что контент загружается медленно и долго. (ссылка)
  • Может статься так, что придется проверять каждую страницу, а нужного товара там не окажется.
  • Так как это довольно «старый» паттерн, я подозреваю, что большинство людей считают его старомодным по сравнению с бесконечным скроллом.
  • Навигационные элементы на мобильном устройстве должны быть проще из-за толстых пальцев (или это только моя проблема? *Быстро прячет руки *).

Интересно:

  • Хотя большинство паттернов содержат ссылки на номера страниц, пользователи обычно просто нажимают кнопки «Next» или «Previous». (ссылка)
  • Хотя большинство людей жалуются на разбивку на страницы, она все еще кажется самым популярным из трех паттернов.
  • Люди проводят больше времени, просматривая контент на первой странице. (ссылка)

Часто используется:

  • На сайтах электронной коммерции
  • В результатах поиска
  • В справочных каталогах

2.

2. Сколько элементов следует располагать на странице

Итак, сколько элементов следует располагать на странице? Это будет зависеть от нескольких факторов: а) Используете ли вы сетку или список, б) Есть ли у вас компонент «n элементов на странице»? в) Насколько велики элементы?

Ниже приведен примеры того, сколько элементов загружается на страницу следующих сайтов:

Вид сетки
Sears: 50

Toy’s R Us: 100

Shutterstock: 27

Amazon: 48

Вид списка
Udemy: 20

Alibaba: 48

CNN: 10

Поиск Google: +/- 10 элементов (в зависимости от того, считаете ли вы рекламу)

Amazon: 16

Вид сетки с компонентом «n элементов на странице»
Macy’s: 60 (по умолчанию) или 120

Superbalist: 24 (4 в ряд) (по умолчанию), или 72 (6 в ряд), или 72 (8 в ряд)

Newegg: 36 (по умолчанию) или 60, или 90

Currys PC World: 20 (по умолчанию) или 30, или все

Wondery: 10 или 20 (по умолчанию), или 50, или 100

Foyles: 10 or 20 (по умолчанию), или 50, или 100, или 200

Barns & Noble: 20 (по умолчанию) или 40

Список с компоненом «n элементов на странице»
eBay: 25 или 50 (по умолчанию), или 100, или 200

Данные по компоненту «n элементов на странице» были собраны 14 мая 2020 года.

Вопрос: Итак, каково идеальное количество элементов на странице?

Ответ: Не знаю. Если вы посмотрите на все вышеперечисленные значения, то увидите, что количество на различных сайтах сильно отличается (за исключением сайтов с сеткой и компонентом «n элементов на странице»).

При проектировании страницы каталога я бы исходила из того, сколько «прокручиваний» захочет сделать ваш пользователь, и сколько элементов вы хотите показать ему на странице.

2.3. Компонент: Навигация

Кнопки «Next/Previous» – это основной способ навигации по страницам, поэтому имеет смысл сделать их достаточно заметными. Поскольку пользователи с большей вероятностью будут искать кнопку «Next», убедитесь, что она имеет доминирующий стиль (или является «кнопкой основного действия», если вы читали мою статью о кнопках).

Пример постраничной навигации

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

Пример навигации по страницам на мобильном телефоне

Не забудьте, что вам нужно либо скрыть, либо отключить кнопку «Previous» или «Next», если вы находитесь на первой или последней странице. Лично я предпочитаю скрывать кнопки, но выбор за вами.

Пример компонентов навигации по страницам на первой странице: на верхней странице кнопка «Previous» отключена, на нижней – кнопка скрыта

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ ПАГИНАЦИИ? Да. Без него вы не сможете перемещаться по страницам.

2.4. Компонент: Фильтры

Фильтры помогают пользователям находить более точные результаты. Разумеется, если ваш контент точно помечен и классифицирован.

Существует два основных стиля фильтрации, первый из которых выравнивается по верху страницы над результатами. Используйте этот стиль, если есть всего несколько аспектов, или, если хотите, чтобы ваш список или сетка занимали всю ширину страницы. Верхнюю фильтрацию также можно использовать на страницах с кнопкой «Загрузить еще», как в Google Images.

Фильтрация вверху страницы

Второй стиль фильтрации выравнивается по левому краю. Я бы предложила использовать этот стиль, если у вас много категорий, а вашему списку / сетке не нужна ширина всей страницы.

Пример боковых фильтров

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ ПАГИНАЦИИ? Это ожидаемый элемент, но не обязательный.

2.5. Компонент: сортировка

Сортировка позволяет пользователю упорядочить контент по желанию. В то время как большинство из миллениалов, сортируют заказы по «самой низкой цене» – это не самое главное для всех. По умолчанию следует выбирать сортировку «most relevant», если вы попали на эту страницу с помощью поискового запроса. Если пользователь просто щелкает по каталогу без добавления условий поиска, вы также можете выбрать по умолчанию «most relevant», но, рассмотрите возможность выбора по критериям «most rated» или «newest».

Пример сортировки

При создании вариантов сортировки вы можете рассмотреть возможность использования некоторых параметров из списка ниже. Они не всегда могут быть актуальны, например, «Сортировка А-Я» будет бесполезна при поиске сумочки, но пригодится при поиске учеников в классе.

  • Наиболее релевантное
  • Часто просматриваемое
  • Наибольшее число оценок
  • Самое популярное
  • Новинки
  • Самая низкая цена
  • Самая высокая цена
  • В алфавитном порядке: А-Я
  • В алфавитном порядке по имени: А-Я
  • В алфавитном порядке по фамилии: А-Я
  • Высший балл
  • Низший балл

И т.д.

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ ПАГИНАЦИИ? Это ожидаемый элемент, но не обязательный.

2.6. Компонент: n элементов на странице

Этот компонент позволяет пользователю видеть больше или меньше элементов на странице. Пользователь обычно настраивает его в зависимости от скорости своего интернета и количества элементов, которые он хочет видеть на странице. Проводя исследование, я заметила, что этот компонент чаще использовался на британских сайтах, чем на американских. Я не уверена, зависит ли это от выбранных мной сайтов? Если вы тоже это заметили – пишите в комментариях. 🙂

Пример компонента «n элементов на странице»

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ ПАГИНАЦИИ? Неплохо его добавить.

2.7. Компонент: отображение результатов

Ваш пользователь может захотеть узнать, сколько элементов доступно для просмотра. Это покажет, насколько популярны критерии поиска и сколько у него вариантов. Это статический компонент, и он не интерактивен.

Пример компонента отображение результатов

Обычно этот компонент не показывается без компонента «n элементов на странице». Иногда они могут располагаться рядом.

Пример комбинации компонентов «отображение результатов» и «n элементов на странице»

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ ПАГИНАЦИИ? Это ожидаемый элемент, но не обязательный.

2.8. Компонент: Переключение вида с сетки на список

Этот компонент позволяет переключаться между сеткой и списком. Он может быть полезен, если вы не до конца понимаете, как пользователи хотят просматривать ваш контент. Я также предлагаю провести AB тестирование, чтобы увидеть, какой стиль предпочитают ваши пользователи.

Пример компонента переключателя сетки или списка

Вы также можете переключать ширину сетки, используя этот компонент. Это очень полезно при совершении покупок онлайн.

Пример компонента «ширина сетки»

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ ПАГИНАЦИИ? Неплохо его иметь, но не обязательно.

2.9. Компонент: Алфавитный указатель

Всякий раз, когда я сталкиваюсь с одним из этих компонентов – я знаю, что я на старом сайте. Компонент «алфавитный указатель» подобно «телефонной книге» позволяет легко найти кого-то по инициалам. Я подозреваю, что они уже не так популярны – ведь обычно на сайте так много людей, что подобный индекс в любом случае не поможет – и поиск намного эффективнее.

Пример компонента Алфавитный указатель

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ ПАГИНАЦИИ? Вероятно, нет, если вы не разрабатываете глоссарий или что-то подобное. Используйте вместо этого поиск.

2.10. Компонент: Перейти к

Мне нравится этот компонент, но я его редко встречаю. Это действительно отличный способ навигации по большим документам и сайтам, или просто способ возврата на страницу 36, на которой было понравившееся мне блюдо.

Пример компонента «Перейти к»

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ ПАГИНАЦИИ? Неплохо его иметь, но не обязательно.

3. Бесконечный скролл

Помните, как все (например, мой старый босс) говорили «скролл мертв», «пользователям не нравится скроллить», и, если расположить на сайте что-то «ниже сгиба», то никто никогда не увидит это? Что ж, приглашаю вас вместе посмеяться над ними.

Поехали дальше.

Бесконечный скролл – это квинтэссенция «поведения пользователя при просмотре» (извиняюсь за использование слова «квинтэссенция», я недавно смотрела фильм «Тайная жизнь Уолтера Митти», и теперь это мое любимое умное слово). Лучше всего подходит для развлекательных сайтов, вы просто скроллите, скроллите и скроллите, и, когда вы это делаете, время (и ваша жизнь) начинает исчезать. Однако, этот паттерн ужасен для электронной коммерции. Представьте, что вы пытаетесь найти то, что вы видели 30 скроллов назад? Следовательно, он в основном используется в сфере развлечений.

«Скролл – это продолжение; клик – это решение»

— Джошуа Портер

3.1. Справка

Хотя некоторые из приведенных ниже пунктов являются исследованными фактами, многие из них просто отражают мое личное мнение. Поэтому, пожалуйста, при выборе подходящего паттерна, принимайте их с определенной долей скепсиса.

Плюсы:

  • Бесконечный скролл может вызвать привыкание.
  • Имеет быстрое время загрузки.
  • Это «модно».
  • Имеет длительные периоды взаимодействия с пользователем.
  • Прокрутка – это ожидаемое поведение, особенно на сенсорных экранах.
  • Это хорошо для изображений.

Минусы:

  • Бесконечный скролл может вызвать привыкание.
  • Это действительно плохо для поиска контента. Ведь трудно найти то, что вы видели ранее.
  • Пользователи меньше фокусируются на контенте. (ссылка)
  • Ваш пользователь почти никогда не увидит футер (если он у вас есть).
  • Не подходит для результатов текстового поиска.
  • Навигация может стать сложной, и пользователям, возможно, придется прокрутить весь путь вверх, чтобы добраться до навигационной панели (если она не липкая).
  • Существуют смутные слухи о запрете бесконечного скролла. (ссылка)
  • Сложнее отслеживать аналитику (у designshack.comесть предложение, что с этим делать).
  • У вас могут быть проблемы с производительностью, если у пользователя плохой сигнал.

Интересно:

  • Наличие бесконечного скролла позволяет платформе постоянно генерировать контент для пользователя (в зависимости от релевантности). Pinterest является прекрасным примером, поскольку при прокрутке он отображает все больше и больше контента, связанного с вашими интересами.

Примеры:

Я еще не сталкивалась с сайтом электронной коммерции, использующим бесконечный скролл*, и, насколько могу судить, его используют в основном сайты развлечений и социальных сетей, например:

  • Instagram
  • Twitter
  • Pinterest
  • Facebook
  • YouTube
  • Google play

* Дополнение после публикации статьи: Saurav Pandey напомнил мне, что некоторые мобильные версии (m.) сайтов электронной коммерции используют бесконечный скролл, например: https://m.snapdeal.com/ .

Спасибо!

3.2. Компонент: Липкая панель навигации

Поскольку бесконечный скролл бесконечен, вы должны убедиться, что ваша навигация закреплена – иначе ваш бедный пользователь не сможет найти ее. Для платформ, просматриваемых в браузере, я бы порекомендовал прикрепить навигационную панель к верхней части экрана. С приложениями вы, вероятно, обладаете большей гибкостью, и, подобно Instagram, можете закрепить навигацию вверху и внизу.

Примеры липкой навигации на мобильном телефоне

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ БЕСКОНЕЧНОГО СКРОЛЛА? Да, он необходим.

3.3. Компонент Instagram «Вы посмотрели все новости»

Помните, как лежа на диване мы часами листали Instagram? И вот однажды мы увидели сообщение «Вы посмотрели все новости». Приложение буквально закричало: «Встань с дивана, ты тратишь свою жизнь!» Да, это был тяжелый день и для меня.

В прошлом Instagram подвергался сильной критике, потому что люди не могли отслеживать, что уже видели, поэтому Instagram и представили этот компонент. Поначалу он мне не нравился, но он улучшил мой опыт, и лично я очень ценю свои 10-минутные сеансы скролла (особенно в период карантина).

Пример компонента «Вы посмотрели все новости», вдохновленного Instagram

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ БЕСКОНЕЧНОГО СКРОЛЛА? В зависимости от вашей платформы.

3.4. Компонент: Индикатор загрузки

В идеальном мире вы никогда не узнаете, как выглядит индикатор загрузки приложения. Но, увы, наш мир не идеален. Или Тайвань достигла идеала? Если вы житель Тайваня, напишите в комментариях, видите ли вы индикаторы загрузки?

Пример индикатора загрузки

Если у вас плохое подключение к интернету или сервер работает медленно, вам придется смотреть на индикатор загрузки. Это будет казаться вечностью. Индикатор загрузки позволяет понять, что платформа обрабатывает запрос. Это своего рода пульс – он дает вам знать, что тело живо, даже, если вы чувствуете себя мёртвым после миллионного скролла в Instagram.

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ БЕСКОНЕЧНОГО СКРОЛЛА? Да, обязательно.

4. Кнопка «Загрузить еще»

Кнопка «Загрузить еще» — это третий ребенок, о котором никто не говорит, а когда про него вспоминают, то сравнивают его с братьями и сестрами. Странно, что этому паттерну не уделяют внимания, поскольку он используется одной из крупнейших поисковых систем в мире – Google. Они используют его на мобильных устройствах и в Google Images (и, возможно, в других местах, но думаю этого достаточно).

4.1. Справка

Хотя некоторые из приведенных ниже пунктов являются исследованными фактами, многие из них просто отражают мое личное мнение. Поэтому, пожалуйста, при выборе подходящего паттерна, принимайте их с определенной долей скепсиса.

Плюсы:

  • Как и в случае с пагинацией, вы можете управлять результатами.
  • Как и с бесконечным скроллом, этот паттерн хорошо работает на мобильных телефонах.

Минусы:

  • Как и с бесконечным скроллом, трудно снова найти просмотренный ранее результат.

Интересно:

  • У этого паттерна есть «конец», и он не будет продолжать бесконечно подгружать контент, как Pinterest.

Примеры:

  • Google (на мобильных устройствах)
  • Google Images
  • Harvard Business Review (в поиске)
  • Stitcher
  • Marks and Spencer

4.

2. Компонент: Кнопка «Загрузить / Показать больше результатов»

Это кнопка, без которой этот паттерн не будет работать. Как только вы достигнете нижней части страницы, она появится, сигнализируя о том, что вы можете загрузить больше контента.

Пример кнопки «Загрузить / Показать больше результатов»

Одна из вещей, с которой вам придется определиться – это метка кнопки. «Load more», «Show more results» and «More results» – наиболее распространенные варианты.

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ КНОПКИ «ЗАГРУЗИТЬ ЕЩЕ»? Да, обязательно.

4.3. Компонент: Индикатор загрузки

Как и с бесконечным скроллом, вам, вероятно, понадобится индикатор загрузки. Он будет запускаться только при нажатии кнопки «Загрузить еще».

Пример индикатора загрузки

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ КНОПКИ «ЗАГРУЗИТЬ ЕЩЕ»? Да, обязательно

4.4. Компонент: Рекомендуемые теги поиска

Эти маленькие теги для поисковых запросов – прекрасный способ побудить пользователя просматривать больше контента по теме. Вы также можете использовать их в других паттернах, но они лучше всего работают с кнопками «Загрузить еще».

Пример рекомендуемых тегов поиска

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ КНОПКИ «ЗАГРУЗИТЬ ЕЩЕ»? Это необязательный элемент.

4.5. Компонент: Кнопка «Скролл к началу страницы»

Этот удобный маленький элемент позволяет вам перейти в самое начало страницы без необходимости делать это вручную.

Пример кнопки «Скролл к началу страницы»

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ КНОПКИ «ЗАГРУЗИТЬ ЕЩЕ»? Это необязательный элемент.

5. Мысли в заключение

Вопрос: Итак, пагинация, бесконечный скролл или кнопка «Загрузить еще» – что вы должны использовать?

Ответ: все зависит от того, какой продукт вы пытаетесь создать.

Если вы создаете сайт, на который люди будут ссылаться и просматривать контент – используйте пагинацию. Но, если вы хотите создать социальную платформу – используйте бесконечный скролл. Используйте кнопку «Загрузить еще» в зависимости от обстоятельств.

Удачного проектирования!

6. Ссылки и статьи по теме

  • The Pros and Cons of Infinite Scroll: https://www.webdevelopmentgroup.com/2017/06/the-pros-and-cons-of-infinite-scroll/
  • Scrolling is easier than clicking: http://bokardo.com/archives/scrolling-easier-clicking/
  • Infinite Scrolling: Pros and Cons: https://designshack.net/articles/layouts/infinite-scrolling-pros-and-cons/
  • ⭐ Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommercehttps://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/

Перевод статьи uxdesign.cc

javascript — Разбиение на страницы вперед и назад в DynamoDB

спросил

Изменено
1 год, 10 месяцев назад

Просмотрено
7к раз

Я использую DynamoDB и NodeJS для добавления некоторых объектов в пользовательский интерфейс. Список длинный, и поскольку DynamoDB может сканировать/запрашивать не более 1 МБ данных за раз, я решил использовать нумерацию страниц, поэтому в интерфейсе у меня есть Предыдущая и Следующая кнопки для перехода назад и вперед от текущей страницы.

Моя проблема заключается в том, что я хочу получить 20 элементов за раз из таблицы X с помощью функции DynamoDB Query на основе выбранного DynamoDB Index .
Допустим, я только что получил первые 20 результатов (0-20), поэтому при нажатии следующей кнопки я хочу получить результаты: 21-40 и так далее. Кроме того, я хочу включить обратное разбиение на страницы, поэтому, когда я нахожусь на странице, которая показывает результаты: 41-60, Кнопка «Назад» снова выведет результаты: 21-40.
Насколько я понимаю, DynamoDB не поддерживает числовое смещение.

Как реализовать разбиение на страницы назад, и вперед, ? Я новичок в DynamoDB, пожалуйста, помогите мне.

  • javascript
  • node.js
  • amazon-dynamodb
  • dynamodb-запросы

1

В то время как DynamoDB будет разбивать ваши данные на страницы только в прямом направлении, вам придется иметь дело с обратной разбивкой на страницы в Передняя часть .

Для больших таблиц ( размер которых превышает 1 МБ ), что делает DynamoDB :

  1. Сканирование или запросы до 1 МБ.
  2. Возвращает LastEvaluatedKey для получения следующего набора данных или Next Page . Это значение используется как Ключ разбиения на страницы в интерфейсе для разбиения на страницы вперед и назад.

LastEvaluatedKey содержит значение последнего объекта, полученного из DynamoDB в течение Сканирование или Запрос .

Что вам нужно сделать (в Back End ):

  1. Используйте свойство LIMIT DynamoDB Query , чтобы указать, что вы хотите только 20 элементов.
  2. Используйте свойство ExclusiveStartKey запроса DynamoDB , чтобы указать, что следующий набор данных будет начинаться с указанного значения этого свойства.

Что нужно сделать (в Front End ):

  1. Сохраните массив объектов arr[] для размещения ключей разбивки на страницы.

  2. Оставьте переменную страницы инициализированной до -1, значение которой будет указывать на то, что текущий пользователь страницы включен.

  3. Загрузить начальную страницу списка в пользовательский интерфейс. Теперь вместе с данными, если у вас есть LastEvaluatedKey , вставьте его в arr и увеличьте page .

Теперь у вас есть одна страница и страница указывает, что вы находитесь на
Страница 0 и arr содержит Ключ страницы следующей страницы.

  1. Код Далее Кнопка должна следовать логике:

    Запросите у сервера получение следующей страницы с помощью ExclusiveStartKey = arr [ page ]

  2. Когда появятся результаты следующей страницы, у вас снова будет другой LastEvaluatedKey , поэтому снова вставьте его в arr и увеличьте page . Итак, вы видите здесь, как мы сохраняем Ключи страницы .

  3. Код Назад Кнопка должна следовать логике:

    Поскольку переменная страницы указывает на текущую страницу , поэтому страница - 1 будет указывать на предыдущую страницу. Итак:
    if ( page-1 >=0) Запросите у вашего сервера получение следующей страницы с помощью ExclusiveStartKey = arr [ page - 1 ]

Вам придется управлять, когда Назад и Далее Кнопки доступны для нажатия с помощью переменных arr[] и page после загрузки каждой страницы.

1

Функция разбивки на страницы в DynamoDB зависит от LastEvaluatedKey. Вы должны иметь возможность делать с этим то, что хотите, и использовать размер страницы всегда равным 20 элементам. Это просто не будет числовым смещением как таковым.

2

Вы не можете использовать номера страниц в dynamodb, но для Query (и только для Query) вы можете двигаться назад, используя опцию —scan-index-forward.

Задает порядок обхода индекса: если true (по умолчанию), обход выполняется в порядке возрастания; если false , обход выполняется в порядке убывания.

Запрос CLI AWS DynamoDB

Таким образом, вы можете использовать LastEvaluatedKey для прямой разбивки на страницы и первый ключ в ваших данных для обратной разбивки на страницы с использованием параметра сканирования-индекса-вперед

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Разбивка на страницы отзывов о товарах | SEO Форум

Ваш браузер не поддерживает JavaScript. В результате ваши впечатления от просмотра будут уменьшены, и вы будете переведены в режим только для чтения .

Загрузите браузер, поддерживающий JavaScript, или включите его, если он отключен (например, NoScript).

  1. Дом

  2. SEO-тактика

  3. Оптимизация страницы

  4. Пагинация для отзывов на странице продукта

Эта тема была удалена. Его могут видеть только пользователи с правами управления вопросами.

  • Привет,

    Я хочу добавить разбиение на страницы на страницах продуктов (у них много отзывов на странице). Я рассматриваю возможность использования rel=»next/prev», чтобы связать ряд страниц обзора с главной страницей продукта.

    У меня, к сожалению, нет страницы просмотра всех этих обзоров или возможности получить ее — обзоры обновляются на той же странице продукта (путем нажатия на любую страницу отзывов). Это означает, что каждая страница имеет точно такое же содержание описания и всего остального, но с разными отзывами. В этом случае rel=next является хорошим вариантом?

    Текущий формат:

    • На сайте example.com/product

    ссылка rel=»next» href=»http://example. com/product?review-p2″

    • На сайте example.com/product?review-p2

    link rel=»prev» href=»http://example.com/product, link rel=»next» href=»http://example.com/product?review-p3 и т. д.

    Будет ли это хороший формат для обзоров страницы продукта? Я вижу, что rel=nextprev обычно используется на страницах категорий/списков электронной торговли, но не на страницах обзоров с разбивкой на страницы на страницах продуктов, поэтому я подумал, что посмотрю, есть ли у кого-нибудь совет, как лучше всего решить эту проблему.

    Мне также интересно, не будет ли лучше сочетать это с каноническим тегом на всех разных страницах отзывов, указывающих на страницу продукта, поскольку отзывы на самом деле разные (несмотря на то, что остальная часть контента идентична).

    Я надеюсь получить от этого более длинный хвостовой трафик, я полагаю, что, соединив страницы и не используя канонические символы, я смогу получить больше трафика от фраз, используемых в обзорах. Опуская канонические, может ли пользователь, ищущий фразы, которые могут быть более глубокими в серии, попасть, скажем, на «review-p4»? Любые мысли, если это будет привлекать больше трафика?

    Спасибо!.

  • Привет, Михай,

    Спасибо за ответ. У меня также есть URL-адреса параметров на некоторых из этих страниц, которые в основном используются, когда я отправляю кампании по электронной почте на те же целевые страницы, но с немного измененным содержимым, таким как настраиваемый баннер. Все эти страницы не индексируются, но полезны для целевых кампаний. В этих случаях целевая страница по-прежнему имеет ту же серию отзывов с разбивкой на страницы внизу.

    Как бы я поступил с этим? Например:

    http://www. example.com/product?custombanner

    В этих ситуациях я бы использовал следующий URL-адрес обзора с разбивкой на страницы?:

    http://www.example.com/product?custombanner&review -p2 в сочетании с каноническим тегом для http://www.example.com/product?review-p2, или я могу просто оставить его указывающим на http://www.example.com/product?review- p2 (т.е. не нужно иметь уникальные страницы обзора для страниц параметров с каноническими)?

    Спасибо

  • Спасибо, Михай, именно об этом я и думал. Я продолжу это.

    Теперь, когда все решено, я могу расслабиться у бассейна и расслабиться

    D8GBLEi.jpg

  • org/Comment»>

    Hey pikka,

    На самом деле вы можете использовать как rel=next/prev, так и rel=canonical на одной и той же веб-странице, но вы должны быть осторожны при их использовании.

    Если у вас нет страницы просмотра всех, НЕ используйте rel=canonical на странице review-pX, чтобы указать на главную страницу продукта. Это все равно, что сказать: «Эта страница имеет такой же контент, как и другая, поэтому, пожалуйста, не обращайте внимания на эту и используйте вместо нее другую». Это своего рода редирект 301, который ДЕИНДЕКСИРУЕТ ваши страницы обзора-pX.

    Однако использование rel=next/prev совершенно нормально, и на самом деле это рекомендуемый метод, когда нет страницы просмотра всех. Вы по-прежнему можете использовать rel=canonical, но только для указания на текущую страницу просмотра (так что в основном вы будете использовать это только для фильтрации идентификаторов сеансов или любых других параметров, которые приводят к дублированию контента).

    Таким образом, в вашем случае вы должны использовать их так (допустим, мы на странице 3):

    <-- текущая страница, «чистый» URL
    <--  предыдущая страница, может содержать параметры
    <--  следующая страница, может содержать параметры

    НЕ используйте это:

    Надеюсь, это поможет, вот страница поддержки Google по этой проблеме и отличное видео Майл Ойе, объясняющее это.

    PS: Чуть не забыл, по поводу твоего аватара:

    1104.jpg

У вас есть животрепещущий вопрос по SEO?

Подпишитесь на Moz Pro, чтобы получить полный доступ к вопросам и ответам, отвечать на вопросы и задавать свои.

Начать бесплатную пробную версию

Есть вопрос?

Обзор вопросов

Посмотреть
Все вопросыНовые (нет ответов)ОбсуждениеОтветыПоддержка продуктаБез ответа

От
Все времяПоследние 30 днейПоследние 7 днейПоследние 24 часа

Сортировка по
Последние вопросыНедавняя активностьБольше всего лайковБольшинство ответовМеньше всего ответовСамые старые вопросы

С категорией
All CategoriesAffiliate MarketingAlgorithm UpdatesAPIBrandingCommunityCompetitive ResearchContent DevelopmentConversion Rate OptimizationDigital MarketingFeature RequestsGetting StartedImage & Video OptimizationIndustry EventsIndustry NewsIntermediate & Advanced SEOInternational SEOJobs and OpportunitiesKeyword ExplorerKeyword ResearchLink BuildingLink ExplorerLocal ListingsLocal SEOLocal Website OptimizationMoz BarMoz LocalMoz NewsMoz ProMoz ToolsOn-Page OptimizationOther SEO ToolsPaid Search MarketingProduct SupportReporting & AnalyticsResearch & TrendsReviews and RatingsSearch BehaviorSEO ТактикаТренды поисковой выдачиСоциальные сетиТехническое SEOВеб-дизайнБелое/черное SEO

Связанные вопросы
    schema.org/ItemList» data-nextstart=»» data-set=»»>



  • Описание продукта (SEO)

    Итак, я хотел бы услышать несколько мнений. Какой длины должно быть описание товара? Достаточно, чтобы понять суть? 100 слов? 800 слов? Слишком подробно? Любой совет будет принят во внимание.


    Оптимизация страницы |

    | маттл99

    0



  • «Проблема: повторяющееся содержимое страницы» в диагностике сканирования, но эти страницы не имеют индекса

    В 2011 году я видел проблему по этому поводу, и у меня такая же проблема. http://moz.com/community/q/issue-duplicate-page-content-in-crawl-diagnostics-but-these-pages-are-noindex
    У нас есть страницы, которые помечены метатегами как не все для ботов, но сообщаются как дубликаты. Любые предложения о том, как исключить их из бота Moz?


    Оптимизация страницы |

    | Deb_VHB

    0



  • Страница со списком категорий, расположенная над страницами продуктов

    Новый SEO-клиент, которого мы взяли на работу, кажется, достигает большинства точек прямо на своем сайте и SEO.
    Однако одна вещь, которая меня беспокоит, заключается в том, что их страницы категорий, например «Обувь», тег заголовка которых включает бренды, которые они продают. Почти всегда появляются выше (если они вообще когда-либо обнаруживаются) отдельных страниц продукта.
    Кто-нибудь видел, как такие вещи происходят? Очень расстраивает.


    Оптимизация страницы |

    | iboxsecurityltd

    0



  • Как Google видит частые изменения копии страницы продукта электронной торговли?

    Есть ли основания полагать, что добавление или улучшение текста может повредить SEO?


    Оптимизация страницы |

    | Брокберри

    0

  • org/ListItem»>



    Удаление СТАРЫХ страниц

    Уважаемые все!
    Я удалял тонны старых страниц из своего каталога (около 400 страниц), я настраивал пользовательскую страницу 404, все в порядке, поэтому, когда я захожу на существующую страницу, я получаю 404 и перенаправляюсь на мою страницу 404.
    Проблема в том, что инструменты Google для веб-мастеров перечисляют все эти страницы как 404 и никогда не очищают мой список (через 1 год), поэтому я предполагаю, что что-то не так.
    Вопрос, как лучше или естественнее удалить старые страницы из одного каталога?
    Примечание: ранее я пытался добавить на эти страницы метатег NOINDEX/NOFOLLOW и получил от Google Soft-404.
    Спасибо


    Оптимизация страницы |

    | Условно-бесплатное ПОПлюсы

    0

  • org/ListItem»>



    Должен ли я беспокоиться о дублирующихся заголовках на страницах с разбивкой на страницы?

    LivingThere.com — это сайт поиска недвижимости, и многие из наших содержательных страниц являются «результатами поиска» — например, на странице часто представлены все доступные списки, и это может продолжаться на нескольких страницах.
    Например, это основная страница о здании:
    http://livingthere.com/building/31308-Cocoa-Exchange
    Из-за количества списков списки разбиваются на вторую страницу:
    http://livingthere.com/building/31308-Cocoa-Exchange?MListings_page=2
    Обе страницы имеют одинаковый заголовок страницы. Это беспокоит? Если да, то есть ли «лучшая практика» для присвоения разбивке на страницы разных заголовков?
    Спасибо!
    Нейт


    Оптимизация страницы |

    | nate123

    0

  • org/ListItem»>



    Внутренний табель успеваемости

    Сколько времени потребуется, чтобы увидеть результаты изменений, внесенных на моих страницах в соответствии с рекомендациями табельного отчета?
    Карточка отчета на странице


    Оптимизация страницы |

    | сансонж

    0



  • Результаты на странице

    Я разместил один сайт (www.fmredesdeprotecao.com.br) и зарегистрировал несколько ключевых слов, но ключевые слова не отображаются в результатах на странице, как в других кампаниях.

    This entry was posted in Популярное