Карта проезда на сайте: юзабилити и поисковая оптимизация на реальных примерах | SEO скрипт

Карта проезда на сайте: юзабилити и поисковая оптимизация на реальных примерах

карта проезда

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

Как сделать карту проезда

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

О том, где ее разместить, и как ее лучше всего оформить, мы сегодня поговорим.

6 правил идеальной карты проезда

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

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

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

Графическая карта-схема

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

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

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

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

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

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

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

Другой популярный вариант оформления – размещение интерактивной карты-схемы на базе API сервисов карт Яндекса или Google Maps. Несомненное достоинство данного варианта – простота создания карты проезда и легкость ее размещения на сайте.  По этому поводу даже один мой знакомый дизайнер воскликнул: — «…правильно, так и надо! Все вставляют карты от Google», хотя я подозреваю, что ему просто было лень впрягаться в отрисовку симпатичной схемы проезда в затратном стиле.

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

Анимированная карта проезда

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

Красивые анимированные карты и схемы проезда стали попадаться довольно часто (правда, только на дорогих и серьезных проектах). На таких картах указываются:

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

Все это анимированное изобилие просто завораживает! Можно сидеть и медитировать часами над подобными изысками.

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

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

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

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

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

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

Так что берите на вооружение идею, тем более что она эффективна и бесплатна.

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

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

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

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

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

Поделиться

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *