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

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

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

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

О московском метро

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

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

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

Подготовка и воплощение

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

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

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

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

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

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

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

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

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

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

«Охотный ряд»

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

«Афиша»: список событий. Подробности по ссылке

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

ВДНХ

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

Модуль погоды, карта велопарковок. Подробности по ссылке

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

ЦСКА

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

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

Детальный маршрут до выбранной точки. Подробности по ссылке

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

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

«Выставочная»

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

Построение маршрута в метро. Подробности по ссылке

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

«Маяковская»

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

Справочные страницы, схемы в изометрии. Подробности по ссылке

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

Планы

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

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

0
53 комментария
Написать комментарий...
Alexandr Chernov

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

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

теперь конкретизирую только часть:

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

Зона активного внимания должна быть на большее расстояние, шрифты и ui слишком мелкие.

Это Россия :)

Москвичи знают карту метро, а вот приезжие нет. И как правило их понимание и внимание привлекает другое, как и цели - явно не виджет погоды.

короче лень все писать но меня огорчила такая реализция такого мощного инструмента. Жгите еще

И желаю вам успехов!

Ответить
Развернуть ветку
Alexander Vorontsov

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

Ответить
Развернуть ветку
1 комментарий
Виталий Асташкин

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

Ответить
Развернуть ветку
1 комментарий
Алексей Шепелин

Спасибо за фидбек) Будем жечь и дальше)
Про приезжих / местных спорно. Делать интерфейс только для приезжих - значит убирать на задний план часть функционала, более полезного для жителей города. Вопрос баланса и тестирования.

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
3 комментария
Максим Наумов

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

Но за дизайном, ребята совсем забыли, что дизайн это не только ненужные подписи и ярлычки на тач дисплее. Дизайн – это самый эффективный путь решения проблем людей.

А самый эффективный путь решения проблем людей с терминалами-инфососами ЭТО СМЕСТИТЬ ЭТИ ХЕРНИ К СТЕНАМ МЕТРО, ЧТОБЫ ОНИ НЕ МЕШАЛИ ТОЛПЕ В ЧАС ПИК И ТУРИСТАМ, КОТОРЫЕ НЕ МОГУТ НОРМАЛЬНО СТАНЦИЮ СФОТКАТЬ ИЗ-ЗА ЭТИХ ЕБАТОРИЙ ПОСЕРЕДИНЕ.

Ответить
Развернуть ветку
Stepan Vakhtin

Похоже на дизайн приложения для телефона, но никак не терминала. Сделайте прототип и попробуйте попросить попользоваться пенсионеров к примеру. Все станет ясно.
И да, виджет погоды - куда ж без него! Если не знаешь чем занять место, вставляй виджет погоды :)

Ответить
Развернуть ветку
Алексей Шепелин

Виджет - один из вариантов развития, самый простой для старта. Туда спокойно встают и информационные сообщения и график движения ОТ и данные по пробкам. :)

Ответить
Развернуть ветку
Sergey Nemerov

Инфокиоски в первую очередь должны отвечать на вопрос ГДЕ?
- пожрать
- поспать
- посрать
- дохать до

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

Ответить
Развернуть ветку
Dimm Debrov

Лучше бы там Вайфай раздавали бесплатно, а люди сами могут маршрут построить через смартфон..

Ответить
Развернуть ветку
Лена Иванова

На стартовом экране полезной информации процентов 20 экрана, остальное иллюстрация и 'воздух'— почему бы сразу не показывать второй экран с виджетами?

В целом заметно, что дизайн тут победил здравый смысл.

Ответить
Развернуть ветку
Dmitri Lebedev

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

В Берлине мимо киосков Дойче Бана пройти мимо нельзя, т.к. они однотонные, на них только логотип DB, и нет никаких развлекательных картинок.

Ответить
Развернуть ветку
Doco4ka

Не разу не видел ни одного человека за терминалом в торговых центрах. Не нужная вещь.

Ответить
Развернуть ветку
Игорь Маркелов

А чего там долго стоять, пользовался раза три за все время. Основное действие, найти быстро магазин, чтобы в огромном ТЦ не идти в противоположенную сторону.

Ответить
Развернуть ветку
Виталий Фунтиков

1. Чтобы переключить язык – нужно быть баскетболистом?
2. Есть "сложные" переходы. Например Каширская-Каширская. Приезжему очень сложно. Я как то раз проводил до поезда человека, ибо не смог бы обьяснить куда ему переходить (он доехал до Красногвардейской и не понял как сюда попал)...

Ответить
Развернуть ветку
Игорь Маркелов

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

Ответить
Развернуть ветку
Velvet Velvet

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

Ответить
Развернуть ветку
Алексей Шепелин

Рад это слышать, спасибо)

Ответить
Развернуть ветку
Samir Akhmedov

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

Ответить
Развернуть ветку
S.Z

Изометрические схемы красивые конечно, но ориентироваться по ним сложнее, чем по 2д карте

Ответить
Развернуть ветку
Dmitri Lebedev

Кому как, мне гонконгские схемы понравились, очень легко понять, как пройти по станции, если она многоуровневая.

Ответить
Развернуть ветку
Алексей Смирнов

Эх, лучше бы метрополитен терминалы для проездных нормальные делал, а то пока пополнишь тройку, состариться можно стоя у железных ящиков

Ответить
Развернуть ветку
Алексей Шепелин

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

Ответить
Развернуть ветку
Антон Сапрыкин

А че так высоко кнопочки всякие, людям прыгать чтоле что бы их тыкать?

Ответить
Развернуть ветку
Алексей Шепелин

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

Ответить
Развернуть ветку
blogerok

+25 градусов чего?

Ответить
Развернуть ветку
Антон Сапрыкин

Тепла.

Ответить
Развернуть ветку
Nikita

Кельвина, конечно.

Ответить
Развернуть ветку
towardsahead

Специальная позитивная новость для тех, кто едет после работы на Выхино)

Ответить
Развернуть ветку
Лена Иванова

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

Ответить
Развернуть ветку
Станислав Курочкин
изометрические схемы станций

А где посмотреть можно? Интересно так.

Ответить
Развернуть ветку
Алексей Шепелин

мы делали их пару лет назад в качестве эксперимента - https://adn.agency/project/metro

Ответить
Развернуть ветку
Alex Pilot

Шрифтового языка вообще нет.
Посмотрите BBC News по оформлению, куча инфы, но всё логично и понятно. И главное, узнаваемо, среди сотен других каналов. А тут ещё работать, но старт неплохой

Ответить
Развернуть ветку
Dmitri Lebedev

Кстати, авторы дизайна, как думаете, если у человека есть смартфон, которым штрих-код считать, он вообще будет пользоваться вашим терминалом, чтобы маршрут построить?

Ответить
Развернуть ветку
Цой жив

НЕТ-НЕТ, только не такое ГОВНО в центре наших раскошных странций
Ребята вообще не врубаеются, что такое историческое наследие, стиль, уместность и т.п. Надеюсь, ADN Studio никогда в жизни не допустят ни к одному общественному пространству.

Ответить
Развернуть ветку
Алексей Шепелин

Как и писал до этого, коробку уже придумал Дептранс и мы не имеем к этому отношения. Наш - только дизайн концепт интерфейса.

Ответить
Развернуть ветку
2 комментария

Комментарий удален модератором

Развернуть ветку
Dmitry Gurkov

Ужасный дизайн терминала, хуже и придумать было сложно! Эта огромная плита стоит в центре зала и закрывает весь ее вид. А такой жирный красный контур специально, чтобы туристы-селферы не скапливались в зале?

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

Ответить
Развернуть ветку
Алексей Шепелин

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

Ответить
Развернуть ветку
Mark Quincy

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

Ответить
Развернуть ветку
Игорь Маркелов

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

Ответить
Развернуть ветку
Алексей Шепелин

С WiFi хорошая идея, надеюсь, что рано или поздно они это сделают

Ответить
Развернуть ветку
For Nothing

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

Ответить
Развернуть ветку
Alex Dolzhikov

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

Ответить
Развернуть ветку
Алексей Шепелин

Спасибо!

Ответить
Развернуть ветку
Наталия Михашова

Любопытно)) Этим летом проводили интенсивный курс в Британке. Подростки 13-15 лет тоже разрабатывали дизайн-концепции для терминалов Мосметро)) Посмотреть можно тут https://vc.ru/flood/42644-kak-za-2-nedeli-obuchit-shkolnikov-veb-dizaynu-sozdat-krutye-koncepty-i-poluchit-respekt-ot-wargaming-i-mosmetro

Ответить
Развернуть ветку
Saucedo Puetz

Дизайнер всего этого учился чтоли у Темы Лебедева?!

Ответить
Развернуть ветку
50 комментариев
Раскрывать всегда