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

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

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

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

Большие контактные формы

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

  • Объясните, почему кто-то должен с ними связаться, и опишите, как вы можете помочь решить проблемы своих посетителей.
  • Включите адрес электронной почты и номер телефона,  чтобы посетители могли быстро найти нужную информацию.
  • Включите краткую форму,  используя поля, которые помогут бизнесу понять, кто с ними связывается.
  • Включите призыв к действию,  чтобы предоставить посетителям другой вариант, если они решат не заполнять форму.
  • Продемонстрируйте лидерство вашей компании в отрасли, включив в нее список последних постов в блоге или статьи о компании в прессе.
  • Свяжите с активными учетными записями в социальных сетях,  такими как Twitter, Facebook, Instagram и LinkedIn, чтобы дать посетителям возможность порекомендовать ваш бизнес.
  • Добавьте переход на страницу благодарности  (после заполнения формы), которая объясняет, когда и как вы свяжитесь, а также ссылки на полезный контент и ресурсы.
  • Добавьте видео и продемонстрируйте, что делает ваш бренд,  чтобы посетители и потенциальные клиенты могли получить представление о работе, которую вы делаете, еще до того, как они вступят в контакт.
  • Избегайте ненужных полей и слов,  чтобы ваша страница оставалась максимально простой и понятной - ничего лишнего!

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

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

№ 1 Пример стр Контакты на портале HubSpot

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

Пример стр Контакты на портале HubSpot

Еще одна важная особенность заключается в том, как страница контактов встроена в портал HubSpot. Это делает страницу более доступной для пользователя и экономит время. Если вы работаете на портале HubSpot и вам нужно найти номер телефона службы поддержки, вам не нужно уходить от своей учетной записи. Это создает более удобный и универсальный интерфейс для клиента. 4.  Атлас 1031 Обмен

№ 2 Пример стр Контакты Атлас-2031

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

Пример стр Контакты Атлас-2031

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

№ 3 Пример стр Контакты Pixpa 

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

Пример стр Контакты Pixpa

Это может быть так же просто, как кнопка, ведущая к вашему блогу. Или это может привести к демонстрации вашего продукта, загрузке руководства или просмотру видео. Сотрудники Pixpa решили добавить CTA внизу страницы «Контакты» для бесплатной пробной версии. Таким образом, они приносят пользу людям, которые попадают на страницу и просто хотят напрямую поговорить с торговым представителем.

№ 4 Пример стр Контакты Легалия

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

Пример стр Контакты Легалия

Здесь указаны дополнительные ссылки, которые отправляют пользователей в нужный отдел. Главная задача этой страницы - мотивировать пользователя на действие и она успешно с этим справляется.

№ 5 Пример стр Контакты Survicate

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

Пример стр Контакты Survicate

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

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

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

№ 6 Пример стр Контакты  Zendesk

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

Пример стр Контакты  Zendesk

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

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

№ 7 Пример стр Контакты Accenture

Accenture предлагает профессиональные услуги по всему миру (точнее, в 120 странах), поэтому достаточно сказать, что, вероятно, существуют сотни различных телефонных номеров и электронных писем, на которые люди могут обратиться за помощью.

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

Пример стр Контакты Accenture

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

№ 8 Пример стр Контакты Scribd

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

Пример стр Контакты Scribd

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

№ 9 Пример стр Контакты Atlassian

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

Пример стр Контакты Atlassian

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

№ 10 Пример стр Контакты  Achieve3000

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

Пример стр Контакты  Achieve3000

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

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

№ 11 Пример стр Контакты Marvel

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

Пример стр Контакты Marvel

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

№11 Пример стр Контакты Hulu

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

Пример стр Контакты Hulu

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

Сделайте выигрышными страницы: «Контакты», «О нас», «Проекты» и они обеспечат вам лиды

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

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

Вам нужны качественные тексты для сайта, котрый формируют имидж эксперта?

Рады помочь, напишите нам прямо сейчас!

Оставить заявку

04.08.2020

Материалы по теме «Тренды веб дизайна»

  1. Примеры стр. «Контакты». Дизайн, который обеспечивает лиды!
  2. 10 правил идеальной типографики | Применение шрифтов в веб-дизайне
  3. Эмоциональный дизайн работает как спусковой крючок. 11 примеров эмоциональных триггеров
  4. 5 особенностей и принципов Flat Design | Чем хорош плоский (материальный) дизайн.
  5. Почему коммерческому сайту необходим профессиональный убедительный дизайн

Заявка на услуги

Все услуги веб-студии АВАНЗЕТ

Подать заявку