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

Как оформить страницу «Контакты» на сайте ☎

Оформление страницы с контактами на сайте с примерами и влияние возможностей для обратной связи на SEO. Обновленный материал.

В статье:

  1. Какие задачи могут быть у страницы Контактов
  2. Какие элементы должны быть на странице с контактами
    1. Все способы связи с компанией
    2. Контакты разных отделов
    3. Физический адрес и филиалы
    4. Часы работы и время ожидания ответа
    5. Разные языки и возможности для связи
    6. Чат и контактная форма
    7. Ссылки на соцсети
  3. Где разместить страницу «Контакты» на сайте
    1. Поставьте ссылку в меню и футере
    2. Не прячьте в подразделы
    3. Дублируйте основное в шапке
    4. Не придумывайте оригинальное название

Каждая страница на сайте должна быть полезной. В блоге PR-CY уже есть статья о том, как правильно сделать страницу «О нас» и на что может влиять информация о компании. В основу статьи вошло исследование, которое провела компания «Nielsen Norman Group».

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

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

Какие задачи могут быть у страницы Контактов

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

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

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

Рекомендации на основе опроса участников исследования «Nielsen Norman Group», которые выполняли задания на сайтах разных компаний.

Все способы связи с компанией

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

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

Контакты разных отделов компании

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

Контакты разных отделов на сайте
Несколько вариантов для связи на сайте megagroup.ru

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

Оформление контактов на сайте СМИ
Контакты представителей разных подразделений на сайте adindex.ru

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

как оформить контакты на сайте
Список на сайте oxford-russia.ruразбит по филиалам

Физический адрес и филиалы

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

Анимационная студия redmedusa.ru к креативно оформила контакты: страница оригинальная, но все нужные элементы есть:

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

как оформить адреса филиалов на сайте
Список магазинов с контактами и временем работы на сайте zoosfera-nn.ru

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

Интерактивная карта филиалов на сайте
Фильтр отделений pochtabank.ru

Часто пользователи делают запросы так, чтобы найти специалиста в определенном районе города или улице — «пицца на Автозаводе», «парикмахер площадь Горького». Адрес компании и регистрация в сервисах Google и Яндекс повысит шансы, что клиенты найдут вас в локальном поиске. Если у компании нет физического адреса, укажите хотя бы город.

Часы работы и время ожидания ответа

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

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

Оформление контактов на сайте
Контакты с указаниями отделов и временем работы на сайте dogeat.ru

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

Оформление способов связи на сайте
Отметка о режиме работы на сайте megagroup.ru

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

Разные языки и возможности для связи

Если вы работаете с многоязычной аудиторией и у вас много клиентов-иностранцев, укажите это для номера телефона.

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

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

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

Контакты на сайте
Номер для звонков по видеофону на сайте sba.gov

Чат и контактная форма

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

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

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

Чат-бот на сайте
Чат с ботом на сайте skyeng.ru

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

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

  • окно «Напишите нам», где обязательно оставить телефон и email;
  • кнопку «Хочу сайт», по которой открывается заказ обратного звонка, нужен только телефон;
  • кнопку «Спросить консультанта», по которой открывается чат, и там уже есть несколько сообщений о том, что можно оставить телефон, заявку, написать в мессенджер или пообщаться в этом чате;
  • иконку, по клику на которую появляются иконки Whatsapp и Telegram;
  • кнопку «Заказать сайт» в шапке страницы, которая отправляет пользователя на отдельную страницу заказа звонка.

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

«Мне не нравится, что я должен заполнять эту форму. Всё, что я хочу сделать — это просто поговорить с ними. Я ненавижу, когда после перехода по ссылке должен предоставить кучу информации».
Форма для вопросов на сайте
Единственный способ связи на сайте Slack.com

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

Одна из участниц исследования разозлилась, когда ей пришлось вводить электронную почту и регистрировать аккаунт только ради того, чтобы связаться с Adobe:

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

Ссылки на соцсети

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

Нужно оставить способ связи через телефон или почту для тех, кто не хочет общаться в соцсетях и мессенджерах, или у кого нет там аккаунтов. К примеру, на странице «UBreakIFix» есть несколько вариантов связи, в числе которых и соцсети.

Как оформить страницу контакты на сайте
Возможности связаться с компанией на сайте UBreakIFix.com

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

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

Для контактных данных есть микроразметка контактов по Schema.org, пример в Microdata:

<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Название организации</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Город</span>
<span itemprop="streetAddress">Адрес организации</span>
</div>
<span itemprop="telephone">Контактный номер телефона</span>,
<span itemprop="email">Адрес электронной почты</span>
</div>

Разберем, где и каким образом указывать контакты, чтобы пользователи их легко нашли.

Где разместить страницу Контакты на сайте

Поставьте ссылку в меню и футер

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

Как сделать футер на сайте полезным для SEO и юзабилити

Не прячьте контакты в подразделах

Исследователи не рекомендуют делать страницу с контактами подтемой какого-то раздела. К примеру, один пользователь потратил много времени на поиски контактной информации, а она оказалась скрыта в раскрывающемся меню под ссылкой «О нас» . Пользователь нашел ссылку, но отметил:

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

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

Дублируйте главный способ связи в шапке

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

Куда поставить номер телефона на сайте
Номер телефона продублирован в шапке сайта sfm-nn.ru

Не придумывайте оригинальное название

Многие компании стараются назвать страницу с контактами как-то по-особенному — «Справочный центр», «Ресурсы» или как-то еще. Пользователи привыкли к тому, что страница называется «Контакты» или «Связаться с нами», поэтому искали ссылку с похожим анкором. Оригинальные названия могут быть не очевидными для пользователей.


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

Указывайте те контакты, которые можете обслуживать, и не заменяйте их автоматизированными формами или чатом.

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

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

Комментарии (14)
Вот вроде бы все гениальное просто... а еще можно для мобильных версий такую же инструкцию? а то иногда открываешь и выскакивает "оставьте контакты", а что за сайт непонятно
Elena_Zhmurina   11.09.2019 12:18
Спасибо за идею! Насчет мобильных версий будем думать, возможно, добавим информацию в эту статью.
Xenial   11.09.2019 16:19
Можно еще отметить, что страница с контактами должна легко распечатываться и копироваться, так как иногда защита на сайте не позволяет быстро перенести контактную информацию для набора в телефон или отправки на почту вопроса какого-либо...
Elena_Zhmurina   11.09.2019 19:10
Интересное наблюдение) Вы про защиту текста от копирования или какая еще может мешать скопировать телефон-почту?
Xenial   12.09.2019 04:19
Да, скорее всего стоит защита от копирования, но согласитесь это же не удобно когда хочешь скопировать эл.почту,а сайт не дает этого сделать и приходиться переписывать или телефон также
Elena_Zhmurina   12.09.2019 08:13
Соглашусь, это очень неудобно. И защита от копирования в принципе не делает пользователям работу с сайтом удобнее, а уж воришки контента найдут способ скопировать текст.
mitryimc   28.02.2023 11:37
Email блокируют, чтобы спаме при парсинге не могли собрать. Но эффективность такой защиты под сомнением.
Да и, возможно, не всегда это в пользу: потенциальных клиентов на сайте больше, чем парсеров
Elena_Zhmurina   28.02.2023 17:54
Согласна полностью, даже если спарсят, то терять клиентов из-за этого не стоит.
Kirill_Chekin   12.09.2019 15:58
А еще хотелось добавить, что некоторые добавляют ярлыки вк, фб, инсту, но не для того чтобы показать, что они есть в соцсетях, а чтобы посетитель поделился их компанией с друзьями. То есть, ты думаешь, что сейчас перейдешь в группу и возможно там напишешь им, а оказывается их там нет. Кто-то с таким сталкивался?
Elena_Zhmurina   13.09.2019 09:44
Регулярно такое встречаю на сайтах. На мой взгляд, лучше оформить кнопки "Поделиться" по-другому, чтобы они не воспринимались как кнопки для перехода в группы. Подписать "Поделиться", например)
mitryimc   28.02.2023 11:38
Скорее всего, это такой шаблон сайта. Сам разработчик шаблона затупил, а пользователи не могу отредактировать это
Elena_Zhmurina   06.03.2023 02:13
Да, странно, что это не проверяют. Наверное, воспринимают как должное)
bratoz   06.03.2023 03:21
PR-CY конечно крутейший портал стал, но бл$ть почему нет ЗАКЛАДОК для статей мать его!!!))))))))
Я уже задолбался создавать отдельные папки под ваши статьи! ДОБАВЬТЕ ЗАКЛАДКИ(избранное).

УМОЛЯЮ! Вы просто лучший проект на земле из всех для вебмастеров)
Elena_Zhmurina   06.03.2023 13:57
Какой хороший комментарий, очень приятно, спасибо!)) Закладки — крутая идея, передали разработчикам.
К данной записи нельзя добавлять комментарии, т.к. она очень старая.
🍕 Юзабилити сайта — что это такое, примеры, самостоятельный анализ
🔥 Внутренняя оптимизация сайта — большой гайд по самостоятельной проверке
Не картинками едиными: как оформить статью на сайте, чтобы ее прочитали