VTB Online: How One Attribute Increased Sales without Changing the Design

1. Проблема: диалог, который никто не слышит

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

Типичное модальное окно — короткий и ёмкий диалог между продуктом и пользователем: «Вам доступен повышенный кешбэк», «Оформите новую карту — получите бонус». Всё выглядит безупречно: дизайн согласован с бренд-гайдом, контент проверен UX-редактором, кнопки протестированы.

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

Скринридер — это программа экранного доступа. Она последовательно прочитывает элементы экрана в интерфейсе, следуя логике кода. И если первым элементом оказывается кнопка «Закрыть», пользователь делает то, что логично — закрывает окно, не подозревая, что пропускает важную информацию.

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

2. Контекст: доступность как новая компетенция UX

Проблема не в конкретной кнопке. Она — симптом более широкой ситуации. Многие интерфейсы сегодня всё ещё проектируются «глазами», а не «ушами». При этом в России, по данным ВОЗ, более 220 тысяч человек живут с полной потерей зрения, и около 700 тысяч — с тяжёлыми нарушениями. Для них скринридер — это не вспомогательный инструмент, а единственный способ взаимодействия с цифровым миром.

В мире уже несколько лет активно развивается направление a11y (accessibility) — системного подхода к проектированию интерфейсов, где UX тестируется не только на зрячих пользователях. И ВТБ — один из первых крупных российских банков, кто интегрировал эти принципы в продуктовую разработку.

3. Поиск решения: сохранить дизайн, но изменить восприятие

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

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

4. Решение: магия одного атрибута

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

Для этого команда ВТБ использовала знакомый всем фронтендерам инструмент — атрибут tabindex. В исходной версии кнопка «Закрыть» имела стандартный порядок фокусировки — первой в DOM-дереве. После изменения ей присвоили значение, перемещающее её в конец логического потока чтения.

Было: Скринридер читает «Кнопка, закрыть. Заголовок. Текст предложения. Кнопка, оформить».

Стало: Скринридер читает «Заголовок. Текст предложения. Кнопка, оформить. Кнопка, закрыть».

Для зрячего пользователя ничего не изменилось. Для слепого — изменилось всё. Теперь он прочитывает сначала саму суть, а затем может выбрать действие.

5. Проверка: цифры и метрики

Изменение было выведено в промышленную эксплуатацию сначала на ограниченный процент пользователей. Через месяц команда получила первые результаты: рост вовлечённости, выраженный в количестве взаимодействий с модальными окнами среди пользователей скринридеров выросло на 27%; CTR (click-through rate) увеличился внутри модального блока — на 18%. Также появился рост конверсии по продвигаемым через эти окна акциям на 7%. Получилось, что то, что начиналось как технический патч для цифровой доступности, оказалось бизнес-успешным решением.

6. Глубинный эффект: когда инклюзия становится стратегией

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

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

7. Вывод

История с tabindex показывает: инновации не всегда требуют редизайна. Иногда достаточно одной строчки кода, чтобы изменить траекторию взаимодействия сотен людей — и, в итоге, финансовый результат компании.

Настоящая цифровая доступность — это не «особые версии» и не «надстройки». Это мышление, встроенное в саму ДНК UX. ВТБ Онлайн доказал: инклюзивность — не расход, а инвестиция.