Известный российский SEO-специалист Михаил Шакин, продолжает серию вебинаров с анализом сайтов своих подписчиков. Недавно мы опубликовали статью с техническим разбором сайтов, который Михаил провел вместе с Ильей Горбачевым. В этой статье мы расскажем самое интересное из вебинара, на котором проводился анализ юзабилити и конверсии сайтов. Спикером стал Алексей Махметхажиев.
Алексей имеет большой бэкграунд работы проектным менеджером в разных сферах бизнеса. В числе прочего, он долгое время занимался развитием сайтов различных предприятий, поэтому имеет практический опыт и «насмотренность» в оценке их эффективности.
«Запомните — вы не являетесь целевой аудиторией своего сайта. Важно смотреть на сайт глазами вашего пользователя. Именно при взгляде на сайт со стороны, можно найти до 40 ошибок, оперативное исправление которых повысит конверсию на 10%-20%», — рассказал о принципе своего анализа Махметхажиев.
Первым сайтом, попавшим на разбор к Михаилу с Алексеем, был ресурс по предоставлению услуг фриланса в крипто-операциях.
LaborX создал у ребят довольно положительное впечатление — сайт выполнен в современном минималистическом дизайне. Взглянув на главную страницу становится понятно о чём этот сайт, и его основные функции. Алексею бросилось в глаза отсутствие кнопки регистрации под заголовком и описанием страницы. Вместо этого, там расположены кнопки «Find jobs» и «Find talent».
Основной целью подобных сайтов является сбор регистраций новых пользователей. По этой причине размещение вышеуказанных кнопок не совсем оправдано и может несколько запутать посетителей.
Внизу страницы указано, что на платформе зарегистрировано более 19 000 пользователей.
Махметхажиев рекомендует указать информацию о количестве пользователей на главном экране, поскольку это говорит об авторитетности ресурса, и должно попадать на глаза юзерам сразу при открытии сайта.
Дальнейший скроллинг главной страницы перевёл в раздел «Benefits». Внутри этой части страницы находятся подразделы, которые также скролятся. Такой «скроллинг в скроллинге» крайне неудобен пользователю. Если есть необходимость дать большой объем информации на главной странице, то будет лучшим решением увеличить ее общую длину, чем добавлять внутристраничный скроллинг.
Следующим замечанием Махметхажиева было оформление раздела FAQ. Как видно на скриншоте ниже, для получения ответа на конкретный вопрос, необходимо его раскрыть, что неудобно с точки зрения юзабилити. Нужно учитывать, что пользователи, в большинстве своём, приучены соцсетями к скроллингу ленты. В данном случае, для получения ответа на вопрос пользователю необходимо нажать на «плюс», что будет нетипичным поведением для юзера, и в конечном счете негативно скажется на времени его нахождения на сайте.
«Человек должен видеть вопрос в виде заголовка и сразу под ним прочитать ответ — ему не нужно что-то кликать дополнительно», — дал рекомендацию Алексей.
В остальном LaborX оставил положительное впечатление, но Махметхажиев порекомендовал всем проводить подробный анализ сайтов через сервис Hotjar. С его помощью можно провести подробный анализ посещений всех страниц сайта и, в числе прочего, узнать:
В отличие от Яндекс Метрики, количество параметров взаимодействия юзеров с сайтом, в Hotjar на порядок больше.
Спикеры сошлись во мнении, что использование латинских букв для написания имени домена на русском языке не лучшая идея. Уровень владения английским языком в России достаточно низкий, поэтому большинством пользователей, по мнению экспертов, название сайта звучит как «Му-футболка».
Из положительных моментов Алексей отметил то, что главная страница является витриной и пользователь, попав на сайт, сразу может приступить к выбору товара.
Карточка товара открывается в новом окне, что крайне негативно сказывается на юзабилити с десктопных устройств, а для Android является вообще катастрофой.
«В новом окне должны открываться только внешние ссылки», — считает Махметхажиев.
Наличие большого поля поиска, в том числе в мобильной версии сайта — это очень хорошо и удобно для юзера. Такое решение гораздо лучше, чем популярное размещение лупы поиска где-то на краю страницы. Однако Алексей порекомендовал сделать его липким, чтобы поиск всегда оставался видимым при скроллинге страницы.
Дизайн карточки товара хороший, но она перегружена мелкими элементами.
Глазу сложно зацепиться за что-то конкретное. У пользователя может сложиться впечатление, что оформить заказ будет непросто.
Ещё одно замечание Алексея по поводу оформления карточки товара — это длинное описание. Он уверен, что чем длиннее строка, тем труднее её читать. Поэтому он рекомендует по максимуму сократить описание и сделать шрифт такого размера, чтобы текст поместился в столбик.
Блок, в котором расписаны условия доставки и оплаты находятся практически внизу страницы карточки товара. Учитывая, что страница достаточно длинная и мало кто из юзеров будет её скролить в самый низ, Махметхажиев рекомендуют поднять этот блок выше, поскольку информация в нём чрезвычайно важная для пользователя.
Последнюю рекомендацию по my-futbolka.ru Алексей дал относительно количества товаров на странице. Как видно на скриншоте ниже, товарные позиции представлены на пяти страницах. При этом, согласно аналитике многих товарных сайтов, пользователи с бо́льшим желанием листают длинные страницы, чем переходят на новые. Поэтому вероятность того, что юзер перейдёт на последнюю страницу, очень мала. Однако если все товары поместить на одной странице, то пользователь вполне может её всю проскролить и увидеть все представленные товары.
Указанную рекомендацию Алексей советует применять только после анализа сайта в Hotjar, поскольку индивидуальные показатели открываемости страниц могут отличаться от среднестатистических.
Первая рекомендация от Алексея по данному сайту — это убрать с карточек товаров лейблы «Подарки», «Хит продаж» и прочее. Эти атрибуты не дают полезной информации пользователю, а только перегружают визуальный контент.
В карточке товара ребята заметили отсутствие отзывов.
Алексей порекомендовал: в случае если нет отзывов на конкретную коляску, то в карточку товара можно выводить отзывы о других моделях данной товарной группы. Отсутствие отзывов негативно воспринимается юзерами, поэтому заполнение данного блока является очень обязательным.
Еще немаловажной деталью SEO-специалисты назвали размер и, главное, цвет шрифта. Очень маленькие буквы влияют на доступность информации для пользователя, поэтому лучше сократить объем информации на странице, чем использовать мелкий шрифт.
На предыдущем скриншоте видно, что такие элементы карточки товара как «отзывы», «код товара» и подзаголовок блока «купить в один клик», выполнены в сером цвете. Такое решение крайне неприемлемо — между фоном и шрифтом должен быть хороший контраст, считает Махметхажиев.
Следующей проблемой mega-kids.ru является низкая скорость загрузки страниц. С помощью сервиса Loading express удалось установить, что причина заключается в скорости ответа сервера. Поскольку скорость загрузки, крайне важна для сайта, Алексей порекомендовал провести подробный аудит его технической части.
«Одна секунда на ответ сервера — это очень много. Нижний предел скорости — это 0.4 секунды», — предупредил Махметхажиев.
Дальнейший разбор сайта ребята решили не делать, поскольку все его косметические изменения будут сведены на нет, пока не решится вопрос со скоростью ответа сервера.
Первым негативным визуальным элементом на данном сайте, спикерами было замечено большое количество зеленого фона. Этот цвет очень яркий и его использование в разработке должно быть очень ограничено. В данном случае его настолько много, что он перетягивает на себя визуальный эффект, который должны произвести картинки на главной странице сайта.
Несмотря на то, что продукция profi-agro.ru ориентирована на узкоспециализированного пользователя, Алексей порекомендовал сделать описание под заголовком каждой группы товаров. Это необходимо не только для того, чтобы в продукции мог разобраться человек «не в теме», но и для целей SEO — в таком кратком описании можно указать необходимые ключевые слова.
Отсутствие цен на товары — это худшее, что может быть на сайте, считает Махметхажиев. Люди редко остаются долго на таких ресурсах и пытаются найти альтернативный ресурс с ценами. Он порекомендовал: если итоговая стоимость зависит от ряда факторов, то необходимо указать диапазон цен. В случае если цены не указываются по причине волатильности курса иностранных валют, то имеет смысл установить соответствующий плагин, который будет обновлять стоимость всех товаров на ежедневной основе.
В целом дизайн сайта выглядит устаревшим и требует своего обновления. У посетителя, в большинстве своём, глаз набит на сайтах с минималистичным, простым дизайном и понятной структурой. Юзер, попав на такой сайт, визуально может его оценить как неработающий, а в дополнение к этому, отсутствие цен на товары вынудят его покинуть страницу.
Владелец данного сайта написал в чате название домена с ошибкой в одной букве — вместо «k» в конце слова «septik», написал «c». По этой причине сразу зайти на сайт не получилось. С такой проблемой могут столкнуться и реальные посетители сайта, поэтому Алексей порекомендовал владельцу ресурса скупить все похожие домены и разместить с них редиректы. Поиск таких доменов можно сделать через специализированные сервисы.
Дизайн и структура sos-septik.ru, аналогично предыдущему сайту, выглядят старомодно. Махметхажиев порекомендовал не вносить косметические доработки, а создать новый сайт в современном дизайне на любом из конструкторов. Даже бесплатные шаблоны конструкторов сайтов позволят сделать привлекательные для пользователей страницы. Из конструкторов Алексей порекомендовал использовать Creatium.
Сайт выполнен в современном стильном дизайне, но картинки сильно сжаты, что сказывается на качестве изображения, в том числе на баннере главной страницы.
Баннер главной страницы выполнен в виде слайдера. По мнению Махметхажиева, его использование в интернет-магазине нецелесообразно. Слайдер не несёт никакой пользы, и мало кто из пользователей заходит в онлайн-магазин, чтобы посмотреть картинки. SEO-специалист порекомендовал заменить слайдер на поисковый блок, которого на главной странице нет, что усложняет навигацию по сайту.
Также он посоветовал убрать боковое меню. Такое решение любят использовать дизайнеры, но как показывает практика в юзабилити оно совсем неудобно, и владельцы сайтов сейчас массово отказываются от него.
Из элементов, которые положительно сказываются на удобстве для пользователя, ребята отметили наличие на сайте подробного фильтра. Однако в нём есть один большой недостаток: при открытии списка одного из элементов закрывается другой, который был открыт перед этим.
«Все элементы фильтра, которые открыл пользователь, должны закрываться только им самим. В противном случае это выглядит как ситуация, когда в офлайн магазине, покупатель просит последовательно показать ему товары, а продавец прячет каждый из них после показа», — провёл аналогию Алексей.
Также спикеры отметили красиво и грамотно оформленные карточки товара у edisonlight.ru, но посоветовали поработать со шрифтом, чтобы буквы не «съезжали», как, например, на скриншоте ниже.
Достаточно сложно оценить юзабилити сайта сходу без соответствующих знаний. Но это важный показатель, так как поисковые системы нередко оценивают именно пользовательское взаимодействие с ресурсом, и на фоне этого уже ранжируют их. Чтобы научиться объективно анализировать сайты, важно пополнять свою теоретическую и практическую базу — разберем каналы и платформы, которые могут быть полезны для таких целей.
Seo без воды. Данный канал достаточно полезен для того, чтобы научиться использовать правильные инструменты для оптимизации своих сайтов. При этом здесь можно найти полезные фишки, которые влияют на оценку сайтов поисковиком — например, контент на страницах. В одном из постов подчеркивали важность полезного и понятного контента, который рассчитан на реальных пользователей, и зачастую AI-контент в этом бесполезен. Поэтому важен баланс и правильный подход — автор канала описал важные тезисы о том, как нужно подходить к контенту для улучшения ранжирования.
Блог Яндекс для вебмастеров. В этом блоге есть много полезных статей об оптимизации сайта, а также об его улучшения с пользовательской точки зрения. Например, статья о том, как добавление виджета заказа транспорта может упростить путь пользователей при просмотре товаров.
Канал PromoPult. На этом канале рассматривается не только Seo-сфера, но и в целом цифровой маркетинг. Поэтому тут можно узнать многое о пользовательском опыте, и как его учитывать при наполнении своего сайта или составлении рекламы в соцсетях или контекстной рекламы.
Блог Serpstat. Serpstat является платформой для аналитики сайтов — там можно посмотреть данные по трафику, линкам, конкурентам и так далее. Но также здесь есть свой блог, в котором много методичек для правильного использования аудита сайта. Есть и другие полезные материалы, которые помогут узнать, что отвечает за хорошую оптимизацию сайта, и как ее можно улучшить.
Канал CyberMarketing. В этом канале тоже есть много видео о маркетинге и Seo, причем все они разделены на удобные подборки. Некоторые касаются напрямую продвижения с помощью Seo, другие — контекстной рекламы, третьи — интернет коммерции. Все темы также позволяют изучить то, как пользователи взаимодействуют с сайтом и рекламой.
Основные рекомендации, актуальные для всех проанализированных сайтов — это соответствие следующим параметрам:
«Ребята, запомните: самыми важными критериями юзабилити сайтов являются скорость загрузки и наличие отзывов на продвигаемые товары и услуги», — резюмировал Алексей Махметхажиев.
Подписывайтесь на наш Telegram-канал Классический манимейкинг, в котором пишем про различные способы заработка в интернете: SEO, крипта, TikTok, YouTube и многое другое.