Агентство интернет-маркетинга полного цикла в Москве сайты
реклама
seo
[email protected]
Главная›Блог›Дизайн и юзабилити›Как оформить страницу контактов

Как оформить страницу контактов

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

Дизайн и юзабилитиВремя чтения ≈ 8 минАвтор: редакция КомРА
ДИЗАЙН И ЮЗАБИЛИТИ

Зачем отдельно продумывать страницу контактов

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

У посетителя страницы контактов обычно одна из нескольких задач:

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

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

Что обязательно должно быть на странице

Состав зависит от бизнеса, но есть базовый набор, без которого страница не выполняет свою функцию.

  1. Телефон. Основной номер крупно и заметно. Если есть несколько номеров — с подписями, куда каждый ведёт: «Отдел продаж», «Сервис», «Бухгалтерия».
  2. Мессенджеры. Многие предпочитают написать, а не позвонить. Кнопки, которые сразу открывают чат в Telegram или другом популярном мессенджере, снимают барьер.
  3. Электронная почта. Для запросов, документов, коммерческих предложений. Если отделов несколько — несколько адресов с подписями.
  4. Адрес. Полный и точный, включая корпус, строение, этаж и номер офиса, если они есть.
  5. Режим работы. Дни и часы, обеденный перерыв, работа в выходные и праздники. Отдельно — если режим офиса и режим приёма звонков различаются.
  6. Карта. Интерактивная, с меткой точно на нужном входе, а не просто на здании.
  7. Форма обратной связи. Для тех, кому удобнее оставить вопрос и дождаться ответа.
  8. Реквизиты. Полное наименование юрлица и основные реквизиты — повышают доверие и нужны корпоративным клиентам. Их можно разместить ниже основной информации или в раскрывающемся блоке.

Важно, чтобы самые нужные данные — телефон, мессенджеры, адрес, режим работы — были видны сразу, на первом экране, без прокрутки.

Как помочь посетителю добраться

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

Подробная схема проезда. Опишите словами, как добраться:

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

Ориентиры. «Вход со двора, синяя дверь рядом с аптекой», «третий этаж, после лифта налево» — такие детали экономят клиенту нервы, а вашему администратору — звонки с вопросами «где вы находитесь».

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

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

Пропускной режим. Если в бизнес-центр нужен пропуск, напишите, как его заказать и что взять с собой.

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

Карта: как подключить и оформить

Карта — привычный элемент страницы контактов, но и в нём есть нюансы.

  • Используйте интерактивную карту, а не скриншот. Интерактивную можно увеличить, построить маршрут, открыть в приложении на телефоне.
  • Точная метка. Метка должна указывать на вход, а не на центр большого здания или квартала. Для крупных объектов с несколькими входами это особенно важно.
  • Кнопка «Построить маршрут». На мобильных она открывает навигационное приложение — это одно из самых полезных действий на странице.
  • Карточка организации. Убедитесь, что ваша компания добавлена в Яндекс Бизнес и Google Business Profile с теми же адресом, телефоном и часами работы, что и на сайте. Расхождения путают людей и снижают доверие поисковых систем.
  • Не перекрывайте прокрутку. На телефоне карта на всю ширину экрана может «перехватывать» жест прокрутки, и человек не может пролистать страницу дальше. Лучше сделать карту ограниченной высоты или активировать её по нажатию.
  • Скорость. Скрипты карт довольно тяжёлые. Если карта в нижней части страницы, её можно подгружать при прокрутке.

Если офисов или филиалов несколько

Для компаний с несколькими точками страница контактов требует особой структуры.

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

Общая карта со всеми точками. Удобно, чтобы найти ближайший филиал. При клике на метку — карточка с адресом, телефоном и режимом работы.

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

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

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

Форма обратной связи на странице контактов

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

  • Минимум полей. Имя, телефон или почта, сообщение. Всё остальное — по необходимости. Каждое лишнее поле снижает число отправок.
  • Выбор темы обращения, если вопросы идут в разные отделы: «Новый заказ», «Сервис», «Сотрудничество», «Вакансии». Это помогает быстрее направить обращение нужному человеку.
  • Понятное подтверждение. После отправки — сообщение, что обращение получено, и когда ждать ответа.
  • Согласие на обработку персональных данных со ссылкой на политику — это требование закона.
  • Защита от спама, которая не мучает людей: невидимые проверки лучше сложных капч.

Отправленные через форму обращения стоит отслеживать в Яндекс Метрике как цель. Так вы поймёте, сколько людей связывается через сайт и какие страницы к этому приводят.

Оформление: ясность важнее креатива

Страница контактов — не место для дизайнерских экспериментов. Здесь главное — быстро найти информацию.

Чёткая иерархия. Телефон и мессенджеры — самые заметные. Затем адрес и режим работы. Затем карта. Затем почта, форма, реквизиты.

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

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

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

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

Доверие и техническая сторона

Что ещё может усилить доверие

Страница контактов часто становится последней проверкой перед обращением. Несколько элементов могут усилить доверие:

  • фото офиса, шоурума или производства — подтверждают, что компания реальна;
  • фото и имена ключевых сотрудников с прямыми контактами — для сложных B2B-продаж, где важно знать, с кем вы будете работать;
  • реквизиты юрлица — корпоративные клиенты часто проверяют их перед сделкой;
  • ссылки на профили в соцсетях и Telegram-канал — показывают, что компания живая и активная;
  • время ответа — «Отвечаем в мессенджерах в течение часа в рабочее время».

Мы в КомРА при разработке сайтов обычно делаем страницу контактов с крупными кликабельными кнопками связи на первом экране, подробной схемой проезда и микроразметкой организации — это помогает поисковым системам правильно понимать контактные данные.

Технические детали и SEO

  • Микроразметка. Разметка организации с адресом, телефоном и часами работы помогает поисковым системам точно понимать контактную информацию.
  • Единообразие. Название, адрес и телефон должны совпадать на сайте, в картах, справочниках и соцсетях. Расхождения запутывают пользователей и поисковики.
  • Контакты в шапке и подвале. Страница контактов не отменяет необходимости показывать телефон и мессенджеры на каждой странице сайта.
  • Регион в Вебмастере. Укажите регион сайта и свяжите его с карточкой организации в Яндекс Бизнесе — это важно для локального продвижения.
  • Коллтрекинг. Если вы используете подменные номера для анализа рекламы, проверьте, что основной номер остаётся в микроразметке и в справочниках неизменным.

Типичные ошибки

  • Только форма, без телефона. Многие хотят позвонить сейчас, а не ждать ответа на форму.
  • Устаревшая информация. Старый адрес, выключенный номер, неверный режим работы — подрывают доверие сильнее, чем отсутствие информации.
  • Неточная метка на карте. Особенно в крупных бизнес-центрах и торговых комплексах.
  • Нет режима работы. Человек приезжает, а офис закрыт.
  • Некликабельные контакты на мобильном. Номер приходится переписывать вручную.
  • Карта на весь экран, которая мешает прокрутке.
  • Отсутствие подсказок. Адрес есть, а как найти вход — нет.

Итог

Страница контактов — финальная точка пути клиента к компании. Здесь нельзя заставлять человека думать и искать.

Коротко о главном:

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

Чем проще с вами связаться, тем чаще с вами связываются. Это, пожалуй, самое прямое правило во всём веб-дизайне.

‹ Кнопки и призывы к действию: правила оформленияФирменный стиль на сайте: логотип, цвета, элементы ›

Ещё по теме «Дизайн и юзабилити»

Другие материалы этой рубрики

ДИЗАЙН И ЮЗАБИЛИТИ
Дизайн и юзабилити

Фирменный стиль на сайте: логотип, цвета, элементы

Фирменный стиль помогает узнавать компанию среди десятков похожих. Но правила, придуманные для визиток и вывесок, не всегда хорошо работают на экране. Разбираемся, как…

Чтение ≈ 8 мин · Читать статью
ДИЗАЙН И ЮЗАБИЛИТИ
Дизайн и юзабилити

Первый экран сайта: что должен увидеть посетитель

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

Чтение ≈ 7 мин · Читать статью
ДИЗАЙН И ЮЗАБИЛИТИ
Дизайн и юзабилити

Типографика на сайте: шрифты, размеры, интервалы

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

Чтение ≈ 8 мин · Читать статью
Обсудим ваш проект

Напишите нам — подготовим план и оценку

Расскажите о задаче в двух словах: что продаёте, есть ли сайт, какой нужен результат. Мы изучим нишу и конкурентов, предложим решение и назовём стоимость по этапам. Консультация и предварительная оценка — бесплатно.

  • Ответ в течение рабочего дня
  • Договор и оплата по этапам
  • Отчёты понятным языком

Или пишите напрямую: [email protected]

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

Спасибо! Заявка отправлена — мы свяжемся с вами по e-mail.