Что такое UX/UI дизайн интернет-магазина и как он влияет на эффективность SEO-продвижения

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

В чем причина такого однообразия? Неужели современный UX/UI дизайн — это простое следование шаблонам? Как вообще используемые принципы UX/UI дизайна способны повлиять на SEO-показатели сайта и его позиции в поисковой выдаче?

Именно об этом мы сегодня и поговорим!

Разбираемся с терминологией: что такое UX и UI

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

• UX дизайн (User Experience) — это не то, как сайт выглядит, а то, насколько он удобен для взаимодействия и использования. UX предусматривает наиболее рациональное расположение блоков, кнопок, ссылок и других элементов страницы, чтобы пользователю было максимально просто и удобно с ними взаимодействовать и считывать информацию.
• UI дизайн (User Interface) — это как раз таки основа пользовательского интерфейса, его визуальное наполнение: изображения, анимации, шрифты, внешний вид кнопок и все то, что пользователь видит и что вызывает у него необходимый эмоциональный отклик.

Проще говоря, UX — это удобство, а UI — это красота. Так легче запомнить, не правда ли?

И тут важно сделать ремарку: UX и UI лишь в том случае максимально эффективны, когда удачно сочетаются на сайте и дополняют друг друга. Сайт с проработанным UI, но непривлекательный визуально, будет отталкивать потенциального пользователя. А стилистически идеальный интернет-магазин, но с нелогичной структурой страниц, вызовет лишь недоумение и непонимание, как с ним взаимодействовать.

Как поисковые алгоритмы «видят» дизайн интернет-магазина

На самом деле поисковики не умеют видеть дизайн сайтов как человек. Не существует алгоритмов, которые бы позволили поисковым ботам «понимать», насколько сайт красив, удобен и интуитивен. Они воспринимают только код и наполнение, но UX и UI находятся за пределами их восприятия.

Но!

При ранжировании сайтов поисковики учитывают множество других факторов:

• поведенческие;
• ссылочные;
• доменные;
• текстовые;
• технические;
• коммерческие.

А они, в свою очередь, очень тесно связаны именно с UX и UI дизайном! Давайте разберем этот пункт на простом примере.

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

То есть поисковики видят не причину (UX/UI), а следствие (ухудшение поведенческих факторов). И тем не менее причинно-следственная связь налицо.

Плюс не забываем, что поисковые системы учитывают и другие параметры сайта, так или иначе связанные с UX/UI:

• Core Web Vitals — скорость загрузки страниц, удобство взаимодействия с сайтом и стабильность контента.
• Page Layout — отсутствие (или минимальное количество) рекламы на первом экране сайта.
• Mobile-first — принцип веб-разработки, при котором изначально создается именно мобильная версия веб-ресурса, а уже потом — десктопная.

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

Влияние UX-дизайна на эффективность SEO-продвижения

Но если поисковые алгоритмы не способны объективно оценивать UX сайта, каким образом дизайн влияет на SEO-показатели?

Для поисковиков есть несколько важных параметров сайта, которые относятся именно к UI:

1. Архитектура сайта. Это структура страниц и программной части сайта — такой себе «костяк», на котором держатся другие элементы интернет-магазина: его страницы, блоки, кнопки, формы заказа и тому подобное.
2. Структура каталога. Каталог — ключевой структурный элемент любого интернет-магазина. Он должен быть логичным, понятным и простым в навигации. Для удобного поиска и взаимодействия в нем должны быть предусмотрены смарт-фильтры, разные способы сортировки товаров, вложенность категорий и подкатегорий, превью, прочее.
3. Удобство подбора товара. Элементы интерфейса в карточках товаров должны быть расположены логически и интуитивно верно. В доступных и логичных местах должны быть размещены кнопки сравнения товаров,кнопки заказа и покупки в кредит, поисковые фильтры и прочее. У пользователя должна быть возможность максимально легко и быстро выбрать нужный товар из тысяч позиций. Иначе он просто уйдет с сайта.
4. Полнота информации в товарных карточках. В них должно содержаться полное название товара, фото и (желательно) видео, детальные характеристики и параметры, цена и способы покупки, информация о доставке, оценки и отзывы покупателей, кнопки для добавления товара в список избранного и для сравнения с другим товаром.

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

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

Специфика влияния UI-дизайна на SEO-продвижение

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

Но!

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

1. Отсутствие адаптивного дизайна и некорректная работа сайта на мобильных устройствах.
2. Непроработанные и нелогичные решения при выборе цветов, шрифтов и графического наполнения, что отталкивает потенциального пользователя.
3. Отсутствие СТА-кнопок, мотивирующих выполнить целевое действие, или их непроработанное дизайнерское исполнение.
4. Использование стоковых снимков и рендеров товаров вместо реальных фотографий.
5. Отсутствие отзывов, вопросов-ответов и других Social Proofs.
6. Переизбыток «тяжелых» и громоздких элементов страницы, которые отвлекают внимание пользователя и вместе с тем увеличивают скорость загрузки.
7. Отталкивающий и объективно неприятный для глаз дизайн.

Все перечисленное напрямую влияет на поведенческие факторы. А они, в свою очередь, служат важными факторами ранжирования для Google. То есть поисковик учитывает не UI-дизайн, а поведение посетителей сайта, обусловленное этим UI-дизайном.

Комментарий специалиста Elit-Web

Своим мнением делится Александр Кантур, SEO Team Lead Elit-Web:

«Мы в команде уже не первый год наблюдаем одну и ту же ошибку владельцев интернет-магазинов. Это ориентир исключительно на визуальную составляющую — UI. То есть, если заказчику просто понравился дизайн, этого оказывается достаточно.

Но это критическая ошибка. UI без UX не работает должным образом! За внешней красотой должны стоять функциональность, удобство и интуитивность. Иначе сайт попросту не будет работать. Это, к слову, относится не только к интернет-магазинам, но и к любым другим коммерческим, да и некоммерческим ресурсам.

Я могу назвать как минимум пять других распространенных ошибок при создании UX/UI дизайна:

1. Отсутствие предварительных исследований и разработка дизайна, что называется, по ощущениям.
   
2. Стремление дизайнера закрыть свободное пространство страницы хотя бы чем-нибудь.
   
3. Плохая проработка мобильной версии и отсутствие нормальной адаптивности.
   
4. Переизбыток ярких цветов, излишне броских элементов и сложных анимаций.
   
5. Устаревшие дизайнерские подходы, которые берут свое начало еще в двухтысячных.

Опять же, Google не может понять, что какой-то цвет слишком яркий, цвета шрифта и фона не сочетаются, а дизайн сайта в принципе морально устарел. Но все это напрямую влияет на восприятие пользователя и его взаимодействие с веб-ресурсом. А поведенческие факторы — одна из основ SEO».

Вместо заключения: так что все-таки важнее — SEO или дизайн?

На самом деле сама постановка такого вопроса некорректна. SEO-продвижение не даст желаемых результатов, если у сайта будет непроработанный дизайн и отсутствует адаптивность. И наоборот, даже самый идеальный UX/UI дизайн не обеспечит интернет-магазину верхние позиции в поисковой выдаче без SEO-продвижения.

Вывод: необходимо подходить к вопросу комплексно, а не пытаться решить все задачи с помощью одного единственного инструмента, будь то дизайн, SEO, SMM, контекстная реклама или что-либо другое. А потому создание, оптимизация и продвижение интернет-магазина — это всегда комплексный и сложный процесс, которым должна заниматься целая команда специалистов. И только так можно достичь желаемых результатов!