Контакты страница – Приятно связаться: 15 примеров страниц «Контакты»

Содержание

Создание лучшей страницы контактов

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

Значение хорошей страницы контактов

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

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

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

Местоположение

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее

В общем, контактная информация может находиться в двух местах:

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

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

Нижний колонтитул также является популярным местом для контактной информации. Он может содержать ссылку на контактную страницу:

…либо самую важную контактную информацию:

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

Самое важное в странице контактов

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

Адрес электронной почты / контактная форма

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

Адрес

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

Телефон

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

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

Многие вебсайты стали добавлять на контактную страницу кнопки социальных сетей. Хотя, возможно, это не всем сайтам идет на пользу, для некоторых посетителей имеет дополнительное значение. Особенно с тех пор, как все больше и больше компаний предлагают поддержку клиентов через Twitter (иногда даже круглосуточно и без выходных).

Дополнительно

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

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

Удобная информация

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

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

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

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

Благодаря Google Maps вставить это полезное свойство проще простого. Просто введите свой адрес в Google Maps и щелкните на иконку ссылки в боковой колонке. Там для вас найдется код вставки.

Вы знали, что можно адаптировать карту под себя? Вы можете отредактировать цвета карты, добавить на карту пользовательские указатели и создать легенду. Подробнее об этом можно прочесть на developers.google.com. Также можно обдумать применение альтернативных сервисов, таких как довольно привлекательный Mapbox.

Не забудьте о поисковой оптимизации

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

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

Как это работает? Скажем, у нас есть агентство веб-дизайна под названием «Fine Design», расположенное по адресу: 3102 Highway 98, Mexico Beach, FL. Микроданные дают возможность поисковым системам лучше распознать этот адрес. Код HTML будет выглядеть примерно так:

&amp;lt;div itemscope itemtype=&amp;quot;http://schema.org/LocalBusiness&amp;quot;&amp;gt; &amp;lt;h3&amp;gt;&amp;lt;span itemprop=&amp;quot;name&amp;quot;&amp;gt;Fine Design&amp;lt;/span&amp;gt;&amp;lt;/h3&amp;gt; &amp;lt;div itemprop=&amp;quot;address&amp;quot; itemscope itemtype=&amp;quot;http://schema.org/PostalAddress&amp;quot;&amp;gt; &amp;lt;span itemprop=&amp;quot;streetAddress&amp;quot;&amp;gt;3102 Highway 98&amp;lt;/span&amp;gt; &amp;lt;span itemprop=&amp;quot;addressLocality&amp;quot;&amp;gt;Mexico Beach&amp;lt;/span&amp;gt;, &amp;lt;span itemprop=&amp;quot;addressRegion&amp;quot;&amp;gt;FL&amp;lt;/span&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt;

&amp;lt;div itemscope itemtype=&amp;quot;http://schema.org/LocalBusiness&amp;quot;&amp;gt;

&amp;lt;h3&amp;gt;&amp;lt;span itemprop=&amp;quot;name&amp;quot;&amp;gt;Fine Design&amp;lt;/span&amp;gt;&amp;lt;/h3&amp;gt;

&amp;lt;div itemprop=&amp;quot;address&amp;quot; itemscope itemtype=&amp;quot;http://schema.org/PostalAddress&amp;quot;&amp;gt;

&amp;lt;span itemprop=&amp;quot;streetAddress&amp;quot;&amp;gt;3102 Highway 98&amp;lt;/span&amp;gt;

&amp;lt;span itemprop=&amp;quot;addressLocality&amp;quot;&amp;gt;Mexico Beach&amp;lt;/span&amp;gt;,

&amp;lt;span itemprop=&amp;quot;addressRegion&amp;quot;&amp;gt;FL&amp;lt;/span&amp;gt;

&amp;lt;/div&amp;gt;

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее

Вот и все относительно адреса компании. Однако микроданные также можно применять для телефонных номеров и адресов электронной почты:

Tel: &amp;lt;span itemprop=&amp;quot;telephone&amp;quot;&amp;gt;850-648-4200&amp;lt;/span&amp;gt; Email: &amp;lt;a href=&amp;quot;mailto:[email protected]&amp;quot; itemprop=&amp;quot;email&amp;quot;&amp;gt;[email protected]&amp;lt;/a&amp;gt;

Tel: &amp;lt;span itemprop=&amp;quot;telephone&amp;quot;&amp;gt;850-648-4200&amp;lt;/span&amp;gt;

Email: &amp;lt;a href=&amp;quot;mailto:[email protected]&amp;quot; itemprop=&amp;quot;email&amp;quot;&amp;gt;[email protected]&amp;lt;/a&amp;gt;

Благодаря этой разметке поисковые системы знают, что это адрес, телефонный номер и электронная почта компании «Fine Design». Это скрытая информация – посетители не могут ее видеть – но очень полезная для поисковиков.

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

Контактные формы

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

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

Поля ввода

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

Посетители сайта больше склонны заполнять короткие формы, так как они требуют меньше усилий. Количество полей ввода – это балансирование между впечатлением пользователя и потребностями бизнеса. На Hubspot проанализировали более 40 000 форм и рассмотрели эффект увеличения количества полей ввода. Результат их исследования говорит, что следует использовать как можно меньше полей формы и быть особенно осторожным с усложненными текстовыми областями и выпадающими списками.

Помогите своим посетителям заполнить поля, указав правильный формат. Телефонные номера и даты могут оказаться подводным камнем, особенно для иностранных посетителей. Атрибут HTML5 placeholder окажет вам помощь.

Далее убедитесь, что выделили необходимые для заполнения поля (их традиционно выделяют с помощью звездочки *). Безопаснее всего однозначно указать обязательные и необязательные к заполнению поля.
Наконец, полезно выделить активное поле. Оно может быть обозначено едва-едва или очень ярко – как хотите.

Ниже приведен пример контактной формы из учебника Джима Нильсена (Jim Nielsen). Он использует красную звездочку для обязательных к заполнению полей, дает советы по форматам и выделяет активное поле.

Валидация формы

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

Кнопки

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

Отклик

Посетитель внес свою контактную информацию, написал сообщение и нажал кнопку «отправить». Что теперь? Дошло сообщение или нет?

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

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

Дизайн контактной страницы

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

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

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

Контактная страница должна сочетаться с визуальными особенностями сайта. Последовательность – ключ к совершенству. Посмотрите, например, на эту контактную страницу Let’s Travel Somewhere, созданную в виде почтовой открытки.

И, как в случае большинства связанных с веб-дизайном задач; творческий подход отлично окупается. Нил Пейтел (Neil Patel) создал свою контактную страницу в виде инфографики, утроив количество контактных запросов.

Примеры контактных форм

Говоря о хороших контактных формах, давайте ради вдохновения посмотрим на эти примеры (для посещения соответствующего сайта щелкните на изображение):

Заключение

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

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

Важна интерактивность. Примените атрибут mailto для адресов электронной почты и атрибут tel: для телефонных номеров (очень пригодится посетителям с мобильных устройств). Можно вставить интерактивную карту, такую как Google Maps, но обдумайте ее последствия для производительности.

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

Автор: Kevin Vertommen

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

webformyself.com

Хорошая страница контактов — Платон Щукин

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

1. Заведите отдельную страницу с контактной информацией и схемами проезда и убедитесь в том, что она доступна со всех страниц сайта. Допустим, это будет страница site.ru/contacts/

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

3. Укажите в теге <title> название организации и ключевое слово (например, «Контакты», «Схема проезда» или «Адреса магазинов»). Например,

<title>Компания Яндекс — Контакты</title>

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

Адреса офисов компании Яндекс

5. Напишите полный почтовый адрес офиса (включая город и почтовый индекс), телефон с кодом города, по которому вы готовы ответить вашим клиентам, и email. Например,

     Адрес: 119021, Москва, ул. Льва Толстого, 16
     Секретарь: тел.: +7 495 739–70–00, факс: +7 495 739–70–70
     Коммерческий отдел: тел.: +7 495 739–22–22, факс: +7 495 739–23–32
     Электронная почта: [email protected]

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

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

7. Укажите другие способы связи с вами, если они есть. Например, Skype-номер службы поддержки или ссылки на аккаунты вашей компании в Twitter/Facebook/ВКонтакте. Некоторые пользователи предпочитают отслеживать новости компании и информацию об акциях через социальные сети.

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

9. Заполните мета-тег description.

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

И еще несколько советов:

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

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

Вот, кажется, и все!

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

yandex.ru

Страницы «Контакты»: вдохновляющие примеры

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

editos kastingas