Мы любим изучать города и особенности жизни в них. Обнаруживать проблемы городских жителей и предлагать решения в продуктах 2ГИС. Например, чтобы люди быстрее находили компании, мы подготовили данные о входах в миллион компаний страны.
Решая одну проблему, мы обнаружили другую. Да, теперь 2ГИС приводит пользователей прямо к двери, но что если организация или банкомат находятся внутри большого здания?
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/dbc/b09/1a2/dbcb091a28046c2d77c22a009da18c1b.png)
По сути, мы бросили человека с его проблемой, так и не показав, где именно находится объект его поиска. Нужно было срочно искать решение.
Так появилась идея, которую мы назвали «Этажи».
Помимо истории новой возможности в 2ГИС хочется поделиться нашим подходом к её созданию, рассказать об участниках и особенностях процесса создания. Поэтому познакомьтесь с ролями, которые будут появляться на каждой ступеньке формулирования продукта.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/329/32e/f4e/32932ef4ed12b766ef3af8a929d68e42.png)
А сам процесс в общих чертах выглядел так:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/3df/8e9/6a4/3df8e96a4a8e39bcdbe7db9aefb04ed1.png)
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/855/f8b/8f5/855f8b8f58ce8ae7d2032d115815f718.png)
Вопросами ориентации в огромных помещениях занимаются достаточно давно и мы хотели понять всё пространство решений, поэтому исследование привело нас в XIX век.
В 1840—1860-х годах компания французского архитектора Леонса Рейно проектировала вокзалы. И руководствовалась они основным принципом: сократить путь пассажиров от входа в здание к платформе поезда. Поэтому в основу всех проектов легли: большой вход, просматриваемое пространство путей поездов, группировка заведений внутри по краям пространства. Так были спроектированы основные вокзалы Франции: Аустерлиц, Северный 1, Северный 2.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/c8e/ad6/207/c8ead62078418d1bbcd2aac8b72f8347.png)
Подход был стандартизирован, архитектурные принципы легли в основу многих вокзалов и ещё более полувека решали задачи внутренней навигации.
Похожим был и Лертский вокзал в Берлине. Его разрушили во время второй мировой войны и позже взорвали. Сейчас на его месте стоит Центральный вокзал Берлина — крупнейший вокзал Европы, официально с 2006 года.
Он принимает несколько типов поездов, является торговым центром и крупным транспортным узлом. Как вы понимаете, только архитектурой проблемы навигации в таком помещении уже не решить. Для таких больших помещений нужны дополнительные системы навигации — указатели, информационные стенды, таблички.
Но в разное время, в разных зданиях, городах, культурах есть отличия в дизайн-языках, а это сказывается и на отличиях внутренних систем навигации. Пример — иконка трансфера в разных аэропортах из презентации Сибил Шлайх и Хайке Нейл.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/346/1e4/8df/3461e48dfea54b6c5f5590a1d039cff9.png)
И это в общем-то не так плохо, если пиктограммы навигации понятные, читабельные, узнаваемые в контексте страны и времени. Но сегодня не редка ситуация, когда в одном здании вы встретите несколько разных навигационных систем.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/73e/af4/fb0/73eaf4fb092b4196777b34395844fba5.png)
Получается, что вам нужен гейт в аэропорту или нужно найти конкретный магазин в торговом центре, а на разных этажах, в разных частях здания встречаются разные указатели и от таблички к табличке необходимо потратить время: изучить их, понять в верном направлении ли вы двигаетесь.
Убедившись в проблеме внутренней навигации, мы начали рассматривать варианты решений для наших продуктов. Поскольку архитектуру мы осиливать не планировали, а пройти путь разработки универсальных wayfinding-систем знаков для всех заведений — задача интересная, но не своевременная. Мы взялись за анализ тенденций и рынка мобильных решений, и стали смотреть в сторону схем и справочников огромных зданий. Начали с торговых центров и с решения навигационных проблем покупателей.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/0a0/e21/88e/0a0e2188e9f0038ab55dc4384c5aeba3.png)
Казалось, что хорошо проработанная концепция карты и интерфейсов сократит время разработки, поэтому мы с энтузиазмом принялись за дизайн.
Нам в команде дизайна нужна была опора в поиске решения, звонкая метафора, которая поможет сконструировать все принципиальные дизайн-элементы. И мы нашли её в названии новой возможности. Так появились «Этажи». Это позволило начать подбирать референсы на элементы реального мира, различные карты, связывать их с чертами карт и бренда 2ГИС.
А чтобы синхронизировать ожидания и определиться с набором всех дизайн-артефактов, подготовили короткий блюпринт. В котором «Этажи» мы представили:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/dfe/b8d/ea7/dfeb8dea72929b2682fc552937529aac.png)
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/9d0/b81/b11/9d0b81b111c1c859e71d2192a099178a.png)
В дизайне этого режима нам было важно проявить образ основной карты 2ГИС, расширив план здания навигационными элементами. Здесь важно было помнить, что внутри помещений люди не ориентируются принципами «север-юг». Как правило, все ориентируются относительно входа в здание, а дальше сверяются с самыми крупными, заметными и значимыми магазинами, точками, лифтами, эскалаторами.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/77b/9cb/dcd/77b9cbdcd5c5a057213d3b779be3bb47.png)
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/39e/0a1/b6d/39e0a1b6dd1de39716674d9b16fcc488.png)
Дизайн карты, интерфейсов и концепция новой возможности были хорошо приняты в компании. Дальше был ряд внутренних презентаций, уточнение макетов, детальная проработка элементов интерфейса, разработка динамического прототипа. После чего задачу декомпозировали и разложили на спринты разных команд разработки и исследований.
Так появилось несколько основных направлений для проработки
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/fee/546/19e/fee54619eeca5f5124db291807cba417.png)
План исследований и разработки уходил далеко за горизонт. И с таким планом нам не светил релиз в ближайший год. Нужно было искать компромисс, тот самый MVP.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/f47/ccf/513/f47ccf5134c3e6665650fc70bbb843f3.png)
Мы создали себе временные рамки и посмотрели, что в эти рамки можно уложить, чтобы решить проблему пользователей в ближайшее время. Вырабатываем решения по основным направлениям
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/0b3/695/31c/0b369531c13006a8b306cd9e3e744132.png)
Так «Этажи» выходят на новую ступеньку — реализуемость в разумные сроки и начинается разработка, настройка, подготовка данных. Оглядываясь сегодня на проработку «Этажей», мы понимаем, что путь от идеи до разработки мы прошли с одной стороны очень быстро, с другой стороны несколько мечтательно.
Сейчас, прорабатывая сложные технологичные решения мы стараемся раньше подключать технических специалистов или делать небольшие команды под фичи, смотрим трезво на сроки, но не прекращаем мечтать.
Релиз для iOS и Android версий вышел в срок с шестью крупнейшими торговыми центрами Москвы, в которых спрятаны 2500+ организаций и 600+ инфраструктурных объектов.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/3b9/c19/ac2/3b9c19ac22b88f8c27dff3827d814a8f.png)
Мы продолжаем готовить крупнейшие торговые центры в столице и других городах, и развивать «Этажи» функционально. Следите за новостями, «Этажи» появятся и в вашем городе.
Решая одну проблему, мы обнаружили другую. Да, теперь 2ГИС приводит пользователей прямо к двери, но что если организация или банкомат находятся внутри большого здания?
![](https://habrastorage.org/getpro/habr/post_images/dbc/b09/1a2/dbcb091a28046c2d77c22a009da18c1b.png)
По сути, мы бросили человека с его проблемой, так и не показав, где именно находится объект его поиска. Нужно было срочно искать решение.
Так появилась идея, которую мы назвали «Этажи».
Помимо истории новой возможности в 2ГИС хочется поделиться нашим подходом к её созданию, рассказать об участниках и особенностях процесса создания. Поэтому познакомьтесь с ролями, которые будут появляться на каждой ступеньке формулирования продукта.
![](https://habrastorage.org/getpro/habr/post_images/329/32e/f4e/32932ef4ed12b766ef3af8a929d68e42.png)
А сам процесс в общих чертах выглядел так:
![](https://habrastorage.org/getpro/habr/post_images/3df/8e9/6a4/3df8e96a4a8e39bcdbe7db9aefb04ed1.png)
Анализ
![](https://habrastorage.org/getpro/habr/post_images/855/f8b/8f5/855f8b8f58ce8ae7d2032d115815f718.png)
Вопросами ориентации в огромных помещениях занимаются достаточно давно и мы хотели понять всё пространство решений, поэтому исследование привело нас в XIX век.
В 1840—1860-х годах компания французского архитектора Леонса Рейно проектировала вокзалы. И руководствовалась они основным принципом: сократить путь пассажиров от входа в здание к платформе поезда. Поэтому в основу всех проектов легли: большой вход, просматриваемое пространство путей поездов, группировка заведений внутри по краям пространства. Так были спроектированы основные вокзалы Франции: Аустерлиц, Северный 1, Северный 2.
![](https://habrastorage.org/getpro/habr/post_images/c8e/ad6/207/c8ead62078418d1bbcd2aac8b72f8347.png)
Подход был стандартизирован, архитектурные принципы легли в основу многих вокзалов и ещё более полувека решали задачи внутренней навигации.
Похожим был и Лертский вокзал в Берлине. Его разрушили во время второй мировой войны и позже взорвали. Сейчас на его месте стоит Центральный вокзал Берлина — крупнейший вокзал Европы, официально с 2006 года.
Он принимает несколько типов поездов, является торговым центром и крупным транспортным узлом. Как вы понимаете, только архитектурой проблемы навигации в таком помещении уже не решить. Для таких больших помещений нужны дополнительные системы навигации — указатели, информационные стенды, таблички.
Но в разное время, в разных зданиях, городах, культурах есть отличия в дизайн-языках, а это сказывается и на отличиях внутренних систем навигации. Пример — иконка трансфера в разных аэропортах из презентации Сибил Шлайх и Хайке Нейл.
![](https://habrastorage.org/getpro/habr/post_images/346/1e4/8df/3461e48dfea54b6c5f5590a1d039cff9.png)
И это в общем-то не так плохо, если пиктограммы навигации понятные, читабельные, узнаваемые в контексте страны и времени. Но сегодня не редка ситуация, когда в одном здании вы встретите несколько разных навигационных систем.
![](https://habrastorage.org/getpro/habr/post_images/73e/af4/fb0/73eaf4fb092b4196777b34395844fba5.png)
Получается, что вам нужен гейт в аэропорту или нужно найти конкретный магазин в торговом центре, а на разных этажах, в разных частях здания встречаются разные указатели и от таблички к табличке необходимо потратить время: изучить их, понять в верном направлении ли вы двигаетесь.
Убедившись в проблеме внутренней навигации, мы начали рассматривать варианты решений для наших продуктов. Поскольку архитектуру мы осиливать не планировали, а пройти путь разработки универсальных wayfinding-систем знаков для всех заведений — задача интересная, но не своевременная. Мы взялись за анализ тенденций и рынка мобильных решений, и стали смотреть в сторону схем и справочников огромных зданий. Начали с торговых центров и с решения навигационных проблем покупателей.
Поиск решения
![](https://habrastorage.org/getpro/habr/post_images/0a0/e21/88e/0a0e2188e9f0038ab55dc4384c5aeba3.png)
Казалось, что хорошо проработанная концепция карты и интерфейсов сократит время разработки, поэтому мы с энтузиазмом принялись за дизайн.
Нам в команде дизайна нужна была опора в поиске решения, звонкая метафора, которая поможет сконструировать все принципиальные дизайн-элементы. И мы нашли её в названии новой возможности. Так появились «Этажи». Это позволило начать подбирать референсы на элементы реального мира, различные карты, связывать их с чертами карт и бренда 2ГИС.
А чтобы синхронизировать ожидания и определиться с набором всех дизайн-артефактов, подготовили короткий блюпринт. В котором «Этажи» мы представили:
- как отдельный режим работы приложения, в который пользователь попадает из основной карты и может переключаться между торговыми центрами, просматривать список этажей торгового центра, как в лифте, по нажатию на кнопки или свайпом;
- по каждому отделу, магазину или лавочке можно получить расширенную информацию;
- найти путь до неё и провести пользователя по этому пути.
![](https://habrastorage.org/getpro/habr/post_images/dfe/b8d/ea7/dfeb8dea72929b2682fc552937529aac.png)
Дизайн
![](https://habrastorage.org/getpro/habr/post_images/9d0/b81/b11/9d0b81b111c1c859e71d2192a099178a.png)
В дизайне этого режима нам было важно проявить образ основной карты 2ГИС, расширив план здания навигационными элементами. Здесь важно было помнить, что внутри помещений люди не ориентируются принципами «север-юг». Как правило, все ориентируются относительно входа в здание, а дальше сверяются с самыми крупными, заметными и значимыми магазинами, точками, лифтами, эскалаторами.
![](https://habrastorage.org/getpro/habr/post_images/77b/9cb/dcd/77b9cbdcd5c5a057213d3b779be3bb47.png)
Приступаем к разработке
![](https://habrastorage.org/getpro/habr/post_images/39e/0a1/b6d/39e0a1b6dd1de39716674d9b16fcc488.png)
Дизайн карты, интерфейсов и концепция новой возможности были хорошо приняты в компании. Дальше был ряд внутренних презентаций, уточнение макетов, детальная проработка элементов интерфейса, разработка динамического прототипа. После чего задачу декомпозировали и разложили на спринты разных команд разработки и исследований.
Так появилось несколько основных направлений для проработки
![](https://habrastorage.org/getpro/habr/post_images/fee/546/19e/fee54619eeca5f5124db291807cba417.png)
План исследований и разработки уходил далеко за горизонт. И с таким планом нам не светил релиз в ближайший год. Нужно было искать компромисс, тот самый MVP.
Но не всё сразу
![](https://habrastorage.org/getpro/habr/post_images/f47/ccf/513/f47ccf5134c3e6665650fc70bbb843f3.png)
Мы создали себе временные рамки и посмотрели, что в эти рамки можно уложить, чтобы решить проблему пользователей в ближайшее время. Вырабатываем решения по основным направлениям
![](https://habrastorage.org/getpro/habr/post_images/0b3/695/31c/0b369531c13006a8b306cd9e3e744132.png)
Так «Этажи» выходят на новую ступеньку — реализуемость в разумные сроки и начинается разработка, настройка, подготовка данных. Оглядываясь сегодня на проработку «Этажей», мы понимаем, что путь от идеи до разработки мы прошли с одной стороны очень быстро, с другой стороны несколько мечтательно.
Сейчас, прорабатывая сложные технологичные решения мы стараемся раньше подключать технических специалистов или делать небольшие команды под фичи, смотрим трезво на сроки, но не прекращаем мечтать.
Релиз для iOS и Android версий вышел в срок с шестью крупнейшими торговыми центрами Москвы, в которых спрятаны 2500+ организаций и 600+ инфраструктурных объектов.
![](https://habrastorage.org/getpro/habr/post_images/3b9/c19/ac2/3b9c19ac22b88f8c27dff3827d814a8f.png)
Мы продолжаем готовить крупнейшие торговые центры в столице и других городах, и развивать «Этажи» функционально. Следите за новостями, «Этажи» появятся и в вашем городе.