Домой / Работа в Интернете / Адаптивность контактная информация. Как создать идеальную страницу контактов? Использование контрольных точек

Адаптивность контактная информация. Как создать идеальную страницу контактов? Использование контрольных точек

13.04.2020 Работа в Интернете

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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


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

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

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


Вывод

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

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

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

По данным MediaScope, быстрее других растет мобильная аудитория, прирост за 2017 год составил 15%. Совокупная мобайл-аудитория 66 миллионов человек, это 54% от всего населения (2017). При этом число десктопных пользователей снижается.

По данным газеты «Коммерсант», аудитория рунета в мобильном сегменте выросла за 2017 год с 47% до 56%. Причем рост происходит за счет старшего поколения, потому что среди молодежи уровень пользования интернета уже давно достиг максимального предела.

Крупнейший поставщик услуг, связанных с сетевыми технологиями Cisco занимается тестированием сетей 5G, которые должны появиться в 2020 году. Компания Cisco в 2016 году спрогнозировала, что к 2021 году мобильный трафик вырастет семикратно .

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

Что такое адаптивный дизайн?

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

Адаптивный дизайн (Adaptive Web Design) — это дизайн страниц сайта, построенный таким образом что все элементы динамически подстраиваются под экран, в зависимости от его размера, чтобы в ограниченных условиях показывать на экране только самые важные элементы. Чем меньше экран, тем меньше на нем объектов, остаются только самое важное. На больших экранах мы привыкли видеть на веб сайте кучу всяких сайд баров, меню, виджетов и других подобных вещей, которые, по сути используются очень редко. Поэтому в адаптивной версии, остается только действительно важное и функциональное. Например, для интернет-магазина это шапка с телефоном, меню-трансформер и товары, остальное лишнее, но для покупки этого достаточно.

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

Есть ли разница между адаптивной и отзывчивой версткой сайта?

На самом деле понятия отзывчивый и адаптивный имеют различие. Когда то давно, когда смартфоны еще даже и не думали покорять планету, верстальщики и программисты затеяли спор. Какой же метод оптимизации под мобильные устройства лучше: метод (RWD — отзывчивый) или метод (AWD — адаптивный). Разница их в том, что отзывчивый метод меняет размер элементов в процентах: изображения, видео, блоки и т.д.. А вот адаптивный дизайн опирается не на размер браузера, а фокусируется на пользователе и имеет три предопределенных макета: под смартфон, планшет, ноутбук.

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

Зачем сайт должен быть адаптивным?

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

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

Удобная система аналитики в Google Analytics и в Яндекс.Метрики. Системы автоматически определяют мобильность вашего сайта и формируют готовые отчеты со статистикой посещаемости и конверсий совершенных через мобильные устройства. Это очень удобно для определения мобильности вашей аудитории.

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

Что лучше: мобильная или адаптивная версия?

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

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

Почему лучше адаптивный сайт, а не мобильная версия?

  • В адаптивной верстке изменения в коде будут отображаться сразу для всех устройств. Например если нужно изменить или добавить новый важный функционал. В случае когда у сайта мобильная версия, придется делать изменения в обоих версиях. И так всякий раз, что вдвое увеличивает траты на программистов и верстальщиков.
  • В адаптивном сайте контент не дублируется в отличии от метода, когда создается мобильная версия сайта.
  • Адрес на странице для десктопа и смартфона в адаптивной версии остается одинаковым, поэтому вам не придется каждый раз устанавливать редиректы.
  • Нет необходимости каждый раз формировать контент на отдельные страницы для мобильных и стандартный устройств.
  • Кроме того Google заявил на одной из конференций Digital October в декабре 2016, что нужно делать адаптивную версию, а мобильная версия это несусветная чушь.

Лайф-хак! Знаете ли вы, что адаптацию сайта под мобильные можно сделать гораздо дешевле чем вы думаете? Потому что, по сути, для этого не требуется каких-то больших усилий и работа выполняется за короткие сроки без каких-либо последствий для вашего сайта. Как правило веб-студии предлагают дерзкие ценники: от 10 000 ₽ до 20 000 ₽ , а по факту адаптацию можно заказать всего за 500 ₽ удаленно на фриланс бирже Kwork .

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

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

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

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



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

Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly . В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.

Проверить отображение страницы на мобильных устройствах можно на сервисах и .

Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам Что такое адаптивная вёрстка

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

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

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

Вёрстка главной страницы

Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px .

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


Рис. 2. Пример адаптивной верстки 1. Метатеги и раздел

1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

Адаптивная вёрстка сайта

2. Шапка страницы

В шапке страницы поместим следующие элементы-контейнеры:
логотип

© Copyright 2024, Осваиваем ПК - Интернет. Скайп. Социальные сети. Уроки по Windows