Мотивация

Банковское мобильное приложение стало для многих одним из самых часто используемых приложений. Оплата по QR ЖКХ или продуктов в супермаркете, сбор денег на подарок или перевод уличному музыканту. Эти или другие операции мы можем совершать по нескольку раз в день.

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

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

Цель

Найти приложение с оперативным доступом к оплате по QR или переводу по номеру телефона. В идеале кнопка оплаты располагается на первом экране и доступна при использовании телефона одной рукой.

Ситуация

Оплата на кассе супермаркета. Забыт бумажник с картой.

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

Вы вышли из дома за вином, ой… за хлебом, схватили рефлекторно телефон, взяли зонтик (на улице дождь), а бумажник остался в сумочке (других штанах, другой куртке).

Положили в корзину хлеб, сыр, выбрали вино, отстояли очередь в кассу и в момент оплаты пытаетесь машинально достать бумажник… а его нет.

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

Итак. Вы стоите перед кассой, в руке мокрый зонтик.

1. Разводите руками и громко объявляете кассиру и очереди, что забыли бумажник.

2. Достаете и разблокируете телефон.

3. Запускаете банковское приложение.

4. Ждете пока загрузится… Еще немного ждете.

5. Разблокируете приложение.

6. Загружается первый экран и… вам не повезло, кнопки QR-оплаты нет.

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

8. Нашли маленькую кнопочку «Платежи» и переходите на второй экран и… кнопка QR не в приоритетном блоке и не поместилась в экран — нужен скроллинг.

9. Наконец кнопка найдена и нажата. Осталась только процедура оплаты. Если с интернет-связью не очень плохо, то вы вытираете пот со лба, забираете свой хлеб и все остальное, и спешите домой попить водички.

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

Приоритетность задач банковского приложения

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

Выбор пользователя тогда очевиден, стать клиентом еще одного банка. Это порой проще чем разобраться и/или настроить существующее приложение.

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

1. Покупка кофе, булочек в киоске.

2. Оплата товаров в продуктовом, хозяйственном магазине.

3. Просмотр баланса.

4. Перевод денег родственникам, на подарок коллеге, хозяину квартиры...

5. Перевод по номеру телефона за сувениры и другие товары в ларьке (выходные и отпуск).

6. Оплата интернета, мобильной связи, ЖКХ, других счетов.

7. Заведение нового продукта.

Из этого нехитрого списка нетрудно сделать вывод, что покупки, в том числе по QR или переводы по номеру телефона, более частые действия, чем заведение нового продукта. Однако, с некоторой вероятностью, на первом экране вы найдете ссылку «Все мои продукты» или «Новый продукт», а не «Перевод по номеру телефона».

Используемый телефон

Asus Zenfone 3 ZE552KL. Диагональ 5.5”, без NFC. 720x1280 (теперь чтобы купить телефон с Gorilla Glass с двух сторон, нужно заплатить на порядок больше)

Выбор банков

Основные причины выбора трех банков: непосредственный клиент, на телефоне установлены три приложения и они используются более или менее часто и почти одновременно. Дополнительно в процессе написания статьи было установлено приложение Т-Банка и запущен процесс доставки дебетовой карты.

Экраны приложений

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

Акцент будет на приложение Альфа-Банка, так как именно с этим приложением возник изучаемый кейс.

Первый экран Альфа-Банка

(UPD: после обновления приложения экран изменился, в конце статьи рассмотрены изменения, а существующий текст оставлен с целью проследить эволюцию интерфейса)

1. Верхняя часть, согласно зонам доступности отдана наименее используемым кнопкам.

2. Сообщение о загрузке новой версии. …Эта ссылка висит всегда. Почему? Потому что обновить, учитывая современную специфику, лень. А когда вы таки обновили, уже появилось новое.

3. Далее «Продукты». В данном случае их два, дебетовая и кредитная карты.

4. Реклама. Если нажать крестик, чтобы очистить пространство, появляется новая. Нажать нужно несколько раз, пока не удалите все предложения. После перезагрузки блок появится снова…

5. Ссылка «Все мои продукты». В данном случае продуктов всего два и они уже на первом экране.

6. Далее блоки с рекламой.

7. Нижнее меню включающая кнопку «Платежи».

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

Первый экран Сбербанка

1. Верхняя часть нас по-прежнему мало интересует.

2. Крупное название «Кошелек» являющееся ссылкой и ведущее на экран с дублирующей информацией по продуктам. Кнопка «глазик» и настройка темы.

3. Наконец, максимально полезная кнопка для нашего кейса — оплата QR‑кодом.

4. Полезная кнопка «Безопасность». Учитывая популярность мошеннической активности именно со Сбербанком, трудно переоценить.

5. Информация о продуктах. По сравнению с Альфа‑Банком сэкономили место.

6. Реклама. Сэкономленное место использовано рекламой. Чтобы удалить на крестик нужно нажать только один раз. Но, появляется снова после перезапуска приложения. т. е. после двух‑трех нажатий вы устаете и реклама остается навсегда.

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

8. Нижнее меню включающая кнопку «Платежи».

Итог. Для нашего кейса есть 1.3 кнопки быстрой оплаты (учитывая разрешение текущего устройства). QR-кнопка имеет постоянное место. При желании, можно найти постоянное место и для переводов по телефону.

Первый экран Райффайзен Банка

1. Верхняя часть стандартно содержит кнопки личного кабинета, поиска и сообщений.

2. Информация о средствах в кошельке. Очень компактно.

3. Кнопки быстрой оплаты. Есть и QR и оплата по номеру телефона. Дополнительно QR выделена инверсией.

4. Место для контента. После поверхностного ознакомления показалось, что это полезный контент, а не реклама.

5. Информация о продуктах. И снова компактно.

6. Нижнее меню содержит кнопку «Платежи».

Итог. Этот экран наиболее полно отвечает нашей цели: есть две кнопки для быстрой оплаты, они в визуальном приоритете и имеют предсказуемое положение, т. е. всегда занимают одно и тоже место при начальной загрузке и скроллинге «до упора». Но, все еще в трудной физической доступности при использовании телефона одной рукой.

Первый экран Т‑Банка (на момент написания статьи была только инициирована доставка дебетовой карты)

1. В верхней части много свободного пространства, одна кнопка дополнительной информации. Крупно ссылка на личный кабинет и отдельно поле с поиском. Довольно щедро для такого разрешения.

2. Область развлекательного контента.

3. Информация о продукте.

4. Создание нового продукта.

5. Нижнее меню с кнопкой «Платежи».

Итог. В текущем состоянии экран не содержит кнопок быстрой оплаты.

Второй экран Альфа-Банка

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

Второй экран Т-Банка

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

О пользе написания статей

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

Настройка экрана позволяет менять порядок отображения виджетов.

Сами виджеты, среди которых и кнопка «Оплата по QR», находятся под основной областью с продуктами и рекламным блоком.

Почему эта кнопка не попалась на глаза сразу? Интересный вопрос.

Исследуя прилегающие области, пользователь оберегает свое информационное пространство, в которое норовят попасть буквально все.

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

Переместив, наконец, виджет повыше, мы уже получаем почти то, что надо. Но, все еще недостаточно хорошо.

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

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

Альтернативный вариант интерфейса

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

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

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

Можно подумать над настройкой «пульта» и дать возможность пользователю менять расположение и видимость кнопок.

Автор не является постоянным дизайнером мобильных приложений, поэтому макет может содержать ошибки. Буду рад замечаниям и пожеланиям, если таковые найдутся.

Вывод

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

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

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

UPD 1

После комментариев пользователей я таки обновил приложение Альфа-Банка на своем телефоне и, "невероятно, но факт" (с) кнопка "Оплата по QR" была перенесена именно туда, куда предполагалось по условию кейса.

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

Обновленный главный экран Альфа-Банка.

В первую очередь, мы видим, что появилась "нижняя шторка" и все содержимое разделилось на "Продукты" в верхней части и контент с виджетами в шторке.

Далее в шторке появилась кнопка "Оплата по QR". В данной раскладке, это кнопка занимает именно то место, в котором нам удобно на нее нажимать. Т.е. выполнены оба условия нашего кейса: кнопка на первом экране и в доступности при использовании одной рукой. Это здорово!

У текущего решения есть и минусы.

1. Кнопка все же значительно эволюционирует в своем положении. Есть как минимум три места, в которых ее можно обнаружить. С блоком рекламы, без рекламы и при открытой шторке.

2. Остается. по-моему мнению, проблема сильного смешения контента (в первую очередь рекламного) и кнопок управления. В предложенном альтернативном варианте, все кнопки управления сгруппированы.

3. С точки зрения быстрой оплаты в ларьке или горячей кукурузы на пляже, хотелось бы также к кнопке "Оплата по QR" добавить "Перевод по номеру телефона".

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

upd 1 end