Мы уже работали над проектами для Московского метрополитена: это «Музыка в Метро» и изометрические схемы станций. Сегодня показываем нашу дизайн-концепцию для интерактивных терминалов.
Если говорить об интерактивных киосках в нашей стране сейчас, то можно смело назвать этот период детством. Навигационные решения встретить реально: в торговых центрах, например, или в музеях — но все они довольно примитивные, не имеют интеграции со сторонними облачными сервисами и решают таким образом только узкую проблему потребителя, а не комплекс проблем.
На западном рынке всё намного лучше. Примеров достаточно — очень крутые инфокиоски в Лондоне, Нью-Йорке и других городах. Похожие наработки есть у Дептранса: недавно он начал внедрять новую линейку терминалов в московском метро. Это замечательная инициатива, но решению не хватает хорошего интерфейса — поэтому мы разработали свою концепцию UI для терминалов.
О московском метро
Московское метро — одно из крупнейших в мире: более 200 станций, фактически это «город в городе». А городу нужна навигация. Схемы метро решают задачу перемещения между станциями, но остаётся проблема контекстуальных подсказок.
Сейчас у Московского метрополитена нет системы, где пассажиры могли бы построить сложный маршрут по городу (включая метро и наземный транспорт), узнать время прибытия поездов, погоду наверху, расположение культурных объектов, парковок, увидеть «места интереса» на карте.
Решать эту задачу с помощью интерактивных терминалов Дептранса — вполне логично. Они помогут сориентироваться на местности и лучше понять контекст каждой станции. Дело остаётся за удобным и понятным интерфейсом для навигации. Вот как мы его видим.
Подготовка и воплощение
Мы работали над интерфейсом с оглядкой на западные навигационные терминалы. Взяли за основу решения, использованные в других городах, и попробовали переосмыслить их с учётом современного пользовательского опыта.
Что поняли в первую очередь. Пользователю некогда долго изучать меню — он пришёл решить конкретную задачу, у него нет времени, это значит, что интерфейс должен быть максимально интуитивным. Каждое наше решение продиктовано именно этим.
Сетка. Мы использовали модульную сетку, позволяющую быстро перестраивать и масштабировать интерфейс.
Виджеты. Для стартового экрана подготовили набор типовых виджетов с учётом возможного контекста станции (где-то важнее знать о пробках, где-то о маршрутах наземного транспорта).
Многоязычность. Попасть в английскую версию можно в один клик. Другие языки доступны из верхнего меню.
Фоны. Фон меняется в зависимости от текущей задачи. В обычные дни у каждой станции своя фоновая картинка, в праздники и на время проведения статусных мероприятий — фон становится единым для всех станций.
Маршруты. Мы выделили четыре основных сценария и вынесли их в верхнюю часть экрана. Путь прохождения каждого сценария максимально короткий.
Контекст. Второй по важности блок — контекстуальные подсказки для каждой станции в виде интерактивной карты города.
Сервисы. Третий блок — набор дополнительных сервисов, сетка позволяет оперативно менять содержимое блока.
Отдельного внимания заслуживают сценарии поведения пользователей. Мы нашли основные сегменты аудитории, описали их портреты, построили CJM и вывели около 30 наиболее часто встречающихся сценариев поведения. Для демонстрации проекта часть полученных данных была разделена на пять групп. Каждая группа — одна характерная для входящих в неё сценариев станция метро. Давайте смотреть.
«Охотный ряд»
Станция находится в сердце Москвы, и вокруг неё бурлит культурная жизнь: рядом Большой Театр, музей Отечественной войны 1812 года, да и до Красной площади недалеко. Поэтому именно на её примере мы покажем, как работают модули «Музыки» в метро и «Афиши» (театры, выставки, ярмарки).
Пользователь изучает модуль «Музыки», после «Афишу» и выбирает интересующий его спектакль. В будущем в модуль «Афиши» можно будет добавить выбор мест и покупку билетов.
ВДНХ
Одно из лучших мест для велопрогулок в столице. 317 гектаров и более 80 павильонов вводят в ступор любого приезжего — и даже некоторых москвичей. Окружение станции отлично подходит для демонстрации работы сценариев велопарковок, построения маршрута до точки на карте и работы модуля погоды.
Модуль погоды, карта велопарковок. Подробности по ссылке
Здесь мы показываем, как пользователь начинает работу с изучения прогноза погоды. Далее смотрит ближайшую велопарковку, после варианты маршрутов до выбранной точки (например, он ищет океанариум «Москвариум»). Полученный маршрут открывает у себя на телефоне, считывая QR-код либо переходя по короткой ссылке.
ЦСКА
Станция довольно новая, открыта в 2018 году. Отличается как современным дизайном, так и окружающей инфраструктурой: торговые центры, спортивные объекты ЦСКА и новые жилые кварталы.
На примере станции мы показываем работу таких сервисов, как общественный транспорт, построение маршрутов до аэропортов. Также её дизайн дал нам возможность показать альтернативное решение для стартового экрана.
Детальный маршрут до выбранной точки. Подробности по ссылке
Здесь мы демонстрируем два изолированных друг от друга сценария. В первом пользователь изучает список остановок, выбирает подходящую, смотрит детали маршрута. Во втором мы показываем список аэропортов и действия, которые нужны, чтобы построить маршрут до «Внуково».
Для выбранного аэропорта показываем табло вылета и прилёта — и предлагаем выбрать один из нескольких вариантов маршрута (от трёх до пяти типовых вариантов поездок). В конце сценария пользователь открывает на своём телефоне сгенерированную страницу выбранного им маршрута.
«Выставочная»
Деловой центр города: самая дорогая офисная недвижимость, офисы иностранных компаний и, как следствие, довольно большой трафик. На примере станции мы проработали сервис построения маршрута до станции метро (показываем его с англоязычной версией интерфейса).
Построение маршрута в метро. Подробности по ссылке
Стартуем с выбора языка — предполагаем, что пользователь нажал на нижний переключатель, который сразу запускает английскую версию. В самом сценарии пробуем построить маршрут до «Новокосино» (смотрим ситуацию с большим количеством пересадок).
«Маяковская»
Наша любимая станция. Когда мы создавали изометрические схемы метрополитена, начали именно с неё. Дело сугубо личное, но нам кажется, она самая красивая в Москве. В нашей концепции «Маяковская» демонстрирует работу справочных страниц и показывает те самые изометрические схемы.
Справочные страницы, схемы в изометрии. Подробности по ссылке
Пока вы всё это читали и смотрели, решения могли показаться вам несколько шаблонными. Но первоначальная концепция была создана как конструктор, из расчёта на полную унификацию модулей. Мы надеемся, что она послужит базой для будущей дизайн-системы интерфейса терминалов московского метро, собираем мнения и продолжаем работать.
Планы
Сейчас мы планируем доработать интерфейс, сценарии поведения пользователей, иллюстрации, добавить анимацию. Но понимаем, что всё это невозможно без реальных пользователей и дизайн-комьюнити.
Метро формирует облик города, поэтому мы предлагаем уделить должное внимание цифровым терминалам и поучаствовать в создании по-настоящему удобной и информативной системы навигации. Мы публикуем все исходники с нашими наработками в открытом доступе и надеемся, что к нашей инициативе подключатся другие. Если у вас есть вопросы или предложения, пишите нашему арт‑директору Алексею.
Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.
Вы безспорно молодцы и работа очень интересная. Но, основная проблема как я ее вижу в текущей реализации - никто не будет этим пользоватся - по причинам аналогичным теми которые сейчас касаются терминалов в торговых центрах. Главное - не прийти к этому :)
Дизайн хорош, но ux и ui слабый - как потому что не продуманы решения и задачи которые могут решать эти терминалы, и видно что не проведены иследования аудитории и работу которую они выполняют на станции.
теперь конкретизирую только часть:
виджеты погоды, того что на терминал можно вообще нажать, и зачем человеку можно нажать не видны и не понятны совершенно - как в смысле размеров так и по смыслу.
Зона активного внимания должна быть на большее расстояние, шрифты и ui слишком мелкие.
Это Россия :)
Москвичи знают карту метро, а вот приезжие нет. И как правило их понимание и внимание привлекает другое, как и цели - явно не виджет погоды.
короче лень все писать но меня огорчила такая реализция такого мощного инструмента. Жгите еще
Пригодилась бы по тапу на погоду интеграция с картой осадков Яндекса. Когда из метро выходишь -- это критически важно знать -- прошла уже туча или еще нет.
Согласен с тем, что мелко. Даже с хорошим зрением придётся подходить к терминалу, чтобы увидеть содержимое. Всю ключевую информацию должно быть видно "на ходу"
Если говорить о стартовом экране, то да, скорее всего после тестирования его элементы будет иметь смысл делать покрупнее (но нужны тесты, а это - дизайн концепт, который мы проверяли у себя, но без возможности встроить в реальный продукт). Что касается собственно начинки, то работая с ней вы будете стоять на расстоянии вытянутой руки и для данного расстояния все элементы читаемы.
Спасибо за фидбек) Будем жечь и дальше)
Про приезжих / местных спорно. Делать интерфейс только для приезжих - значит убирать на задний план часть функционала, более полезного для жителей города. Вопрос баланса и тестирования.
Сань, вот для иностранцев это спасение будет. 1 - им очень трудно ориентироваться в метро. 2 - аналогичная ситуация с достопримечательностями, захотел в музей, вот тебе этот терминал весь маршрут и построит, а так в интернете искать адрес, станцию метро, потом как до неё доехать и тд. В общем вещь полезная.
Ну кстати навигация в московском метро сейчас ок. На некоторых станция путаница, да, но постепенно она уходит)
И спасибо за это Сергею Семеновичу за хрустящую корочку на окорочках конечно
Даже с новой навигацией бывают ситуации когда не знаешь с какой стороны в какую сторону поезд идёт (особенно после переходов, те эти указатели только в конце эскалатора) или где нужный выход. Например, в Лондоне вдоль стены непрерывно указатели есть, у нас только в начале и конце платформы.
Тут ребята придумали дизайн концепцию для "Инфососов" в метро. Наделали иконок, зачем-то добавили надпись "Ведется видеозапись" и повесили микрофон на уровень роста ТОП баскетболиста НБА. Понятно, что все это говно должно быть запущено на супер мощных компах, которые тяжело будет уместить в такой корпус.
Но за дизайном, ребята совсем забыли, что дизайн это не только ненужные подписи и ярлычки на тач дисплее. Дизайн – это самый эффективный путь решения проблем людей.
А самый эффективный путь решения проблем людей с терминалами-инфососами ЭТО СМЕСТИТЬ ЭТИ ХЕРНИ К СТЕНАМ МЕТРО, ЧТОБЫ ОНИ НЕ МЕШАЛИ ТОЛПЕ В ЧАС ПИК И ТУРИСТАМ, КОТОРЫЕ НЕ МОГУТ НОРМАЛЬНО СТАНЦИЮ СФОТКАТЬ ИЗ-ЗА ЭТИХ ЕБАТОРИЙ ПОСЕРЕДИНЕ.
Похоже на дизайн приложения для телефона, но никак не терминала. Сделайте прототип и попробуйте попросить попользоваться пенсионеров к примеру. Все станет ясно.
И да, виджет погоды - куда ж без него! Если не знаешь чем занять место, вставляй виджет погоды :)
Виджет - один из вариантов развития, самый простой для старта. Туда спокойно встают и информационные сообщения и график движения ОТ и данные по пробкам. :)
Если посмотреть на то, что первым привлекает внимание - баскетболисты, то текст "коснитесь экрана" в периферическом зрении не заметно вообще. А, вполне вероятно, проходящий мимо пассажир вообще не заметит экрана, т.к. в глазах у всех уже фильтр (баннерная слепота).
В Берлине мимо киосков Дойче Бана пройти мимо нельзя, т.к. они однотонные, на них только логотип DB, и нет никаких развлекательных картинок.
А чего там долго стоять, пользовался раза три за все время. Основное действие, найти быстро магазин, чтобы в огромном ТЦ не идти в противоположенную сторону.
1. Чтобы переключить язык – нужно быть баскетболистом?
2. Есть "сложные" переходы. Например Каширская-Каширская. Приезжему очень сложно. Я как то раз проводил до поезда человека, ибо не смог бы обьяснить куда ему переходить (он доехал до Красногвардейской и не понял как сюда попал)...
Очень профессиональная работа дизайнеров и художников, молодцы! Не обращайте внимания на негативные комментарии, это пустые люди, у которых нет дела и некуда время девать. Вы сделали одну из самых ярких работ по дизайну графических систем навигации. Ваше агенство, судя по сайту и креативу - образец. Я рад, что вы опубликовали эту статью. Спасибо!
Мне очень приятно это, я хочу пожелать вам крепкого здоровья, вашей студии, хочу пожелать, чтобы господь бог вас охранял, Святой Георгий сопутствовал во всех ваших начинаниях, а Николай Чудотворец дал вам крепкое здоровье и удачу.
Высота такая же, как у текущих терминалов. В принципе высота и размеры экрана достаточна для работы пользователей среднего роста, мы проверяли это у себя в офисе.
Шрифтового языка вообще нет.
Посмотрите BBC News по оформлению, куча инфы, но всё логично и понятно. И главное, узнаваемо, среди сотен других каналов. А тут ещё работать, но старт неплохой
Кстати, авторы дизайна, как думаете, если у человека есть смартфон, которым штрих-код считать, он вообще будет пользоваться вашим терминалом, чтобы маршрут построить?
НЕТ-НЕТ, только не такое ГОВНО в центре наших раскошных странций
Ребята вообще не врубаеются, что такое историческое наследие, стиль, уместность и т.п. Надеюсь, ADN Studio никогда в жизни не допустят ни к одному общественному пространству.
Человек среднестатистического роста - да, должен. Но сейчас читаю комментарии и понимаю, что для надежности решения язык, как единственный кликабельный элемент в верхней части, надо было ставить ниже (возможно в самом низу экрана), но в этом случае могли бы быть проблемы с его распознаванием (нижняя часть экрана тоже далеко не всегда очевидна для пользователя).
Ужасный дизайн терминала, хуже и придумать было сложно! Эта огромная плита стоит в центре зала и закрывает весь ее вид. А такой жирный красный контур специально, чтобы туристы-селферы не скапливались в зале?
С начинкой тоже все ужасно. Нельзя же интерфейс телефона просто так взять и перенести на 5-метровую глыбу. Если потупить в своем телефоне в метро можно не сильно напрягаясь, что кто-то еще будет стоять рядом и тупить в нем не сломав себе зрение, то здесь половина зала будет пялиться. Это не говоря еще про шрифты и удобство интерфейса, особенно кнопок в верхней части экрана для туристов из Китая.
Главное это карта метро и построение маршрута от метро до точки. Это основное, а не погода и афиши. Если на улице дождь, а человек зонтик не взял, то какая ему разница? Если вы хотите какие-то доп функции то лучше сделать меню с прокруткой и выбором функций. Экраны не фулл, а как поп ап, по моему нонсенс на тачскрине. Лучше использовать весь экран, а не в рамки засовывать
Насчет QR-кода спорная идея, для прогрузки страницы необходим интернет, не каждый оператор может похвастаться хорошей интернет-связью на станции, а где-то вообще нет интернета. Поэтому согласен с другим мнением, что в терминал хорошо бы внедрить WiFi.
Я прям представил как с таким интерфейсом я сначала стою с поднятыми руками, чтобы выбрать откуда и куда добраться (может быть подпрыгиваю чтобы выбрать язык), затем чуть ли не наклоняюсь для масштабирования, причём мне каждый раз после действия желательно отойти чтобы посмотреть всю это прелесть, ибо с расстояния вытянутый руки тут никуда не дотянешься, а с близкого ничего и не увидишь.
Дизайн симпатичный, но юзабилити надо тестить. Очевидно, что штуки очень высокие, и не все дотянутся до экрана в его верхней части. В общем, как концепт круто. Но нужно доработать. Молодцы!
