Направление взора пользователей на лендинге. Вспоминали ли вы о данной теме?
Сейчас мы разглядим данный непопулярный, но очень ответственный в интернет-маркетинге вопрос.
Главное сотрудничество пользователя с сайтом — считывание взором. То, как просматривается ваш ресурс, воздействует на эффективность обмена информацией между вами и потенциальным клиентом. Для оценки перемещений читабельности и отслеживания взгляда контента существует кроме того особый термин — айтрекинг (eye-tracking).
В данной статье собрано все, что необходимо знать маркетологу о перемещениях глаз пользователей по ресурсу для оптимизации конверсии.
Саккадические перемещения
Вначале поболтаем о терминах. Перемещения глаз именуют саккадами, либо саккадическими перемещениями. Одна саккада — это момент перемещения взор между фиксированными точками.
Само слово пришло из французского, где обозначает рывок.
Итак, по большей части пользователи просматривают веб-сайты саккадически. Всего существует четыре обработки движения и способа глаза визуальной информации:
1. Саккады — стремительные перемещения между фиксированными точками.
2. Плавное перемещение — перемещение взора для отслеживания единственной движущейся точки. К примеру, в то время, когда вы замечаете за пролетающим самолетом, медлено провожая его глазами, но не двигая головой.
3. Вергентные перемещения — взор перемещается между двумя объектами на различных расстояниях. Если вы на данный момент оторветесь от экрана и посмотрите на стену, это будет вергентным перемещением глаз.
4. Вестибуло-окулярные перемещения — взор сфокусирован на одной точке на ходу головы. То, что вы делаете за беседой в кофейне: сохраняете зрительный контакт с собеседником, наклоняя голову к чашке с напитком.
Практически все перемещения взора на сайтах — саккадические, между двумя точками. В случае если на вашем ресурсе употребляются интерактивные элементы, такие как gif-файлы, видео либо motion-фон, то они требуют от пользователей плавного перемещения взора. Разумеется, что в случае если человек двигает головой в ходе просмотра, то он совершает вестибуло-окулярные перемещения — но на обработку информации это не воздействует.
Саккады — главный метод приема информации. Как раз с ними необходимо трудиться для оптимизации онлайн-ресурсов.
Смотри за моим взором, либо Проверенный способ оптимизации конверсии посадочных страниц
Чем меньше саккад, тем лучше
Всегда, в то время, когда пользователь перемещает взор к второй фиксированной точке, он совершает саккадическое перемещение. Чем больше саккад при просмотре сайта, тем больше в том месте информации, и тем сложнее ее принимать.
В то время, когда пользователь в первый раз наблюдает на ресурс, громадный количество контента может запутать и подавить его.
Неприятность Reddit — основная страница встречает множеством объектов, завлекающих внимание с равной силой. Через некое время человек начинает осознавать, что ему необходимо на ресурсе и в каком порядке просматривать контент. Это похоже на «мышечную память» — чем чаще повторяется задача перемещения (кроме того глазных яблок), тем легче повторять это упрочнение.
Другими словами, пользуясь Reddit несколько недель, вы «выучите», куда наблюдать в первую, вторую и третью очередь.
Мышечная память — обстоятельство того, из-за чего кое-какие пользователи против нередких редизайнов Facebook. В социальной сети большое количество элементов, соперничающих за внимание, но через некое время взор привыкает к необыкновенным шаблонам. А по окончании редизайна — все начинается сперва.
В случае если желаете, дабы пользователи сосредотачивались лишь на нескольких объектах страницы, минимизируйте число саккад, как это вероятно. Пример домашней страницы Cloudflare:
Кроме верхнего меню, тут всего пара саккад, что облегчает отклик и восприятие информации на нее.
Любой интерактивный объект на странице — призыв к действию (call to action). Посредством всего нескольких СТА-элементов Cloudflare увеличивает возможность того, что пользователь выберет хотя бы один.
Плоский дизайн, популяризованный Микрософт через собственные продукты, требует значительно больше саккад. Ниже — домашняя страница Микрософт.
Не смотря на то, что для просмотра страницы необходимо большое количество саккад, они организованы логично и последовательно. Исходя из этого перемещение взора тут упрощается — визитёру легко выяснить и выбрать необходимый элемент.
Как оптимизировать дизайн лендинг пейдж на базе правил айтрекинга?
Главные элементы направляют саккады пользователя
В случае если страница требует большое количество саккадических перемещений, направьте внимание на наиболее значимые объекты. Как это сделать?
Окажет помощь концепция доминирования, либо фокусировки внимания на одном центре при помощи дизайна. Доминирование достигается через размещение элемента на странице, и размер, контраст, перемещение, цвет либо каждый дифференцирующий показатель. Стивен Брэдли (Stephen Bradley) обрисовывает доминирование как «вариацию степени важности элементов дизайна».
Вы имеете возможность задать три уровня доминирования в собственной работе.
Ниже — несложный пример:
Два квадрата, равной формы и цвета. Но один из них господствует над вторым. Из-за чего? По причине того, что он больше и выше.
И ваше саккадическое перемещение между центрами двух квадратов происходит от первого, верхнего, ко второму. Как раз в таком порядке.
Пара вторых примеров. Заходя на Facebook, что вы видите прежде всего? Верхнюю строчок, не так ли?
И ваша первая саккадическая остановка — мелкие красные цифры справа. Из-за чего? Легко они господствуют визуально. Само собой разумеется, цифры мелкие, но ответственнее следующее:
- они расположены сверху;
- они красные, что выгодно контрастирует с синим фоном.
В сочетании с мышечной памятью, принцип доминирования задает направление саккадическим перемещениям.
5 психотерапевтических изучений по восприятию визуальной информации
Мы принимаем тексты саккадически
При чтении текста, взор пользователя перемещается по тому же принципу.
Большая часть из нас не зацикливается на каждом слове, поскольку это заняло бы через чур много времени. Вместо этого мы читаем тексты, «обширно» охватывая взором слова. При чтении точка, на которой останавливается пользователь — и завершает саккаду — именуется «точкой фиксации». Большая часть читателей заключают в саккаду 7-9 слов.
Технически нереально принимать каждую букву как «точку фиксации» — однако, воспринять все буквы вероятно.
Приблизительно так мы принимаем предложения при стремительном чтении
Вывод: предлагая пользователю долгие тексты на лендинге, вы принуждаете его к сотням саккадических перемещений. Если не уверены, что ваша аудитория готова к таким упрочнениям, размещайте и верстайте тексты с опаской.
Сейчас вы осознаёте, из-за чего «целый текст» без абзацев вредит пользовательскому опыту.
Нечитаемая «стенки» текста
Пара советов по размещению текстового контента на сайте:
1. Маленькие строчки предпочтительнее. Они требуют меньше саккад и разрешают воспринять больше информации.
2. Текст, расположенный по центру, воздействует лучше.
3. Контент, оформленный буллетами, легче читается.
Contently на собственной домашней странице направляться всем перечисленным практикам.
Большой заголовок расположен по центру и состоит всего из двух слов.
Как чанкинг содействует усвоению контента?
Вместо заключения
Сказать о саккадах возможно продолжительно, поскольку эта тема широка и разнообразна. Но в базе концепции — перемещение взора. Если вы дизайнер, маркетолог либо эксперт по оптимизации конверсии, вы имеете возможность осуществлять контроль, как пользователь просматривает страницу.
Позиционирование, доминирование, текст, размер, цвет — эти нюансы оказывают важное влияние на конверсию, общее вовлечение и читаемость.
Высоких вам конверсий!
По данным: crazyegg.com
Случайные статьи:
- Почему ваш лендинг должен содержать как минимум 500 слов?
- 6 Экспериментов с push-уведомлениями, которые вам нужно провести на своем лендинге
Работа Маркетолога. Как Платить Зарплату Маркетологу? Что Должен Делать Маркетолог?
Подборка похожих статей:
-
Что маркетологу нужно знать про инфографику?
Информация — это, без сомнений, будущее интернет-маркетинга. Метрика, аналитика и статистика диктуют разработку бизнес-стратегий, коррелируют с…
-
Все, что вам нужно знать о визуальном восприятии и дизайне сайтов
Визуальный маркетинг царствует на рынке сейчас, а визуальный контент — к примеру, инфографика, — неординарно популярен. Все дело в том, что для человека…
-
Азбука лендинга: что нужно знать каждому маркетологу?
Целевая страница (landing page) — серьёзный элемент любой маркетинговой кампании. Это ресурс, на что вы завлекаете потенциальных клиентов, раскрываете…
-
Все, что вам нужно знать о material design
Основное правило компании Гугл — шепетильно смотреть за потребностями пользователя и, исходя из них, корректировать собственный дизайн (и не только его)….