Предъявите паспорт. Часть 1

    Этот проект выполнен в соавторстве с Митей Теряевым — талантливым frontend-разработчиком.

    Что такое Паспорт и зачем он нужен?


    Задача нашей команды — простой и безопасный онлайн-доступ ко всем сервисам банка. Со стороны клиента это кажется вполне очевидным. Например, после авторизации в едином аккаунте Google пользователю доступны все сервисы компании. И это нормально и правильно — зачем заново входить в Диск, Документы, Музыку или Заметки, если ты уже успешно залогинился в Почте?



    «Юрики» (Альфа-Бизнес), «физики» (розница), «зарплатники» (Альфа-Зарплата) — независимые системы, которые делали разные команды, оторванные друг от друга.

    Прошли годы…

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

    Задача оказалась невероятно объемной. Вскрылась уйма мелочей, к интерфейсу имеющих очень отдаленное отношение (так казалось в самом начале).

    Мы с frontend-разработчиком начали с переделки точки входа для «физиков». Требовалось создать самую простую авторизацию в онлайн-банк. Наш дизайн-директор RockBee настоял на том, чтобы мы работали вместе. Большое ему за это спасибо.

    Этап 1  —  Статика. Начало очень долгого пути


    При текущей реализации входа в «Клик» у пользователя имеются логин и пароль. Чтобы попасть в систему, требуется подтвердить свой вход с помощью SMS.

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

    Так выглядела страница до:


    Два инпута, кнопка, вход и регистрация, телефоны вместо FAQ (что создавало дополнительную нагрузку на колл-центр), подвал.


    Схема нового user flow на примере переработки входа в «Клик».

    Первые наброски по дизайну появились через 5–6 дней. Это была моя первая неделя работы в банке, и я очень спешил показать результат. Всё перекрасил, воспользовавшись нашей библиотекой компонентов, и сделал первую статику:


    Пара экранов самого первого подхода к задаче

    На тот момент мне казалось, что осталось ещё чуть-чуть и всё — можно собирать, тестировать.

    После комментария дизайн-директора пришлось все переделывать. Комментарий был простой: «А зачем нужна кнопка «Войти» или «Далее»?».

    По статистике большинство пользователей используют входную точку в интернет-банк через телефон. Если вы находитесь в фокусе активного импута, у вас уже есть кнопка «Далее» на клавиатуре, и дублировать её не нужно. Ко всему прочему, мы забыли, что браузер может хранить ваши cookie! Значит, от шага с логином можно просто отказаться, запоминая последний вход в систему.



    Я не верил в то, что пользователи будут воспринимать страницу входа без большой контрольной кнопки. Наш дизайн-директор отправил меня собрать два прототипа для тестирования. Кажется, я начал понимать, как нужно думать и работать в Лабе.

    Сказано — сделано.

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


    Несколько экранов “без кнопки”. Cookie и смена пользователя

    Началась сборка front-прототипа с учётом результатов тестирования.


    Фрагмент обратной связи по итогам тестирования. Всего нами были опрошены 34 респондента.

    Если делать страницу, на которой всего один инпут, появляются интересные моменты типа:

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

    И так далее.

    Все возможные сценарии были учтены и реализованы.

    Неделя 2–3. Конец статики


    Создание новых компонентов

    В рамках Банка мы используем единую библиотеку компонентов. Это очень удобная штука для быстрой сборки и проверки гипотез на прототипах. Некий унификатор внешнего вида для всего. 

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


    Старый vs новый инпут

    Консистентность


    Мобильная версия веба делается в первую очередь и может прилично отличаться от десктопа.
    Это можно заметить на экране ввода кода из SMS. Мы сделали его 1:1 с приложением Альфа-Банка. Сейчас команды стараются делать наши продукты консистентно и используют в вебе мобильные наработки.


    Экран подтверждения SMS. Переход на следующий шаг происходит без кнопки в автоматическом режиме.

    Тексты


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


    Текущее отображение некоторых сообщений об ошибке и подсказок. Большую часть текстов мы переписали.


    Уводим на заказ карты, если понимаем, что имеем честь взаимодействовать с не клиентом Альфы.

    Этап 2 — Front


    Используя в работе Framer, Invision, Marvel, Flinto и прочее, вы сможете сымитировать работу реального приложения, но это всё равно будет бутафорией.

    А вот работать в паре с разработчиком — совсем другое дело.

    Достаточно частая история, когда дизайнер отдаёт разработчику картинки в Zeplin, и всё:


    Имитация передачи макетов с грамматическими ошибками

    В итоге вы получаете то, что требует еще over n часов работы над проектом, потому что в самом начале не стали работать совместно. Мы так не делаем.

    Поэтому:

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

    Где можно пощупать вживую


    Заходите на passport.alfalab.design

    Что вводить в поля, чтобы посмотреть, как чего работает?

    1) +7 000 000 00 00
    аккаунт с 1FA при авторизации и картой при восстановлении.

    2) +7 000 000 00 01
    аккаунт с 2FA при авторизации и счётом при восстановлении.

    3) +7 000 000 00 02
    клиент банка с картой, который может зарегистрироваться.

    4) +7 000 000 00 03
    клиент банка со счётом, который может зарегистрироваться.

    Любой другой номер не пройдёт первый шаг. Будет показана ошибка.

    Пароли везде состоят из нулей. Валидация номера карты/счёта проходит по алгоритму Луна. Используйте – 4111 1111 1111 1111.

    Поскольку прототип обновляется регулярно, что-то может периодически не работать. Чистите cookie!)

    В следующей серии:


    • Хайпанём от запуска (частичный выкат на бой)
    • Покажем замеры прохождения в авторизованную зону
    • Расскажем про результаты тестирования
    • Поподробнее остановимся на используемых метриках

    Хотите делать крутой дизайн вместе с нами? Вы знаете, что делать.

    Если есть какие-то вопросы по поводу статьи — обязательно пишите в комментариях.
    Метки:
    Альфа-Банк 138,98
    Компания
    Поделиться публикацией
    Комментарии 49
    • 0

      лично меня немного (как пользователя) смущает следующее:


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

      Запоминая на какое время? А если комп не доверенный? Контроль за этим есть?


      Экран подтверждения SMS. Переход на следующий шаг происходит без кнопки в автоматическом режиме.

      А если я привык глазами пробежаться по тому что ввел и потом подтвердить. Зачем ломать шаблон действий всем пользователям которые уже привыкли к "де факто" стандарту.
      (см. EMV 3DS v2 "4.1 3-D Secure User Interface Templates")

      • +1

        Лично я после использования браузера любого компьютера (даже своего) чищу: историю, кэш, историю загрузок, cookie, сохранённые формы, данные плагинов и т.д. и т.п. И не ввожу конфиденциальную информацию на чужих машинах — чем компьютер может быть заражён известно только владельцу.


        Если вы так переживаете за свои данные, рекомендую Вам делать то же самое. Для очистки данных браузера могу посоветовать расширение "Click&Clean".

        • +1

          Вообще то, я писал от лица "абстрактного" пользователя. Который про такие вещи не знает не задумывается. Т.е. выбрал стиль написания вопроса такой...


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


          Но все равно спасибо, что озаботились прокомментировать. Я бы вообще добавил в набор рекомендаций для клиентов:


          1. не вводить конфиденциальную информацию на чужих компах вообще.
          2. не держать на счетах (для используется однофакторная аутентификации или SMS как второй фактор) больше минимально необходимого на данный момент.
      • +3
        Запятая тут по ошибке пропущена или в веб-формах можно пунктуацию не соблюдать? Спрашиваю без издевки, может я просто не в курсе трендов?

        Скрин
        image
        • +6
          Какая ужасная ошибка использовать номер телефона как основной идентификатор.
          • +1

            Привет! Почему? Можно например спрашивать логин или номер телефона. В чём заключается ужас?) Ведь номер телефона мы спросим в любом случае

            • +2
              Потому что номер телефона легко получить методом соц.инженерии или хотя бы пошерстив интернет — некоторые следят нормально так и телефон найти не составит труда.
              Логин от интернет-банка получить сложнее.
              • +1

                Останется только узнать пароль пользователя и украсть его смс. А ещё можно попробовать найти его номер Карты с датой и CVV, или узнать номер счёта.


                Мы тестируем разные подходы при реализации того, или иного flow по входу совместно с большим IT и СБ.

                • 0
                  Сделайте так чтобы клиент мог выбрать один или несколько вариантов. В том числе полностью отказаться от любой связи с телефоном (номер, смс с паролями). Так вы уходите всем.
                  • +3
                    Дубликаты сим-карт без ведома владельца номера в нашей стране выпускаются непринужденно.
                    Разумеется, ради любого Васи Пупкина никто не будет так заморачиваться, но если жертва вкусная — запросто.
                    • +1
                      Привет!

                      В таком случаем, должна сработать проверка на IMSI — чек на обнаружение признака замены сим-карты.
                      • 0
                        Даже если такая проверка есть и работает надежно — сама по себе завязка на телефон является провоцирующим на эту атаку фактором. А после неё, даже если украсть ничего не удалось, человек огребает кучу проблем с бумажками и потерянного времени на доказательство, что он не верблюд.
                        • +1
                          Бумажки в такой ситуации тоже не нужны. Большую часть вопросов можно решить по телефону.
                          • 0
                            В стране розовых пони разве что.
                            • +1

                              Вы это про альфу?
                              Рад за ваше чувство юмора.

                          • +3

                            Подсказать, как часто она срабатывает на практике и с какой задержкой?
                            Номер телефона как логин с хранением в куках — безопасники обязаны были это зарубить сразу.
                            Какая может быть двухфакторная авторизация, если собственно логин указывает номер телефона, куда придет СМС с одноразовым кодом.

                        • +1

                          Как раз телефон и смс это легко, поэтому в более крупном банке пин. Его автоматом сграбить сложнее.

                          • 0

                            p.s. это для приложения, для сайта пароль +смс
                            (Правка комментария в мобильной версии недоступна)

                            • +1
                              PIN уже в мобайле (приложение)
                        • +3
                          Номер телефона это публичная информация и хоть логин тоже не особо секретный, но его можно просто не использовать в других местах и это даст крохотное повышение безопасности. Учитывая простоту получения дубликата симкарты в нашей стране и техническую возможность перехватывать смс без замены карты использование телефона и смс должно вытесняться другими идентификаторами. Логин хороший вариант. А вместо смс — TOTP (но стандартный, а не как в прошлый раз платным приложением) и/или «железный» генератор. Клиенты у вас с большими суммами, а вы защиту ослабляете.
                          • 0
                            И, кстати, соединение учёток это не везде хорошее решение. ИП с человеческими остатками это терпимо, а вот для директора предприятия с остатками в десятки миллионов это может быть опасно. Ломануть телефон такому это вполне окупаемая активность.
                            • 0
                              И ещё момент. У человека может просто не быть телефона. Допустим это противник мобильной связи. Компьютер с интернетом есть, планшет есть, деньги есть, а мобильного нет.

                              Аналогичная история если находишься там где нет мобильной связи. Интернет есть, а мобильный не работает.

                              Как быть таким людям?
                              • +1

                                А сейчас есть банки которые просят подтвердить транзакции иначе чем как по телефону?(именно которые просят, то что есть те которые не просят я догадываюсь)

                              • +1
                                Уводим на заказ карты, если понимаем, что имеем честь взаимодействовать с не клиентом Альфы.

                                А безопасники как-то во всем процессе учавствуют?
                                Такой функцией можно как минимум запросто узнать является ли клиентом вашего банка вот этот конкретный человек. Фантазируя дальше, можно перебором получить весь список телефонов клиентов (практически нереально, но теоретически возможно)
                                • +1
                                  Почему нереально? Очень даже реально.
                                  Надеюсь они одумаются и этого чуда не будет.
                                  • 0
                                    Думаю всё-таки процесс переборки заблочат намного раньше, чем он отработает хоть сколько-нибудь значимое число телефонов.
                                    • 0
                                      Прокси помогут обойти лимит на кол-во запросов
                                      • +1
                                        Прокси тоже достаточно просто фильтровать, да и проще отключить функционал при обнаружении перебора номеров по нему. Не столь важен механизм блокировки. Суть в том, что безо всяких переборов можно одним запросом определить наличие номера телефона в базе клиентов альфа-банка.
                                        • 0
                                          К сожалению, у Альфы слишком много других уязвимостей, чтобы проверка принадлежности номера телефона была проблемой.
                            • 0

                              А есть шанс, что все блага последних версий приложения станут доступными на iPad?
                              Больно было читать вашего "Противного" и не находить обновлений в обновленной версии.

                              • +1

                                Привет вам! В данном конкретном случае речь идёт о вебе. Безусловно благо будет корректно отображаться и работать в том числе и на ipad. А вот приложение на iPad больше не поддерживается.

                                • 0
                                  А вот приложение на iPad больше не поддерживается.

                                  Это печальная новость. Телефон "кнопочный" дабы исключить возможность несанкционированной отправки SMS с целью подтвердить платеж. Приложение использую на iPad, который не умеет отправлять SMS.

                                  • 0

                                    В чем проблема использовать сайт на ай паде?

                                    • 0
                                      Проблемы нет. Просто, приложение должно работать чисто по своему API и делать только то, что положено. WEB версия должна будет тянуть кучу картинок и кнопочек, а если плохая связь, то это будет дольше. Плюс нужно будет вводить SMS код с другого устройства и в магазине «на кассе» это делать не удобно.
                                      • 0
                                        Около года назад я не мог это делать, браузер после открытия этого сайта постоянно вылетал.
                                • 0
                                  Кстати, как пожелание, можете сделать две разных формы для восстановления логина и для пароля? Мне конечно повезло, что можно было не вписывать два раза новый пароль к новому логину, но это было неочевидно.
                                  • +1

                                    Спасибо за обратную связь!

                                  • 0
                                    Возможно, вопрос не по теме, но все же. Стоит ли ожидать появления Bug Bounty от АльфаБанка? А то баги есть, а адекватных способов связи нет.
                                  • +3
                                    Я, конечно, понимаю, что сотовые телефоны в наши дни весьма распространены, но меня почему-то очень выводит из равновесия, когда для пользования интернет-сервисами необходимо наличие телефона.
                                    • 0
                                      притом, что сотовой связи может и не быть, например, в морях.
                                    • 0
                                      1. При заходе с телефона (браузера) оставьте, пожалуйста, возможность использовать десктнопную версию сайта.
                                      2. С точки зрения недавнего опыта попытки получения карты в банке (ваш клиент уже около 10 лет физик+ 1,5 года юрик) вы сейчас выбираете какие шашечки повесить на машину, которая собственно говоря сама не очень хорошо ездит. Из проблем с которыми столкнулся — при заполнении на сайте заявке на кредитную карту в анкету улетают не всегда те данные, которые указываешь на сайте, часть пунктов на сайте и в анкете у работника банка интерпретируются по разному или текст описания разница между сайтом и позднее подписываемой анкетой, иногда отличия кардинальные по смыслу. При заполнении анкеты указывается кодовое слово, которое имеет более строгие правила, чем устанавливаемое в отделении, но при этом об этом на сайте не слова. Но в тоже время заполнение анкеты в отделении банка приводит к более высокой процентной ставкой. В итоге, я или не могу использовать привычное кодовое слово или буду платить больше. Спасибо за заботу! И самое что неприятное — та-дааааам, после отправки анкеты и предварительного одобрения данное слово из анкеты устанавливается не на новую возможную карту, а на весь аккаунт, о чём вы тоже не предупреждаете. После этого опыта я написал несколько обращений и к сожалению получил пару ответов в духе «у нас всё хорошо, сам дурак», только в полностью клиентоориентированной форме.
                                      • +3
                                        Господи да когда же вы поймете что не надо летать один «универсальный» дизайн и интерфейс который как вы думаете подойдет юрикам и физики и кошечкам и собачкам!
                                        Все люди разные каждый из них индивидуален.
                                        Научитесь поддерживать и развивать несколько версий фронтенда.
                                        P.S. Банк который сделает интернет банк в виде командной строки, с историей, редактированием команд, аласами, внутренними перемененными и bc/dc останется на всегда со мной.
                                        • 0

                                          Привет! Спасибо за комент)


                                          Сейчас речь идёт про точку входа. Внутри продукты Альфы разные. Как по форме, там и по содержанию. Мы собираем тонны обратной связи и стараемся учитывать потребности разных клиентов, для разных задач.

                                        • 0
                                          В Альфа-банке меня раздражают ограничения на использование символов в пароле. Даже знак _ использовать нельзя
                                        • 0
                                          Я не являюсь клиентом Альфа банка, но по опыту пользования других мобильных клиентов могу высказать свои впечатления. Может они вам пригодятся.
                                          1) Часто при вводе пароля/телефона на точке входа используется стандартная клавиатура. Если я себе ставлю другую клавиатуру у клиент-банка рвет шаблон. Все заканчивается временным возвратом стандартной.
                                          2) Использование телефона вместо логина неимоверно раздражает. Я, например, не помню свой номер. К тому же банки имеют обыкновение в приложении объединять все договора одного клиента. Это ничего, что в разных договорах у меня моут быть разные телефоны? Или вообще отсутствовать? Кстати, всегда интересовало, почему клиент-банкинг имея тучу разрешений в телефоне не может сам вытащить № телефона из системы?
                                          3) Очень неудобен ввод кода подтверждения из СМС. Чтоб его ввести нужно перейти в форму сообщений, найти СМС, запомнить (хорошо запомнить, ибо это важно) или записать на бумажке, закрыть «сообщения», открыть вновь клиент-банкинг, ввести без ошибок.
                                          Берите пример с Вайбера — прислали СМС с кодом, вайбер сам прочитал и принял решение об авторизации.
                                          • +1
                                            Привет! Спасибо за отзыв!
                                            1)Клавиатура будет с @
                                            2) Теститируем
                                            3) Работаем над этим
                                          • 0

                                            Почему сайт привычно белый, а, например, открытые депозита — хипсторско-идиотский черный с огромными шрифтами и модными неюзабельными подходами? Вы уж выберите единый стиль. А еще лучше позовите снова Лебедева, без него что-то пошло не так!

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

                                            Самое читаемое