Карта проезда для сайта в картинках с примерами.

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

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

Секреты идеальной карты проезда для сайта.

Карта проезда должна удовлетворять нескольким простыми критериям:

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

Какие бывают карты проезда?

Графическая карта-схема для сайта.

Классический вариант карты проезда – это самая обыкновенная картинка, так называемая схема проезда. Вроде того, что мы рисуем на салфетках, пытаясь объяснить другу в ходе повседневной беседы, как добраться до пункта Б из пункта А.

Обычная графическая карта

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

Классическая схема проезда

А вот этот классический вариант карты-схемы проезда выполнен, на мой взгляд, хорошо: все лаконично и понятно, за исключение немного подпорченных шрифтов.

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

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

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

Красивенькая карта проезда для сайта.

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

К недостаткам графической карты проезда относится необходимость задействовать профессионального дизайнера. Вы же не хотите опозориться на весь Рунет рисунком из детского альбома? Хотя, почему-то значительная  часть схем проезда выгладит так, будто ее рисовали левой пяткой в 9 утра 1 января. А ведь красиво выполненная схема может оставить в памяти потенциального клиента след, который непременно выведет его на контакт с вами.

Интерактивная карта проезда на сайте.

Другой популярный вариант оформления – размещение интерактивной карты-прохода для сайта на базе API сервисов карт Яндекса или Google. Несомненное достоинство данного варианта – простота создания и легкость ее размещения на сайте.

Вот так выглядит карта проезда от Яндекса.

Вот так выглядит карта проезда от Яндекса.

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

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

Анимированные карты и схемы проезда.

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

На таких картах указываются:

  • направление движения автомобилей по полосам дорог и ближайших автомобильных развязок;
  • схемы маршрутов от ближайших остановок общественного транспорта;
  • маршруты клиентов-пешеходов.

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

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

Альтернативный способ создания карты проезда на сайт.

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

Если честно, такой вариант реализации схемы проезда мне почему-то еще не попадался, а ведь у него масса преимуществ:

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

Где размещать схему проезда?

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

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

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

Схема проезда №1 на сайт.

Схема проезда №1 на сайт.

Схема проезда №2 на сайт.

Схема проезда №2 на сайт.

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

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

Эту графическую карту язык не поворачивается назвать схемой проезда.

Эту графическую карту язык не поворачивается назвать схемой проезда.

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

Счетчик