Почему плохо использовать карты на сайтах
Иногда дизайнеры сталкиваются с требованием клиента — “Добавьте карту”. Но карта всегда нарушает дизайн систему, даже если делать кастомизацию.
Это тоже не решает проблему диссонанса с дизайном сайта, на карте много: улиц, рек, домов, номеров, лишних линий, значков — все это лишний "мусор".
Недавно я столкнулся с этим, работая над промо-сайтом водки в Tilda. Имеющий партнеров производитель хотел указать контакты всех 14 магазинов в Москве (с возможностью перехода на сайт каждого из них), что было реализовано списком. Также попросил карту с 14 точками раскиданными по Москве, включая МО. Это крайне испортило впечатление от сайта, но было требованием.
Сущностно карта, это виджет (widget), как виджет погоды, к примеру. Как сущность, это не элемент дизайна, не часть сайта, а внешний компонент.
Один из минусов в том, что карту пытаются сделать в прямоугольнике, квадрате, узкой полосе, что нарушает удобный пользовательский опыт.
Часто “дизайнеры” выкручиваются из такой ситуации не аргументацией, почему так не правильно, а ставят костыли и вот она уже серая и не так выделяется. Но выглядит это отвратительно, как бы вы не старались.
Напоминаю, если Яндекс узнает, что его виджет — карта был подвержен визуальным изменениям, карту на сайте он заблокирует по юр. аспекту. Потому, как вы нарушаете бренд цвета цифрового продукта Яндекса.
Google API позволяет менять цвет карты на темно или светло-серую, но за размещение карты надо платить ежемесячной абонентской платой. После санкций оплата из РФ отключена и забудьте про google в принципе.
Однако, даже в черно-белом виде карта может смотреться плохо.
Самый лучший и удобный способ — не показывать карту. Сделайте ссылку на google или yandex maps в контактах.
- Не всем пользователям нужна карта, не надо показывать ее всем подряд. Кому нужна — перейдут по ссылке (не навязывайте людям то, в чем они могут не нуждаться, оставьте им выбор — смотреть или не смотреть).
- Пользователю удобно видеть карту в большом размере, на весь экран, провести маршрут, узнать время его прохождения пешком или на авто.
Виджет позволит посмотреть панораму, фото и ориентироваться лучше.
Экологично ссылайтесь на карту
Если вам необходимо указать сразу адрес, например: Москва, Тверская, 1 (делайте адрес ссылкой, подчеркнутой или нет, зависит от дизайна сайта или ставьте ссылку рядом с адресом (справа или снизу): “посмотреть на карте”, “посмотреть адрес(а)”, “открыть в яндекс картах”, “как добраться” и т.п., что более экологично и грамотно (т.к. исключает непонимание пользователем в случае не подчеркнутой ссылки)
Аргумент “пользователь не поймет” оставьте, поймет.
Если же адресов много, то списоком с переходам на страницу каждого из них.
Когда карта уместна
Если карта — изображение или иллюстрация (3d, svg, png и даже анимация).
У компании офисы в разных странах или континентах — масштабно
У компании есть кафе или магазин в закоулках — например hand made косметика и что-то локальное (можно показать дворы, тропинки и даже придать позитивного вайба в рамках бренд системы и дизайна сайта)
Когда местоположение одно и находится в очень престижном районе, например, в пределах садового кольца и хочется это акцентировать...
Резюме
Пользуйтесь лучшими решениями от лучших умов. Не слушайте проходимцев и дилетантов, клиентов и менеджеров. Держитесь принципов хорошего дизайна: ничего лишнего, эргономичность, интуитивность, удобство, эстетика.
В качестве завершения я покритикую решение одной из уважаемых студий РФ.
У вас самый хороший подход к картам. Сам делал кликабельную иллюстрацию с переходом на Яндекс карты с построенным маршрутом от ближайшего метро. На компьютере откроется сайт, а на мобилке приложение, в котором можно сразу построить маршрут или добавить в избранное
а вы пробовали работать с mapbox studio?