Сайт о телевидении

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Адрес

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

Телефон

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поля ввода

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

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

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

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

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

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

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

Кнопки

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

Отклик

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Google"s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images).

Responsive design serves all devices with the same code that adjusts for screen size.

TL;DR

• Use the meta name="viewport" tag to tell the browser how to adjust the content.
• Check out Web Fundamentals for more documentation.

Using meta name="viewport"

To signal to browsers that your page adapts to all devices, add a meta tag to the head of the document:

As a general rule, if your site works in a recent browser such as Google Chrome or Apple Mobile Safari, it would work with our algorithms.

Why responsive design

We recommend using responsive web design because it:

• Makes it easier for users to share and link to your content with a single URL.
• Helps Google"s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
• Requires less engineering time to maintain multiple pages for the same content.
• Reduces the possibility of the common mistakes that affect mobile sites.
• Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site"s user experience (see Pitfalls when detecting user agents for details).
• Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site"s content and keep it appropriately fresh.

If you"re interested in responsive web design, start with our blog post on Webmaster Central and visit the Web Fundamentals site.

Important: Be sure not to block the crawling of any page assets (CSS, JavaScript, and images) for any Googlebot using robots.txt or other methods. Being able to fully access these external files helps our algorithms detect your site"s responsive web design configuration and treat it appropriately. Caution: To make sure your implementation is successful, avoid the common mistakes . JavaScript

One part of building mobile-friendly sites that requires careful consideration is the use of JavaScript to alter the rendering and behavior of the site on different devices. Typical uses of JavaScript include deciding which ad or which image resolution variant to show in the page.

This section describes different approaches to using JavaScript and how they relate to Google"s recommendation of using responsive web design.

Common configurations

Three popular implementations of JavaScript for mobile-friendly sites are:

• JavaScript-adaptive : In this configuration, all devices are served the same HTML, CSS, and JavaScript content. When the JavaScript is executed on the device, the rendering or behavior of the site is altered. If a website requires JavaScript, this is Google"s recommended configuration .
• Combined detection : In this implementation, the website uses both JavaScript and server-side detection of device capabilities to serve different content to different devices.
• Dynamically-served JavaScript : In this configuration, all devices are served the same HTML, but the JavaScript is served from a URL that dynamically serves different JavaScript code depending on the device"s user-agent.

Let"s look at each of these configurations in detail.

JavaScript-adaptive

In this configuration, a URL serves the same contents (HTML, CSS, JavaScript, an image) to all devices. Only when the JavaScript is executed on the device is the rendering or behavior of the site altered. This is similar to how responsive web design, using CSS media queries, works.

As an example, a page serves all devices the same HTML that includes a element that requests an external URL that serves the JavaScript. All devices requesting the JavaScript"s URL get the same code. When executed, the JavaScript detects the device and decides to alter something about the page, say to include a smartphone-friendly image or add code instead of the desktop alternatives.

This configuration is very closely related to responsive web design and our algorithms can detect this setup automatically. Further, this configuration does not have a requirement for the Vary HTTP header because the URLs of the page and its assets do not dynamically serve content. Because of these advantages, if your website requires the use of JavaScript, this is our recommended configuration.

Combined detection

Combined detection is a setup where the server works in tandem with JavaScript on the client to detect the device"s capabilities and alter the content being served.

For example, a site may choose to alter the rendering of the content based on whether the device is a desktop or smartphone. In this case, the website can include JavaScript that detects the screen dimensions, which are then sent to the server that updates or alters the code sent to the device. Typically, the JavaScript stores the detected device capabilities in a cookie that the server reads on subsequent visits from the same device.

Given that the server returns different HTML to different user-agents, combined detection is considered a type of dynamic serving configuration. The details are described in full in the dynamic serving section , but to briefly summarize, the website should include the "Vary: User-agent" HTTP response header when a URL that serves different HTML content to different user-agents is requested.

Dynamically-served JavaScript

In this configuration, all devices are served the same HTML which includes a element to include an external JavaScript file that can have different content depending on the requesting user-agent. That is, the JavaScript code is dynamically served.

In this case, we recommend that the JavaScript file be served with the "Vary: User-agent" HTTP header. This is a signal to Internet caches and Googlebot that the JavaScript can be different for different user agents, and is a signal for Googlebot to crawl the JavaScript file using different Googlebot user-agents.

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

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

По результатам исследования StatCounter, в 2016-ом году 51.3% юзеров ежедневно выходили в сеть с помощью мобильных гаджетов: со смартфонов выходов было вдвое больше, чем с планшетов. Статистика MobilizeToday.ru показала, что 46% пользователей не стали повторно заходить на ресурс с интуитивно не понятной навигацией, 23% пользователей, как правило, покидали подобный сайт в первую минуту, и только 31% продолжали работу с ним.

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

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

Как формируется цена на создание адаптива?

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

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

Точно обозначенной стоимости адаптива не существует. На странице нашей компании указана цена создания адаптивной версии с базовым перечнем работ.

Адаптивный сайт и версия для мобильного: основные отличия

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

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

делит трафик на: трафик сайта плюс трафик приложения, что снижает показатели посещаемости сайта. Адаптив нацелен на сохранение всего объема трафика.

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

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

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

На этом преимущества от создания адаптивного сайта не заканчиваются. Перечислим главные из них.

• Экономичность — адаптация сайта обойдется дешевле, чем создание мобильного приложения.
• Практичность — разработка адаптивных сайтов предполагает, что все страницы сайта будут доступны по одному URL. А это, в свою очередь, избавит от проблем в вопросе SEO-продвижения.
• Целостность — создать адаптивный сайт означает сохранить его структуру и узнаваемый дизайн для юзера любого устройства.
• Прибыльность — интернет-пользователей с каждым годом становится все больше, а значит, посещаемость ресурса в перспективе будет возрастать, увеличивая и доход от бизнеса.
• Лояльность — современный юзер, выбирая сайты одного направления, остановится на более удобном варианте, то есть с опцией адаптива под его гаджет.
• Ранжируемость — создать адаптивный сайт значит повысить его шансы на попадание в топ поисковой выдачи. К слову, системы Google с 2015-го года отдают предпочтение ресурсам с адаптаций. Для повышения ранжируемости веб-проекта можно заказать доработку адаптивности .

Как сделать и доработать адаптивность - 5 основных шагов

Регулировка разрешения экрана. Верстать сайт под каждое устройство достаточно проблематично и времязатратно. Тут и может прийти на помощь адаптивная доработка сайта, а именно, гибкая верстка. Детально эта информация представлена в издании Зои Микли Джилленуотер «Flexible Web Design: Creating Liquid Layouts with CSS».

Гибкость изображений —- одно средство, как сделать сайт адаптивным. Адаптивная верстка предполагает использование атрибутов и других возможностей CSS для изменения размера картинок.

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

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

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

Внедрение медиазапросов , или @media. Позволяет при условии меньшего размера экрана, чем указанный, применить вложенное в код CSS-правило.

Особенности разработки адаптивного дизайна в компании KOLORO

Агентство КОЛОРО предлагает услуги создания адаптивного сайта для мобильных, а также доработку сайта для повышения адаптивности.

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

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

Остались вопросы? Расскажите нам о своем проекте и получите бесплатную консультацию уже сейчас!

Как отображается ваша страница на мобильных?

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

В редакторе:

В предпросмотре:

Как настроить адаптивность отдельного виджета?

Адаптивность некоторых виджетов можно настраивать отдельно. Настраиваем отображение виджетов "Колонки","Картинка", "Кнопка" и "Текст" на мобильных устройствах.

Виджет «Колонки»

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

Виджет «Картинка»

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

Виджет «Кнопка»

Указав «Особое положение для телефонов», меняем выравнивание кнопки на телефоне: слева, по центру, справа, или растягиваем по ширине.

Виджет «Текст»

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

Как скрыть виджет или секцию?

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

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

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

Скрываем виджет

Скроем виджет “Картинка” и виджет “Текст” для широких экранов. Виджеты будут показываться только на мобильных устройствах, планшетах и ноутбуках, для широкоэкранных устройств виджеты будут скрыты даже в редакторе.

Скрываем секцию

Например, скрываем первую секцию для широких экранов.

Мобильное меню

Используем виджет “Мобильное меню” удобной навигации на мобильных. На широких экранах меню будет выглядеть как обычное.

Как установить своё меню в мобильное?

Добавим мобильное меню на секцию, удалим из него встроенное меню и переместим наше меню в виджет "Мобильное меню". Осталось настроить отображение меню на мобильной версии и положение кнопок. Вместо надписи мы разместили логотип.

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

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

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

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

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

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

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

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

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

Расположение

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

Для дизайнера, проектирующего сайт, важно помнить о двух моментах:

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

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

Простые контактные формы

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

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

Точные формулировки

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

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

Адаптивность контактных страниц

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

Интегральные компоненты

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

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

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

Электронная почта

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

Форма валидации

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

Телефонные номера

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

Профили в социальных медиа

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

Проектирование страницы контактов

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

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

Вывод

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