Тестовое задание
для компании «Промсвязьбанк»
Дарья Елизарова
Интерфейс пополнения карты «Тройка»
ЗАДАЧА
Разработать интерфейс, который вызовет у пользователя лишь приятные эмоции, без задержек и колебаний доведет до оплаты

Первый экран
У меня нет статистики по соотношению типов покупок в автомате Московского метрополитена, поэтому решения интерфейса основаны на предположениях.

Предположение: самым популярным действием в будни в терминалах оплаты является пополнение карты «Тройка», а в выходные и на станциях вокзалов — покупка разовых бумажных билетов. Но в целом пополнение карты «Тройка» — самое частое действие.

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

Иконки всех видов транспорта сопровождают покупку, давая понять, что пользователь приобретает Единый билет на всё, а также стараются запомниться, чтобы в будущем было проще ориентироваться при других операциях.

Еще есть билеты на отдельные виды транспорта. Они дешевле, но, предполагаю, покупаются гораздо реже, так же, как и пополняются социальные карты. Тем не менее, узнаваемые иконки и дизайн социальной карты помогут тем, кому Единый не нужен.

Основные действия происходят на центральном белом поле. Там много воздуха, крупный важный текст и подсказка, куда предположительно нажмет пользователь.

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

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

Теперь нужно вставить карту
На втором экране автомат предлагает вставить карту. Главное — картинкой вверх, а каким торцом — неважно.

Транспортные иконки продолжают сопровождать пользователя на белом рабочем фоне, подсказывая, что он на правильном пути приобретения Единого.

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

Экран сложного выбора
На этом экране важно выбрать самый выгодный вариант.

На нем пользователь может задержаться, подумать и изучить информацию. Появилась информационная кнопка «Тарифы».

Для тех, кто спешит и просто хочет побыстрее оплатить, выделен беспроигрышный ход — внести любую сумму.

Важная, но справочная информация о карте находится сверху на темном фоне и на рабочее поле не претендует.

Для тех, кто передумал, есть кнопка «Не хочу», которая отправит на первый экран.

Наличными или картой?
Вопрос, который задают в любом магазине, задаст и терминал.

Выбор здесь чаще всего быстрый и понятный.

Тарифы переехали из рабочей области в альтернативную, на всякий случай.

И, конечно, всегда можно вернуться назад. Отмена перекинет на предыдущий экран. Восклицательный знак тут, с одной стороны, намекает на мем «Галя, отмена!», а с другой — добавляет эмоций в терминальный язык. Автомат понимает — всякое бывает при спешке.

Сумма к оплате
Поле, где сумма — это не кнопка, а форма, поэтому визуально отличается от всего, что было в терминале раньше.

Есть маленькие кнопки-подсказки адекватных сумм пополнения, а есть большая для оплаты.

На всякий случай тут снова есть возможность посмотреть тарифы, чтобы понять, какая сумма нужна.

Время платить
Автомат заботливо напоминает сумму, которую пользователь выбрал раньше.

Для мнительных пользователей все еще остались пути к отступлению кнопками отмены и просмотра тарифов.


Ура, финиш
Все хорошо, можно ехать.

Сумма на карте изменилась.

Главное — банковскую карту и «Тройку» не забыть. Автомат это знает, поэтому позволяет себе красный яркий тон.
В этом варианте интерфейса экранов больше, чем в существующем. Но при этом всегда есть очевидный легкий выбор, что сокращает время оплаты для большинства пользователей.

Интерфейс использует спокойную гамму дизайна самой карты «Тройка» и отказывается от широкого использования ярко-красного цвета Московского транспорта.
Дарья Елизарова
+7 (910) 433-5190
iwisiris@gmail.com