Что скрывается за вводом пароля: как мы обновили сервис авторизации в Битрикс24
Привет! Меня зовут Максим Гарбарт, я тестировщик компании Битрикс24. Моя работа связана с проверкой одного из важнейших компонентов системы — сервиса авторизации. Для пользователей это, как правило, лишь форма входа, где нужно ввести логин и пароль. Но для нас это сложная система, от надежности и точности которой зависит безопасность данных, удобство работы и доверие к продукту. Ошибки в таком механизме могут привести к серьезным проблемам, начиная с утраты данных и заканчивая репутационными потерями компании.
Представьте, что этот сервис нужно полностью переработать — осовременить дизайн, актуализировать пользовательские сценарии, проапгрейдить технологическую базу. Именно такую задачу недавно выполнила наша команда, и она стала настоящим испытанием, особенно для тестировщиков.
Обновленная форма авторизации в Битрикс24
Что нам предстояло сделать
Мы сделали редизайн сервиса авторизации, но это не просто обновление внешнего вида. Мы хотели не только сделать интерфейс современным и интуитивно понятным, но и существенно улучшить пользовательский опыт, повысить безопасность и заложить основу для дальнейшего развития. В рамках проекта мы нацелились на решение целого ряда задач:
Оптимизировать сценарии регистрации, авторизации, принятия приглашений и восстановления доступа. Например при регистрации нового пользователя этапы подтверждения почтового ящика, принятия лицензионных соглашений и создания пароля не должны отвлекать его от знакомства с продуктом.
Подготовить сервис к обеспечению соблюдения новых норм законодательства. Например, ограничить авторизацию пользователей через некоторые соцсети и зарубежные почтовые сервисы. Это задача требует не только дизайнерской проработки, но и комплексных правок всего сервиса.
Так выглядела форма авторизации до обновления
Самое главное — перед нами стояла задача сохранить работоспособность всех существующих функций и при этом улучшить пользовательский опыт. Это касалось в том числе и редких сценариев вроде авторизации через SSO или сторонних провайдеров.
Как мы тестировали обновленный сервис
В мире тестирования есть популярная шутка: тестировщик заходит в бар, заказывает 1 коктейль, 0 коктейлей, 9999999 коктейлей, -1 коктейль, заказывает кирпич, заказывает «абвгдеёжз». Все кейсы оказываются в полном порядке. Но тут заходит первый реальный посетитель, спрашивает, где туалет, и бар взрывается.
Эта история отлично иллюстрирует нашу работу, особенно в контексте редизайна авторизации. Мы проверяем множество сценариев, включая самые нестандартные, и не всегда можем предугадать, что сделает реальный пользователь. Однако именно тщательная подготовка помогает минимизировать такие «взрывы». Для нас это стало напоминанием: авторизация — это не просто техническая функция, а сложная экосистема, где любое неожиданное поведение может привести к серьезным последствиям.
Создаем тестовую среду
Одной из самых сложных задач в процессе тестирования подобных сервисов всегда является создание безопасной среды для проверок. В нашем случае недостаточно создать банальный тестовый стенд, который бы имитировал работу продакшен-среды. С одной стороны, сервис авторизации работает с огромным массивом данных реальных пользователей, которые и нельзя, и нет смысла копировать. С другой стороны, на проде организовано большое количество интеграций, как с внутренними, так и с внешними сервисами. В большинстве случаев их либо невозможно воспроизвести, либо это потребует слишком больших трудозатрат.
Мы нашли решение — создали специальный «клон» продакшен-системы. Это не просто тестовый стенд, а, по сути, отдельный продукт, который внешне похож на наш сервис авторизации, но имеет собственную независимую основу — изолированную базу данных. Она позволяет создавать интеграции с тестовыми порталами Битрикс24, где можно организовать взаимодействие с внешними сервисами и тестировать нагрузку, которую создают серверные обновления. Такой «клон» очень хорошо подходит для тестирования обновлений дизайна — с ним мы можем проверять новинки не только силами отдела QA, но и собирать фидбек от сотрудников других отделов, которые могут самостоятельно оценить доработки. При этом мы не рискуем безопасностью и консистентностью данных, нет опасений, что какие-либо доработки уйдут в прод слишком рано или без должных проверок.
Получаем фидбек от реальных пользователей
В нашей компании принято тестировать новинки внутри, на собственных сотрудниках, и процесс редизайна авторизации не стал исключением. На одном из этапов тестирования мы запустили обновленный интерфейс внутри компании. Сотрудники активно делились своими замечаниями и мы смогли устранить слабые места до того, как обновление стало доступно широкой аудитории.
Показательным стал пример UX/UI логики нового дизайна. Для тех, кто постоянно работает с сервисом авторизации, некоторые моменты выглядят простыми и очевидными. Например, у нас уже давно была предусмотрена возможность авторизации с помощью Single sign-on (SSO) — единого пароля для всех сервисов в компании. Ранее этот пункт выглядел как малозаметная ссылка на форме входа, но для опытных пользователей сервиса это был понятный сценарий. Сейчас у нас появилось много крупных клиентов и для них сценарий с SSO-авторизацией очень востребован, поэтому в новом интерфейсе мы решили вынести этот пункт на заглавную кнопку. Но теперь эта кнопка стала вызывать вопросы у обычных пользователей — оказалось что многие вообще не знают, что такое SSO и почему этот вариант входа стоит первым в списке.
В результате, для этого пункта мы добавили свою собственную иконку и подсказки, как для других сторонних способов авторизации. Так интерфейс стал более понятным и дружелюбным для разных пользователей.
Форма регистрации в Битрикс24
Оптимизируем сценарии и упрощаем пользовательский опыт
Нам важно было изменить дизайн страницы так, чтобы сохранить или повысить удобство работы с сервисом авторизации.
Хорошим примером оптимизации сценариев стала доработка процесса авторизации через QR-код — важно было сделать его удобных для всех пользователей.
При этом способе используется наше мобильное приложение — если оно уже установлено у пользователя, он может сканировать код и моментально авторизоваться на портале. Но если приложения у пользователя нет, ему пришлось бы найти его в сторе, скачать, установить, авторизоваться в нем, и только потом пройти авторизацию на компьютере. Решение оказалось максимально простым — для текущих клиентов QR-код, как и ожидается, работает как средство авторизации. А для тех, у кого приложения нет, та же самая ссылка с QR-кода автоматически перенаправляет на страницу скачивания в магазине приложений. Теперь процесс авторизации по QR-коду прост и понятен для всех пользователей.
А что дальше?
Опыт работы над этим проектом дал нам ценные уроки. Мы еще раз убедились, что авторизация — это не просто базовая функция, а важная точка взаимодействия с пользователем, формирующая первое впечатление о продукте. Решение поставленных задач стало для нас интересным вызовом. Мы гордимся результатом: мы не просто поддержали существующие сценарии, но и сделали интерфейс современным, интуитивно понятным и готовым к дальнейшему развитию. Этот проект вдохновил нас на новые идеи, и мы планируем не останавливаться на достигнутом — продолжим дорабатывать сценарии, улучшать взаимодействие с внешними сервисами и искать новые пути для повышения удобства и безопасности пользователей.
