Привет! Меня зовут Максим Гарбарт, я тестировщик компании Битрикс24. Моя работа связана с проверкой одного из важнейших компонентов системы – сервиса авторизации. Для пользователей это, как правило, лишь форма входа, где нужно ввести логин и пароль. Но для нас это сложная система, от надежности и точности которой зависит безопасность данных, удобство работы и доверие к продукту. Ошибки в таком механизме могут привести к серьезным проблемам, начиная с утраты данных и заканчивая репутационными потерями компании. 

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

Обновленная форма авторизации в Битрикс24
Обновленная форма авторизации в Битрикс24

Что нам предстояло сделать

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

  • Оптимизировать сценарии регистрации, авторизации, принятия приглашений и восстановления доступа. Например, при регистрации нового пользователя этапы подтверждения почтового ящика, принятия лицензионных соглашений и создания пароля не должны отвлекать его от знакомства с продуктом.  

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

Так выглядела форма авторизации до обновления
Так выглядела форма авторизации до обновления

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

Как мы тестировали обновленный сервис

В мире тестирования есть популярная шутка: тестировщик заходит в бар, заказывает 1 коктейль, 0 коктейлей, 9999999 коктейлей, -1 коктейль, заказывает кирпич, заказывает “абвгдеёжз”. Все кейсы оказываются в полном порядке. Но тут заходит первый реальный посетитель, спрашивает, где туалет, и бар взрывается.

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

Форма присоединения к коллабе
Форма присоединения к коллабе

Создаем тестовую среду

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

Мы нашли решение — создали специальный «клон» продакшен-системы. Это не просто тестовый стенд, а, по сути, отдельный продукт, который внешне похож на наш сервис авторизации, но имеет собственную независимую основу — изолированную базу данных. Она позволяет создавать интеграции с тестовыми порталами Битрикс24, где можно организовать взаимодействие с внешними сервисами и тестировать нагрузку, которую создают серверные обновления. Такой «клон» очень хорошо подходит для тестирования обновлений дизайна — с ним мы можем проверять новинки не только силами отдела QA, но и собирать фидбек от сотрудников других отделов, которые могут самостоятельно оценить доработки. При этом мы не рискуем безопасностью и консистентностью данных, нет опасений, что какие-либо доработки уйдут в прод слишком рано или без должных проверок.   

Получаем фидбек от реальных пользователей

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

Показательным стал пример UX/UI логики нового дизайна. Для тех, кто постоянно работает с сервисом авторизации, некоторые моменты выглядят простыми и очевидными. Например, у нас уже давно была предусмотрена возможность авторизации с помощью Single sign-on (SSO) — единого пароля для всех сервисов в компании. Ранее этот пункт выглядел как малозаметная ссылка на форме входа, но для опытных пользователей сервиса это был понятный сценарий. Сейчас у нас появилось много крупных клиентов и для них сценарий с SSO-авторизацией очень востребован, поэтому в новом интерфейсе мы решили вынести этот пункт на заглавную кнопку. Но теперь эта кнопка стала вызывать вопросы у обычных пользователей — оказалось что многие вообще не знают, что такое SSO и почему этот вариант входа стоит первым в списке.

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

Форма регистрации в Битрикс24
Форма регистрации в Битрикс24

Оптимизируем сценарии и упрощаем пользовательский опыт

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

Хорошим примером оптимизации сценариев стала доработка процесса авторизации через QR-код — важно было сделать его удобным для всех пользователей. 

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

А что дальше?

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

Комментарии (6)


  1. mrdandomi
    27.12.2024 20:53

    Статья из одной воды


  1. NAI
    27.12.2024 20:53

    Максим Гарбарт, я тестировщик компании Битрикс24

    Здравствуй Максим, ты молодец, что прогнал пару абзацев текста через чатгпт и налил воды - зачем, для чего и почему, непонятно. У вас там премии и kpi за статьи дают?

    и существенно улучшить пользовательский опыт,

    Ничего вы не пытались, даже вида не делали, потому что, (дальше будут * т.к. сил моих нет):

    каким же надо быть *******, чтобы привязать ВСЕ юр.организации к одному ******* аккаунту, ****? ****, какого ***, я не могу войти под разными пользователями в roga.bitrix24.ru и kopita.bitrix24.ru, почему ваша, ******, авторизация считает что в обоих компаниях должна быть регистрация на одно мыло? Вы там ****, совсем не рассматривали кейс когда один человек может работать в двух компаниях использующих битрикс24?

    Спасибо, Миша тебе и Битрикс24, за то что мне приходится по три раза на дню проходить авторизацию и аутентификацию, особенно с учетом 2FA.


  1. NAI
    27.12.2024 20:53

    Максим Гарбарт, я тестировщик компании Битрикс24

    Здравствуй Максим, ты молодец, что прогнал пару абзацев текста через чатгпт и налил воды - зачем, для чего и почему, непонятно. У вас там премии и kpi за статьи дают?

    и существенно улучшить пользовательский опыт,

    Ничего вы не пытались, даже вида не делали, потому что, (дальше будут * т.к. сил моих нет):

    каким же надо быть *******, чтобы привязать ВСЕ юр.организации к одному ******* аккаунту, ****? ****, какого ***, я не могу войти под разными пользователями в roga.bitrix24.ru и kopita.bitrix24.ru, почему ваша, ******, авторизация считает что в обоих компаниях должна быть регистрация на одно мыло? Вы там ****, совсем не рассматривали кейс когда один человек может работать в двух компаниях использующих битрикс24?

    Спасибо, Миша тебе и
    Битрикс24, за то что мне приходится по три раза на дню проходить авторизацию и аутентификацию, особенно с учетом 2FA.


  1. santjagocorkez
    27.12.2024 20:53

    А какое отношение пароль имеет к авторизации?


  1. RealLazyCat
    27.12.2024 20:53

    Тестировщик рассказал обо всем - о маркетинге, о дизайне, о прекрасной команде 1С.
    Обо всем. Кроме тестирования...
    Кстати, с точки зрения безопасности, ваш Битрикс дырявый, надеюсь, сейчас станет чуть получше.


  1. uiuxaudit
    27.12.2024 20:53

    1. Если здесь речь про “Email или Телефон”, то почему в placeholder только email?
    Я бы предложил перенести подзаголовок в плейсхолдер.

    2. Если вы убрали “запрещённые” сервисы, то что здесь делает Google или Apple (на других скринах)? Или это пока не запретили?

    3. Если SSO “редкий сценарий” (как вы говорите), то почему он стоит первым? Ну и засуньте его в “…”, не? Может как-то понятнее написать? Не все же знаю что такое SSO, да и вариантов SSO есть несколько.

    4. “помогает бизнесу работать”
    - почему с маленькой буквы или это не слоган?
    - “Битрикс24” — это же фактически ваш логотип? Почему текст согласован с лого? Ну напишите: “Помогаем работать бизнесу”. Почему только “бизнесу”, а “небизнесу” не помогаете? Напишите: “Помогаем работать” или придумайте новый.
    - почему так криво всё и не ложится не под какие направляющие?

    5. Что за белёсый абрис вокруг лого? Так задумано? Выглядит неаккуратно.

    6. Описание сценария странное. А если у юзера уже открыто приложение, что он должен сделать? Наверно надо что-то нажать в приложении, чтобы открыть камеру и авторизацию по QR?

    7. “Создать Битрикс24”?! В каком смысле, что имеете ввиду? Наверно имеется ввиду “Создать аккаунт”, “Регистрация”? Весьма нестандартное место для подобной кнопки, почему нельзя поставить её в саму форму, как делают большинство?

    8. Ссылку согласия лучше продлить на всю длину текста

    9. Сценарий присоединения к совместному проекту. Юзер пришёл просто поработать в проекте и ему ваш Б24 нафиг не нужен. Вот и зачем юзеру ваша реклама? Вы и так получаете лид и будете его спамить (может не так часто).

    10. “поручение”?! Это ещё что? Поручительство? или ставлю задачу вашим менагерам? Зачем это здесь?!