контакты

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

Как насчёт страницы «Обратная связь»?

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

Друзья, это огромная ошибка. Страница «Свяжитесь с нами» является одной самых важных для вас, у большинства компаний она — самая посещаемая. Задумайтесь над этим. И, давайте попробуем выделить — что общего у «правильных» страниц с контактами.

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

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

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

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

Отображают идеи компании, без разницы — с помощью ли ссылок на свежие записи в блоге или статьи о ней в СМИ.

Содержат ссылки на аккаунты компании в соцсетях (Twitter, Facebook, Instagram, LinkedIn), что даёт посетителям ещё один путь для взаимодействия с бизнесом.

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

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

Какой должна быть страница с информацией

1. Tune

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

Но что нравится больше всего — их приветливость. Фразы «Мы здесь, чтобы помочь! и «Спрашивайте нас в любое время, будем счастливы ответить на ваши вопросы» помогают посетителям чувствовать, что о них заботятся. Многие страницы контактов по-деловому холодны, но чем более дружественной вы делаете свою страницу, тем лучше чувствуют (и реагируют!) на это посетители. В конце концов, вы должны хотеть, чтобы они связались с вами, так что помогите им захотеть строить отношения.

1

 

2. Achieve3000

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

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

2

21

3. Choice Screening

Сдавайтесь, лучшего варианта страницы «Обратная связь» вы не найдёте. Здесь прекрасно всё, начиная с восхитительного призыва «Поговорите с человеком» в заголовке.

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

3

4. Atlas 1031 Exchange

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

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

4

5. Morroni

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

Конечно, некоторые люди всё ещё предпочитают нажимать кнопки телефона, потому дайте им контактный номер. И оцените хорошую идею с вопросом, помогающим отличать людей от ботов: «Как у вас с математикой? 2+6 = ?»

5

6. Dubsat

«Как мы можем вам помочь?»

Это классический вопрос в обслуживании клиентов — и если вы думаете так же, то контактная страница вроде как неплохое место, чтобы предложить отличное обслуживание клиентов?

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

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

6

Полный вариант.

7. Pixpa

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

7

8. PeopleMetrics

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

Для того, чтобы сделать жизнь людей еще проще, в компании дали возможность клиентам использовать аккаунты Facebook или Google Apps. Плюс нельзя не отметить ироничное обращение:  «Чувствуете, формализм? Заполните форму, и мы пообщаемся с вами».

8

9. Legalia

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

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

9

91

10. Elluminati

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

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

10

11. Weifield Group Contracting

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

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

Версия для компьютеров.

11

Версия для смартфонов.

12. Survicate

Контактная страница Survicate – ещё один пример сочетания эффектной простоты и дружеского общения с клиентом. Прекрасный призыв «Давайте поговорим о вашем проекте». Разговорный вариант такого рода сразу располагает посетителей к бренду, заставляет чувствовать себя более близкими с вашей компанией.

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

К этому вы и должны стремиться.

12

К этому вы и должны стремиться.