Оформление страницы «Контакты»: примеры, правила, советы - uGuide.ru

Оформление страницы «Контакты»: примеры, правила, советы

  • Обновлено:
    2017-08-05
  • Просмотры:
    635
  • Отзывы:
    2
  • Рейтинг: 9.6
Некоторые веб-мастера не до конца осознают значимость роли страницы «Контакты». Казалось бы, ну что там можно мудрить? Дизайн у сайта красивый, тексты написаны хорошо. Для порядка сделать контактную форму через почту – вот вам и обратная связь.
  • *С правильно оформленными контактами

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

Согласитесь, просто так на страницу контактов мало кто станет переходить. Если посетитель добрался до неё, то, считайте, он без 5 минут ваш клиент. Он уже всё посмотрел, взвесил, заинтересовался и хочет перейти к обсуждению/совершению сделки. Либо, наоборот, перешёл на сайт компании и сходу желает понять, с кем имеет дело. И от того, какую информацию получит и что увидит в этом «никому не нужном разделе», во многом будет зависеть его решение.

Почему же тогда столь важная страница на многих сайтах презентована столь убого? Жидкая форма для фидбека через почту и всё... Иногда же этой страницы вообще нет. О чём тогда вообще говорить? Подобную халатность со стороны разработчиков можно объяснить концентрацией сил при оформлении «Главной», «Услуги», «О нас» и прочих. Ну а «Контактам» достаётся то, что осталось от пыла веб-мастера.

По-хорошему, такая страница должна быть на всех сайтах без исключения. Где-то на ней получится разместить больше данных, где-то – меньше, но существовать она должна. Блог, интернет-магазин, сайт-визитка, форум, портал – не важно. Контактам быть!

Примеры оформления страницы контактов для сайта

Посмотрите 10 примеров как оформлены страницы контактов в конструкторе сайтов uKit (наш обзор). Во всех шаблонах структура верхнего блока продумана так, что посетитель сразу найдет любые ваши контакты и ему не придется искать их по всему сайту. А благодаря специальной микроразметке Яндекс и Google будут сами воспринимать все эти данные и отображать их на карте и в поисковой выдаче.

Пример-1: Танцевальная школа – Dancing Queen

Пример оформления страницы контактов сайта кафе Latte


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


Пример-2: Уютное кафе – Latte

Вариант оформления страницы с контактами для языковой школы Learn&Trav


Более стандартная, но не менее качественная реализация контактной страницы. Значки, цветная карта плюс ссылки на аккаунты в соцсервисах. Всё наглядно, ненавязчиво и красиво. Классика жанра.


Пример-3: Образование за рубежом – Learn&Travel

Страница контактов танцевальной школы Dancing Queen


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


Пример-4: Музыкальная школа – Music School

Music School - страницы с контактными данными


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


Пример-5: Здоровый образ жизни – YOGA


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


Пример-6: Сайт ведущего – Макс Ивент


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


Пример-7: Агентство путешествий – FLYAWAY


Здесь упор сделан на форму обратной связи. Она занимает значительную часть страницы, выполнена аккуратно и просто. Контактные данные ненавязчиво дублируются в шапке, а яркая полоска с заголовком стимулирует к действию, напоминая, зачем посетитель зашёл на эту страницу.


Пример-8: Органическая косметика – Buybeauty


Ещё одна компоновка с упором на предложение заказать обратный звонок. Всё понятно, информативно. Единственный нюанс – нижняя грань карты не соответствует по уровню кнопке. Между секциями «Call центр» и «Заказать звонок» можно просто убрать один пробел – он бросается в глаза.


Пример-9: Сельское хозяйство – Агродом


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


Пример-10: Единоборства – KARATE


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


О конструкторе сайтов uKit

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

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

С помощью инструментов всего за пару кликов можно подключить статистику от Яндекса или Google. А специальный индекс готовности сайта подскажет на что стоит обратить внимание прежде, чем начать продвижение. Также, uKit подходит для создания простого и удобного интернет-магазина. Все необходимые функции легко активируются в отдельном меню. Благодаря этому магазин будет готов к работе за считанные минуты.

Для работы с uKit не нужно никаких специальных знаний. Никакого кода и программирования – uKit прост в использовании и интуитивно понятен каждому.

Цены на тарифы uKit:

  • Премиум ($4/мес) – все необходимые возможности конструктора без рекламы;
  • Премиум+ ($8/мес) – расширенная статистика и неограниченный доступ к Премиум-шаблонам;
  • Магазин ($9.6/мес) – интернет-магазин с корзиной и оплатой на сайте. Триал 14 дней;
  • Про ($12/мес) – дополнительные творческие возможности и интеграция кода — для профессионалов.

Есть 14 дней бесплатный тестовый период. Сравнение тарифов https://ukit.com/ru/pricing.

Советуем использовать наш промокод для получения -25% скидки – UGUIDE-24 (активируется при оплате на 3+ месяцев).


Что должно быть в «Контактах»?

Сейчас мы перечислим варианты наполнения данной страницы, ориентированные на бизнес-сайт. Не всё здесь на 100% может понадобиться конкретно вам, но так мы постараемся дать полное представление о подходе к её оформлению. Итак, поехали:

  1. Вверху укажите название компании, сферу деятельности, а также выложите логотип (все приличные организации им владеют, усиливает доверие клиентов). Человек сразу должен понять, где он оказался. Некоторые люди сразу переходят в «Контакты», минуя основные разделы сайта. Они не должны почувствовать растерянность.
  2. Размещайте полный адрес предприятия, включающий индекс, а также номера корпусов и кабинетов.
  3. Оформите схему проезда к вашему офису. Это можно сделать посредством «Яндекс.Карт», к примеру. Желательно добавить фото здания и входа в офис, особенно если путь к последнему неочевиден. Кроме того, рекомендуем размещать 2 схемы проезда: для тех, кто добирается своим ходом, и автомобилистов.
  4. Не помешают данные для GPS-навигатора. Автомобилисты оценят заботу.
  5. Размещайте все телефонные номера, по которым к вам можно дозвониться. Напротив каждого номера обязательно указывайте имя/фамилию и должность специалиста. Пример: 999-999-999 - Александр Сергеевич, начальник рекламного отдела. Указывайте и мобильные, и городские номера. К последним не забудьте добавить код города.
  6. Обязательно дополните информацию альтернативными способами связи: Skype, ICQ, страницами в соцсетях. Последний пункт очень важен ввиду популярности таких сервисов. Можете даже установить возможность комментирования через «Вконтакте». Так потенциальные клиенты смогут оперативно задать вопрос, удобно авторизовавшись через ВК.
  7. Отдельно выделите адрес(а) электронной почты. Это общепринятый наравне со звонком способ деловой связи. Желательно сделать ссылки на e-mail активными.
  8. Весьма популярной фишкой в последние пару лет стала возможность заказа обратного звонка. Воспользуйтесь.
  9. Можете сделать форму обратной связи, но не делайте её слишком сложной: многим просто лень заполнять 100500 бессмысленных полей вроде размера ноги и любимого блюда. Имя/фамилия, телефон для перезвона, почта, текст письма – такого набора вполне достаточно в большинстве случаев. А вот для службы техподдержки, например, не помешает добавить сортировку по темам обращения.
  10. Не забывайте о версии карты проезда для распечатки. Оставьте её на видном месте.
  11. Имея кучу региональных представительств, нежелательно сливать все контакты в одну длинную простыню текста. Отсортируйте по городам.
  12. Если офисы имеют раздельные типы деятельности (для обслуживания физлиц и юрлиц), обозначьте и это.
  13. Укажите время работы офисов, если это может быть важно для ваших клиентов.
  14. Работаете с несколькими контрагентами? Значит, необходимо опубликовать банковские реквизиты.
  15. Пользователям мобильных устройств понравится наличие QR-кода с картой проезда.
  16. Не помешает информация о наличии парковки возле здания офиса. Водителям понравится такое проявление скрупулёзности с вашей стороны.
  17. Призыв к действию не помешает и на странице контактов. Кто сказал, что она не должна быть продающей? Фразы вроде «Звоните, у нашего секретаря приятный голос;)» или «Заходите в гости, у нас самые вкусные печеньки!» либо же посерьёзнее могут принести вам пользу. Ведь многие из нас не лишены чувства юмора.

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

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


Выводы

«Контакты» – не менее важная страница на сайте, чем какая-либо другая. Она должна быть оформлена отдельно, а ссылки на неё желательно разместить на каждой странице. Сделайте её подробной и удобно структурированной настолько, насколько это возможно. От её качества напрямую зависит КПД вашего сайта, если с остальными разделами всё хорошо. Не игнорируйте столь важный элемент. Если у вас еще нет своего сайта мы рекомендуем использовать заточенный под эту задачу конструктор сайтов. Как, например, uKit, где уже все предусмотрено изначально. Удачи!

  • Автор:

no avatar

Комментариев:2

bta45
vk
Карина Хрусталева • 14:14, 2015-05-19
Надо бы добавить "часы работы", тоже очень важно..  Ну и полное наименование организации (без сокращений) и банковские реквизиты еще часто указывают, открытые организации. И в адресе не забыть указать индекс.
 А так да, все правильно!
DeQiz
uid
Павел Новосёлов • 17:11, 2014-10-08
Статья то, что надо!))