Страница контактов на сайте — пример оформления
- Примеры по страницам, как сделать лучше
- 3 минуты на чтение, изложено просто и доступно
- Самые простые шаги, о которых вы не догадывались
Павел, руководитель компании
вопросы:
После того, как вы сделаете страницу контактов- правильно. Доверие к сайту сильно возрастет. Откуда я это знаю? Мы уже применяем эти знания на страницах наших клиентов
Примеры правильных страниц контактов
Большинство web-мастеров недооценивают значение страницы контактов: они интегрируют на сайт сложные формы обратной связи, указывают в реквизитах неполные либо недостоверные сведения (неверный e-mail, неактуальный телефон). Это сильно раздражает пользователей, желающих легко и быстро связаться с владельцем портала.
Чтобы не накликать гнев своих потенциальных покупателей или клиентов, а напротив, создать благоприятный имидж и вызвать у них доверие, нужно знать маленькие хитрости и соблюдать простые правила, о которых я расскажу ниже.
Каким должен быть стиль страницы контактов?
Общие требования к дизайну страницы: дружественный стиль и копирование цветовой гаммы основного бренда.
То есть страница контактов должна привлекать, манить пользователя воспользоваться одним из средств обратной связи. И в то же время, она не должна вызывать диссонанс с цветовой палитрой нашего бренда.
Если эмблема сайта сочетает синий и белый тона, то оформление страницы контактов в красный и желтый цвета будет большой ошибкой.
Ассоциативное противоречие вызовет у посетителя ощущение, что он попал на другой сайт, а ведь он уже «доверился» (зашел на портал, прочитал и пролистал несколько страниц) основному бренду.
Кроме того, исследования показали, что посетители сайта просматривают информацию по шаблону «F». То есть, они ожидают увидеть самую ценную и интересную информацию в левой верхней части страницы. По мере пролистывания сайта вниз, внимание и концентрация пользователя падают, и если он не увидит в желаемом месте полезной информации, то разочаруется и покинет сайт.
Поэтому закрепляем важные сведения (e-mail, телефон, адрес и другие контакты компании) в левой верхней части портала.
Интерактивные карты и виджеты можно отодвинуть в правую часть страницы: они сильно привлекают внимание пользователя, поэтому нет смысла выискивать для них выгодное место.
Основная тенденция в развитии стиля страниц контактов: больше творчества и меньше лишних объектов. Но как определить, где лишняя информация, а где необходимая? Рассмотрим ниже.
Что еще полезно знать по продвижению сайтов
Что обязательно должно присутствовать на контактной странице?
По общему правилу, чем серьезнее вы хотите представить себя перед потенциальными клиентами, тем больше контактных данных и сведений о компании необходимо предоставить.
Изложу свою мысль в таблице.
| Тип сайта | Что должно быть на странице контактов | Почему эти реквизиты должны быть на странице контактов |
|---|---|---|
| Блог или информационный сайт | 1. E-mail 2. Форма обратной связи 3. Skype, ICQ или что-то подобное | Люди часто хотят связаться с автором сайта, чтобы поблагодарить его за изложенный материал, высказать конструктивную (и не очень) критику. Но из-за обилия Интернет троллей блогеру не стоит рассказывать всем свой номер телефона и схему проезда к дому матери. |
| Интернет магазин | 1. E-mail 2. Форма обратной связи 3. Номер телефона 4. Ссылка на группу в социальных сетях | Очень важно указать работающий телефон фирмы. У покупателей часто возникают вопросы о свойствах товара, способах оплаты и доставки. Вообще, мало кто готов перечислять куда-либо деньги без выяснения всех деталей операции. Группа в социальных сетях – тренд современных интернет магазинов, поэтому поделиться ссылкой с читателями будет неплохой мыслью. |
| Корпоративный сайт или оффлайн магазин | 1. E-mail 2. Форма обратной связи 3. Номер телефона 4. Адрес 5. Схема проезда 6. Часы работы 7. Реквизиты фирмы | Здесь важен адрес и то, как добраться до компании. Нет ничего хуже ситуации, когда человек захотел посетить магазин, но не нашел его территориально из-за недостатка сведений. Также необходимо указать часы работы фирмы, чтобы избежать неприятных ситуаций с поздними посетителями. Работающий телефон (а лучше несколько) будет ключевым контактом компании. Ведь прежде чем куда-либо ехать человек хочет уточнить наличие товара и услуги, их стоимость и характеристики. |
Особое внимание следует уделить форме обратной связи, как мы видим, она присутствует во всех типах сайтов. Контактная форма должна быть ненавязчивой и дружелюбной.
Согласно исследованиям, пользователи более охотно заполняют короткие формы с малым количеством обязательной информации. Поэтому лучше всего ограничиться полями «Имя», «E-mail» и «Сообщение». Поля должны располагаться вертикально, чтобы не распылять взгляд посетителя сайта.
После отправки сообщения должно высветиться уведомление о доставке либо об ошибке. Сообщение об ошибке должно быть максимально дружественным и понятным, а информация, набранная пользователем должна сохраняться в указанных полях. Для этого уведомление об ошибке должно выводиться без перезагрузки страницы. После успешной отправки сообщения желательно прислать письмо на электронную почту пользователя.
Поисковая оптимизация страницы контактов
Люди могут быстро найти на сайте страницу контактов, чего не скажешь о поисковых машинах. Если не выделить контактную информацию должным образом, поисковик проиндексирует ее как обычный текст.
Размечаем контакты, применив структурированные данные, то есть даем поисковым системам базовую информацию о содержании страницы. Для этого используем команды HTML кода.
Также можно обернуть блок информации о местоположении компании в элемент Address. Таким образом, поисковик определит блок как адресные реквизиты фирмы.
Обращаем особое внимание на оформление разделов Title и Description страницы. В теге заглавия указываем слова «Контакты» и название фирмы либо бренда. Получится что-то вроде:
<title>Компания «Лучшая фирма» — Контакты</title>
В описании можно добавить фразы «Как с нами связаться», «Способы связи» и т.п., а также ключевые слова сайта. Таким образом, поисковая машина проиндексирует страницу не только по словам «контакты» и «способы связи», но и по ключевым запросам, продвигаемым на сайте.
Как повысить юзабилити страницы контактов
Делаем страницу интерактивной. Для этого добавляем возможности, облегчающие читателю пользование сайтом.
Mailto
Создаем возможность отправить сообщение по электронной почте в один клик. Для этого добавляем к нашему E-mail атрибут Mailto. Чтобы спам-боты не собирали контактные данные с сайта, запутываем их с помощью специальной программы, например mailtoencoder.com.
Карта
Если в реквизитах указан адрес, то необходимо интегрировать на сайт виджет Яндекс Карты либо GoogleMaps. Тем более что для этого не нужно прилагать много усилий: достаточно вставить HTML код, который можно взять с одного из указанных сайтов.
Виджет Яндекс Карты позволяет редактировать описание объекта и цвета карты, создавать пользовательские указатели и добавлять легенду к таким указателям. В общем, адаптировать карту под нужды своего бизнеса.
Но не обязательно останавливаться лишь на этих двух сервисах: есть очень интересные альтернативные программы вроде Mapbox.
Телефон и Skype
Для людей, посещающих сайт с мобильного телефона, очень полезна возможность позвонить по указанному номеру в одно нажатие. Это избавляет пользователей от необходимости копировать либо запоминать лишние для них цифры и символы.
Для того чтобы сделать реквизит чувствительным к нажатию, оборачиваем номер телефона или ник Скайпа атрибутом tel.
Виджеты, инфографика и полезное творчество
Некоторые сайты достаточно удачно сочетают на странице контактов дополнительные элементы. Это может быть всплывающее окно либо иной скрипт, или же изображение с интересной информацией (например, статистикой запросов в контактную форму).
Главное — помнить, что дополнительные скрипты, особенно java элементы нагружают страницу и понижают производительность аппаратной составляющей. Поэтому с интерактивными объектами лучше работать в меру.
Методы повышения лояльности к сайту
У меня есть несколько универсальных советов, которые позволят улучшить страницу контактов и вызвать доверие у потенциальных клиентов:
1. Очень важно, чтобы посетители могли легко найти страницу контактов. Поэтому закрепляем ссылку на страницу в верхнем меню, а также добавляем основные реквизиты в нижний колонтитул. Помним, что пользователи ищут контактную информацию в правой части сайта, поэтому адаптируем верстку под эту особенность.
2. Вставляем на страничку контактов фирменную эмблему либо логотип компании. Это создаст подсознательную ассоциацию бренда с определенными реквизитами.
3. Все контакты указываем в текстовом виде, чтобы пользователю было удобно скопировать данные.
4. Закрепляем в видном месте кнопку «Версия для печати», в которой формируем основные данные: название компании, адрес, телефон и E-mail.
5. Если компания большая, то указываем на странице контактов, какие услуги посетитель может получить в каждом отделе. То есть, телефон Х – для юридических лиц, а телефон У – для частных клиентов.
6. Если у вас много территориальных отделений, то даем пользователю возможность быстро переходить на нужный регион. Длинные списки с большим объемом информации распыляют внимание читателя, поэтому их лучше избегать.
7. Регистрируем компанию в Яндекс Справочнике. Таким образом мы не только добавим фирму в известный каталог, повысив узнаваемость сайта, но и получим возможность делиться ссылкой на персональную страничку компании в справочнике.
8. Размещаем фото фасада здания. Если до фирмы трудно добраться, детально описываем ориентиры и выкладываем их фотографии на странице контактов.
9. Указываем под каждым номером телефона и ником Скайпа Ф.И.О. контактного лица.
10. Размещаем на контактной странице QR-код. Идите в ногу со временем и добавьте на свой портал новый тренд Интернет технологий. Сгенерировать QR-код можно на специальном сервисе.
Итог
Страницы контактов – важный атрибут любого сайта.
Пользователь должен иметь возможность не только легко найти страницу контактов на сайте, но и быстро и удобно связаться с владельцем ресурса.
Постарайтесь не просто изложить на странице контактов полную и исчерпывающую информацию о себе, но и позаботиться о точности и актуальности реквизитов. Не размещайте контакты, которые у вас нет возможности своевременно проверять.
Добавляйте интерактивные элементы, чтобы повысить юзабилити страницы, но не забывайте, что массивные программы могут отразиться на производительности, сыграв с сайтом плохую шутку.
Андреев Павел.
Руководитель компании
Мой опыт с 2002 года и я уже помог повысить продажи 100+ компаниям. Оценю эффективность работы ваших исполнителей и дам предложения как повысить продажи — ЭТО БЕСПЛАТНО!!
121
Привет, друзья и просто интересующиеся как увеличить конверсию своего сайта. В предыдушей статье Как оформить страницу Контакты. Часть 1 я начал рассказывать собственно по теме статьи, но за один присест не осилил.
Почему? Просто потому, что просто только кошки родятся. А как только начинаешь заниматься любым делом серьезно, то выяснятся, что нюансов тьма. Можно конечно махнуть рукой. Типа «и так сойдет».
Сойдет-то оно может быть и сойдет, но только в том случае, если у вас нет более прилежного конкурента. Конкурента который тщательно или даже не побоюсь этого слова — скрупулезно — подойдет к вопросу работы над своим сайтом. Он применит к нему всё, что применили вы и еще сверх того. Может быть сильно больше сверх того.
Догадываетесь, какой будет результат при прочих равных? Правильно — ваши потенциальные клиенты станут его реальными клиентами. А вы будете в растерянных чувствах заливать и заливать деньги на Яндекс.Директ. С предсказуемым результатом. Грустным.
Ну вот, чувствую нужный настрой задан и вы готовы с прежним рвением и прилежностью изучать все возможные моменты, как сделать из своего сайта суперпродавца.
Двигаемся дальше по офомрлению страницы Контакты. Осталось немного и она станет соответствовать лучшим маркетинговым стандартам. В этой же статье затрону вопрос о так называемом Блоке Контактов. Еще в самом конце сделаю упор на том, что не стоит делать на своей странице Контактов. Пусть даже вам советуют «гуру» и «гурята». Поехали…
17. Если вы работаете только по безналу, разместите ваши банковские реквизиты. Но настоятельно не советую делать это, если вы принимаете оплату еще и другими способами – наличными, пластик, интернет-кошельки, прямые переводы.
Почему? Догадайтесь сами. Уже догадались? Молодцы!
18. Оригинально выглядит и будет полезным, если вы укажете сколько времени осталось до закрытия вашей офлайновой точки. Например:
Время работы с 9.00 до 18.00
Приезжайте к нам! До конца рабочего дня осталось 4 часа 23 минуты 36 секунд.
Есть соответствующие скрипты, которые по типу обратного таймера отсчитывают время до закрытия и отображают его.
19. Сейчас в крупных городах все больше становится проблем с парковкой. Поэтому успокаивайте клиентов на этот счет. Как можете. Пишите о возможности парковки непосредственно около/внутри здания + рекомендации где могут быть места. Например:
Около здания большая бесплатная парковка.
Свободные места — есть почти всегда!
Вот только обманывать не нужно. Если около вашего здания машины стоят как сардины в банке круглый день, то лучше совсем не пишите о парковке. Иначе получите обратную реакцию. Люди не любят, когда их водят за нос.
20. Насчет формы обратной связи. Есть сомнения у меня, что ее обязательно нужно применять в оформлении страницы Контакы. Если хотите ее себе поставить – ставьте, но:
- решите со своим вебмастером вопрос (или, если вы достаточно компетентны в вэб-программировании – сами) о том, чтобы в форме отсутствовала капча, но спам обрезался. На самом деле для разных CMSесть соответствующие решения и все приводить их в этой статье просто бессмысленно. Любой ценой убирайте капчу! Не раздражайте потенциального клиента,
- не «насовывайте» полей в форму. Хватит «Ваш email» и «содержание». Каждое дополнительное поле примерно на половину уменьшает желание вообще начинать заполнение формы.
Капчи нет, но это без разницы. Полей столько, что заполнять эту форму будут только люди маниакального склада.
21. Активно продвигаетесь через социальные сети? У вас есть свои группы в каких-то сетях? Не забудьте поставить кнопки перехода на эти соцсети на странице Контакты. Подпишите «Мы в соцсетях».
22. Очень кстати будет кнопка «Распечатать», кликнув по которой потенциальный клиент попадает на страницу, оптимизированную для печати. То есть на ней отсутствуют шапка, меню, футер, а также все колонки, кроме основной, в которой содержится контактная информация.
23. Укажите адрес сайта в Яндекс.Справочнике. Тогда при выдаче на поиске в сниппете вашего сайта будет стоять ссылка на местоположение офиса на Яндекс.Картах.
24. Используйте дополнительную разметку Schema.org. Это позволит поисковому роботу корректно отобразить адресные данные в сниппете, что увеличит конверсию переходов из поисковика на ваш сайт.
25. Не забывайте про SEO. Обязательно заполните теги title, description и keywords. С title аккуратнее. Лучше просто написать «Контакты». Желательно еще добавить название вашей организации. Это соединение «Контакты+название» будет ключевым словом этой страницы. Проследите, чтобы в метатег описание (description) ключевые слова были включены. Ну и, разумеется в keywords.
26. Поисковики любят наличие на страницах:
- заголовки,
- списки,
- картинки/фото,
- видео,
- таблицы.
Уже поняли идею? Применяйту к соответствующим блокам информации заголовки уровня h3. Например, «Отделы», «Схема проезда», «Адрес», «Филиалы», «Дилеры».
Про видео смотрите пункт 16 здесь .
У вас есть дилеры, отделения, представительства. Попробуйте применить к ним оформление СПИСКИ.
Таблицы будут уместны, если у вашей офлайн-точки хотя бы немного разные расписания работы в будние и выходные дни. Кто мешает сделать что-то вроде:
???
27. Все разместили? Посмотрели как это выглядит с точки зрения дизайна? Не нравится? Обратитесь к профессиональному дизайнеру или попробуйте доработать сами. Первое предпочтительнее. Один совет – не упирайтесь в дизайн как в панацею. В статье Дизайн сайта и слайдер для сайта – деньги на ветер я подробно, с привлечением статистики, данных исследований показал, что дизайн для клиента далеко не на первом месте, когда он принимает решение о покупке. Но и оставлять на странице «непричесанную» чудовищную мешанину не стоит. Соблюдите меру, «золотую середину». Просто все должно выглядеть аккуратно, систематизировано, читабельно. Этого будет достаточно.
По странице Контакты мы разобрались со всеми пунктами, но тема будет не до конца раскрыта, если я не упомяну про
БЛОК «КОНТАКТЫ»
Неужели вы думаете, что раз есть страница Контакты, то все клиенты радостно кинутся туда узнавать ваши телефоны и адрес? Нет, конечно, часть туда заглянет. Но много людей почему-то вовсе не стремятся искать по сайту ваш телефон или адрес… только если он у них не прямо «под носом».
Я имею в виду специальный блок контактов, который должен быть всегда перед глазами. Лучше – в шапке.
Основное правило контактов – они должны быть доступны потенциальному клиенту на любой странице сайта. Поэтому самым правильным и классическим решением будет вынос небольшого блока с контактными данным (далее «блок контактов»=БК) в header (шапку) сайта. Например.
Какие правила должны быть соблюдены при размещении БК:
- Блок контактов должен быть вписан в шапку дизайнерски правильно. То есть не смотреться дико, чужеродным элементом.
- Информация в блоке контактов должна быть понятной, хорошо различимой, легко воспринимаемой.
- В блоке контактов должны обязательно быть телефон и e-mail. Остальные элементы контактов – skype, дополнительные телефоны – по возможности и по специфике.
- Не стоит указывать в блоке контактов почтовый и фактический адрес, пытаться впихнуть в него модуль «Заказать обратный звонок», более одного e-mail.
- В блоке контактов должен содержаться призыв к действию. Например, самый очевидный: «Звоните».
- Если ваша служба приема звонков не круглосуточная, то по возможности указать время, когда есть смысл звонить. Например: «Звоните с 08.00 до 20.00 (время моск).» Или «Круглосуточно и без выходных»
- Следует отдавать предпочтение городским телефонным номерам перед мобильными. В крайнем случае, если у вас есть возможность взять мобильный номер с коротким городским вариантом набора, то размещайте его.
- Идеальный вариант — номер 8-800…
- При указании городского номера обязательно указание кода города.
Теперь давайте посмотрим на эту шапку (вчера искал ввертные петли для дверей и осталась открыта вкладка, то есть беру практически первый попавшийся сайт) и разберем все ошибки блока контактов, присутствующего на ней:
- Он есть. Это хорошо.
- Он не вписан в дизайн.
- Отсутствует майл. Есть категория клиентов-интровертов, которые 10 раз напишут, чем 1 раз позвонят. Не забываем про них.
- В блоке контактов не указан призыв к действию (ЗВОНИТЕ) и время работы call-центра.
И напоследок о том,
Что не нужно делать на странице Контакты, но советуют делать некоторые «чудо-советчики».
- Не стоит в Контактах указывать чем вы занимаетесь. Во-первых, вы это должны были указать в шапке. Во-вторых, подробно расписать в разделе «О нас» или «Обо мне», или «О компании». Раздел Контакты должен быть про контакты. Человек заходит туда, когда хочет с вами связаться, а не для того, чтобы узнать, чем вы занимаетесь.
- Нет смысла указывать координаты для GPS-навигатора. Это вообще какой-то жуткий бред. Это может иметь смысл только в том случае, если ваш офис находится в голом поле или лесу. Без всякого адреса – улицы и дома. Где они берут такой совет (ведь не сами же выдумали — скопипастили откуда-то), ума не приложу.
- Рекомендуют разместить на странице Контакты кнопку «Закажите обратный звонок». Еще одна ерунда. Эту функцию нужно ставить либо в шапке сайта, либо в выдвижной закладке справа или слева. То есть так, чтобы эта возможность была доступна С ЛЮБОЙ страницы сайта.
- Размещать на странице Контакты QR-код с картой проезда. Очередная чепуха. В реальной жизни QR-коды применяются либо в офлайне для быстрого захода на ваш сайт через мобильное устройство, либо в онлайне для быстрого перехода на магазины с мобильными приложениями типа GoogleAppsили Appstore.
Хотите узнать, как лично вы можете применить QR-код в вашем бизнесе? Вот моя статья Сделайте себе сами визитки с barcode за 3 минуты - Советуют добавлять какой-нибудь юморок. Если ваш сайт – филиал Камеди-Клаба, то согласен. Но если у вас серьезный бизнес, то с юмором лучше не шутить. У всех разное понимание смешного. Кому-то юмор может показаться не смешным, натужным, неудачным. Кому-то из клиентов вообще покажется неуместным делать предоплату клоунам. Вообще иметь с ними серьезные дела. Словом не нужно пытаться подражать «Уральским пельменям». Разве только в том случае, если вы торгуете игрушками для розыгрышей.
Ну вот. Это честно всё, что мне на сегодняшний момент известно о правильном оформлении страницы Контакты. Если вы знаете, что я не знаю — пишите в комментариях.
P.S. Хотите получать уведомления о новых статьях этого блога? Нажмите на эту кнопку — Хочу сразу узнавать о новых публикациях!
Многие дизайнеры вспоминают о странице с контактами в последний момент, поэтому не уделяют ее дизайну и контенту должного внимания. Вспомните, как часто вы встречали на вполне современных и привлекательных сайтах устаревшие и некачественные страницы «Контакты» или «Свяжитесь с нами».
Но это огромная ошибка. Страница с контактами – одна из самых важных. Для большинства компаний именно ее посещают чаще всего.
Но как должна выглядеть отличная страница «Контакты»?
Чаще всего на лучших страницах с контактами:
- Объясняется, зачем нужно связаться с компанией, как это поможет решить проблему посетителя.
- Есть email-адрес и номер телефона, которые посетитель сразу может найти.
- Имеется короткая форма с полями, благодаря которым компания может понять, кто с ней связывается.
- Предлагается другой способ связи, если посетитель не хочет заполнять форму.
- Присутствует призыв к действию, который позволяет удержать посетителей на сайте.
- Демонстрируется идейное лидерство компании в индустрии: например, публикуются ссылки на статьи о компании в прессе.
- Указываются ссылки на активные профили в социальных сетях, где пользователи могут связаться с представителями компании.
- Установлено перенаправление на страницу с благодарностью, где указывается, когда и как с посетителем свяжутся.
В сегодняшней статье мы собрали 12 лучших страниц «Контакты» для вашего вдохновения. Подумайте, как вы можете использовать описанные ниже приемы для своей страницы с контактами.
1. Tune
Страница с контактами Tune отличается приятным дизайном, на ней есть призыв к действию, понятно изложенная контактная информация и форма для обратной связи.
Заголовки «Мы всегда готовы помочь!» (We’re Here to Help!) и «Свяжитесь с нами в любое время и мы с радостью ответим на ваши вопросы» (Reach out to us anytime and we’ll happily answer your questions) создают ощущение гостеприимства, посетители чувствуют, что им здесь рады. Чем более дружелюбной будет ваша страница с контактами, тем приятнее на ней будет находиться. В любом случае, вы должны быть заинтересованы в том, чтобы клиенты связывались с вами. Ведь это помогает устанавливать с ними прочные взаимоотношения.
2. Achieve3000
Как и многие другие сайты Achieve3000 посещают разные люди с разными вопросами. Вот почем они решили пойти дальше и отказались от универсального подхода.
Вначале мы видим центральное изображение и объяснение, что получит посетитель, обратившись в компанию. Доступно три варианта: можно запросить демо, связаться с агентом по продажам или с клиентской поддержкой. Каждая из этих опций привязана к отдельной целевой странице. Такой подход как нельзя лучше удовлетворяет разные потребности посетителей.
Так выглядит целевая страница для запросов в службу клиентской поддержки:
3. Choice Screening
Лучшей частью страницы с контактами Choice Screening является текст. Все начинается с потрясающей фразы «Поговорите с человеком» (Talk to a Human).
Далее идет хорошо организованный текст, контактные данные, включая электронные адреса различных отделов, а также форма. Для большинства компаний форма покажется слишком длинной, но она помогает организовать все запросы.
Решая, насколько подробной сделать форму для связи с вами, подумайте, вам важно их количество или качество. Длинная форма вполне может быть удачным решением для некоторых компаний.
4. Atlas 1031 Exchange
На первый взгляд страница с контактами Atlas 1031 Exchange не отличается потрясающим дизайном. Но здесь есть все элементы отличной страницы «Контакты». Начинается все с функциональности.
С самого начала объясняется, насколько серьезно компания относится к запросам посетителей: «Мы невероятно быстро реагируем на ваши обращения и ценим ваши вопросы» (We are incredibly responsive to your requests and value your questions). Далее говорится о том, что получат люди, задав вопрос: ответят на него в течение 12 часов или меньше. В тексте указаны контактные данные, на странице есть иконки социальных сетей, ссылки на предложения и даже список недавно опубликованных в блоге статей.
5. Morroni
Сегодня люди скорее предпочтут заполнить контактную форму, чем позвонить по телефону. При выборе подходящих для формы полей учитывайте нужды конкретно вашего бизнеса.
Если кто-то все же захочет позвонить, на странице Morroni указан и номер телефона с пояснением, что старомодным способом с компанией также можно связаться. Радует и проверка на ботов: «Как у вас с математикой? 2+6 = ?» (How’s your math? 2+6 = ?).
6. Dubsat
«Чем мы можем вам помочь?» (How can we help you?). Классический вопрос службы поддержки клиентов, который идеально подходит для страницы с контактами.
Именно его использовала компания Dubsat. Страница встречает ярким изображением, затем вопросом и выпадающим меню, которое позволяет персонализировать опыт. Например, если посетитель захочет связаться с отделом продаж, перед ним появится специальная форма.
Особенно притягивает взгляд список городов, где есть офисы компании. Если навести на изображение курсор, появится карта и вся необходимая контактная информация. Получилось очень красиво и удобно.
7. Pixpa
Вы удивитесь, как часто на странице «Контакты» отсутствует призыв к действию. Хотя основной целью страницы с контактами является предоставление посетителям возможности связаться с вами, всегда будут те, кто не захочет заполнять форму. Здесь и пригодится небольшой второстепенный призыв к действию.
Это может быть кнопка, ведущая к блогу. Либо ссылка на демо вашего продукта, скачивание инструкции или видео. В Pixpa решили добавить призыв скачать бесплатную пробную версию продукта на страницу с контактами.
8. PeopleMetrics
Иногда проще значит лучше. Страница с контактами PeopleMetrics понятная и содержательная, она полностью выполняет свою функцию. Большинство людей, попадая на страницу «Контакты», быстро просматривает текст в поисках нужной информации. Вот почему PeopleMetrics не стали перегружать страницу дизайном. Также чтобы упростить людям жизнь, они добавили возможность входа через Facebook и Google Apps.
9. Legalia
Еще одна страница с контактами, выполненная в привлекательном и функциональном дизайне. Здесь есть вся необходимая информация, включая небольшую контактную форму. Особенно радуют глаз большие изображения зданий, которые при наведении курсора на кнопку «voir le plan» превращаются в карты.
Отдельно стоит отметить небольшую, но значимую деталь для компаний, у которых есть международные клиенты. Перед номером телефона указан код страны. Многие об этом забывают, однако такая деталь может существенно облегчить жизнь клиентам из других стран.
10. Elluminati
Центром страницы Elluminati является местоположение: верхнее изображение – карта Google, на которой отмечен офис компании. На нее можно нажать, приблизить или отдалить, построить маршрут. Это очень удобно как для пользователей ПК, так и мобильных устройств.
И хотя белый текст – это весьма рискованно, на ярком фоне он выглядит выигрышно и легко читается. Радуют и другие небольшие элементы. Например, иконки социальных сетей, которые меняют цвет при наведении курсора.
11. Weifield Group Contracting
Люди все чаще ищут информацию через мобильные устройства, а Google предпочитает адаптированные под мобильные платформы сайты. Поэтому каждая страница вашего сайта, включая страницу с контактами, должна хорошо смотреться на смартфонах и планшетах.
Для этого нужно упростить навигацию, сократить формы и увеличить размер полей, добавить заметную кнопку с призывом к действию (которую было бы легко нажать пальцем).
Страница с контактами Weifield Group Contracting – отличный пример адаптированной под мобильные устройства страницы. Сравните версию страницы для ПК и для мобильных платформ: оптимизирована была практически каждая деталь страницы.
Страница для ПК:
Страница для мобильных устройств:
Текст крупный, формы удобно заполнять, на кнопку можно легко нажать, что делает опыт мобильных пользователей невероятно комфортным.
12. Survicate
Страница с контактами Survicate – еще один пример привлекательного и простого дизайна в комбинации с приятным дружелюбным текстом. Радуют глаз заголовки «Давайте сделаем что-то потрясающее вместе» (Let’s do something awesome together) и «Давайте поговорим о вашем проекте» (Let’s talk about your project). Подобный стиль общения располагает посетителей к бренду.
Контактная форма очень простая, с крупными полями и кнопками CTA, что делает страницу удобной для мобильных пользователей. Также здесь указана вся необходимая контактная информация: адрес офиса, номер телефона, email, время работы и т.д.
Наконец, приятно удивляет то, что кнопка с призывом к действию и иконки выполнены в том же цвете, что и логотип.
Итак, мы познакомились с 12 лучшими страницами «Контакты». Теперь взгляните на свою страницу с контактами и постарайтесь определить, что в ней можно изменить в лучшую сторону, чтобы предложить посетителям более приятный опыт.
Что под собой подразумевает слово “контакты”? Это те сведения о человеке, которые другие люди могут использовать для того, чтобы с ним связаться. К ним относятся: адрес, номер мобильного или стационарного телефона, аккаунты в социальных сетях, логин в Skype, адрес электронной почты и так далее.
Так же, как контакты важны в жизни каждого отдельно взятого человека, так же они важны и в деятельности любой компании. Именно поэтому на сайте любой фирмы мы можем найти страничку под названием “Как с нами связаться?” или “Наши контакты”.
От того, насколько хорошо она будет оформлена, зависит ваша репутация и стремления клиентов приобрести что-то именно у вас.
Несколько советов о том, как должна быть оформлена страница “Контакты”
- В самом верху, в “шапке” текста, разместите название фирмы и то, чем она занимается. Это делается для тех людей, которые пропускают основные рубрики сайта, ведь они четко знают, что именно хотят заказать.
- Разместите схему проезда к офису. Особенно это актуально в том случае, если фирма находится в малоизвестном районе города. Опубликовав подобную схему, вы значительно облегчите своим клиентам поиски вашего офиса. К тому же, большим плюсом будет, если вы также разместите панорамные фотографии. Рекомендуем опубликовать на сайте несколько схем: одну для автомобилистов, а вторую для пешеходов и тех, кто будет добираться на общественном транспорте.
- Мы живем в век информационных технологий, поэтому полезным будет размещение данных для GPS-навигатора. Поверьте, водители скажут вам спасибо.
- Укажите как можно больше номеров мобильных телефонов, по которым с вами можно связаться, а также ФИО и должность человека, которому он принадлежит. Во-первых, не всегда телефоны бывают доступны, а клиенту нужно очень срочно дозвониться. А во-вторых, человеку может быть нужна помощь конкретного специалиста к которому, в случае правильного размещения контактов, он сразу сможет дозвониться.
- Сейчас становится очень популярной связь через социальные сети, Skype, Viber. Это значительно облегчает связь клиента с фирмой, поэтому воспользуйтесь и этими вариантами.
- Добавьте к номерам телефона активные ссылки по которым они смогут перейти на вашу электронную почту. Это избавит их от лишних поисков и они не будут терять драгоценное время.
- В последнее время ярким примером заботы о своих клиентах стала обратная связь. Создайте небольшую форму заявки, где клиент укажет свои ФИО, контактные данные (номер телефона, email) и напишет сам текст обращения.
- Удобной функцией является возможность печати схемы проезда и контактных данных. Не игнорируйте ее и сделайте доступной для ваших клиентов.
- Бывает такое, что в одном офисе вашей компании обслуживают физических лиц, а в других — юридических. Обязательно обозначьте этот момент, чтобы человек изначально знал, куда ему обращаться.
- Не забудьте указать график работы вашей компании: время и по каким дням вы предоставляете свои услуги.
- Добавьте какой-либо призыв о покупке, ведь никто не говорил, что статья на этой странице не должна быть продающей.
- Если ваша компания допускает отступление от делового стиля, то можно в конце текста добавить немного иронии и юмора. Этот момент закрепит хорошее впечатление и вызовет положительные эмоции у читателя.
Страница “Контакты” является не менее важной, чем любой другой раздел вашего сайта. Поэтому очень важно, чтобы текст, размещенный в этой рубрике, не был сухим, состоящим только из номера телефона. Сделайте его интересным и запоминающимся, поместите как можно больше нужной информации, чтобы клиент увидел, что о нем заботятся, и оценил это в виде заказа товара на вашем сайте.
Как видите, если вы уже знаете о том, что на нашем сайте есть хорошие советы, с помощью которых можно оформить страницу Контакты для вашего сайта, то правильно оформленная страница Контакты позволит пользователям не только понять, где находится офис и представительства, но и вызывает непреодолимое желание к вам обратиться. Действовать лучше сообща и вместе с теми людьми, у которых уже есть опыт и результаты. Приходите в наши программы, заодно и заработаете больше!
С Вами,
— Игорь Зуевич.
Рекомендую Вам обратить внимание на следующие программы по созданию дополнительного источника дохода в интернете:
Закрытое Master Mind сообщество
Мастера партнерских программ
Партнерский Маркетинг для Новичков
Если следующие 5 минут вы можете инвестировать в самообразование, то переходите по ссылке и читайте следующую нашу статью: 7 правил, как составить текст для досок объявлений в интернете
Оставьте комментарий к этой статье ниже
1516
21.03.2017
Время чтения: 4 минуты
Валерий Середов
Общие рекомендации
- Страница контакты должна быть отдельной страницей сайта — на такой странице расположено достаточно много данных. Только отдельная страница позволит удобно расположить всю необходимую информацию.
- Страница контакты должна быть доступна в один клик с любой странницы — пользователь в любой момент может захотеть узнать местоположение вашей организации.
- Указывайте адрес полностью, индекс, город, улица, строение, офис — всё это позволит потенциальному посетителю легче вас найти и понять ваше расположение.
- Размещайте в обязательном порядке прямые городские номера — указывайте код города, это позволит без проблем дозвониться до вас клиенту (Например в Москве может быть прямой номер как с кодом города 499 так и 495). Для региональных компаний необходим номер 8 800, это позволит клиентам из других регионов звонить вам бесплатно и повысит статус вашей компании в их глазах.
- Размещенный адрес электронной почты должен быть привязан к вашему домену, то есть выглядеть: « [email protected]» Укажите время работы вашей компании, чтоб было ясно, когда можно звонить.
- Укажите телефон дежурного менеджера. Также хорошо указать, сколько ждать ответа на письма.
- Если для прохода в ваш офис требуется иметь с собой документы, то лучше их перечислить (права, паспорт и т.д.).
- Разместите схему проезда. Например, с помощью сервисов Яндекс.Карты или Google Maps.
- Разместите ссылки на другие способы связи с вами.
- Разместите форму обратной связи.
- Сориентируйте пользователя по времени, сколько ему идти до офиса или сколько времени может занять получение заказа.
- Расскажите, где и как лучше припарковать автомобиль. Например, что для проезда на территорию нужно заранее заказать пропуск.
Юзабилити рекомендации по оформлению страницы контакты
- Укажите ближайшую от вас станцию метро — это позволит легко понять, как добраться до вас своим ходом
- Указывайте напротив каждого номера телефона контактное лицо и должность, чтобы было ясно, с кем будет говорить звонящий. Пример: Секретарь Елена Сергеевна, директор Иванов Петрович, отдел продаж и т.д.
- Дополните схему проезда возможностью проложить маршрут из любой точки до вас.
- Реализуйте возможность распечатать страницу контакты со схемой проезда
- Разместите фотографию вашего здания и входа, чтобы было проще сориентироваться на местности.
- Дополните страницу видео с объяснением, как добраться до вашего офиса на общественном транспорте или автомобиле.
- Разместите ссылки на ваши группы в социальных сетях.
-
- Добавьте QR-код для легкой записи ваших контактов в записную книжку телефона.
- Персонализируйте вашу страницу — логотип компании, фото сотрудников или офиса внутри.
- Сделайте почту и телефон гипер ссылкой, что бы можно было быстро позвонить или написать письмо.
SEO рекомендации по оформлению страницы контакты
-
Заполните правильно тег <title> — Название вашей организации плюс ключевое слово: «схема проезда, адрес магазина, контакты
-
Разместите информативный заголовок h2 — Название вашей организации плюс ключевое слово: «схема проезда, адрес магазина, контакты»
-
Заполните тег <description> — Укажите адрес, телефон, почту, призовите в к действию — позвонить или написать вам.
-
Используйте микроразметку — это позволит красиво оформить сниппет в выдаче и повысит кликабельность.
-
Зарегистрируйтесь и разместите всю необходимую информацию в геолакационых сервисах таких как; Яндекс.Картах, Google maps, 2Гис, Foursquare
-
Разместите реквизиты компании — (юридический адрес, номер ИНН, ОГРН и прочие открытые данные), после этого вы сможете подать заявку на размещение вашей организации в Яндекс.Каталог
Контакты регионов и представительств:
-
Реализуйте автоопределение региона пользователя — это позволит автоматически показывать ему контактную информацию его региона.
- Сделайте удобную карту с выбором филиала в городе это может быть либо просто карта города, либо карта метро.
Подпишитесь на нашу рассылку
Рекомендуемые статьи
Что вы привыкли видеть на странице контактов?
Телефоны, email, адреса, скайп, информацию о представительствах, фотографии отделений, график работы, карту проезда, форму обращения… Вы считаете этого достаточно? Загляните в свою аналитику и посмотрите, сколько человек каждый месяц покидает страницу контактов, так и не связавшись с вами.
Надеемся, эти 10 примеров заставят вас изменить свое традиционное представление о странице контактов и удержать пользователя на ней.
Страница контактов — это решающая ступень, которую пользователь должен пройти, перед тем, как связаться с вами. Поэтому от ее оформления, удобства и дизайна зависит дальнейшая судьба лидов, приближающихся к узкому горлышку воронки продаж. Найдут ли они на этой странице последний убийственный триггер, который заставит их взять в руки телефон? Как помочь им связаться с вами? В этой статье мы собрали 10 ярких способов оформления эффективной страницы Contact us.
1. Виртуальный консультант от Microsoft
Так выглядит страница контактов Microsoft.
А вот так выглядит общение с консультантом.
Для большой компании виртуальный консультант — отличный вариант, т.к. вопрос «С кем мне связаться?» может быть проблемой. Если у вас много точек контактов, это хорошая возможность перенаправить пользователя на нужного живого человека.
В самом дизайне страницы нет каких-либо лишних компонентов, которые бы его перегружали. Есть только возможность выбора нужного отдела службы поддержки и даже раздел с удобными средствами связи для людей с ограниченными возможностями.
“Конечно, это ж Microsoft! Могут себе позволить!”, — скажете вы.
Но интерактивное общение с пользователем — это уже не прихоть, а тренд, т.к. оно позволяет максимально индивидуально подойти к решению проблемы клиента. Смотрите следующие примеры.
2. Интерактивность и дружелюбность от Deux Huit Huit
Чем примечательна эта страница контактов?
На ней лаконично подана вся необходимая информация. Чистый минималистичный дизайн. Но главное отличие — это тон, который располагает к дружескому общению. Фраза “Let’s be friends” предлагает вам дружить в соцсетях. А в нижнем углу экрана мелькают фото из повседневной жизни команды: от лучшего работника месяца до любимых офисных блюд и даже кота. Но главная особенность в интерактивной форме, которую и формой-то тяжело назвать. Больше напоминает общение в соцсетях.
Курсор сам начинает писать от вас письмо, заполняя первую строку фразой “Dear Deux Huit Huit,”. И вы уже сами не замечаете, как написали и отправили сообщение.
Слово-за-слово, вот вам и первая продажа.
3. Инфографика на странице контактов от Quicksprout
Эта страница контактов понравится тем, чей ящик заваливают письмами.
Перед тем, как вы доскролите наконец до формы, где можно оставить сообщение, вы в визуальной и доступной форме узнаете о том, какие письма сразу попадают в корзину, сколько времени придется ждать ответ и почему надо быть кратким.
Инфографика — удобное и трендовое решение. Ее можно использовать, чтобы отобразить на странице контактов какой-то процесс или структуру компании.
4. Триггеры доверия от Unbounce
На странице контактов можно усилить доверия пользователя к компании, если показать, что по ту сторону экрана с ним готовы поговорить реальные люди.
Фото офиса и лица “самых дружелюбных людей” из разных отделов поддержки — вот чем располагает к себе эта страница.
5. Обращение от президента Convince & Convert
Когда видишь эту бесконечно длинную форму на странице компании, начинаешь сомневаться, стоит ли ее заполнять. Но когда президент компании лично тебя об этом просит, сомнения исчезают.
Вот такой нехитрый ход послужит очередным триггером доверия на вашей странице.
6. Юмор и неординарный подход от Ueno
Такая страница больше подойдет креативным агентствам, дизайн студиям и другим компаниям, чей бизнес основывается на творческом подходе.
Ярко и минималистично выглядит первый экран, форма открывается при нажатии на вкладку.
Блок со списком офисов далее, реальные фото которых открываются при клике.
А вот и неординарный подход.
“Hello. Is it you we’re looking for? We can see it in your eyes. We can see it in your smile.” — Здравствуйте. Вы это ищите? Мы видим это в ваших глазах и улыбке.
7. Достижения на странице контактов Blue fountain media
На первом экране страницы мы видим, что компания является партнером Google и на хороших позициях в рейтингах. У вас еще остались сомнения, чтобы написать этим ребятам?
Если да, то вам не дадут просто так взять и уйти. Скрольте дальше.
Еще 2 зеленые кнопки призыва к действию: “Работайте с нами” или “Подписывайтесь на последние диджитал тренды”.
Листаешь страницу и как-будто слышишь: “Эй, ты что сразу не понял? Повторяю, мы находимся в топах нескольких рейтингов. Куда собрался? У нас смотри, какие статьи есть на блоге! А бесплатную книгу о том, как диджитал агентство выбрать, ты уже скачал?”
С такой страницы просто так не уйдешь.
8. Возможность поиска на странице Accenture
Еще один вариант того, как можно направить пользователя в нужный ему департамент.
Во вкладке «Find a location» есть возможность указать страну или город и получить список ближайших офисов.
А вот и карта, как добраться до офиса в Калифорнии.
9. Знакомство с основателями и раздел FAQ от PracticalVR
Почему бы не добавить на страницу контактов раздел с часто задаваемыми вопросами. В нем можно расположить и некоторые преимущества продукта и средства связи по особым вопросам.
Но эта страница еще примечательна тем, что знакомит вас с основателями компании, причем очень неординарно.
Вот так подана информация об основателях компании.
Хочется отдельно отметить футуристичный дизайн и использование музыки на странице сайта, которые также действуют, как триггер и подчеркивают главную мысль компании: “Building the mixed reality tools of tomorrow.”
10. Расположение офисов от Doberman
Покажите свой офис и условия работы на странице контактов, если это может сыграть вам в плюс. Пригласите пользователя к себе в гости.
Два офиса в разных частях мира, но одинаково простое и дружеское обращение к клиенту.
Хотите поговорить, у вас есть талант, нужна помощь? Выбирайте нужную опцию и пишите. Так просто, но так удобно. Берем на заметку.
Как создать эффективный дизайн страницы контактов?
Как, видите, страница контактов может быть гораздо эффективнее, чем вы ее себе представляли.
Добавьте ей интерактивности, юмора, вызовите доверие и расположите к себе. Сделайте шаг навстречу клиенту, показывая, что кроется за кулисами вашего бизнеса, какие люди стоят за ним и в каких условиях они работают. Дайте возможность связаться с вами максимально удобным способом.
И не забудьте упаковать все это в качественный дизайн.
Как оформить страницу с контактами
Страницу с контактами тоже надо оптимизировать и правильно оформлять, как бы ни странно это звучало. Многие предприниматели считают, что это самый простой раздел на сайте, который не нуждается ни в каких доработках.
Страница «Контакты» есть на сайте любой компании. Обычно без этой страницы не обходится ни одна организация, хотя номер телефона и адрес посетители часто видят даже на шапке сайта. Для чего нужна эта страница? В первую очередь она дает потенциальному клиенту возможность связаться с представителями компании. Но данные на ней не ограничиваются только номерами телефонов и адресом. Этот раздел на сайте призван облегчить клиенту поиск компании.
В контактах часто указывается карта с месторасположением организации. Такие образом потенциальные клиенты могут найти организацию в своем городе. Некоторые фирмы имеют множество отделений в разных городах. Здесь руководству уже приходится обращаться к профессионалам, чтобы пользователь мог найти контакты в своем городе без труда. Не зря у некоторых ресурсов есть всплывающее окно, на котором посетитель может выбрать свой город. Но наиболее удобным был бы другой способ. Всплывающие окна раздражают практически всех, будет лучше, если на сайте расположение клиента определится автоматически. А потом посетитель сможет уже либо подтвердить свой город, либо выбрать другой.
Страницы с контактами однотипны. По крайней мере, это касается 90% таких страниц. Предприниматели не особо задумываются, как их правильно оформить. В результате этот раздел может выглядеть, как свалка с номерами телефонов, ссылками на страницы в социальных сетях, а также адресами и контактами в мессенджерах. И среди всего этого великолепия может еще располагаться форма для отправки сообщения менеджеру компании со множеством полей для заполнения.
Если на сайте планируется размещение такой формы, то надо обязательно учитывать интересы клиентов. Никому не понравится заполнять множество полей. Лучше упростить форму и сделать ее более удобной. Тогда посетители начнут оставлять сообщения чаще. Некоторые из них могут стать клиентами компании.
Страницу с контактами нужно оптимизировать. Например, ее можно разделить на три колонки. В одной дать пользователям карту с адресом, в другой — номера телефонов, а в третьей разместить мессенджеры и кнопки социальных сетей. Отдельно можно установить форму для отправки сообщений. Некоторые компании сегодня предлагают клиентам позвонить им прямо с сайта. Такую кнопку лучше разместить на видном месте. Она может появляться в правой части сайта всегда, вне зависимости от того, на какой странице находится клиент.
Есть руководители, которые даже не обращают внимание на скорость загрузки страниц сайта. Страница с контактами, которая медленно загружается, не нужна никому. Пользователи не будут ждать, они в это время найдут другую компанию с более удобным интерфейсом и быстрой загрузкой.
Как сделать сайт
Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.
Создать сайт с нуля
«Черновик макета»
Перед созданием веб-сайта может быть целесообразно нарисовать макет макета дизайна страницы:
Панель навигации
Side Content
текст какой-то текст ..
Основное содержание
Некоторый текст, некоторый текст.,
текст какой-то текст ..
текст какой-то текст ..
Нижний колонтитул
Первый Шаг — Базовая страница HTML
HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, который описывает стиль документа HTML. Мы будем комбинировать HTML и CSS для создания базовой веб-страницы.
Пример
Заголовок страницы
Кузов {
семейство шрифтов: Arial, Helvetica, без засечек;
}
Сайт, созданный мной.
Пример объяснил
- Декларация
- Элемент
- Элемент
- Элемент
</code> определяет заголовок документа</li><li> Элемент<meta> </code> <code> должен определять набор символов как UTF-8</li><li> Элемент<meta> </code> <code> с name = "viewport" делает веб-сайт хорошо выглядящим на всех устройствах и разрешения экрана</li><li> Элемент <code> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <script defer src="https://xn--90abhccf7b.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_eacc7423ae55f04fc134551454013fc2.js"></script></body></html>