Новий інтерфейс автоматів поповнення карток метро

Агенти змін
8 min readDec 23, 2015

Напевно, в усьому Києві не знайдеться людини, що користується безконтактною карткою метро та, водночас, не відчуває ненависті до автоматів поповнення цих карток. Хто з нас не забував вдруге натиснути на кнопку «сплатити», а потім не був покараний за це підступним турнікетом? Де б ми не розповідали про наші проекти для київського метро, нас щоразу запитують, коли ми доберемося до автоматів. Ми ініціювали процес редизайну інтерфейсу приблизно рік тому, але задача постійно змінювалась, і впровадження нового рішення відкладалось. Нарешті, і в кінці цього тунелю ніби бачимо світло: подивіться, що в нас вийшло і надайте нам зворотній зв’язок, аби ми спільно зробили продукт, максимально зручний у користуванні для всіх.

Головний екран інтерфейсу
Екрани поповнення безконтактної картки
Екрани купівлі жетонів

Що не так з існуючим інтерфейсом

Якщо лишити осторонь естетичне питання, ми побачимо головну проблему: виконання основної задачі — поповнення картки на довільну суму — вимагає багато часу та зайвих дій. Наприклад, внесення 10 купюр треба підтверджувати 11 натисканнями на екран — геть не юзер-френдлі.

Інтерфейс автомату поповнення зараз

Навіть досвідчені користувачі часто помиляються з цим інтерфейсом, і в цьому винен він, а не вони. Ми вважаємо, що інтерфейс, який потребує додаткових інструкцій на шматочку папірця, не годний. Особливо, якщо й ці інструкції не допомагають.

Той самий папірець

Якісний продукт має сам зрозуміло пояснювати, як ним користуватись. Саме такий інтерфейс автоматів поповнення і став нашою метою.

Дослідження

Щоб зрозуміти типові сценарії використання автоматів та задачі людей, ми розпитали друзів та знайомих, як вони користуються автоматами. Виявилося, що переважно користувачі діляться на дві категорії:

  • Поповнюють карту, не замислюючись про знижки. Вони просто купують кілька поїздок або витрачають якусь зручну купюру, що є у гаманці.
  • Поповнюють карту на 50 поїздок, щоб отримати кожну з них за мінімальним тарифом — 3.50 грн.

Дані, надані метрополітеном, підтверджують результати наших досліджень. Приблизно 40% користувачів купують поїздки за тарифом 4 грн (тобто, в них немає мети економити), ще 40% — за тарифом 3.50 грн (тобто, в них є мета їздити максимально дешево), та ще 20% приблизно порівну купують поїздки за тарифами 3.60–3.90 грн.

Отже, ми розуміємо, що для однієї половини користувачів важливо, щоб вся операція з поповнення відбулась якомога швидше — їм бадуже, який тариф, але вони поспішають, а для іншої половини критично важливо розуміти, за яким тарифом їм на картку зараховуються поїздки, і щоб внесення навіть великої суми було простим і зручним. Ці інсайти задали два основних вектори розробки інтерфейсу.

Простий інтерфейс — це складно

Ми прагнемо максимально спростити користування автоматами поповнення. У години пік біля них нерідко збираються черги, тому час контакту необхідно звести до мінімуму. Отже, інтерфейс має бути одночасно і зрозумілим для нових користувачів, і до автоматизму простим для досвідчених.

Нашою мрією був інтерфейс взагалі без жодної кнопки. “Less is more”,— як кажуть послідовники Дітера Рамса. Але система знижок, введена з останнім підвищенням вартості проїзду, зробила нашу мрію нездійсненою. Чим більше сума поповнення, тим менший тариф однієї поїздки, тому при поповненні кількома купюрами, максимальну знижку можна отримати, коли внесено вже всю суму. Через це обмеження система не може просто записувати купюри по мірі внесення — їй необхідно повідомити, що додано вже всі гроші. Тоді автомат може «перетворити» їх на поїздки за найнижчим для цієї суми тарифом.

Кнопка, від якої ми не можемо відмовитись

Відмова від проміжної кнопки «Сплатити»

Щоб прискорити роботу з автоматом, ми відмовились від валідації кожної купюри — тепер внесена готівка автоматично записується на картку (і після підтвердження внесення останньої купюри перераховується у поїздки). Для цього довелося забрати в користувачів можливість повернути щойно внесену купюру, але за даними метрополітену цією функцією користуються дуже-дуже нечасто. Невелика ціна за головне досягнення: тепер кнопку «Сплатити» необхідно натиснути лише один раз, незалежно від кількості купюр. Раніше підтверджувати натисканням кнопки треба було і додавання кожної купюри, і завершення внесення всієї суми. Тепер, щоб купити 50 поїздок за тарифом 3.50, замість 6 натискань потрібно буде зробити лише одне. Непогано, так?

Старий інтерфейс: забагато тексту, забагато дій, забагато часу та можливості для помилок

Максимальний розмір кнопки

На ілюстраціях вище ви вже могли помітити, що розмір кнопки «Сплатити» ми збільшили, порівняно з існуючим інтерфейсом. Це не випадкове рішення. Великий розмір кнопки дозволяє не цілитися в неї, а швидко і неохайно натискати. Це, відповідно до закону Фіттса, зекономить час та зусилля. Особливо, якщо ми згадаємо рівень чутливості тач-скрінів в автоматах.

Більша кнопка — менше зусиль

Відображення тарифів

Оскільки можливість зекономити важлива приблизно для половини користувачів, ми вирішили показати інформацію про тарифи прямо на екрані поповнення — скільки поїздок треба купити, щоб отримати той чи інший тариф. Більше того, ця інформація стала інтерактивною: по мірі внесення готівки видно, скільки ще треба додати, щоб купити поїздки за бажаним тарифом.

Ітерації спрощення

Усі ці вимоги було не так просто перетворити на інтерфейсні рішення. Як то часто буває, перші варіанти були невиправдано складними та незрозумілими. Шляхом спрощення та переосмислення нам вдалося знайти досить мінімалістичне рішення.

Деякі з попередніх ітерацій розробки інтерфейсу
Поточна ітерація

Ми не ставимо перед собою мету просто зробити кращий інтерфейс — здається, будь-який буде кращим за існуючий. Ми хочемо зробити інтерфейс дійсно зручним і простим.

Розширення контексту

Поки ми працювали над рішеннями, метрополітен та виробники автоматів трохи розширили нашу задачу. Нас попросили у першу чергу зробити інтерфейс «холодильників». Це такі великі автомати, що стоять на деяких станціях та вміють продавати жетони. Метрополітен планує додати до них кардрідери, щоб вони могли також поповнювати безконтактні картки. Тому нас попросили розробити інтерфейс, який дозволяв би виконувати обидві задачі.

Наразі це виглядає так
Чекайте, що?
Так, дійсно, ми маємо неабиякий вибір!

Результати тестування

Ми публікуємо цю статтю вже після проведення перших тестувань прототипу, у ході яких отримали корисний зворотній зв’язок і на його основі тепер внесемо деякі зміни до інтерфейсу.

На жаль, ми не в змозі вплинути на деякі апаратні обмеження, тому зосереджуємося на тих зауваженнях, які можемо реалізувати. Наприклад, наразі ми не можемо збільшити максимальну кількість поїздок, які можна записати на карту, або впровадити покупку поїздок за допомогою банківської карти.

Також ми досить скептичні до зворотнього зв’язку від людей, пов’язаних із дизайном інтерфейсів, хоча і дуже вдячні за нього. По собі знаємо, що ці люди (як і ми) в силу своєї «профдеформації», як правило, спираються не на власний досвід користування, а на відомі їм правила проектування інтерфейсів. Але у фазі тестування готової версії нам важливі саме думки користувачів, оскількі всі відомі правила ми вже застосували, наскільки це було можливо у наших умовах.

Ми запропонували користувачам виконати послідовно три задачі у інтерактивному прототипі та відповісти на деякі питання у формах зворотнього зв’язку:

  • поповнити картку максимально швидко
  • поповнити картку за мінімально можливим тарифом
  • купити жетони.

Першу задачу вдалось виконати 99% людей (79 з 81). 76% людей відповіли, що виконання задачі їм здалося дуже легким (56%) та легким (21%). Тобто лишається майже чверть людей, які не вважають, що задачу було виконати легко. Це, звісно ж, дуже багато. Також 70% людей відповіли, що новий інтерфейс їм здався набагато простішим (20%) та простішим (50%) за існуючий. 10% людей не змогли відповісти на запитання, а 20% вважають, що інтерфейс за складністю такий самий.

По інших двох задачах ми отримали приблизно такий самий результат. Відгуки були від «Все круто, молодці!» до «…доводиться констатувати невдалість реалізації в цілому». Але для альфа-версії так і має бути, оскільки це тільки початок діалогу.

Основні зауваження

Найбільша кількість нарікань стосувалася таблиці тарифів. Зрозуміло, що її треба спрощувати та робити більш людино-орієнтованою. Ми вирішили поміняти місцями стовпці та дати їм зрозуміліші заголовки: «додайте», «отримайте поїздки», «за тарифом». Значення у стовпці з кількістью поїздок відображатимуться без позначки «+» (1, 10, 20, …).

Багато хто з користувачів небезпідставно звертав увагу на те, що написи «Вставте картку» та «Внесіть готівку» треба розташовувати максимально близько до відповідних апаратних частин. Але у реальному апараті ці пристрої досить далеко від екрана та в іншій площині, тому ми все ж таки вирішили не прив’язувати до них вказівники на екрані та розмістити ці написи і піктограми на фронтальній панелі самого апарату у відповідних місцях. Тобто винести цю задачу за рамки інтерфейсу.

Так виглядає реальний апарат

У тих апаратів, що вміють тільки поповнювати картки, такої проблеми немає, тому тексти в інтерфейсі з’являтимуться поруч із кардрідером та приймачем купюр.

Ми також усвідомили, що для багатьох людей є досить незрозумілим принцип «вносиш гроші на рахунок» — «купляєш поїздки» — «решта лишається на рахунку до наступної покупки». Це змусило нас переосмислити відображення інформації про стан рахунку та додати заголовок до вікна з кількістю поїздок і рештою на картці.

Завдяки вашим відповідям ми зрозуміли, у яких моментах виконання задач інтерфейс не дає повноцінний зворотній зв’язок, тому у користувача немає однозначного розуміння, що зараз сталося, та що робити далі.

Ми дуже вдячні всім, хто взяв участь у тестуванні та висловив свою думку щодо запропонованого інтерфейсу. Далі нам доведеться внести відповідні корегування та протестувати наступну версію вже на реальних апаратах, оскільки все ще лишається багато питань, на які необхідно отримати відповіді.

--

--

Агенти змін

Робимо зрозумілий, корисний та доступний простір. http://a3.kyiv.ua