Скроллинг что такое: Скроллинг — Википедия – Скроллинг — это… Что такое Скроллинг?

Содержание

Скроллинг — Википедия

Материал из Википедии — свободной энциклопедии

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

Скроллинг (англиц. от scrolling «просматривание») — форма представления информации, при которой содержимое (текст, изображение) двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру».

Выделяют три типа скроллинга:

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

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

Широко известен скроллинг текста в начале фильмов серии «Звёздные войны».

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

Microsoft IntelliMouse с качающимся колесом

Также скроллингом называют колёсико мыши и само действие прокрутки содержимого окна.

Колёсико мыши широко используется в компьютерных играх.

Скроллинг часто применяется в программах преобразования текста в речь (Говорилка и т. п.) при отслеживании читаемого текста.

Скроллинг - это... Что такое Скроллинг?

Скроллинг — форма представления информации, при которой содержимое (текст, изображение) двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру».

Выделяют три типа скроллинга:

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

Кино и телевидение

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

Широко известен скроллинг текста в начале фильмов серии «Звёздные войны».

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

Компьютеры

Microsoft IntelliMouse с качающимся колесом

Также скроллингом называют колесико мыши и само действие прокрутки содержимого окна.

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

См. также

Question book-4.svg
В этой статье не хватает ссылок на источники информации. Информация должна быть проверяема, иначе она может быть поставлена под сомнение и удалена.
Вы можете отредактировать эту статью, добавив ссылки на авторитетные источники.
Эта отметка установлена 14 мая 2011.

Когда и как использовать длинный скроллинг

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

 

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

Выгоды длинного скроллинга

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

 

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

 

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

Когда длинный скроллинг – лучшее решение

  • Для сторителлинга: линеарная структура подходит для историй.
  • Для объемных статей и многошаговых обучающих гайдов.

 

Пример – руководство для пользователей облачного сервиса Dropbox:

 

Длинный скроллинг — руководство dropbox

 

  • Когда контент – единое целое, и его нельзя делить на части – например, инфографика.
  • Для выделения характеристик и выгод продукта, как на сайте хостела Hans Brinker:

 

Длинный скроллинг — сайт хостела Hans Brinker

 

Далее – 11 советов, как улучшить пользовательский опыт на ресурсах с длинным скроллингом.

Мотивируйте посетителей прокручивать

Контент над сгибом создает первое впечатление. От него зависит, захотят ли люди листать дальше. Поэтому поместите туда:

 

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

Сделайте «липкую» навигацию

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

 

Решение этой проблемы – «липкая» навигация:

 

Длинный скроллинг — пример липкой навигации

 

Для мобайла

 

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

 

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

 

Длинный скроллинг — пример липкой навигации в мобайле

 

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

 

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

Убедитесь, что кнопка «Назад» работает правильно

Легко потеряться на странице, когда кнопка «Назад» возвращает на начало вместо положения, с которого переходите по ссылке при скроллинге. Ожидаете, что вернетесь к тому же фрагменту, а тут – нужно заново прокручивать материал. Такое никому не понравится.

 

Фотохостинг Flickr – пример, как соответствовать ожиданиям пользователей. Сайт «запоминает», где они были и возвращает туда же.

 

Длинный скроллинг — пример Flickr

Учитывайте позицию в скроллинге в URL

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

 

В HTML5 это возможно без перезагрузки страницы.

Создайте опции переходов (jump-to)

Другая проблема – дезориентация: трудно найти что-либо, что пользователь уже видел на сайте.

 

Опция jump-to поможет это решить, если контент состоит из примерно равных блоков. В соцсети Tumblr вы можете перейти вниз или обратно к старту, если потеряетесь. В помощь – индикаторы в виде точек в левой части экрана.

 

Длинный скроллинг — пример Tumblr

 

Можно достичь желаемого фрагмента главной страницы всего в один клик!

 

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

Настройте визуальный фидбэк при загрузке контента

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

 

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

 

Демонстрировать работу систему можно с помощью loop-анимации.

 

Длинный скроллинг — пример loop анимации

Не ограничивайте скорость скроллинга

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

 

Длинный скроллинг — страница mac pro с фиксированой скоростью скроллинга

 

Дайте пользователю контроль над просмотром. Иначе он может покинуть сайт.

Оптимизируйте время загрузки

47% посетителей ожидают открытия в 2-3 секунды. Если дольше, 57% покидают страницу.

 

Пригодятся сервисы анализа и советы по оптимизации:

 

Определите, сколько ресурсов потребляет страница

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

 

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

Изучайте поведение пользователя

Нужен ли длинный скроллинг на странице? Аналитические данные помогут ответить на этот вопрос.

 

 

В e-commerce его используют часто. Листать список товаров или результаты выдачи без остановки просто – ничто не отвлекает от выбора.

 

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

 

«Липкие» фильтры

 

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

 

Длинный скроллинг — пример липких фильтров

 

Закладки

 

Обеспечьте возможность сохранять в закладки отдельные элементы, чтобы посмотреть позже.

 

Длинный скроллинг — возможность добавлять в закладки

 

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

 

Количество результатов поиска

 

Так пользователям легче решить, сколько времени займет просмотр.

 

Длинный скроллинг — количество результатов поиска по категориям

 

В примере общий объем поисковой выдачи – под названием каждой категории.

 

Доступный подвал сайта

 

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

 

Это поможет решить кнопка «Загрузить / показать еще», «Далее» и подобное. Так контент появляется по запросу, не автоматически. Пользователь легко достигает подвала и не теряет его из виду.

 

Длинный скроллинг — доступный подвал сайта

Параллакс эффект

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

 

Фон движется медленнее, чем объекты на странице. Это создает иллюзию 3D, мотивирует листать дальше и вызывает wow-эффект у аудитории.

 

Длинный скроллинг — пример параллакс эффекта

 

Увлекает не только «пункт назначения», но и само «путешествие» по сайту.

 

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

 

Длинный скроллинг — сторителлинг + параллакс эффект

 

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

 

Как не проколоться с параллакс эффектом

 

  • Используйте для анимации простые возможности, которые дешево воплотить и которые не будут раздражать. Это translate3d (сдвиг элемента по осям X, Y, Z), изменение масштаба, вращение, затемнение.
  • Не применяйте картинки с большим весом. Это может дорого обойтись.
  • Не лепите слишком много анимаций на одну страницу. Не все осилят такой «визуальный беспорядок» на сайте.

 

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

 

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

 

Высоких вам конверсий!

 

Статья подготовлена по материалам blogs.adobe.com.

Скроллинг Википедия

Скроллинг (англиц. от scrolling «просматривание») — форма представления информации, при которой содержимое (текст, изображение) двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру».

Выделяют три типа скроллинга:

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

Кино и телевидение[ | ]

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

Широко известен скроллинг текста в начале фильмов серии «Звёздные войны».

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

Компьютеры[ | ]

Microsoft IntelliMouse с качающимся колесом

Также скроллингом называют колёсико мыши и само действие прокрутки содержимого окна.

Колёсико мыши широко используется в компьютерных играх.

Скроллинг часто применяется в программах преобразования текста в речь (Говорилка и т. п.) при отслеживании читаемого текста.

См. также[ | ]

Скроллинг Википедия

Скроллинг (англиц. от scrolling «просматривание») — форма представления информации, при которой содержимое (текст, изображение) двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру».

Выделяют три типа скроллинга:

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

Кино и телевидение

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

Широко известен скроллинг текста в начале фильмов серии «Звёздные войны».

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

Компьютеры

Microsoft IntelliMouse с качающимся колесом

Также скроллингом называют колёсико мыши и само действие прокрутки содержимого окна.

Колёсико мыши широко используется в компьютерных играх.

Скроллинг часто применяется в программах преобразования текста в речь (Говорилка и т. п.) при отслеживании читаемого текста.

См. также

В родственных проектах

Как скроллинг может улучшить (или нарушить) пользовательский опыт

На пользовательский опыт (User Experience, UX) могут повлиять мельчайшие детали. Большая часть того, что мы делаем в Интернете, совершается нами бессознательно. Мы рассеянно смотрим на экран, прокручиваем веб-страницы и взаимодействуем с контентом.

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

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

Скроллинг — это миф?

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

1. Длинный контент. Контент-маркетологи все больше склоняются к применению контента в длинной форме, так как это позитивно сказывается на поисковой оптимизации (Search Engine Optimization, SEO). Перепрыгивание по статье, состоящей из 5 страниц, может оказаться утомительным, особенно если пользователь делает это на экране мобильного устройства. Возможно, стоит отказаться от поста, практического руководства или учебника, если такой контент становится слишком сложным для чтения.

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

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

  • Компания Cheatbeat, продающая решения для аналитики, проанализировала более 2 миллиардов посещений сайтов и обнаружила, что 66% внимания на типичной веб-странице приходится на часть ниже линии сгиба (Below the Fold) — люди специально скроллят, чтобы туда добраться.
  • Айтрекинг-исследования гуру юзабилити Якоба Нильсона (Jakob Nielson) показали, что люди больше склонны сосредотачиваться на контенте, находящемся выше линии сгиба (Above the Fold), но при этом они все еще выполняют прокрутку, особенно когда страница соответствует определенным условиям, облегчающим данный процесс.
  • На мобильном сайте около половины всех пользователей начинают прокручивать в течение первых 10 секунд, а 90% — в течение 14 секунд.
  • Исследование, проведенное в Лаборатории исследований юзабилити программного обеспечения (Software Usability Research Laboratory), показывает, что пользователи читают длинные тексты с прокруткой быстрее сегментированных или разбитых на страницы.
  • Согласно исследованию CX Partners, пользователи предполагают, что разработчики обычно создают дизайн с прокруткой, поэтому они по привычке начинают скроллить.

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

Читайте также: Размышляем на тему длинной прокрутки, или так называемого скроллинга

Сканирование и значение точек прокрутки

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

Тем не менее, есть в дизайне своя специфика: мы разбиваем сканирование на так называемые «точки прокрутки» (Scrolling Points). Неумение разбивать важную текстовую информацию на ключевые моменты вызывает явление под названием «усталость от скроллинга». Она может привести к двум результатам:

  1. «Зомби-скроллинг» (Zombie Scrolling): пользователь постепенно теряет концентрацию внимания и меньше реагирует на «приманки» в ваших CTA (Call-To-Action — призыв к действию).
  2. «Отказ в гневе» (Rage-Quitting): пользователь раздражается из-за долгой прокрутки и покидает сайт, не усвоив его ключевые точки и не вынеся выводов.

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

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

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

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

Остерегайтесь эффекта ложного дна

С точки зрения визуального дизайна одна из самых важных вещей, которые вы можете сделать для способствования прокрутке, — это избегать так называемого «ложного дна» (False Bottom). Этот феномен возникает тогда, когда пользователям кажется, будто ниже линии сгиба больше не будет контента. Конечно, область выше линии — это ваш основной капитал, но не менее важно дать понять, что и дальше есть ценный контент, доступ к которому обеспечивается скроллингом.

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

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

Читайте также: «Ложное дно», или иллюзия конца страницы

Фишки в навигации

Навигация может сыграть решающую роль в улучшении/ухудшении восприятия сайта, так что ее настройка является естественным решением ситуации. Длинный контент часто создает проблемы с навигацией, и пользователям может надоесть прокрутка то вверх, то вниз на десктопе или в мобильном формате. Простое решение — липкая навигация (Sticky Navigation). Когда навигация всегда видна, пользователям сайтов и приложений становится легче добраться до любой части контента. С целью экономии ценного экранного пространства, вы можете сделать навигационное меню доступным по запросу, и оно будет выскакивать при прокрутке около верха просматриваемой страницы. Особенно эффективно трюк работает на мобильных устройствах, для которых свойственно наличие ограниченного рабочего пространства.

Следуйте базовым правилам SEO

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

Скроллинг: выводы и секреты для профессионалов

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

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

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

Высоких вам конверсий! 

По материалам: usabilitygeek.com Источник картинки: iksiukasan

13-10-2017

Скролить: что это и что значит проскролить

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

Происхождение слова

Скролить от англ. «scroll» — свиток, спираль, крутить, прокручивать.

В английском языке в списке компьютерных терминов давно укрепилось выражение «scroll through the text» — прокручивать текст на экране.

Значение слова

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

Что значит «скролить» в интернет-сленге?

Иногда можно услышать «скролл» как существительное. Среди художников и архитекторов так иногда называют красивый завиток.

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

На клавиатуре любого компьютера есть кнопка «scroll lock», запрет прокручивания текста на странице. Нажав на нее, скролить экран станет невозможно.

«Could you scroll down a few lines? » — Не могли бы вы прокрутить на несколько строк вниз?

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

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

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

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