Стресс-тест оплаты по QR на кассе в супермаркете. Сравниваем мобильные интерфейсы банков
Мотивация
Банковское мобильное приложение стало для многих одним из самых часто используемых приложений. Оплата по QR ЖКХ или продуктов в супермаркете, сбор денег на подарок или перевод уличному музыканту. Эти или другие операции мы можем совершать по нескольку раз в день.
Также есть сезонные изменения и выходные дни, когда процесс оплаты может возрастать кратно.
Например, в отпуске на море, кругом лавки с сувенирами и хендмейдом, свежие фрукты и ягоды, принадлежности для купания и т.п. Частенько, здесь можно оплатить только наличными или переводом по номеру телефона, а бумажник вы, вероятно, предпочтете оставить в номере гостиницы, а не дарить ловкому прохожему.
Цель
Найти приложение с оперативным доступом к оплате по QR или переводу по номеру телефона. В идеале кнопка оплаты располагается на первом экране и доступна при использовании телефона одной рукой.
Ситуация
Оплата на кассе супермаркета. Забыт бумажник с картой.
Предположим, что для пользователя основным способом оплаты в супермаркете остается оплата пластиковой картой. Но, иногда что-то идет не так.
Вы вышли из дома за вином, ой… за хлебом, схватили рефлекторно телефон, взяли зонтик (на улице дождь), а бумажник остался в сумочке (других штанах, другой куртке).
Положили в корзину хлеб, сыр, выбрали вино, отстояли очередь в кассу и в момент оплаты пытаетесь машинально достать бумажник…, а его нет.
Конечно, если нет и телефона или нет приложения, то вы разводите руками, оставляете все на кассе и идете печально домой без шансов приятно провести вечер, тем более, что время продажи алкогольной продукции в вашем регионе заканчивается рано… Однако, если даже есть с собой телефон с установленным приложением, то нет гарантии, что вы справитесь с возникшей стрессовой ситуацией и сможете совершить быструю манипуляцию, которая не так хорошо отработана, как вытаскивание бумажника.
Итак. Вы стоите перед кассой, в руке мокрый зонтик.
Разводите руками и громко объявляете кассиру и очереди, что забыли бумажник.
Достаете и разблокируете телефон.
Запускаете банковское приложение.
Ждете пока загрузится… Еще немного ждете.
Разблокируете приложение.
Загружается первый экран и… вам не повезло, кнопки QR-оплаты нет.
Очередь волнуется, кассир проверяет не пора ли обновить маникюр, телефон начинает прыгать в руке, вы пытаетесь помочь другой рукой и окатываете окружающих бодрящими каплями.
Нашли маленькую кнопочку «Платежи» и переходите на второй экран и… кнопка QR не в приоритетном блоке и не поместилась в экран — нужен скроллинг.
Наконец кнопка найдена и нажата. Осталась только процедура оплаты. Если с интернет-связью не очень плохо, то вы вытираете пот со лба, забираете свой хлеб и все остальное, и спешите домой попить водички.
Результат этого опыта для пользователя: с некоторой вероятностью и при наличии альтернативного и более приспособленного приложения, пользователь переведет часть средств в другой банк для выполнения ежедневных быстрых операций.
Приоритетность задач банковского приложения
Безусловно приоритетность операций определяют бизнес-требования. Если оплата по QR не является чем-то важным для бизнеса, то и найдете вы ее только на втором, а то и третьем экране.
Выбор пользователя тогда очевиден, стать клиентом еще одного банка. Это порой проще чем разобраться и/или настроить существующее приложение.
Тем не менее попробуем вкратце ранжировать несколько операций по частоте использования, от ежедневных и реже.
Покупка кофе, булочек в киоске.
Оплата товаров в продуктовом, хозяйственном магазине.
Просмотр баланса.
Перевод денег родственникам, на подарок коллеге, хозяину квартиры…
Перевод по номеру телефона за сувениры и другие товары в ларьке (выходные и отпуск).
Оплата интернета, мобильной связи, ЖКХ, других счетов.
Заведение нового продукта.
Из этого нехитрого списка нетрудно сделать вывод, что покупки, в том числе по QR или переводы по номеру телефона, более частые действия, чем заведение нового продукта. Однако, с некоторой вероятностью, на первом экране вы найдете ссылку «Все мои продукты» или «Новый продукт», а не «Перевод по номеру телефона».
Используемый телефон
Asus Zenfone 3 ZE552KL. Диагональ 5.5», без NFC. 720×1280 (теперь чтобы купить телефон с Gorilla Glass с двух сторон, нужно заплатить на порядок больше)
Выбор банков
Основные причины выбора трех банков: непосредственный клиент, на телефоне установлены три приложения и они используются более или менее часто и почти одновременно. Дополнительно в процессе написания статьи было установлено приложение Т-Банка и запущен процесс доставки дебетовой карты.
Экраны приложений
Первые экраны. Альфа-Банк, Сбербанк, Райффайзен Банк, Т-Банк.
Нет сомнений, при разработке приложения есть масса влияющих факторов, о которых нам как пользователям ничего не известно. Поэтому не будем обсуждать как это получилось, а только как мы пользуемся тем, что получилось.
Акцент будет на приложение Альфа-Банка, так как именно с этим приложением возник изучаемый кейс.
Первый экран Альфа-Банка
Верхняя часть, согласно зонам доступности отдана наименее используемым кнопкам.
Сообщение о загрузке новой версии. …Эта ссылка висит всегда. Почему? Потому что обновить, учитывая современную специфику, лень. А когда вы таки обновили, уже появилось новое.
Далее «Продукты». В данном случае их два, дебетовая и кредитная карты.
Реклама. Если нажать крестик, чтобы очистить пространство, появляется новая. Нажать нужно несколько раз, пока не удалите все предложения. После перезагрузки блок появится снова…
Ссылка «Все мои продукты». В данном случае продуктов всего два и они уже на первом экране.
Далее блоки с рекламой.
Нижнее меню включающая кнопку «Платежи».
Итог. Для нашего кейса с быстрой оплатой на этом экране нет ни одной кнопки. Опять же с точки зрения оперативного управления средствами, экран представляется почти бесполезным.
Первый экран Сбербанка
Верхняя часть нас по-прежнему мало интересует.
Крупное название «Кошелек» являющееся ссылкой и ведущее на экран с дублирующей информацией по продуктам. Кнопка «глазик» и настройка темы.
Наконец, максимально полезная кнопка для нашего кейса — оплата QR-кодом.
Полезная кнопка «Безопасность». Учитывая популярность мошеннической активности именно со Сбербанком, трудно переоценить.
Информация о продуктах. По сравнению с Альфа-Банком сэкономили место.
Реклама. Сэкономленное место использовано рекламой. Чтобы удалить на крестик нужно нажать только один раз. Но, появляется снова после перезапуска приложения. Т.е. после двух-трех нажатий вы устаете и реклама остается навсегда.
Следующий блок, помещающийся в наше разрешение лишь частично — полезные кнопки для нашего кейса. Варианты перевода и шаблоны.
Нижнее меню включающая кнопку «Платежи».
Итог. Для нашего кейса есть 1.3 кнопки быстрой оплаты (учитывая разрешение текущего устройства). QR-кнопка имеет постоянное место. При желании, можно найти постоянное место и для переводов по телефону.
Первый экран Райффайзен Банка
Верхняя часть стандартно содержит кнопки личного кабинета, поиска и сообщений.
Информация о средствах в кошельке. Очень компактно.
Кнопки быстрой оплаты. Есть и QR и оплата по номеру телефона. Дополнительно QR выделена инверсией.
Место для контента. После поверхностного ознакомления показалось, что это полезный контент, а не реклама.
Информация о продуктах. И снова компактно.
Нижнее меню содержит кнопку «Платежи».
Итог. Этот экран наиболее полно отвечает нашей цели: есть две кнопки для быстрой оплаты, они в визуальном приоритете и имеют предсказуемое положение, т. е. всегда занимают одно и тоже место при начальной загрузке и скроллинге «до упора». Но, все еще в трудной физической доступности при использовании телефона одной рукой.
Первый экран Т-Банка (на момент написания статьи была только инициирована доставка дебетовой карты)
В верхней части много свободного пространства, одна кнопка дополнительной информации. Крупно ссылка на личный кабинет и отдельно поле с поиском. Довольно щедро для такого разрешения.
Область развлекательного контента.
Информация о продукте.
Создание нового продукта.
Нижнее меню с кнопкой «Платежи».
Итог. В текущем состоянии экран не содержит кнопок быстрой оплаты.
Второй экран и скроллинг Альфа-Банк. Первый и второй экран Т-Банк.
Второй экран Альфа-Банка
Экран полностью посвящен платежам, поэтому здесь есть все необходимые кнопки быстрых операций. Но, по-прежнему, отмечаем, что QR-оплата не в приоритете и при данном разрешении не помещается в экран и нужно скроллить.
Второй экран Т-Банка
Здесь воспользуемся официальным изображением с сайта, где видно, что кнопка QR находится в верхнем правом углу и имеет довольно малый размер, из чего можно сделать вывод, что эта операция осмысленно выделена, но при этом остается физически трудно доступной.
О пользе написания статей
В процессе работы над статьей появилась мотивация более тщательно изучить интерфейс Альфа-Банка и, неожиданно, обнаружилась и кнопка «Оплата по QR» и кнопка настройки главного экрана.
Настройка экрана позволяет менять порядок отображения виджетов.
Сами виджеты, среди которых и кнопка «Оплата по QR», находятся под основной областью с продуктами и рекламным блоком.
Виджет «Оплата по QR». Кнопка настройки главного экрана.
Почему эта кнопка не попалась на глаза сразу? Интересный вопрос.
Исследуя прилегающие области, пользователь оберегает свое информационное пространство, в которое норовят попасть буквально все.
Видя после блоков своего продукта блок с рекламой, можно предположить, что и дальше будет одна реклама, и даже чтобы проверить это предположение нужно потратить время, а если вы в цейтноте перед кассой, то в подсознании будет зафиксирован факт законченного исследования с отрицательным результатом.
Переместив, наконец, виджет повыше, мы уже получаем почти то, что надо. Но, все еще недостаточно хорошо.
Кнопка быстрой оплаты уже имеет шанс попасть на первый экран и даже именно внизу, где ее было бы удобно нажать. Но, она не зафиксирована по отношению к нижнему краю телефона и будет «плавать» и в процессе скроллинга и по причине изменения верхнего контента. Так что еще придется потратить дополнительные усилия чтобы попасть по кнопке. Плюс ко всему, виджет выглядит как ссылка, хотя работает как кнопка, что вводит в дополнительное заблуждение.
После всех изысканий и тестирования возникает сильное желание отделить «чистый» интерфейс от «полуполезного» контента, с которым элементы интерфейса хорошо перемешаны, так что уже сложно отделить кнопки, виджеты и рекламу.
Альтернативный вариант интерфейса
На мой взгляд, электронный кошелек уже буквально нуждается в пульте управления, это не просто приложение по типу веб-сайта с информацией, рекламой и расположенными более или менее осмысленно кнопками.
Примерами таких пультов уже давно являются проигрыватели музыкальных треков, аудиокниг, галереи изображений, где все основные элементы управления находятся в нижней части экрана или как минимум на постоянных местах, что повышает удобство и скорость использования.
Проигрыватели аудиокниг.
Ниже представлен макет возможного варианта банковского приложения, в котором оперативные кнопки на первом экране, имеют постоянное положение и в физической доступности при управлении одной рукой.
Можно подумать над настройкой «пульта» и дать возможность пользователю менять расположение и видимость кнопок.
Макет варианта первого экрана банковского приложения с фиксированными кнопками.
Автор не является постоянным дизайнером мобильных приложений, поэтому макет может содержать ошибки. Буду рад замечаниям и пожеланиям, если таковые найдутся.
Вывод
Из рассмотренных четырех приложений для текущего разрешения лишь два четко выделяют быстрые платежи на первом экране, а из них только одно обеспечивает быстрый доступ к переводам по номеру телефона.
И ни одно из рассмотренных приложений не обеспечивает легкий физический доступ к кнопке при использовании телефона одной рукой.
Да, изменить привычный интерфейс очень сложно из-за консервативности пользователей, поэтому остается только надеяться и ждать, пока личные «хотелки» трансформируются в общий опыт.