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

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

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

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

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

Длинная прокрутка, умная навигация, умные спецэффекты

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

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

Как это все работает

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

Рассказывание историй часто можно сделать более эффективным, включив тонкие специальные эффекты, такие как прокрутка параллакса, Ajax/jQuery или анимация, запускаемая прокруткой.

Длинная прокрутка используется в основном для повествования

Гладкая платформа

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

Предоставление пользователю контроля

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

Почему большинству людей нравится длинная прокрутка

Как максимально использовать запоминающийся дизайн

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

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

Увеличение конверсии

Длинная прокрутка, анимация и наведение = мощная комбинация

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

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

Управление длинным контентом

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

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

Рассказ с длинной прокруткой

Эффективное использование горизонтальных панелей навигации

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

Долгая прокрутка может значительно снизить потребность в размещении нескольких внутренних страниц. Вместо этого панели навигации могут направлять пользователя к основным частям истории главной страницы сайта.

Создание привлекательных веб-сайтов

Крутое использование метафор

Метафоры не часто рассматриваются как элементы веб-дизайна, но они могут обеспечить отличный способ удерживать внимание пользователя на протяжении длинного рассказа или объяснения. Людям некомфортно, когда они сталкиваются с неопределенностью, и это особенно относится к посетителям веб-сайтов.

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

Практическое использование интерактивности

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

Этот подход чем-то напоминает предоставление людям возможности выйти и размять ноги во время долгой поездки. Это освежает.

Почему некоторым пользователям не нравится длинная прокрутка

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

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

Что дальше?

Меньшие экраны — более длинная прокрутка

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

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

Возможности параллакса на маленьком экране

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

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

Длинная прокрутка и минимализм — выдающееся сочетание

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

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