Миллениалы: особенности онлайн-активности. Инфографика
Previous
выбрать за меня
8 техник сторителлинга для интересных презентаций
Next
веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты
Юзабилити

12 лучших страниц «Контакты» для вашего вдохновения

Автор: Ия Пфанштиль11.08.2016

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

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

Но как должна выглядеть отличная страница «Контакты»?

Чаще всего на лучших страницах с контактами:

  • Объясняется, зачем нужно связаться с компанией, как это поможет решить проблему посетителя.
  • Есть email-адрес и номер телефона, которые посетитель сразу может найти.
  • Имеется короткая форма с полями, благодаря которым компания может понять, кто с ней связывается.
  • Предлагается другой способ связи, если посетитель не хочет заполнять форму.
  • Присутствует призыв к действию, который позволяет удержать посетителей на сайте.
  • Демонстрируется идейное лидерство компании в индустрии: например, публикуются ссылки на статьи о компании в прессе.
  • Указываются ссылки на активные профили в социальных сетях, где пользователи могут связаться с представителями компании.
  • Установлено перенаправление на страницу с благодарностью, где указывается, когда и как с посетителем свяжутся.

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

1. Tune

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

Заголовки «Мы всегда готовы помочь!» (We’re Here to Help!) и «Свяжитесь с нами в любое время и мы с радостью ответим на ваши вопросы» (Reach out to us anytime and we’ll happily answer your questions) создают ощущение гостеприимства, посетители чувствуют, что им здесь рады. Чем более дружелюбной будет ваша страница с контактами, тем приятнее на ней будет находиться. В любом случае, вы должны быть заинтересованы в том, чтобы клиенты связывались с вами. Ведь это помогает устанавливать с ними прочные взаимоотношения.

2. Achieve3000

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

Так выглядит целевая страница для запросов в службу клиентской поддержки:

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

3. Choice Screening

Лучшей частью страницы с контактами Choice Screening является текст. Все начинается с потрясающей фразы «Поговорите с человеком» (Talk to a Human).

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

4. Atlas 1031 Exchange

На первый взгляд страница с контактами Atlas 1031 Exchange не отличается потрясающим дизайном. Но здесь есть все элементы отличной страницы «Контакты». Начинается все с функциональности.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

С самого начала объясняется, насколько серьезно компания относится к запросам посетителей: «Мы невероятно быстро реагируем на ваши обращения и ценим ваши вопросы» (We are incredibly responsive to your requests and value your questions). Далее говорится о том, что получат люди, задав вопрос: ответят на него в течение 12 часов или меньше. В тексте указаны контактные данные, на странице есть иконки социальных сетей, ссылки на предложения и даже список недавно опубликованных в блоге статей.

5. Morroni

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

Если кто-то все же захочет позвонить, на странице Morroni указан и номер телефона с пояснением, что старомодным способом с компанией также можно связаться. Радует и проверка на ботов: «Как у вас с математикой? 2+6 = ?» (How’s your math? 2+6 = ?).

6. Dubsat

«Чем мы можем вам помочь?» (How can we help you?). Классический вопрос службы поддержки клиентов, который идеально подходит для страницы с контактами.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

7. Pixpa

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

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

8. PeopleMetrics

Иногда проще значит лучше. Страница с контактами PeopleMetrics понятная и содержательная, она полностью выполняет свою функцию. Большинство людей, попадая на страницу «Контакты», быстро просматривает текст в поисках нужной информации. Вот почему PeopleMetrics не стали перегружать страницу дизайном. Также чтобы упростить людям жизнь, они добавили возможность входа через Facebook и Google Apps.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

9. Legalia

Еще одна страница с контактами, выполненная в привлекательном и функциональном дизайне. Здесь есть вся необходимая информация, включая небольшую контактную форму. Особенно радуют глаз большие изображения зданий, которые при наведении курсора на кнопку «voir le plan» превращаются в карты.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

10. Elluminati

Центром страницы Elluminati является местоположение: верхнее изображение – карта Google, на которой отмечен офис компании. На нее можно нажать, приблизить или отдалить, построить маршрут. Это очень удобно как для пользователей ПК, так и мобильных устройств.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

11. Weifield Group Contracting

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

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

Страница с контактами Weifield Group Contracting – отличный пример адаптированной под мобильные устройства страницы. Сравните версию страницы для ПК и для мобильных платформ: оптимизирована была практически каждая деталь страницы.

Страница для ПК:

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

Страница для мобильных устройств:

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

12. Survicate

Страница с контактами Survicate – еще один пример привлекательного и простого дизайна в комбинации с приятным дружелюбным текстом. Радуют глаз заголовки «Давайте сделаем что-то потрясающее вместе» (Let’s do something awesome together) и «Давайте поговорим о вашем проекте» (Let’s talk about your project). Подобный стиль общения располагает посетителей к бренду.

веб дизайн, контент, юзабилити, сайт, разработка сайта, адаптивный дизайн, cta, контакты

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

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

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

Реакция на статью
поделюсь
0%
интересно
200%
полезно
200%
не уверен
0%
скучно
0%
где автор?
100%
Ия Пфанштиль
Стараюсь радовать читателей полезным и качественным контентом.
1Комментарии
Оставить отзыв

You must log in to post a comment

ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
Позвольте нам обновлять ваши знания раз в неделю.