🚦 Как 2ГИС превратил «зелёную волну» в интерфейс
Я кайфанул от статьи, это прям продуктово покопаться в таком незначительном элементе)
Даня из команды Транспорт в 2ГИС рассказывает, как в навигаторе запускали подсказку для проезда светофоров без лишних остановок. Идея звучит просто: если известны состояния светофоров по маршруту, можно подсказать водителю скорость, при которой он попадёт в зелёную волну. Но в машине простой идеи недостаточно, потому что каждый новый элемент на экране конкурирует не с красивой пустотой, а с дорогой, маршрутом, манёврами, камерами и вниманием водителя.
Самое интересное в кейсе, как команда искала форму для этой подсказки. Текстовые сообщения оказались слишком тяжёлыми, одно число требовало постоянного сравнения, а зона спидометра уже была занята предупреждениями. В итоге решение собралась из двух слоёв: плашка с диапазоном скорости даёт точность, а аналоговая шкала с зелёной зоной помогает быстро понять, в потоке ты или нет. Отдельно сильная часть кейса, что дизайнер не остановился на макетах, а полез в математику стрелки, код и параметры анимаций, чтобы фича доехала до релиза в нужном виде.
Внутри:
– Почему «просто показать скорость» оказалось плохой постановкой задачи;
– Как интерфейс навигатора ограничивает любое новое решение;
– Почему зелёная волна должна ощущаться как состояние, а не как уведомление;
– Как диапазон скорости оказался понятнее одного целевого числа;
– Зачем в интерфейсе появился аналоговый спидометр с зелёной зоной;
– Как анимации помогают дать обратную связь без лишнего шума;
– Почему дизайнеру пришлось проверять техническую реализацию самому;
– Что 2ГИС планирует добавить дальше: награды за серию зелёных светофоров и новые города.
➡️ Читать статью
———
💻 Курс по поиску работы 😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы