35 образцов удобной интерактивной схемы на сайте торгового центра
Человечество садит картофель на Марсе и вживляет чипы в кровяные клетки, в то время как вы выкладываете на сайт торгового центра карту отделов в виде джипега. Неудобную, громоздкую и совершенно нечитабельную. Не надо так.
Простая графическая схема не подходит для современных торгово-развлекательных комплексов. На ней крайне сложно показать названия сотни брендов. И в принципе невозможно разместить их подробные описания, режимы работы, информацию о скидках и многое другое.
Другое дело — интерактивная схема. Со всеми вот этими всплывающими окошками и подсвечиваниями отдельных элементов. Компактная, лёгкая для восприятия.
Кому и в каких ситуациях пригодится интерактивная карта торгового центра?
Во-первых, людям, которые ценят своё время и заранее планируют шопинговые вылазки. Даже один час в торговом центре пройдёт с пользой, если заранее узнать расположение интересующих брендов.
Во-вторых, схема нужна тем, кто хочет просто прогуляться по новому торгово-развлекательному комплексу. Например, приезжим из других городов. Они изучат перечень магазинов и решат, стоит ли в принципе посетить тот или иной торговый центр.
В-третьих, планировка торгового центра интересует предпринимателей. Они ищут свободные для аренды площади. И смотрят, кто из конкурентов есть по соседству.
Как сделать удобную интерактивную карту?
Каждая схема индивидуальна. Её внешний вид зависит от размеров торгового комплекса, количества этажей, расположения относительно улиц и других городских объектов.
1. Сделайте подробный план каждого этажа
Самая крупная часть интерактивной схемы торгового центра — это поэтажная планировка. Пусть она будет подробной, но в то же время визуально лёгкой. Должно быть понятно, как располагаются отделы, где находится вход, парковка и другие объекты.
План каждого этажа ТЦ «Водный» выполнен в своей цветовой гамме. Названия крупных брендов подписаны сразу, а более мелких — появляются при наведении мыши. Подписаны входы с разных улиц, видно расположение парковки.
2. Дайте возможность выбрать этаж
Если расположить все поэтажные планировки торгового центра одну под другой, то схема получится очень объёмной. Выход такой — показывайте всегда план только одного этажа. Но при этом дайте возможность переключаться между планировками разных этажей.Самый простой вариант: написать «Выберите этаж: 1, 2, 3». А можно поступить интереснее и насытить этап выбор этажа небольшой дозой информации. Или вообще — превратить в игру.
На сайте ТРК «Весна» уже на стадии выбора этажа в двух словах написано, что именно на каждом из них находится: на нулевом — паркинг, на первом — кафе и гипермаркет, на втором — кинотеатр.
В шапке сайта ТРЦ «РИО» находится яркий интерактивный элемент для выбора этажа. Это первое, что видят пользователи. Фишка работает на привлечение внимания к разделу с планировкой лучше, чем обычная текстовая ссылка.
На сайте ТЦ «Европейский» нет текстовой ссылки на раздел с картой. Вместо этого пользователям предлагают выбрать этаж сразу на главной странице.
3. Подпишите названия отделов
Одна из главный задач интерактивной планировки торгового центра — показать, какие тут есть магазины. Однако если подписать все названия сразу, то получится неразбериха. Удобнее помещать названия во всплывающие окошки, которые появляются по наведению или клику мыши.
Названия магазинов ТРЦ «Планета» появляются сразу же при наведении мыши.
Названия отделов ТЦ «Митино» появляются сразу при наведении мыши.
4. Дайте краткое описание магазинов
На общем плане этажа напишите в двух словах, что продаётся в каждом отделе. Разместите логотипы, режим работы и ссылку на полное описание на сайте торгового центра. Кажется, что это слишком много информации. Однако её можно уложить ровными рядами внутри всплывающего окошка, которое появляется при наведении на название магазина.
Во всплывающем окошке на планировке ТРЦ «Европа» есть и название, и направление работы, и режим, и ссылка на сайт.
Клиенты могут не знать названия всех брендов. Но иногда в памяти откладывается цвет вывески магазина, в котором они как-то раз удачно закупились рубашками. Найти такой отдел на интерактивном плане молла помогут цветные логотипы брендов.
На сайте ТРЦ «БОШЕ» логотипы появляются во всплывающих окошках по клику на соответствующую ячейку на карте.
На сайте ТРК «Атмосфера» логотипы появляются по наведению на отдел.
Ссылки на сайты магазинов ТРЦ «Калейдоскоп» показаны во всплывающих окошках.
Не только логотип самого отдела, но и ссылки на похожие магазины есть во всплывающих окошках на карте ТРК «Петровский».
Хитро поступили на сайте ТК «Центральный». На общем плане сразу выводится подробное описание отдела в правом блоке. При этом карта остается компактной.
5. Добавьте строку поиска
Если исследование карты торгового центра не принесло результата, то пользователь может уйти с сайта расстроенный. А может попытаться найти то, что ему нужно, при помощи поисковой строки как по названиям брендов, так и по категориям товаров: одежда, обувь, подарки и т.д.
На сайте ТРЦ «Аэропарк» есть поиск по арендаторам. Здесь не обязательно вводить названия брендов правильно. Например, по запросу «бершка» покажут «Bershka», по запросу «глория» — «Gloria Jeans». Найденный отдел сразу обозначается на планировке.
Достаточно ввести одну букву в строку поиска на план ТРЦ «Европа», чтобы получить все названия магазинов, содержащие данную букву.
6. Разбейте отделы на категории
Десятки различных магазинов торгово-развлекательного комплекса можно объединить в несколько категорий по видам товаров или услуг: одежда, обувь, детские товары, продукты, техника и другие. Так клиентам будет легче ориентироваться в схеме. Обозначайте на карте все бренды из выбранной пользователем категории товаров. Сразу будет видно, большой ли есть выбор игрушек или кожаных курток.
Товары «Аэропарка» сгруппированы не только по типам, но и по гендерной принадлежности. Бренды выбранной категории подсвечиваются на планировке, и дополнительно выводится их количество на каждом этаже.
На плане ТЦ «Кит» магазины из одной категории обозначены одним и тем же цветом. В блоке со списком категорий показаны названия входящих в них брендов.
На плане ТРЦ «Планета» банковские услуги обозначаются голубым цветом, спортивные товары — синим, электроника — красным и т.д.
Отделы одного типа в ТЦ «Омский» обозначаются красными маркерами.
Карта ТК «Савёловский» начинается с отдельного плана четырёх крупных центров: модного, детского, компьютерного и мобильного. При наведении на любую из категорий выводится количество магазинов внутри неё.
7. Добавьте значки инфраструктурных объектов
Покажите, где находятся важные для клиентов помещения и зоны. Обозначьте на интерактивной карте стойку с информацией, туалет, лифт, эскалатор, комнату матери и ребёнка, банкомат, гардероб.
На плане ТРЦ «Радуга Парк» можно включить и отключить слой со всеми информационными значками.
Значки на планировке ТРЦ «Афимолл Сити» появляются по наведению одну из голубых пиктограмм вверху слева.
На карте ТРЦ «Радуга» показаны не только эскалаторы, гардероб и туалеты, но и в мельчайших деталях прорисованы фонтаны, клумбы и скамейки. Так посетителям молла удобно будет договориться о встрече у любого из этих знаковых объектов.
Администрация ТЦ «Capital Mall» не скрывается от посетителей. Её расположение указано на плане.
8. Расшифруйте условные обозначения
Добавьте на интерактивную схему легенду — список условных обозначений, которые вы использовали, с разъяснением их значения.
На планировке комплекса «Кит-интерьер» есть список использованных значков с их расшифровкой.
9. Обозначьте входы в торговый центр
Как правило, в торгово-развлекательный комплекс можно войти сразу в нескольких местах. Отобразите на плане все возможные входы и выходы.
На карте «Сибирского Молла» указаны входы с разных улиц, а также время, когда каждый из них открывается и закрывается.
10. Укажите расположение и стоимость парковки
Иногда парковку можно неожиданно встретить на заднем дворе торгового центра, а иногда — в проезде между двумя корпусами. Отобразите все возможные места, где клиенты могут оставить машину на время шопинга.
На интерактивной схеме ТК «Аэробус» видно, куда можно припарковать машину.
На плане ТК «Савёловский» есть предупреждение о платной парковке, показаны стоимость за каждый час пребывания и общее количество машиномест.
11. Объясните, как работать со схемой
Добавьте на интерактивную карту ненавязчивый рассказ о том, как ей пользоваться. Можно обратить внимание только на некоторые функции: как переключаться между этажами, как узнать режим работы и т.д.
На планировке ТК «Аэробус» включается полупрозрачный слой с небольшой инструкцией.
12. Дайте возможность выбрать масштаб карты
В больших моллах со множеством магазинов необходима возможность масштабирования карты. Мелкие отделы удобнее будет изучать на увеличенном изображении интерактивной схемы.
В ТРЦ «Акварель» находится 113 магазинов. Можно увеличить масштаб планировки при помощи колёсика мышки, чтобы можно было всех их хорошо рассмотреть.
13. Обозначьте скидки в отделах
Помогите людям сэкономить на шопинге — расскажите, где сейчас проходят акции. Клиенты затем могут возвращаться к изучению интерактивной схемы вновь и вновь, чтобы отслеживать новые скидки.
На планировке ТЦ «Гринвич» указан размер скидки по единой дисконтной карте в разных магазинах.
На плане «МЕГИ Белая Дача» можно отметить только те отделы, которые принимают бонусные баллы.
14. Разместите информацию для арендаторов
Покажите, какие площади в торговом центре сейчас пустуют и свободны для аренды. Хорошо сразу же дать дополнительную информацию, например, стоимость ежемесячного платежа.
На плане ТЦ «Ривердейл» оранжевым и синим цветом обозначены свободные для аренды места, указана их стоимость, площадь и даже доходность.
На планировке «Метромолла» указана площадь каждого отдела и его номер.
На сайте ТРЦ «Сити-Молл» можно заполнить онлайн-заявку на аренду.
15. Подготовьте версию для печати
Сделайте возможность распечатать только схему торгово-развлекательного комплекса без других элементов сайта. На распечатке можно отметить интересующие бренды и взять с собой на шопинг.
План ТРЦ «Филион» можно распечатать.
Полный текст статьи читайте на CMS Magazine
