Как проектировать скроллинг на сайте?
Веб-дизайн 0 Комментариев

Как проектировать скроллинг на сайте?

Бесконечный или длинный скроллинг очень быстро стал стандартным элементом в навигации сайта.

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

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

скроллинг на сайте

Кроме того, бесконечный скроллинг создает линейную структуру сайта, что может быть использовано для создания и повествования истории на сайте (сторителлинга). Одним из отличных примеров является сайт The Boat (sbs.com.au/theboat).

скроллинг на сайте

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

Если вы считаете длинный скроллинг хорошим выбором для вашего сайта, необходимо учесть следующее:

  • Поощряйте пользователей к скроллингу (прокрутке) сайта;
  • Правильно настройте навигацию для скроллинга;
  • Используйте анимацию для увеличения длительности пребывания пользователя на сайте.

В этой статье рассмотрим некоторые преимущества и советы по конструированию правильного скроллинга на сайте.

Поощряйте пользователя к прокрутке сайта.

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

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

Предоставьте интересный контент.

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

Избегайте ложного конца страницы.

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

скроллинг на сайте

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

скроллинг на сайте

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

скроллинг на сайте

Настройка навигации для скроллинга.

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

Оставляйте меню видимым для пользователя.

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

скроллинг на сайте

Рассмотрите варианты перехода.

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

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

скроллинг на сайте

Анимация для увеличения длительности прокрутки.

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

скроллинг на сайте

Заключение.

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



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Добавить комментарий