{"id":14285,"url":"\/distributions\/14285\/click?bit=1&hash=346f3dd5dee2d88930b559bfe049bf63f032c3f6597a81b363a99361cc92d37d","title":"\u0421\u0442\u0438\u043f\u0435\u043d\u0434\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f","buttonText":"","imageUuid":""}

Почему плохо использовать карты на сайтах

Иногда дизайнеры сталкиваются с требованием клиента — “Добавьте карту”. Но карта всегда нарушает дизайн систему, даже если делать кастомизацию.

Это тоже не решает проблему диссонанса с дизайном сайта, на карте много: улиц, рек, домов, номеров, лишних линий, значков — все это лишний "мусор".

Недавно я столкнулся с этим, работая над промо-сайтом водки в Tilda. Имеющий партнеров производитель хотел указать контакты всех 14 магазинов в Москве (с возможностью перехода на сайт каждого из них), что было реализовано списком. Также попросил карту с 14 точками раскиданными по Москве, включая МО. Это крайне испортило впечатление от сайта, но было требованием.

Сущностно карта, это виджет (widget), как виджет погоды, к примеру. Как сущность, это не элемент дизайна, не часть сайта, а внешний компонент.

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

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

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

Google API позволяет менять цвет карты на темно или светло-серую, но за размещение карты надо платить ежемесячной абонентской платой. После санкций оплата из РФ отключена и забудьте про google в принципе.

bosco.ru

Однако, даже в черно-белом виде карта может смотреться плохо.

Самый лучший и удобный способ — не показывать карту. Сделайте ссылку на google или yandex maps в контактах.

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


Экологично ссылайтесь на карту

Если вам необходимо указать сразу адрес, например: Москва, Тверская, 1 (делайте адрес ссылкой, подчеркнутой или нет, зависит от дизайна сайта или ставьте ссылку рядом с адресом (справа или снизу): “посмотреть на карте”, “посмотреть адрес(а)”, “открыть в яндекс картах”, “как добраться” и т.п., что более экологично и грамотно (т.к. исключает непонимание пользователем в случае не подчеркнутой ссылки)

Аргумент “пользователь не поймет” оставьте, поймет.

Fantasy Interactive — ссылка на карту "Get directions"
Кнопка "See on the Map"
Pinkman — кнопка-карточка с адресом + стрелка (дающая понять, что это точно кнопка)
Студия Артемия Лебедева, академический подход (подчеркнутая цветная ссылка и UX copy)
Agima — иконка и ссылка "Google Maps"
Deluxe-interactive — открытие карты при наведении на адрес

Если же адресов много, то списоком с переходам на страницу каждого из них.

Самый глобальный вариант кол-ва магазинов (указано сколько их в каждой стране)

Когда карта уместна

Если карта — изображение или иллюстрация (3d, svg, png и даже анимация).

У компании офисы в разных странах или континентах — масштабно

У компании есть кафе или магазин в закоулках — например hand made косметика и что-то локальное (можно показать дворы, тропинки и даже придать позитивного вайба в рамках бренд системы и дизайна сайта)

Когда местоположение одно и находится в очень престижном районе, например, в пределах садового кольца и хочется это акцентировать...

Я не нашел явного примера, но здесь показано фоновое видео с офисом в центре Москвы 

Резюме

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

В качестве завершения я покритикую решение одной из уважаемых студий РФ.

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

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

Ответить
Развернуть ветку
janemetoyou

а вы пробовали работать с mapbox studio?

Ответить
Развернуть ветку
-1 комментариев
Раскрывать всегда