как создать шаблон в альфа банке в мобильном приложении
Создание шаблонов интернет-банка «Альфа-клик»
Придумываем дизайн-концепцию. Благодаря развернутому меню и панели «Избранное» стараемся как можно скорее привести человека к тому, ради чего он зашел в интернет-банк.
Выводим в «Избранном» пользовательские шаблоны оплаты и ссылки на активы.
Думаем над перемещением, удалением, переименованием и добавлением блоков.
Для копирования любого счета в «Избранное» за один клик рисуем рядом с названием звездочку.
Отказываемся от идеи рисования макетов сразу и занимаемся проектированием. Весь интернет-банк умещается на 38 схемах страниц.
Параллельно работаем над главной: определяемся со структурой и общим оформлением. На этой странице банк дает советы, сообщает клиентам о новых предложениях, рассказывает о себе и отвечает на вопросы.
Готовим версию страницы после авторизации и оформляем список счетов.
Главная выглядит слишком громоздко и сложно. Пытаемся уменьшить количество блоков и увеличить плотность информации, немного меняем оформление.
Думаем над календарем операций. Предлагаем создать график и информационный скролл, с помощью которого происходит перемещение по линии времени.
Клиент считает подобную визуализацию избыточной. Оставляем отображение в виде списка.
Доделываем остальные страницы и готовим их к верстке.
Мобильное приложение Альфа-Банка: мнение одного клиента
Под рукой была девушка, у которой после смены SIM-карты на micro-SIM отвалилось подтверждение транзакций по SMS, а слово-пароль моя блондинка не помнила. Отличная ситуация — скачали, установили и продолжили издевательство над чатом.
Эксперимент первый
Девушка пишет, что забыла слово и не может дойти до банка. Угадайте, как дело решилось!
Диалог с консультантом в чате:
— Здравствуйте! Я забыла кодовое слово и не могу прийти ногами в банк. Что мне делать?
— Мария, к сожалению установить новое кодовое слово возможно только при вашем личном визите в офис банка. А что вы хотели уточнить в телефонном центре? Может нужную информацию смогу предоставить вам я?
— Ну а если я совсем не могу добраться до банка? Я хромаю(
— А в каком городе вы сейчас находитесь? Я попробую связаться с сотрудниками ближайшего отделения, может они смогут прийти к вам домой, например, если это будет удобно. И оформить от вашего имени заявление на замену кодового слова.
— Ого, спасибо! Но я не хочу вас напрягать, дождусь выздоровления.
— Мария, если вы действительно ограничены в возможностях передвигаться, то при наличии возможности у сотрудников офиса мы можем попробовать согласовать визит менеджера к вам. Я заранее не обещаю, но тем не менее узнать то точно можно)
С другим банком с аналогичной проблемой такой фокус выглядел как разговор с роботом: «Подойдите в ближайшее отделение». Александр, спасибо вам, если вы это читаете! А слово так и остаётся не восстановленным — просто некогда.
Эксперимент второй
Пытаемся разузнать про автокредиты для блондинки. Время 19:20. В нашем случае рассказали о предварительно одобренном кредите, который можно получить по одному паспорту.
И тут в голову пришла интересная идея — попросить консультанта Евгения помочь с выбором автомобиля неопытной девушке. Каково же было удивление, когда он по порядку уточнил, какая сумма, иномарка или отечественная, большая или маленькая.
Консультант расспросил о том, какая коробка нужна: механика или автомат. Ответ консультанта был контрольным выстрелом — он прислал несколько ссылок на автомобили, среди которых выделил Kia Rio. В принципе, не поспоришь — в условиях названного бюджета и хотелок это был единственно приемлемый вариант из «нерусских».
В двух других банках онлайн-чат в приложении найти не удалось — только звонок. На сайте одного из банков я всё-таки нашёл болталку, но консультант и говорить об автомобилях не стал. Мне показалось, и не мог. Робот бездушный!
Итак, чат «Альфа-Банка» поражает, но мне хочется оценить его объективно.
Примечание: Александр и Евгений, прошу прощения за жёсткое тестирование и отнятое время! Вы молодцы!
В главном меню приложения доступны почти все наиболее частые пользовательские операции.
Счета и баланс по ним
Сбоку от каждого счёта есть иконка информации, нажав на которую можно сразу просмотреть реквизиты конкретного счёта, а заодно скопировать их, если нужно кому-то отправить. По клику на сам счёт открывается информация по последним тратам и поступлениям: имя магазина, категория, сумма.
Сама идея планирования и учёта личных финансов не нова — для этого существует огромное множество приложений и сервисов. Но, кажется, у них у всех есть одна общая проблема — пользователю лень сразу вносить в них точные данные, а спустя время он не может вспомнить, на что потратил все деньги. В итоге он не ведёт бюджет. А здесь не надо ничего записывать — всё учитывается автоматически.
Карты
Доступны все карты банка и возможность управлять лимитами, менять счёт, блокировать карту. Блокировать единственную карту я как-то не решился, а вот лимиты — вещь полезная. Лимиты можно задать на снятие наличных, расходные операции, операции в Интернет, задаётся сумма разовой операции, период лимита и сумма за период, география ограничения. Очень полезная вещь, особенно во время распродаж и в путешествиях — так вы сбережёте нервы и деньги.
Платежи
Далее всё довольно привычно: перечислены категории потенциальных платежей. Опять же, с мобильника очень удобно оплачивать: выбрал категорию, заполнил поля, тут же пришло подтверждение в SMS — даже не нужно переводить взгляд на экран мобильника. И вновь приятная мелочь: в SMS от Альфа-Банка код подтверждения находится в начале и его видно во всплывающем на экране уведомлении — не нужно переключаться на другое окно и открывать сообщение полностью. Если сравнить с парой других банков, это действительно удобно.
В разделе «Все получатели» находится огромный список тех, кому можно и нужно заплатить. Список не обязательно скроллить — можно воспользоваться строкой поиска и ввести ключевое слово или даже несколько букв. Формы для заполнения параметров платежа удобные, ошибиться почти невозможно. Платежи можно сохранять как шаблоны и выбирать в соответствующем разделе меню.
Кстати, я как разработчик не могу не остановиться на дизайне самого приложения. Белый шрифт на приглушённом красном фоне, хорошо разделённые между собой поля и элементы меню позволяют не промахиваться при выборе или вводе данных.
Переводы
Переводы между счетами, в другой банк, с карты на карту и т.д. тоже стандартны. Из приятных мелочей — возможность перевода клиенту банка по номеру телефона, e-mail или полным реквизитам.
Ещё одна интересная штука — отправка и получение денег по сгенерированному QR-коду. В специальном QR-генераторе на сайте Альфа-Банка (или в любом другом) генерируется графический код по реквизитам. В дальнейшем все переводы можно осуществлять, скануруя код или используя его из памяти телефона.
Обмен валюты
В мобильном банке в пару кликов можно создать дополнительный валютный счёт и перевести часть заработной платы или остатка по карте в доллары или евро.
Единая история операций по карте
Наверняка вам приходилось долго скроллить данные в интернет-банках или рыться в смс-ках, чтобы найти поступившие суммы или какие-то свои траты. В мобильном приложении Альфа-Банка просматривать историю операций по карте очень удобно — они отображаются на экране единым списком.
Выбрав счёт, по которому нужно просмотреть материал, можно настроить фильтры, чтобы получить необходимую информацию:
— фильтры по дате — можно выбрать один день, произвольный период или месяц одним нажатием на название месяца;
— фильтр по типу операции: пополнение карты или списание.
Слева у каждого элемента списка проставляется иконка типа траты или логотип компании, в пользу которой вы совершили платёж. Чисто визуально проще найти нужную операцию.
Поддержка сканера отпечатка пальца
Сейчас сканером отпечатка пальца стали оснащать даже бюджетные смартфоны, поэтому было бы странным игнорировать эту удобную и весьма безопасную опцию. Приложение поддерживает как Touch ID на разных устройствах компании Apple, так и сканеры отпечатков на Android-мартфонах. Просто добавляете в системных настройках отпечаток пальца и потом указываете в настройках приложения, что входить будете по отпечатку — так будете экономить несколько секунд при каждом запуске.
Раз мне выпала удача обратиться к аудитории Хабра, я не могу сдержать приступ перфекционизма. Коротко — о том, что стоит взять на заметку разработчикам мобильных приложений, особенно в финансовом или корпоративном секторе.
Функциональное главное окно приложения, доступное до регистрации. Мобильной программе доступна слишком маленькая диагональ дисплея (даже если речь идёт о 5,5 дюймах), чтобы не задействовать это пространство. Всегда есть полезная и нужная информация, которая привлечёт внимание пользователя и заставит его задержаться в приложении и в итоге получить логин и пароль.
Справка внутри приложения. У Альфа-Банка это реализовано очень изящно. Если зайти в раздел переводов по QR-коду, то видно букву i в кружочке — тот самый значок информации. По касанию он переводит пользователя в текст справки, где поясняется, о чём речь и перечислены способы завести и применить этот самый QR-код. Непонятные разделы обязательно нужно пояснять, иначе ими просто не воспользуются.
Цветовые схемы должны быть продуманными. Да, в крупных компаниях все цвета и сочетания предписаны брендбуком, но это не значит, что нужно слепо следовать правилам. То, что создавалось для web-визуализации или интерактивных билбордов, может нечитабельно выглядеть на экране сотового телефона.
Названия пунктов меню в мобильном приложении и веб-версии (на сайте) должны совпадать. Иногда между разработкой веб-приложения и публикации в App Store лежит пропасть едва ли не в десяток лет, и руководство совместно с разработчиками решают разом избавиться от всего, что не нравилось, сделав мобильное приложение идеальным. Это то самое благое намерение, которым вымощена дорога в ад — клиент просто не ассоциирует вас и ваше приложение.
Прикручивайте фаны и фичи. Это не значит, что в приложении вашего банка должны всплывать свежие шутки Рунета. Стоит ориентироваться на интерес пользователя, стремиться получить wow-эффект, который не только заставит его вернуться в приложение вновь и вновь, но и мотивирует показать друзьям. Например, в приложении Альфа-Банка, если перейти с главного окна в раздел «Банкоматы», можно увидеть банкоматы по расстоянию (тут же и машины банков-партнёров) и на карте с логотипами банков. Есть и третий вариант (не исключаю, что есть ещё у кого-то), но я нашёл только здесь и это очень wow — «Камера». Можно крутиться вокруг себя, менять положение смартфона и видеть интерактивные плашечки банкоматов, изменяя дальность. Я это точно покажу паре знакомых.