Дизайн-концепция для терминалов московского метро

Мы уже работали над проектами для Московского метрополитена: это «Музыка в Метро» и изометрические схемы станций. Сегодня показываем нашу дизайн-концепцию для интерактивных терминалов.

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

На западном рынке всё намного лучше. Примеров достаточно — очень крутые инфокиоски в Лондоне, Нью-Йорке и других городах. Похожие наработки есть у Дептранса: недавно он начал внедрять новую линейку терминалов в московском метро. Это замечательная инициатива, но решению не хватает хорошего интерфейса — поэтому мы разработали свою концепцию UI для терминалов.

Московское метро — одно из крупнейших в мире: более 200 станций, фактически это «город в городе». А городу нужна навигация. Схемы метро решают задачу перемещения между станциями, но остаётся проблема контекстуальных подсказок.

Сейчас у Московского метрополитена нет системы, где пассажиры могли бы построить сложный маршрут по городу (включая метро и наземный транспорт), узнать время прибытия поездов, погоду наверху, расположение культурных объектов, парковок, увидеть «места интереса» на карте.

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

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

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

Сетка. Мы использовали модульную сетку, позволяющую быстро перестраивать и масштабировать интерфейс.

Виджеты. Для стартового экрана подготовили набор типовых виджетов с учётом возможного контекста станции (где-то важнее знать о пробках, где-то о маршрутах наземного транспорта).

Многоязычность. Попасть в английскую версию можно в один клик. Другие языки доступны из верхнего меню.

Фоны. Фон меняется в зависимости от текущей задачи. В обычные дни у каждой станции своя фоновая картинка, в праздники и на время проведения статусных мероприятий — фон становится единым для всех станций.

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

Контекст. Второй по важности блок — контекстуальные подсказки для каждой станции в виде интерактивной карты города.

Сервисы. Третий блок — набор дополнительных сервисов, сетка позволяет оперативно менять содержимое блока.

Отдельного внимания заслуживают сценарии поведения пользователей. Мы нашли основные сегменты аудитории, описали их портреты, построили CJM и вывели около 30 наиболее часто встречающихся сценариев поведения. Для демонстрации проекта часть полученных данных была разделена на пять групп. Каждая группа — одна характерная для входящих в неё сценариев станция метро. Давайте смотреть.

Станция находится в сердце Москвы, и вокруг неё бурлит культурная жизнь: рядом Большой Театр, музей Отечественной войны 1812 года, да и до Красной площади недалеко. Поэтому именно на её примере мы покажем, как работают модули «Музыки» в метро и «Афиши» (театры, выставки, ярмарки).

Пользователь изучает модуль «Музыки», после «Афишу» и выбирает интересующий его спектакль. В будущем в модуль «Афиши» можно будет добавить выбор мест и покупку билетов.

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

Здесь мы показываем, как пользователь начинает работу с изучения прогноза погоды. Далее смотрит ближайшую велопарковку, после варианты маршрутов до выбранной точки (например, он ищет океанариум «Москвариум»). Полученный маршрут открывает у себя на телефоне, считывая QR-код либо переходя по короткой ссылке.

Станция довольно новая, открыта в 2018 году. Отличается как современным дизайном, так и окружающей инфраструктурой: торговые центры, спортивные объекты ЦСКА и новые жилые кварталы.

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

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

Для выбранного аэропорта показываем табло вылета и прилёта — и предлагаем выбрать один из нескольких вариантов маршрута (от трёх до пяти типовых вариантов поездок). В конце сценария пользователь открывает на своём телефоне сгенерированную страницу выбранного им маршрута.

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

Стартуем с выбора языка — предполагаем, что пользователь нажал на нижний переключатель, который сразу запускает английскую версию. В самом сценарии пробуем построить маршрут до «Новокосино» (смотрим ситуацию с большим количеством пересадок).

Наша любимая станция. Когда мы создавали изометрические схемы метрополитена, начали именно с неё. Дело сугубо личное, но нам кажется, она самая красивая в Москве. В нашей концепции «Маяковская» демонстрирует работу справочных страниц и показывает те самые изометрические схемы.

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

Сейчас мы планируем доработать интерфейс, сценарии поведения пользователей, иллюстрации, добавить анимацию. Но понимаем, что всё это невозможно без реальных пользователей и дизайн-комьюнити.

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