Все посты
Обновлено 9999+ 20 Знания

Как повысить конверсию и поведенческие факторы, улучшив юзабилити

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

Мы в PR-CY пишем о том, как оформлять страницы сайта, внедрять принципы юзабилити и оценивать, насколько сайт удобен для пользователей. Это помогает повышать конверсию и улучшать поведенческие факторы, которые влияют на позиции в выдаче поисковиков.

Советы и секреты: как оформить важные разделы сайта

Материалы о структуре страниц и выборе контента для разных разделов.

Какая структура сайта лучше для SEO

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

  • в какой очередности поисковый бот будет сканировать страницы, какую приоритетность он им назначит;
  • как будет распределяться ссылочный вес от внутренней перелинковки;
  • насколько просто будет ориентироваться на сайте посетителям и самому веб-мастеру.

Структура входит в архитектуру сайта, которая включает в себя программную часть, контент, карту сайта, навигацию и прочее.

Что нужно сделать для архитектуры сайта, чтобы она нравилась поисковикам

Компания Zyppy за несколько месяцев засекла рост трафика на 175%, когда переработала архитектуру сайта и применила эти советы. 

Как разработать структуру сайта
  1. Понять интент пользователя: 
    что он хочет от сайта в целом, от каждого раздела и страницы, как вы можете это ему дать самым удобным способом.
  2. Задать приоритетность и обозначить уровни вложенности:
    чем ближе страница к главной, тем она важнее, тем больше ссылочного веса получит и тем раньше ее будет сканировать бот.
  3. Организовать структуру:
    выбрать модель, которая бы подходила под иерархию страниц и связывала все между собой. Обычно это SILO-структура.
  4. Использовать страницы-хабы:
    такие обобщающие страницы, которые собирают информацию по теме со ссылками на нужные страницы и направляют пользователей.

Подробности и остальные десять советов в материале об архитектуре сайта вместе с примерами, скриншотами и комментариями сеошников.

Как сделать меню сайта: на примере компании, которая переделала меню и разгрузила отдел продаж

Меню влияет на поведенческие факторы сайта и конверсию: если пользователю будет непонятно или неудобно, он не разберется, как найти и купить то, что ему нужно.

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

  • Уже на первом шаге работы с ним у пользователя слишком много вариантов выбора, легко ошибиться.

  • Иерархия пересекается, интуитивно непонятно, что выбрать.

  • Названия разных подкатегорий звучат похоже и сбивают этим клиентов.

Навигация сайта пример
Старое меню сайта

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

Как сделать страницу «О нас» или «О компании»

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

Исследователи юзабилити Nielsen Norman Group изучили страницы «О нас» на разных сайтах и спросили пользователей, что им важно видеть на презентационных страницах, что понравилось, а что раздражало.

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

  • реалистичные фотографии — фото, которые выглядели стоковыми, воспринимались негативно, гораздо лучше реальная фотография сотрудников;
  • объективные отзывы — пользователи будут искать отзывы и фильтровать неестественные;
  • несколько каналов для связи с реальными сотрудниками компании — иногда проще позвонить, иногда нужно списаться, причем удобнее делать это в мессенджере;
  • сторителлинг — живой, а не обезличенный рассказ о компании в формате истории;
  • доказательства, которые и делают рассказ живым и полезным для клиента.

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

Раздел О нас на сайте магазина
Текст на сайте barkingstore.ru

Больше советов об этом, а также о социальном доказательстве, миссии, подборе фото и прочем в статье с выводами из исследования. Рекомендации относятся не только к тексту, но и к юзабилити и формированию бренда, образа компании в интернете.

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

Часто клиенту проще позвонить и узнать, что ему интересно, чем писать в чат или заказывать звонок. Задача веб-мастера — сделать так, чтобы клиенту было удобно это сделать. 

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

Как настроить звонок на сайте
Взаимодействие с номером на десктопе

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

Как оформить страницу с контактами и адресом компании

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

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

Какие элементы должны быть на странице:

  1. Все способы связи с компанией
  2. Контакты разных отделов, если они контактируют с клиентами
  3. Физические адреса филиалов
  4. Часы работы и часы для звонков
  5. Несколько вариантов связи
  6. Разные языки, если клиенты бывают из разных стран
  7. Чат и контактная форма прямо на сайте
  8. Ссылки на соцсети
Пример страницы с обратной связью на сайте
Страница контактов на сайте cdek.ru

Куда разместить виджеты и ссылки на страницу с контактами, разобрали в статье с примерами.

Как‌ ‌добавить‌ ‌на сайт карту‌ ‌Google,‌ ‌Яндекс‌ ‌и‌ ‌2ГИС‌

Если у компании есть офис, магазин, пункт выдачи, у нее на сайте должна быть карта с меткой, по которой будет понятно, как туда добраться. Самые популярные виджеты с картами — Яндекс, Google и 2GIS. Лучше, если виджет будет интерактивный, чтобы пользователь мог приблизить или отдалить масштаб, посмотреть объекты рядом. Иногда для экономии веса на страницу помещают скриншот карты с меткой. 

Как вставить карту на сайт
Интерактивная крупная карта на сайте sandaloud.ru

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

Как это сделать, рассматриваем материале с пошаговым руководством для каждой карты.

Как настроить регистрацию на сайте через соцсети

Быстрее всего регистрироваться через соцсети, не нужно запоминать отдельные пароли и вводить их в поле для входа. 

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

Форма регистрации на сайте
Пример входа через соцсети на ru.shein.com

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

Как сделать футер: какие нужны ссылки и как не навредить SEO

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

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

Еще один момент — роль в распределении ссылочного веса, поскольку футер содержит ссылки на все важные разделы. 

Что может быть в подвале сайта:

  • полезные ссылки: контакты, информация по обслуживанию, политика конфиденциальности;
  • навигация, дублирующая меню, чтобы пользователю не нужно было подниматься к верху страницы;
  • ссылки на вторичные задачи: дополнительная информация, например, с вакансиями, ссылками на филиалы;
  • карта сайта;
  • отзывы или награды;
  • дочерние компании и бренды;
  • взаимодействие с клиентами: чат, телефон.
Пример хорошего подвала сайта
Футер сайта kuchenland.ru

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

Коммерческий веб-дизайн: как сделать сайт удобным, красивым и конверсионным

Несколько материалов о связи дизайна, психологии и конверсии на сайте.

Как улучшить коммерческие факторы сайта и повысить доверие к компании

Пользователи с меньшей вероятностью купят или закажут что-то на сайте, который вызывает подозрение. Компании придется доказать, что на вас можно положиться, что вы не мошенник и не исчезнете с деньгами, не заразите их компьютер вредоносными программами и не украдете личные данные. Многие факторы, формирующие доверие у пользователей, важны и для поисковых систем Яндекс и Google.

Факторы можно разделить на три составляющие:

  1. Бизнес
    Многим пользователям важно, какую компанию они поддерживают рублем. Они обращают внимание на репутацию и взгляды основателя, философию и инициативы компании, отношение к сотрудникам и экологии. Важно убедить доверять, в этом помогают отзывы покупателей, образование сотрудников и в целом прозрачность деятельности.
  2. Коммерческая
    Все, что связано с процессом покупки: варианты оплаты и доставки, гарантия, условия возврата, возможность разговора с менеджером, программа лояльности, отзывы.
  3. Техническая
    Характеристики сайта, его безопасность, чтобы личные данные пользователя не утекли и не были украдены.
Способы возврата на сайте магазина
Понятные условия возврата на lamoda.ru

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

5 правил для скидок и акций: как повысить конверсию в интернет-магазинах

Скидками, промокодами и купонами компании не только заглаживают вину перед недовольными покупателями, но и стимулируют сбыт, возвращают ушедших клиентов, напоминают о себе и привлекают новых. 

Мало запустить акцию, еще нужно, чтобы пользователи о ней узнали, сочли ее выгодной и смогли воспользоваться предложением. Для этого процесс применения скидочного купона должен быть простым. Но есть нюансы, которые могут отпугнуть клиентов.

Пять ключевых правил оформления скидок и акций на сайте:

  • Купон применяется автоматически
  • Скидку предложили сразу 
  • Поле для ввода купона находится в корзине
  • Цена меняется сразу после применения купона
  • Скидки и условия их получения понятны сразу
Как оформить поле для купона в корзине
Поле для промокода на a.pr-cy.ru/prices

Статья с правилами объяснит все на примерах.

5 принципов современного дизайна сайта: как сочетать минимализм, пользу и красоту

«Не держите дома вещей, о которых вы не можете сказать, что они полезны или красивы»,
— Уильям Моррис, дизайнер и автор книги «Эмоциональный дизайн».

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

5 принципов современного дизайна сайта

Пригодятся даже тем, кому минимализм не нравится:

  1. Меньше визуального шума
  2. Самые важные элементы должны быть самыми крупными
  3. Взгляд пользователя можно направлять с помощью иерархии элементов
  4. Расположение объектов должно быть в балансе
  5. Передать различия поможет контрастность

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

Пример сайта в минимализме
Дизайн pr-cy.ru

В материале с примерами разбираем особенности минимализма на примерах и смотрим на ошибки.

Как повысить конверсию сайта с помощью психологии: 24 когнитивных искажения мозга на примерах

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

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

Пример дизайна приложения
Как Тиндер повышает интерес к платным тарифам

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

Почему пользователи могут не замечать ответ сайта на их действие, что с этим делать и при чем тут невидимая горилла

Сайт отвечает на действия пользователя какими-то изменениями. Клиент кликает на кнопку — на странице появляется окно, переходит к покупке — добавляется новая информация с подробностями, открывает каталог — выезжает поисковая строка. 

Это нужно для работы на сайте, но пользователь не всегда замечает, что изменилось на странице. К примеру здесь кнопка «Out of stock» появляется на том же месте, что и «Add to cart» на предыдущем этапе. Она ничем не отличается визуально и не привлечет взгляд.

Как дизайн влияет на конверсию
Пример незаметного изменения кнопки

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

Больше информации есть в статье с исследованием. Там разобрали какие ошибки часто делают владельцы сайтов и разработчики и как сделать обновления на странице заметнее для клиентов. 

Как сдвиги макета страницы мешают пользователям и что с этим делать

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

Смещение макета сайта пример
Из-за сместившихся кнопок пользователь промахнулся

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

    Как провести аудит юзабилити сайта

    Статьи о том, как проверить, насколько сайт удобен для пользователей.

    9 бесплатных инструментов для тестирования юзабилити на русском

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

    Что проверять:

    1. Этапы, где теряются конверсии
    2. Элементы, обманывающие ожидания
    3. Навигацию и структуру сайта

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

    Как проверить весь сайт, включая внутренние страницы, и найти ошибки

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

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

    Онлайн аудит сайта
    Фрагмент проверки юзабилити в Анализе сайта
    Проверить сайт

    Если вы хотите поделиться знаниями или опытом с пользователями PR-CY, давайте напишем партнерскую статью или кейс. Напишите Елене — e.zhmurina@pr-cy.ru.

    Возьмите под контроль продвижение своего сайта
    Исправьте ошибки, которые мешают сайту выйти в топ, и вы увидите рост трафика и дохода.
    🔍 Подпишись на @prcynews в телеграм — оставайся в курсе последних SEO новостей и свежих материалов.

    Теги поста или какие разделы почитать еще:

    Комментарии (20)
    Natalia88   26.03.2020 16:02
    Вот прям в точку про страницу о нас!Приходят клиенты начинаешь анализировать сайт, что это за компания, скукота написана или вообще непонятно, что хотели написать
    Elena_Zhmurina   26.03.2020 18:10
    А ведь многим важны принципы компании, тем более это дополнительные плюсы к репутации и образу.
    Kirill_Chekin   26.03.2020 16:09
    Только пожалуйста не указывайте ссылки на соцсети которые не работают или их вообще нет у вас!
    Elena_Zhmurina   26.03.2020 18:09
    Согласна! Иногда ставят весь комплект иконок, а в итоге все, кроме одной, никуда не ведут :)
    Я номер как-то хотел скопировать,стояла защита на копирование,психанул и начал искать другой сайт
    Elena_Zhmurina   26.03.2020 18:11
    Защита от копирования на номере телефона - это потрясающе :) Вручную перенабирать...
    Я бы даже отметил правило одного клика,на столько требовательны стали покупатели,что если они задают более менее точный запрос,они должны сразу открыть нужную страницу,иначе они уходят
    Elena_Zhmurina   26.03.2020 18:12
    Это уже вопрос оптимизации, насколько страница хорошо оптимизирована под запросы и нет ли конкуренции между своими же страницами за один ключ.
    Совет,не делайте рассылку каждый день вашим клиентам настоящим и будущим,это только отвергает
    Elena_Zhmurina   26.03.2020 18:13
    Это нам совет или в принципе? Мы, кажется, такую рассылку не делаем :)
    marik haker   27.03.2020 16:32
    Иногда очень много ярких баннеров с акциями и другой рекламой сбивают с толку
    Гоша Ковалев   27.03.2020 16:39
    Мне нравится когда я захожу на нужный сайт и снизу всплывает окно с чатом, особенно если специалист онлайн,то это прям сверх круто и успех, что куплю сейчас прям значительно увеличивается!
    Elena_Zhmurina   13.10.2021 18:00
    С одной стороны соглашусь, удобно, когда можно не искать, а сразу менеджеру вопросы задать, чтобы он помог найти. С другой стороны, чат лучше все же с задержкой показать, пусть пока пользователь хоть осмотрится.
    Artem Fedotov   28.03.2020 17:13
    Иногда на сайте даже поиска простого нет, без него не удобно же!
    NatTi   28.03.2020 17:22
    Подскажите, как заставить клиентов писать отзывы в гугл и Яндекс?
    Kattyha   28.03.2020 17:31
    Можно, например, клиентам отправлять запрос на оценку услуг и после перенаправлять на гугл или яндекс отзывы
    Elena_Zhmurina   13.10.2021 17:59
    Именно так! Чтобы им самим не пришлось искать компанию в поисковике.
    Elena_Zhmurina   13.10.2021 17:58
    Заставить, конечно, не заставите, но часто они сами не против оставить отзыв, только забывают о такой возможности или не хотят заморачиваться и искать площадки, где это можно сделать.
    Напомните им и дайте ссылку на место, куда можно написать мнение. Для Яндекса и Гугла можно сделать такие ссылки, мы писали об этом в статье - https://pr-cy.ru/news/p/8774-kak-poluchit-bolshe-otzyvov--5-idey-gde-sobirat-otzyvy-klientov
    Tiki Mi   31.03.2020 15:50
    Самый лучший лайфхак- подсмотри у конкурентов и сделай еще лучше, все уже придумано и продумано!
    Elena_Zhmurina   13.10.2021 17:56
    Есть такое :) Наблюдай за тем, кто делает хорошо, и старайся делать еще лучше.
    К данной записи нельзя добавлять комментарии, т.к. она очень старая.
    Накрутка поведенческих факторов — за и против
    🍕 Юзабилити сайта — что это такое, примеры, самостоятельный анализ
    Факторы ранжирования Google 2024 — исследование Semrush