В Киеве представили обновленное мобильное приложение для оплаты парковки Parking UA  с интегрированной платформой цифровых кошельков Masterpass. Создателями приложения стали LeoGaming и Mastercard. Сервис позволяет не только оплатить парковку, но получить необходимую информацию о 219 муниципальных площадках КП «Киевтранспарксервис». Артем Свительский, senior UX-designer в EPAM, протестировал приложение и поделился своими впечатлениями для рубрики #экспертиза.

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

Анализ Parking UA.

Приложение нас встречает довольно приятной иконкой, тут нечего комментировать. Большая буква ”P”, как и должно быть у подобных приложений. Это общепринятый международный знак, не требующий понимания сути. Единственное, что я бы посоветовал, это убрать тень, свечение и дорожную разметку с буквы. Так было бы чище и проще, тем более, что весь интерфейс плоский.

Логотип приложения Parking UA

Сайт разработчика говорит нам четыре основных тезиса — «Зручно», «Легко», «Швидко», «Надiйно». Соглашусь ли я с этими утверждениями? Пожалуй, не со всеми.

Сразу отмечу: я не знаю на 100%, но хочу верить, что с «Надiйно» все так и есть. Ведь это разработка компании Mastercard, под названием Masterpass. По идее, должно быть секьюрно.

Сплэш-скрин приложения Parking UA

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

«Відправити повідомлення ще раз» воспринимается не как кнопка, а как заголовок.

Страница регистрации пользователя приложения Parking UA

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

На карте показаны красные, желтые и синие круги. Как павэр-юзер, я понимаю, что это сплит от количества парковок в данной точке. Для обычного юзера и автомобилиста красный цвет — это «Стой» или «Опасность». Желтый цвет также не имеет никакого оправдания с точки зрения визуального цветового кодирования.

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

В качестве основного меню приложения был выбран всеми нелюбимый элемент навигации — «гамбургер-меню». Это действительно не удобно и плохо. На эту тему написано с десяток статей и все же.

Логотип Masterpass в меню постоянно напоминает о том, что приложение скорее всего финансировалось компанией Mastercard. Иначе я не могу объяснить такого «легкого» маркетинга. Вверху меню напоминание о том, в каком мы сейчас приложении. Считаю, это лишнее, место можно использовать более разумно.

Гамбургер-меню приложения Parking UA

Поведение карты при переключении между пунктами меню — это хит. Хочется разбить телефон об асфальт парковки (см. видео).

Переопределение локации при каждом обращении к главному экрану.

Первое, что нужно сделать, — добавить свой автомобиль, чтобы идентифицировать его на парковке. Идем в раздел «Моя Машина» и жмем «Добавить». И тут не все так просто. У меня, к примеру, именной номер. Когда я переключил ввод на именной номер, вдруг подпрыгнул интерфейс. Дизайнер решил использовать здесь обычный инпут вместо рамки номерного знака, как в варианте с вводом обычного номера. Это не консистентность и раздражает из-за прыгающего интерфейса.

Добавление автомобиля в приложении Parking UA

Дальше опять проблема: я не могу добавить машину, так как кнопка «Сохранить» перекрыта клавиатурой. А она выбрана неправильно для данного типа инпутов и не позволяет сделать «Submit» или «Return». С горем пополам свернул клавиатуру и сохранил машину.

Добавление автомобиля в приложении Parking UA

Машина есть, теперь оплата. Тут вроде все проще. Но я являюсь пользователем Masterpass уже давно, поэтому у меня прошло все гладко. Не уверен, что так же гладко с простыми картами, но одну ошибку уже поймали — неверный айди юзера. Какого юзера? Почему? Не понятно.

Ошибка при добавлении карты приложения Parking UA

Начинаем парковаться. Когда вроде бы нашел место для парковки, смотрим детали. Ого, до этой парковки целых 17.761477991616 метров! Я люблю точность, но не на столько, десятичных чисел достаточно.

Мне не хватает фотографий места парковки: это незнакомое место, и я еду туда впервые. Думаю, интеграция с Google Street View решила бы эту задачу. «Час роботи» не указан практически ни у одной парковки. Стоит или не показывать этот пункт или же добавить ему значение.

Информация о месте парковки приложения Parking UA

Далее следует экран выбора машины, карты и количества часов парковки. Особых претензий к нему нет. Правда, есть ощущение, что UI мог бы быть ровнее: беда с отступами и работой со свободным пространством. Кнопки «+» и «-» можно сделать чуточку крупнее, а сами знаки жирнее. Подсчет финальной суммы при изменении часов на самой кнопке оплаты — спорное решение. Можно нечаянно не увидеть. Нужно или дать акцент на итоговую сумму, или вынести ее вне кнопки.

Оплата парковки приложения Parking UA

Приложение предлагает также оплатить парковку помощью QR-кода. Но описания, где я должен искать этот код, нет. А вот на вкладке «Показать код» описание есть, и оно почему-то вверху. Из-за разных лейаутов создается ощущение несбалансированности приложения. Так быть не должно: один подход, ожидаемые места для вывода похожих сообщений. Мне так и не удалось найти возле парковки никаких QR-кодов. У разработчиков не получилось донести, как этим пользоваться.

Функция сканирования и демонстрации QR кода приложения Parking UA

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

Сканирование QR кода приложением Parking UA

Оплатил тестовый час парковки. Напоминания сделаны анти-человечно: не видно, через сколько именно тебе придет оповещение. В каруселе выбора время напоминания всегда сбито на первое значение — бесит.

Я закрыл приложение и запустил его опять в режиме активной сессии. Неприятно удивило то, что карта сессии не показывается сразу. Вместо нее — урывки карты, а потом уже карточка активной сессии.

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

Активная сессия парковки приложения Parking UA

Видео, как некрасиво открывается апликейшин с активной сессией на «холодную».

Запуск приложения Parking UA с активной сессией

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

Слева сообщение, справа ошибка, приложения Parking UA

Что будет после того, когда кончится время, я не проверял. Но думаю, что с вас снимут еще за один час парковки, пока ты вручную это не отмените. Судя по отзывам в App Store, случаи, когда с людей списывали и 100 и 200 грн. без возможности повлиять на этот процесс, были неоднократно. Телефон службы поддержки не отвечал, что является так же отталкивающим фактором пользовательского опыта при использовании сервиса.

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

Маршрут от текущей локации к припаркованной машине приложения Parking UA

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

Оказалось, в чеке указано, на какой РС ушел платеж. Это помогает удостоверится, что деньги отправились в «Київтранспарксервіс». Кстати, заметил интересную строку чека: «Комісія: 0 грн». Вот она, монетизация продукта в каком-то обозримом будущем. Дизайнеру на заметку: раз уже используете суммы с двумя знаками после запятой, то это должно распространяться даже на ноль. Правильней будет 0.00 грн.

Чек за парковку приложения Parking UA

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

Проблема этого состояния системы в том, что часы бесплатной парковки нигде не написаны и мне остается только догадываться. О том, что парковка бесплатная, я могу узнать только после того, как нажму на кнопку «Оплатить».

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

Сообщение о бесплатной парковке приложения Parking UA

В целом, это практически весь User Journey Map. Остались второстепенные страницы истории чеков, настройки, договор оферты, промокоды. Кстати, ввод промокода только числовой клавиатурой сразу же понижает секьюрность системы генерации промокодов. Это подскажет злоумышленнику, что код состоит только из чисел. Поп-ап ввода кода стандартный, а хотелось бы больше консистентности со всеми инпутами системы.

Ввод промокода приложения Parking UA

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

Настройки приложения Parking UA

Выводы

Приложение слабовато, несмотря на относительно сносный UI. Слабые места видны невооруженным глазом. Складывается ощущение, что оно сделано очень быстро и в крайне сжатые сроки. Половина диалогов — системные и даже не переведены с английского. Тестированием приложение либо не занимаются, либо занимаются очень плохо, много не откатанных юзер историй. Кажется, что проектировщик UX не до конца проработал User Journey Map. Часть функций сделаны для галочки и не несут смысла. Возможно, в мыслях разработчиков есть какое-то понимание этих функций, но правильно донести идеи юзерам у них не получилось.