ЛОЖКИН АЛЕКСАНДР
Дизайн-концепция
пешеходной навигации
в Maps.Me
пешеходной навигации
в Maps.Me
Данная работа выполнена в качестве тестового задания на должность дизайнера интерфейсов.
Пешеходная навигация – это наиболее распространенный кейс для любого человека. Будь он автомобилист, велосипедист или ездит на метро, всегда возникает вопрос: «Как дойти до нужного места»?
Задачи, которые пользователь решает с помощью пешеходной маршрутизации
Так же, не стоит забывать, что пешеходные маршруты – больная точка большинства конкурентов. И запустив этот функционал, приложение может спорить с лидерами рынка в их родных городах. Став в какой-то части приложением на каждый день.
ИССЛЕДОВАНИЯ
Анализ конкурентов
Исследования – важный шаг на этапе подготовки. Я просмотрел приложения популярных картографических сервисов Google, Yandex, Citimaper, 2гис и Here.
В этих приложениях я анализировал: • скорость построения маршрута
• простоту интерфейса • функционал • тип транспорта • возможность настроек маршрута.
В этих приложениях я анализировал: • скорость построения маршрута
• простоту интерфейса • функционал • тип транспорта • возможность настроек маршрута.
В результате, эти приложения разделились на 2 типа:
Комбайн – это приложение, которое старается решить все возможные кейсы связанные с картами. Это часто усложняет интерфейс и увеличивает кол-во шагов.
Специалист – приложение старается решать только узкие кейсы, но быстро и наглядно. Его пример, это Яндекс.Транспорт и Citymapper.
Maps.Me я отношу ко второму типу.
Комбайн – это приложение, которое старается решить все возможные кейсы связанные с картами. Это часто усложняет интерфейс и увеличивает кол-во шагов.
Специалист – приложение старается решать только узкие кейсы, но быстро и наглядно. Его пример, это Яндекс.Транспорт и Citymapper.
Maps.Me я отношу ко второму типу.
Пользователи
Важно понимать для кого мы делаем приложение. Кто и зачем уже использует его, а кто мог бы стать пользователем с появлением нового функционала или увидев рекламу. Для старта я собрал три портрета юзеров, двое из которых уже установили себе Maps.Me
Артем, 27 лет
Активный путешественник. Его можно назвать уверенным IT пользователем. У него есть ноутбук, телефон и iPad. В поездках он берет с собой последние 2 гаджета.
Использует Maps.Me во время путешествий и деловых поездок. У него даже скачен свой родной город, но там он их не запускает, так как пользуется конкурентами.
Использует Maps.Me во время путешествий и деловых поездок. У него даже скачен свой родной город, но там он их не запускает, так как пользуется конкурентами.
Василий, 32
Василий домашний человек. Раз-два в год ездит отдыхать на море. Иногда бывает в соседних городах. У него стационарный компьютер и телефон на Android. Нельзя сказать, что он интересуется и разбирается в технике. По городу передвигается в основном на общественном транспорте.
Скачал Maps.Me, когда ездил с друзьями в Грецию. Приложение понравилось. Рассматривает его как приложение для путешествий.
Скачал Maps.Me, когда ездил с друзьями в Грецию. Приложение понравилось. Рассматривает его как приложение для путешествий.
Татьяна, 44
У Татьяны iPhone 5s, но она редко использует его для чего-то большего, чем звонки и сообщения. Дети иногда рассказывают ей о новых приложениях и иногда она их устанавливает. Она перемещается по городу на машине и трамвае.
О Maps.Me не слышала. Использует 2гис, но с последним обновлением он стал заметно менее удобным для нее.
О Maps.Me не слышала. Использует 2гис, но с последним обновлением он стал заметно менее удобным для нее.
Идеи и функционал
На этом этапе я выделил основные идеи, которые хотел реализовать в рамках тестового задания
Маршрут нужно создавать в один клик
Пешеходный маршрут существует не только сам по себе, это дополнение авто и ОТ
Человек не смотрит в телефон постоянно, нужны сообщения о ключевых точках
Для ведения по маршруту, пешеходу отлично подойдут умные часы
Узлами могут быть не только повороты но и пересечения дорог, светофоры, подземные переходы
Масштаб POI на карте можно увеличить в режиме ведения. Они будут дополнительными ориентирами
Добавить фильтры, например безбарьерная среда
На экране должна быть только нужная информация
Ведение по маршруту и обзор/выбор маршрута – это разные режимы
Информация о площадях и парках может стать частью навигации
Сообщения должны быть максимально живыми. Не "поверните налево" а "Налево, через парк".
Ночной режим
наблюдение
Особенности пешехода
В отличие от автомобилистов, у которых телефон прикреплен к панели и всегда находится на виду, пешеходы не держат его в руках. Часто он лежит в кармане, а используют его лишь в ключевых точках, чтобы свериться с маршрутом. Неплохо бы сделать сигнализацию об этих ключевых точках, чтобы люди не проходили поворот.
Ориентиры
Разбираюсь, какие объекты важны для пешеходной навигации, и о каких мы можем получить информацию в OSM
Названия улиц, адреса домов
Вывески организаций
Светофоры
Пешеходные переходы (зебра, надземные, подземные)
Площадные объекты (парки, площади, кварталы)
Растительность
Памятники, мемориалы и т.д.
Здания
UX И ДИЗАЙН
Перед тем, как приступить к дизайну, я составил майндмэп для сценария маршрутизации и на основе предыдущих действией собрал быстрые прототипы сервиса на бумаге
Ночное прототипирование на бумаге
Мудборд
Перед работой я посмотрел на работы других дизайнеров которые делали транспортные или картографические приложения. Конечно, по стилю работа должна быть продолжением Maps.Me, но сейчас бум картографических технологий и есть много интересных идей. Глупо не изучить их.
ДИЗАЙН
Далее, будет по шагам рассказан процесс изменений в приложении.
Стартовый экран
Я пересмотрел свое решение относительно панели маршрутов. Предлагаю поставить её иконку в нижний ряд. Это будет инструмент для создания сложных маршрутов из точки А в Б.
Иконку моего местоположения я вынес на карту, и предлагаю объединить её с компасом.
При центрировании на метке, она будет меняться на компас, при повторном клике – включается слежение за меткой.
При драге карты этот режим сбрасывается.
Иконку моего местоположения я вынес на карту, и предлагаю объединить её с компасом.
При центрировании на метке, она будет меняться на компас, при повторном клике – включается слежение за меткой.
При драге карты этот режим сбрасывается.
Экран организации
Этот экран я не трогал.
Для меня было критичным, чтобы здесь сразу была видна кнопка построения маршрута.
Поскольку она там есть, я решил не перерабатывать эту карточку.
Для меня было критичным, чтобы здесь сразу была видна кнопка построения маршрута.
Поскольку она там есть, я решил не перерабатывать эту карточку.
Построение маршрута
Здесь я пересмотрел панели.
Вверху я оставил настройки маршрута, а вниз перенес всю информацию о расстоянии, времени и маршруте. А так же кнопку старта, которая запускает режим ведения.
В верхней панели появились настройки. Они относятся ко всем типам маршрутизации, и позволяют исключить нежелательные типы дорог, из вашего маршрута.
Для пешеходов, в качестве фильтров, может быть режим безбарьерной среды.
Вверху я оставил настройки маршрута, а вниз перенес всю информацию о расстоянии, времени и маршруте. А так же кнопку старта, которая запускает режим ведения.
В верхней панели появились настройки. Они относятся ко всем типам маршрутизации, и позволяют исключить нежелательные типы дорог, из вашего маршрута.
Для пешеходов, в качестве фильтров, может быть режим безбарьерной среды.
О безбарьерной среде
Конечно, нормальных данных о нем нигде пока нет, но:
1. Это социальна значимая функция, которая создает информационный повод;
2. Инфоповод, для сотрудничества с сообществом картографов и некоммерческими организациями (возможно ВУЗЫ), для сбора данных в локальных городах;
3. Это позволит перевести приложение в разряд
ежедневных, для всех, кому нужна безбарьерная среда.
1. Это социальна значимая функция, которая создает информационный повод;
2. Инфоповод, для сотрудничества с сообществом картографов и некоммерческими организациями (возможно ВУЗЫ), для сбора данных в локальных городах;
3. Это позволит перевести приложение в разряд
ежедневных, для всех, кому нужна безбарьерная среда.
Ведение по маршруту
В ведении мы меняем стиль карты, приглушаем цвета, добавляем объем у зданий. Меняем стиль POI на карте, отмечаем улицы, мимо которых мы пройдем.
Здесь можно сделать 2 состояния панели, с краткой и подробной информацией о маршруте (время, расстояние, скорость).
Из интересных идей, я предлагаю добавить кнопку "Пауза", она останавливает ведение и возвращает нас на предыдущий шаг.
Кроме того, кнопку ставим внизу, ближе к пальцам, для удобства.
Здесь можно сделать 2 состояния панели, с краткой и подробной информацией о маршруте (время, расстояние, скорость).
Из интересных идей, я предлагаю добавить кнопку "Пауза", она останавливает ведение и возвращает нас на предыдущий шаг.
Кроме того, кнопку ставим внизу, ближе к пальцам, для удобства.
Сообщаем о ключевых узлах
Подземный переход
Надземный переход
Зебра
Светофор
Направо
Налево
Прямо
Разворот
Ночной режим
При плохом освещении можно автоматически
включать ночной режим. Это темная,
приглушенная карта. Меньшие контрасты.
включать ночной режим. Это темная,
приглушенная карта. Меньшие контрасты.
Напоминания
Ведение по маршруту может отлично решаться с помощью часов.
Они могут вибрировать перед поворотом, чтобы пользователь не пропустил развилку.
Если не говорить о часах, телефон
так же может вибрировать, если пользователь сходит с маршрута.
По крайней мере это может быть отключаемая опция.
Они могут вибрировать перед поворотом, чтобы пользователь не пропустил развилку.
Если не говорить о часах, телефон
так же может вибрировать, если пользователь сходит с маршрута.
По крайней мере это может быть отключаемая опция.
Фидбек
Важно, дать пользователям возможность
сообщать об ошибках на маршруте
(иконка с восклицательным знаком).
И у них должна быть возможность
построить, по точкам, правильный маршрут.
Это будет хороший сигнал для правки карт.
P.S. Интерфейс тут нужен более
проработанный, просто не хочу забыть о идее.
сообщать об ошибках на маршруте
(иконка с восклицательным знаком).
И у них должна быть возможность
построить, по точкам, правильный маршрут.
Это будет хороший сигнал для правки карт.
P.S. Интерфейс тут нужен более
проработанный, просто не хочу забыть о идее.
Спасибо, что дочитали
Успехов. Проект у вас отличный :)
P.S. Извиняюсь за грамотность текстов.
Мой корректор уехал в отпуск (
P.S. Извиняюсь за грамотность текстов.
Мой корректор уехал в отпуск (
