Новый интерфейс пополнения бесконтактных карточек киевского метрополитена
Летом 2015 года мы в Rademade решили проявить небольшую инициативу — сделать удобный интерфейс пополнения карточек проезда в киевском метрополитене. Зачем нам это? Мы любим проектировать и решать сложные задачи по интерфейсам. Была ли проблема насущной? Да, для нас терминал был жутко неудобен и чтобы это подтвердить, достаточно посмотреть, как им пользуются люди.
Вторая проблема, и она может быть важнее первой, это очереди в кассе за жетонами. Либо люди не привыкли пользоваться карточкой, либо интерфейс не выполняет свою задачу — быстро и комфортно пополнить счет.
Мы поставили себе задачу — спроектировать и нарисовать интерфейс, который решит эти проблемы.
Начнем с детального разбора и закончим финальным протестированным продуктом, который можно внедрять в жизнь.
Знакомство
Подходим максимально критично к текущему терминалу, разбираем все ситуации и экраны. Посмотреть заметки можно по ссылке.
Ключевые проблемы — лишние действия и информация
Не берем во внимание первую версию терминала (2009–2014 года): там можно было закинуть деньги, забрать карточку и все отлично зачислялось. Во второй (действующей) версии появились тарифы, что и стало причиной усложнения. На второй версии и остановимся.
Общий вид экрана
Кейс №1
Сложно определить, куда вставлять карточку.
Кейс №2
Информация может сбить с толку.
Кейс №3
Самая важная информация: остаток денег и количество поездок «теряется» среди прочей информации.
Кейс №4
Тарифная сетка путает, а не информирует. 0 грн и «0» поездок перекликаются с самой важной информацией (3).
Кейс №5
Кнопка «Оплатить» очень маленькая. Можно не попасть пальцем с 1-го раза.
Кейс №6
Визуальный стиль — над ним просто не работали.
Общаемся с пассажирами
Мы провели возле терминалов 4 часа, наблюдали за более чем 200 людьми, 28 из которых согласились на небольшое интервью. Результаты подтвердили наши переживания.
Основные замечания пользователей к терминалу:
- Нужно много думать
- Еще больше читать
- Надоедает постоянно подтверждать каждую купюру
- Легко забыть карточку
- Не ясно, когда можно забирать карточку
Показатели решения задачи
Возвращаемся к нашей задаче — спроектировать и нарисовать интерфейс, который поможет максимально быстро и комфортно пополнить карточку.
Показатель успешного решение задачи — время работы человека с терминалом. Оно должно существенно сократиться.
Здесь можно построить целое исследования, но у нас, к сожалению, не было на это ресурсов, мы взяли за константу следующие варианты взаимодействия и по ним оцениваем время работы с автоматом, наблюдая за пассажирами в метро.
Таблица 1. Затраты времени в текущем терминале
*– влияет: свет в метро; зрение, смекалка и опыт человека
Анализ терминалов в других странах
Прежде чем начинать проектировать новое решение необходимо понять, что уже существует на рынке в разных странах, чем хороши действующие решения, чем — не очень..
Мы проанализировали терминалы многих стран, в том числе США, Британии, Японии, Кореи, Голландии, Венгрии и Финляндии. Искали в Гугле, Ютубе, Пинтересте и на разных стоках. Отыскали более 80 примеров терминалов. Некоторые из них:
Как оказалось, терминал в Киеве самый простой, вот только мы не можем это оценить, так как, практически во всех странах, терминалы продают жетоны и талоны (на 1,3, 5… дней), принимает кредитные карточки и мелочь, имеют разнообразные ридеры.
Возникает стратегический вопрос — будет ли в нашем метрополитене терминалы со всеми возможностями пополнениями. Если будет — речь пойдет об отдельном продукте со своей историей. Мы же хотим усовершенствовать текущий функционал.
Проанализировав десятки интерфейсов, мы нашли несколько интересных идей и поняли, как лучше не делать.
Кто летает в метро и кому нужна карточка
Каждый год киевский метрополитен перевозит 485 млн. пассажиров. Условно их можно разделить на категории:школьники, студенты, взрослые и пожилые люди.
Наши наблюдения и общение с кассирами показали, что карточкой пользуются: ~ 70% работающее население, представителям этой категории важно быстро пройти терминал; ~ 25% — школьники и студенты; ~ 5% — пенсионеры.
Как работать с терминалом
Мы провели несколько брейнштормов и задокументировали 12 сценариев взаимодействия с интерфейсом: от начала работы с терминалом, внесения валюты и пополнения до остальных функций, с которыми работает пользователь и результатов, сообщений и статусных экранов, завершения работы с терминалом и ряда других микромоментов
От скетчей к Hi-Fi Wireframes
У нас появилось видение продукта, понимание того, что как и зачем должно работать. На базе этого, с помощью бумаги, ручек и обсуждений, мы прорисовали в скетчевом формате все экраны интерфейса и все возможные связи между ними. Скетчи помогли нам найти десятки идей реализации интерфейса.
На выходе у нас 3-х концепта, которые отличаются друг от друга формой подачи, структурой и тарифной сеткой, но с одинаковым успехом покрывают проблемные зоны.
Большое внимание было уделено тарифной сетке. Она должна быть настолько простой, чтобы пользователь не задумывался над ней. Ставили ее вертикально и горизонтально, упрощали, прятали, перебирали данные по несколько раз. В результате получили несколько решений, из которых так и не смогли выбрать единственное, которое должно работать на 100% лучше остальных.
Формулировкам ключевых фраз мы посвятили не меньше времени, чем идеям и проектированию продукта. Язык, на котором автомат обращается к пассажиру, должен быть понятен и лишен двусмысленности. Купить «поездки», «жетоны» или «проезды», а, может, «пополнить» или «оплатить»? Писать «грн» или ставить официальный знак «₴»?
Тестирование прототипов в метро
- Сделали интерактивные прототипы в InVision
- Протестировали решение среди коллег на iPad
- Провели еще несколько итераций и пофиксили мелкие баги
- Сформулировали для пользователя кейсы, которые он должен решить с помощью нового интерфейса
- Придумали истории на случай, если придется общаться с полицией (забежим наперед, истории были не зря придуманы, общались с копами и не один раз)
- Поехали в метро :)
Результаты тестирования
Мы общались с людьми возле автоматов, это работащий класс, студенты, иногда пенсионеры. Знакомили с кейсом, который нужно решить (например, пополнить карточку, узнать остаток…), предлагали решить вопрос только на базе одного концепта. В результате зафиксировали все мысли людей и впечатления.
Среди 33 человек, которые пользуются карточками, нам удалось протестировать 3 варианта продукта, итого 50+ тест-кейсов (10–12 человек на каждый вариант, некоторые респонденты решали по несколько кейсов по собственной просьбе). Не так уж много, но это позволило нам сделать выводы.
Мы поняли, какие экраны и текста решают задачу — это самое главное. На базе результатов провели еще несколько итераций и остановились на одном финальном решении.
Визуальный стиль
По готовому прототипу мы нарисовали несколько вариантов стилистического оформления. Обсудили, сравнили, доработали.
Чтобы получить отклик на проделанную работу, мы снова провели тест в метро, но уже с готовым дизайном, а также полевые тесты среди друзей. В этот раз показывали каждому респонденту все 3 варианта.
Всего мы получили обратную связь от 53 людей (30 друзья и коллеги, 23 в метро).Оценка среди всех респондентов:
- Вариант 1 — 30%
- Вариант 2 — 22%
- Вариант 3 — 48%
Тесты непосредственно в метро дали нам понять: варианты 1 и 2, учитывая уровень освещения и качество экранов, проигрывают варианту 3. На нем и остановились.
Финальный дизайн
Взяли за основу концепт №3 и доточили все возможные мелочи. В процессе еще раз задумались над тарифной сеткой и верностью ранее принятых решений.
Приветствие
Вносим купюру. Сделали два варианта экрана пополнения, остановились на экране без акцента на тарифе:
Проверяем купюру
Пополняем карточку
Сообщаем об успешном статусе
Желаем «Приятной поездки»
Технический экран
Результаты в цифрах и это победа ✌
Практически в два раза быстрее проходит взаимодействие с интерфейсом. Тестирование мы провели в связке iPad + текущее время на внесение купюры в терминале.
Таблица 2. Затраты времени с новым интерфейсом
Что можно улучшить
- Если у меня нет карточки, где её купить
- Карточка технически неисправна
- Возможно, текст после внедрения продукта в жизнь
- Купюра плохая и возвращается клиенту
- Иконки
- Другие мелкие детали
Резюме
Работу над проектом мы закончили в августе 2015. К сожалению, только сейчас нашли время представить результаты. Мы видим, что это реально работает и может осчастливить многих клиентов метрополитена в Киеве.
Мы сделали несколько шагов для внедрения дизайна в жизнь, но поняли, что это сложная процедура, которой мы не готовы уделять много времени и сил. К тому же, на рынке уже несколько лет работают «Агенти Змін», которые развивают городской дизайн и совершенствуют навигацию в метро. И, как оказалось, в январе 2016 еще и работают над интерфейсом «пополняшки».
Ссылки на все экраны в InVision. Подписывайтесь на наш Behance.
Над проектом работали: Виталий Березюк, Андрей Тонконогов, Дмитрий Колесник, Владислав Иванов, Лилия Батыр.
Всем спасибо.
