Одним из элементов, влияющих на конверсию сайта, является карта проезда. Казалось бы, такая мелочь может значительно облегчить работу с вашими потенциальными клиентами.
Как сделать карту проезда
Я не стану преувеличивать, если скажу, что значительную часть офисов найти затруднительно (особенно в крупных городах), а ведь в офис (или пункт выдачи товаров) приезжают ваши клиенты. Адреса на странице контактов порой бывает недостаточно, чтобы четко сориентировать клиента в пространстве. И вот тут-то и приходит на помощь карта проезда!
О том, где ее разместить, и как ее лучше всего оформить, мы сегодня поговорим.
6 правил идеальной карты проезда
Карта проезда на вашем сайте должна удовлетворять нескольким простым критериям:
- быть четкой и давать ясное представление о вашем месте нахождения;
- карта должна иметь достаточные размеры, чтобы ее элементы были легко различимы;
- дизайн карты проезда должен соответствовать стилистике сайта;
- карта должна быть визуально притягивающим элементом;
- карта проезда должна корректно отображаться на мобильных устройствах;
- карта (по возможности) должна способствовать продвижению в поисковых системах.
Какие бывают карты проезда?
Графическая карта-схема
Классический вариант карты проезда – это самая обыкновенная картинка, так называемая схема проезда. Вроде тех абракадабр, которые мы рисуем на салфетках, пытаясь объяснить другу в ходе повседневной беседы, как добраться до пункта А из пункта Б.
Достоинством графических схем проезда является возможность подчеркнуть стилистику сайта и поддержать единую маркетинговую стратегию, оформив неказистую схему проезда в едином стиле со всеми остальными элементами сайта (да хоть бы и отметить место расположения офиса своим логотипом).
Второе несомненное достоинство графической карты-схемы – произвольная детализация. Вы вольны указать на схеме хоть колдобину на проезжей части, хоть розовую вывеску над голубой витриной магазина напротив. Можете даже обозначить количество шагов, которое отделяет вход в здание вашего офиса от ближайшего ларька. Короче, все максимально подробно и доходчиво для удобства клиентов и вашего спокойствия.
К недостаткам графической карты проезда относится необходимость задействовать профессионального дизайнера. Вы же не хотите опозориться на весь интернет рисунком из детского альбома? Хотя, почему-то значительная часть схем проезда выгладит так, будто ее рисовали левой пяткой в 9 утра 1 января. А ведь красиво выполненная карта-схема может оставить в памяти потенциального клиента след, который непременно выведет его на вашу компанию.
Интерактивная карта проезда на сайте
Другой популярный вариант оформления – размещение интерактивной карты-схемы на базе API сервисов карт Яндекса или Google Maps. Несомненное достоинство данного варианта – простота создания карты проезда и легкость ее размещения на сайте. По этому поводу даже один мой знакомый дизайнер воскликнул: — «…правильно, так и надо! Все вставляют карты от Google», хотя я подозреваю, что ему просто было лень впрягаться в отрисовку симпатичной схемы проезда в затратном стиле.
Несмотря на высокий уровень профессионализма специалистов Google и Яндекс вы получаете хоть и интерактивную, но все-таки в некоторых случаях недостаточно подробную карту. Исправить это уже не удастся. Да и стилистика карты может не сочетаться с дизайном вашего сайта, хотя, какая разница? Мы ведь хотим быстро и просто разместить простенькую схему проезда без лишних затрат временных и денежных ресурсов.
Анимированные карты и схемы проезда
Красивые анимированные карты и схемы проезда стали попадаться довольно часто (правда, только на дорогих и серьезных проектах). На таких картах указываются:
- направление движения автомобилей по полосам дорог и ближайших автомобильных развязок;
- схемы маршрутов от ближайших остановок общественного транспорта;
- маршруты клиентов-пешеходов.
Все это анимированное изобилие просто завораживает! Можно сидеть и медитировать часами над подобными изысками.
Как сделать анимированную карту проезда для сайта?
Изготовление анимированных карт производится с использованием технологии Flash, так что вложиться в дизайн и программирование на Flash придется дополнительно. Размер вложений вы вольны определить самостоятельно. В конце концов, никто не запрещает заказать простенькую анимированную карту-схему.
Альтернативный способ создания карты проезда
Каждый из перечисленных вариантов реализации схемы проезда на сайте имеет как свои несомненные достоинства, так и довольно весомые недостатки. Поэтому я хочу предложить вам альтернативный способ реализации – посредством HTML и CSS.
Если честно, такой вариант реализации схемы проезда мне почему-то еще не попадался, а ведь у него масса преимуществ:
- простота реализации;
- максимальная детализация;
- возможность выдержать общую стилистику сайта;
- возможность создания интерактивных элементов (всплывающие подсказки, анимированные элементы карты);
- возможность для поисковой оптимизации страницы контактов.
Так что берите на вооружение идею, тем более что она эффективна и бесплатна.
Где размещать схему проезда?
Классический вариант размещения схемы проезда – это на странице контактов. Оно и понятно, ведь карта призвана визуализировать адрес. Однако, не все так однозначно.
В некоторых случаях (когда у компании несколько офисов или сеть магазинов) возникает необходимость разместить несколько схем проезда. В этом случае разумно будет создать отдельную страницу для размещения карт проезда, чтобы не перегружать страницу контактов.
Не помню точно где, но мне однажды попался какой-то сайт, карта проезда на котором была размещена в массивном футере. Все бы хорошо (вряд ли кто-то заикнется, мол «не нашел на сайте схему проезда»), да вот только беда – карта была очень мелкой. Даже при неприлично огромном футере рассмотреть что-то на такой схеме проезда было крайне затруднительно. Кроме того данное расположение схемы проезда вызывает еще одну проблему – футер становится перегруженным, а это уже проблема юзабилити.
Как видите, работать над интернет-проектами можно круглосуточно и без передыху, непрестанно улучшая каждый их элемент, насколько бы незначительным он не казался.
