Advertisement
  1. Web Design
  2. UX

Делаем лучше страницу контактов

by
Read Time:11 minsLanguages:

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

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


Важность хорошей страницы контактов

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

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

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


Позиционирование

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

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

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

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

Футер (Footer) также является популярным местом для расположения контактной информации. В нем также может содержаться ссылка на страницу контактов:

apple contact us in footerapple contact us in footerapple contact us in footer
Apple разместила ссылку на свою страницу обратной связи в футере

либо наиболее важная контактная информация сама по себе:

hubspot contact footerhubspot contact footerhubspot contact footer
Hubspot разместили свой адрес и номер телефона в футере

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


Основы страницы контактов

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

Адрес E-mail / форма обратной связи

Email — самый простой способ связаться с бизнесом в сети. Также вы можете использовать форму обратной связи, которая отправит вам письмо. Через форму обратной связи у вас будет больше контроля над содержимым (поля, обязательные для заполнения) и она избавит вас от спама. Подробнее о формах обратной связи мы поговорим позднее в этой статье.

contact-form-leacontact-form-leacontact-form-lea
Леа Веру делится своим адресом прямо в тексте, но использует хитрый способ, чтобы у спамботов не было возможности до него добраться.

Адрес

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

Телефон

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

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

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

contact-envato_supportcontact-envato_supportcontact-envato_support
У Envato есть очень активный аккаунт поддержки в Twitter @envato_support

Дополнения

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

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


Удобство информации

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

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

Адрес электронной почты должен быть указан через ссылку mailto. Это позволит пользователям перейти к отправке письма по клику, без необходимости даже копировать ваш email. Но с этим способом может возникнуть проблема; спамботы собирают адреса, связанные ссылкой mailto:. Вы можете их обхитрить, воспользовавшись такими сервисами, как, например, mailtoencoder.com.

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

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

Благодаря Google Maps внедрить интерактивную карту максимально просто. Вставьте ваш адрес в Google maps и нажмите на иконку ссылки в боковом меню. Здесь же вы увидите код для копирования.

how to embed google mapshow to embed google mapshow to embed google maps

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

contact-mapboxcontact-mapboxcontact-mapbox

Не забывайте про поисковые системы

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

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

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

Возможно, вы хотите пойти дальше и обернуть этот код в тег <address>. Тег address стоит использовать только для адресов, релевантных содержимому сайта, им не должен оказаться просто какой-то старый случайный адрес. Использование этого тега вызывает головную боль у разработчиков уже многие годы, так что если вы не уверены, то можете особо не думать на его счет!

Это что касается адреса компании. Но мы также можем использовать микроданные к номеру телефона и адресу электронной почты:

Благодаря этой разметке поисковые системы будут знать, что это адрес, номер телефона и email компании "Fine Design". Это имплицитная информация, что значит, что пользователи ее не увидят, но для поисковых систем она очень полезна.

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


Формы обратной связи

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

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

Поля ввода

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

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

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

contact-usernamecontact-usernamecontact-username

Затем, убедитесь в том, что вы выделили обязательные к заполнению поля (внегласное правило — делать это при помощи звездочки * ). Четко обозначив, какое поле обязательно к заполнению, а какое нет — отличный старт.

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

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

invalidinvalidinvalid

Проверка формы

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

form validation pop upform validation pop upform validation pop up

Кнопки

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

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

Обратная связь

Посетитель заполнил форму своей информацией, написал сообщение и нажал кнопку "Отправить". Что теперь? Дошло ли письмо или нет?

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

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


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

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

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

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

Страница обратной связи должна визуально соответствовать остальным страницам сайта. Целостность внешнего вида — ключевой фактор. Взгляните на эту страницу контактов у "Let's Travel Somewhere", которая сделана в форме открытки.

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


Примеры форм обратной связи

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

contact page of the GLG groupcontact page of the GLG groupcontact page of the GLG group
Goslingo contact pageGoslingo contact pageGoslingo contact page
heartbreaker fashion contactheartbreaker fashion contactheartbreaker fashion contact
iq agencyiq agencyiq agency
mostly serious reach outmostly serious reach outmostly serious reach out

Заключение

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

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

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

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


Дальнейшее чтение

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.