Юзабилити

Как движение глаз влияет на взаимодействие с вашим сайтом?

Автор: Инесса Маргарян28.09.2015

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

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

Основные виды движения глаз

Сначала давайте поговорим о терминах. Существуют 4 основных вида движения глаз.

  1. Саккады — перемещение глаз между несколькими фиксированными точками.
  2. Плавное движение — глаза следят за одним движущимся объектом. Так мы наблюдаем за летающим по небу самолетом, не двигая головой.
  3. Вергентное движение — глаза фокусируются на двух разных объектах, находящихся на разных расстояниях. Например, когда вы смотрите в окно, то сначала концентрируете внимание на самом окне, а после на то, что находится за его пределами.
  4. Вестибулярно-окулярное движение — глаза продолжают смотреть на одну точку, в то время как двигается голова. Вы совершаете такое перемещение, когда сохраняете с собеседником зрительным контакт и одновременно наклоняете голову, чтобы отпить кофе.

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

Меньше саккадов — больше запоминаемой информации

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

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

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

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

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

Microsoft

Как управлять саккадами?

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

Простой пример вы видим на изображении.simple-example-two-squares
Эти два квадрата имеют одинаковый цвет и форму. Но один из них является доминирующим: он гораздо больше и располагается выше. При саккадном движении взгляд сначала сосредотачивается на первом квадрате, а после — на втором.

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

Саккады при чтении текста

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

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

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

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

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

Вывод

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Инесса Маргарян
Freelance copywriter. Будущий специалист по рекламе и PR.
Комментарии
Оставить отзыв

You must log in to post a comment