Постраничная прокрутка сайта: Поблочная прокрутка на landing page

Это по-прежнему относится к рекламе в Facebook и тизерам сообщений в блогах. Тизер определяет, нажмет ли пользователь на запись в блоге или на рекламу в Facebook или нет.

Но именно в этом и заключается разница: щелкнув что-то, пользователь принимает осознанное решение. При прокрутке пользователь просто продолжает делать то, что он или она уже делает. Сознательным решением было бы прекратить прокрутку.

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

Вы можете увидеть разницу с первого взгляда:

Веб-сайт Apple 1997 года.

Веб-сайт Apple 2016 года. Наоборот, это развлекает пользователя. По крайней мере, если это сделано правильно. Чем дольше пользователь остается на вашем сайте, тем больше вероятность того, что он отреагирует на ваш призыв к действию.

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

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

Перед дизайнерами и маркетологами стоит задача рассказать историю с помощью своего веб-сайта.

Для этого существует множество возможностей дизайна и эффектов. Примерами являются анимация или прокрутка параллакса (подробнее об этом чуть позже).

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

Длительная прокрутка дает пользователям ощущение контроля, что чрезвычайно важно для удовлетворения пользователей.

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

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

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

Одной из проблем, связанных с веб-сайтами с длинной прокруткой, является структурирование контента таким образом, чтобы он имел смысл. Это также важно с точки зрения SEO.

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

Тур / Наши клиенты / Цены / Интеграции / Блог

Каждая из этих страниц состоит из разных частей, но мы решили не использовать длинные выпадающие меню.

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

Большой проблемой при работе с сайтами с длинной прокруткой является определение оптимальной длины для пользователя.

Слишком много контента перегрузит пользователя.

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

Анимация и зависание появились раньше, чем длинная прокрутка, но эффекты по-прежнему популярны. Причина проста: длинная прокрутка создает для пользователя развлечение и взаимодействие.

Интерактивные элементы занимают пользователей, а также создают небольшой умственный перерыв. Хорошим примером является сайт Пиратского кода: http://piratecode.ru/en/

http://piratecode.ru/en/

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

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

Эффект параллакса включает различные фоны, которые движутся с разной скоростью. В результате получается псевдо 3D-эффект. Термин «параллаксис» происходит от греческого и означает «изменение».

Фантастический пример сочетания повествования, параллакса и длинной прокрутки — веб-сайт The Boat.

Графический роман Нам Ле о побеге из Вьетнама перенесен с использованием технологий современного веб-дизайна.

Вы можете посмотреть видео ниже, но я предлагаю вам посетить сайт, чтобы вы могли просмотреть его самостоятельно.

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

Веб-сайты с длинной прокруткой зарекомендовали себя как неотъемлемая часть Интернета. Пользователям они нравятся, а компании имеют возможность предоставлять своим пользователям различный контент и предложения.

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

Вот обзор плюсов и минусов сайтов с длинной прокруткой:

PRO:

• Интерактивное повествование
• Низкий показатель отказов
• Более высокое погружение

ПРОТИВ:

• Сложности для SEO
• Трудно измерить
• Контент сложно настроить
• Сложное кроссбраузерное тестирование

Мы рады услышать о вашем любимом веб-сайте с длинной прокруткой!

Мы в Usersnap надеемся, что вам понравился этот пост, и вам будет приятно, если вы подпишитесь на нас в Твиттере. Мы публикуем и предлагаем решения по веб-разработке, веб-дизайну и UAT на регулярной основе.

Usersnap — это решение для обратной связи с клиентами. Получите немедленную обратную связь от посетителей ваших веб-сайтов или веб-продуктов. Попробуйте сейчас бесплатно!

Легко фиксируйте обратную связь. Получите больше информации и уверенности.

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

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

Доведите это до предела — обзор сайтов с длинной прокруткой

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

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

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

Думайте об этом как о том, как Facebook, YouTube, Netflix и подобные сайты автоматически воспроизводят видео, когда заканчивается просмотренное пользователем. Они знают, что если посетитель должен приложить усилия, чтобы перейти к новому видео, он с такой же вероятностью перейдет на другой сайт. Но если видео продолжают воспроизводиться, более вероятно, что они продолжат просмотр.

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

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

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

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

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

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

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

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

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

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

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

Психологические издержки длинной прокрутки

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

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

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

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

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

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

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

Во-первых, выбросьте нижний колонтитул! Когда контент постоянно загружается, нижний колонтитул будет постоянно отодвигаться от нижней части страницы. Это означает, что любой контент или информация, содержащиеся в нижнем колонтитуле, останутся вне поля зрения. Еще хуже, когда пользователи мельком видят нижний колонтитул, но теряют его из виду, прежде чем у них появляется возможность щелкнуть что-либо. Использование липкого нижнего колонтитула — один из способов обойти эту проблему, хотя полное избавление от нижнего колонтитула часто является лучшим вариантом.

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

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

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

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

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

Одна важная функция UX, которая, к счастью, стала более распространенной на веб-сайтах с бесконечной прокруткой, — это изменение URL-адреса при прокрутке каждого раздела. Некоторые делают это с помощью внутренних закладок внутри страницы. Другие сайты, особенно новостные сайты и блоги, обновляют URL-адрес целиком, когда пользователь прокручивает страницу. Это важно, так как позволяет пользователям ссылаться именно на тот контент, на который они хотят ссылаться, независимо от изменений на самой странице.

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

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

Сайт Story of Zohra использует визуальные подсказки, когда вы начинаете прокручивать страницу.

Сайт Merbis Photography & Filmmaking — отличный пример сайта-портфолио, использующего бесконечную прокрутку.

Сайт Windows of New York загружает весь контент прямо на главную страницу.

Сайт Like There Is No Tomorrow сочетает в себе длинную прокрутку с методами прокрутки параллакса.

Веб-сайт The Faces of New York Fashion Week — длинная лента фотографий с мероприятия — идеально подходит для формата длинной прокрутки.

Веб-сайт Джона Болла использует несколько иной подход: фоновые изображения бесконечно прокручиваются, а текстовое содержимое остается неподвижным.

Цифровой веб-сайт Fake It использует длинную прокрутку для отображения своих юмористических альтернативных определений общих деловых, дизайнерских и маркетинговых терминов.

А вот и этот сайт от Эндрю Маккарти. Хотя дизайн уникален, он бесконечно прокручивает одну и ту же информацию снова и снова. Поскольку Маккарти — дизайнер, скорее всего, это был осознанный выбор, чтобы выделиться из толпы.

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

Заключение

Хотя веб-сайты с длинной прокруткой не являются чем-то новым, они достигают нового уровня зрелости.