Влияние юзабилити на SEO

Краткое содержание статьи:

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

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

Чтобы понять, на чём базируется юзабилити, рассмотрим его основные цели, выделенные Якобом Нильсеном (консультант по юзабилити сайтов и исследователь взаимодействия человека и компьютера):

• Обучаемость – насколько легко пользователь может выполнять задачи при первом знакомстве с интерфейсом.
• Эффективность – насколько быстро пользователь выполнит задачу после изучения интерфейса.
• Запоминаемость – при возвращении к интерфейсу через какой-то период времени, насколько легко пользователь сможет восстановить навыки работы с ним.
• Ошибки – частота возникновения ошибок пользователем, их серьёзность и возможность исправления при работе с интерфейсом.
• Удовлетворение – насколько интерфейс приятен пользователю в использовании.

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

SEO и юзабилити

Поведенческие факторы

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

Рассмотрим метрики, которые характеризуют поведение посетителей на сайте:

Отказы. Отказ будет засчитан, если посетитель зашёл на сайт и сразу его покинул. Чем меньше данный показатель, тем лучше. Для Google и Яндекса они считаются по-разному. В Яндексе отказ учитывается при просмотре одной страницы сайта не более 15 секунд. В Google отказом считается сеанс, во время которого пользователь посмотрел одну страницу и не выполнил никаких действий, вне зависимости от времени, проведенного на сайте. Нормальный показатель для разных тематик сайтов будет разный, но ориентировочно можно представить его так:

• 25% и ниже – отлично;
• 30-50% – нормально;
• 50-70% – удовлетворительно;
• 70% и выше – плохо.

Какие могут быть причины высоких показателей отказа?

• Медленная загрузка сайта;
• Плохо отформатированный текст (нет выделенных абзацев, маркированных/нумерованных списков, подзаголовков и пр.);
• Неудобная навигация;
• Плохой дизайн и поехавшая вёрстка;
• Раздражающие факторы (назойливая анимация, всплывающие окна, автовоспроизведение видеороликов или аудио, слишком яркие цвета и пр.);
• Отсутствие мобильной версии сайта;
• Нерелевантный контент (пользователь видит на странице не то, что ожидал);
• Другие технические проблемы на сайте.

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

Что влияет на низкую глубину просмотра сайта?

• Запутанная навигация (напр. нелогично названы пункты меню, неочевидная логика в построении дерева разделов и подразделов);
• Непроработанная перелинковка (напр. отсутствие блоков ссылок на сопутствующие товары, ссылок из текстов, футера и пр.);
• Отсутствие интерактивных элементов (например, на сайте нет фотогалереи);
• Отсутствие хлебных крошек.

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

Что влияет на малое количество времени, проведенное пользователем на сайте?

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

Конверсия

Еще один важный пункт, который нужно выделить при взаимосвязи юзабилити и SEO – это увеличение конверсии. От знакомства до совершения целевого действия посетителю нужно проконтактировать с сайтом 3 или более раз. Продуманное юзабилити подтолкнёт пользователя совершить целевое действие: купить товар, заказать услугу, зарегистрироваться, позвонить и пр. Но, если сайт будет неудобным, у пользователя не возникнет желания вернуться и сделать заказ.

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

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

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

Чек-лист юзабилити сайта

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

Базовые

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

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

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

Дизайн

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

Восприятие цвета. Проверяйте соответствие цвета элементу, т.к. у людей сформировались стереотипы, относящиеся к цветам: например, цвет неактивной кнопки – серый; для активных – яркие цвета, для подтверждения действий – зелёный, для ошибок – красный, и так далее.

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

Правило 60-30-10. Для эффективного управления вниманием пользователя при разработке дизайна рекомендуется использовать соотношение цветов 60-30-10, где:

• 60% — главный цвет;
• 30% — дополнительный цвет;
• 10% — акцентный.

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

F-паттерн. F – это траектория сканирования контента пользователем, т.е. то, как двигается его взгляд. Учитывая это, можно проектировать сайт в соответствии с этим. Также есть и другие виды паттернов, например, паттерн «слоеный пирог», когда глаза просматривают заголовки и подзаголовки, но пропускают основной текст под ними и многие другие.

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

Контент

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

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

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

Функционал

Кнопки. Посетитель должен легко идентифицировать кнопки. Они должны быть заметными: используйте приятные глазу цвета, градиенты, контрасты, эффекты при наведении, призывы к действию, информацию о том, что произойдёт после клика (напр. надпись «Отправить»). Располагайте кнопки конверсии в правой нижней части страницы (либо там, где их легко найти) – здесь они получат больше внимания посетителя. Визуально различайте кнопки (если они идут подряд), наиболее важная кнопка должна доминировать.

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

Кликабельные элементы. Пользователь должен понимать, на что можно нажать, а на что нет (баннеры, ссылки, кнопки). Они должны быть крупными, и иметь разные состояния: неактивное; при наведении курсора; по клику.

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

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

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

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

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

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

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

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

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

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

Технические

Скорость загрузки сайта. Сайт должен быстро загружаться – 1–2 секунды. После двух секунд задержка даже в 100 миллисекунд снижает конверсию на 7%.

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

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

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

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

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