Разработали интерфейс для терминалов в московском метро

Навигация в Московском метро

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

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

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

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

af6a64788eec34053673b3b336d8ae97.jpg

Интерфейс

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

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

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

03d83e441fc675ab6ec611fdc8d6b27d.gif

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

62cee089c95244e419c9119ca429bf1e.gif

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

 8c26fc89fba5751eb4af1c60ce7cf88d.gif

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

5f3f0aaf2237c69cd212ca04bd35771f.gif

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

803c40294f9679acd49c43759bf04ccc.gif

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

4a325c61629b79dbeb6797a3526f0d09.gif

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

68672dab3371c3cb2bb28abc4cfb2c78.gif

Сценарии поведения

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

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

Модуль — один из сервисов, заложенных в интерфейс терминала.

Охотный ряд

Станция находится в сердце Москвы и вокруг нее бурлит культурная жизнь.

На ее примере мы покажем работу модулей Музыки в Метро и Афиши (театры, выставки, ярмарки).

97bf537d4d5d6547cff5fd5796fdb99a.png 7ac49f1c6b0270be43bf6ba749edd9a1.png

ВДНХ

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

Окружение станции отлично подходит для демонстрации работы сценариев велопарковок, построения маршрута до точки на карте и работы модуля погоды.

72a19a0dd77c4f28b7c36368102eb340.png d488914090154311f907bcd783e9edfb.png

3cafeb84652274503d5b532dcfcba50f.png 795b77d508122e19dce87f6d88456007.png

cee7527d647340570786a783ba407dd0.png 68bfc9784648accfe290cd92588210af.png

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

Полученный маршрут открывает у себя на телефоне, считывая QR код, либо переходит по короткой ссылке.

Выставочная

Деловой центр города: самая дорогая офисная недвижимость, офисы иностранных компаний и,

как следствие, довольно большой трафик.

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

33fa92f662e0e6de3e08c37629fda346.png c303edd45775e87cc2912ab1ad33cf6d.png

6f5588c6ddc6cd0d806c133fa6f78520.png aeede9bcbf3a04f30774e21fafa06410.png

f91d9285fe94e990bb71fb72166fcf29.png 4668c46fc6f0ff538ec0426ead268f33.png

95b5245b4d973ce50bfc4170276049f3.png

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

В самом сценарии пробуем построить маршрут до Новокосино (смотрим ситуацию с большим количеством пересадок).

ЦСКА

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

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

3dc44019c2239b4e8304794d211b408c.png 370b4e326a9db19a5a7e0f710c1109ff.png

11120496521d2ddd8cf3782f15194f4a.png cb7587d53672bfa1c0cf72d306994fbe.png

4cb86cd4a473d0ce061cdc18f604711c.png 46c2fdfe39024903874dcaac1770830c.png

a8cb635c976f90a55a90526298cf4a45.png

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

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

Маяковская

Наша любимая станция метро. Создавая изометрические схемы станций метро, мы начали с нее — на наш взгляд,  это самая красивая станция в Москве.

В нашей концепции эта станция демонстрирует работу справочных страниц и показывает те самые изометрические схемы.

1d12ef73af25f45a1d94ceab612402cc.png 845489303e23a42e669dbadda784be09.png

75e4b9be66b9e19d8893f179f9bbf82a.png ca51dbc0266ff6578085294462244065.png

a22fc32db41157a22f2c6a443d5a949a.png c5177334a774dbe4d83bc9e36112b616.png

bf99f3e1748c7cd39f352da880a16871.png 5140c85e8a8b9a75702e85d6d1b860f3.png

Что дальше

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

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

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

Скачать исходные файлы по проекту

Перейти на сайт

Полный текст статьи читайте на CMS Magazine