Как мы делали интерактивную схему для сайта Волгино

Как мы делали интерактивную схему для сайта Волгино

Предыстория

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

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

Идея

Мы проанализировали данные из поисковой и рекламной аналитики. Увидели то, что на сайт заходят как те, кому нужна коммерческая недвижимость, так и те, кто ищет различные товары и услуги. Стало понятно, что делать удобно и просто надо для различных сегментов аудитории.

Мы разбили создание этого блока на несколько этапов, каждый из которых реализуется последовательно. Выделили 2 основных - создание списка бизнесов уже представленных и отображение свободных помещений. Список вакантных объектов был уже представлен в отдельном разделе, и добавление свободных объектов на карту запланирован на 2-й этап.

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

Дизайн

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

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

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

дизайн иконок складов с цветовой кодировкойСоздание информационного блока

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

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

На втором этапе мы планируем добавить вакантные коммерческие помещения, чтобы свободные помещения были в общем списке в одной группе.

Выводы

  • Если подойти творчески, то большой объем информации, при желании и возможностях, можно представить в довольно компактном виде.
  • Простота интерфейса не означает того, что решение простое в разработке, в дизайне, в реализации и сделано за полчаса.
  • Данные аналитики помогают принимать более взвешенные решения.
  • Этап проектирования важен, это помогает ответить на многие вопросы заранее.
  • Работу над развитием ресурса важно делать, не забрасывать его, постоянно думать над улучшениями, тестировать и реализовывать идеи.
  • Каждый элемент сайта должен помогать пользователям ресурса, ведь они пришли за ответами и наша задача - дать их.
Добавить комментарий

Your email address will not be published.