Когда клиент из Алматы спросил, почему их форма оформления заказа так раздражает мобильных пользователей, проблема оказалась не в платёжном шлюзе. Дело было в клавиатуре. Точнее — в разрыве между казахской кириллической раскладкой Android и латинским фолбэком, который появлялся при срабатывании автозаполнения поля email, выбивая пользователей из привычного режима ввода прямо посреди заполнения формы.
Такие проблемы не видны при просмотре Figma-прототипа.
Реальность трёх скриптов
Пользователи по всему Казахстану, России и Центральной Азии ежедневно работают в трёх разных алфавитных системах:
- Кирилличный русский — базовый для большинства интерфейсов
- Казахский кириллический — алфавит из 42 букв с символами Ә, Ғ, Қ, Ң, Ө, Ұ, Ү, Һ, отсутствующими в русском
- Латиница — всё активнее проникает через английские заимствования, названия брендов и программу перевода Казахстана на латинский алфавит
Поле поиска, отлично работающее на русском языке, визуально сломается, когда казахский пользователь наберёт «Нұр», — потому что метрики глифов Ұ и Ү шире, чем у их русских аналогов, а большинство «безопасных» шрифтовых стеков для СНГ никогда не тестировались на казахском.
Предположение, что «поддержка кириллицы» означает поддержку русского языка, уже стоило не одному продукту СНГ потери местного рынка.
Типографика: что реально работает
Разрабатывая интерфейсы для клиентов из Алматы, Ташкента и Новосибирска, мы пришли к следующему.
Шрифтовой стек для интерфейсов СНГ:
body {
font-family:
'Inter',
'PT Sans',
'Noto Sans',
system-ui,
-apple-system,
sans-serif;
}
Inter хорошо покрывает большинство латинских и кирилличных глифов. PT Sans разработан специально для русскоязычных изданий и решает проблему оптического баланса, которую пропускают обычные гротески. Noto Sans — резервный вариант на все случаи жизни: охватывает каждый блок Unicode, включая все расширенные казахские символы.
Особенности масштабирования:
Кирилличный текст при том же кегле примерно на 10–15% шире эквивалентного латинского. Учитывайте это при построении макетов:
- Элементы навигации с кирилличными подписями требуют на 20% больше горизонтального пространства, чем в англоязычных дизайнах
- Точки обрезки текста должны учитывать максимальную длину кирилличных строк
- Межстрочный интервал для текста тела — 1,5–1,6, а не стандартные 1,4 в англоязычных проектах
Поля ввода и конфликты с IME
Самая частая ошибка в проектах для СНГ: валидация формы срабатывает на каждое нажатие клавиши, а не при потере фокуса. При вводе на латинице это просто раздражает. При кирилличном вводе и особенно при использовании казахского IME (метода ввода), где создание одного символа иногда требует нескольких нажатий, это ломает интерфейс полностью.
/* Не делайте так для форм СНГ */
input:invalid {
border-color: red; /* срабатывает в процессе набора */
}
/* Делайте так */
input:invalid:not(:focus) {
border-color: red;
}
Правило :not(:focus) гарантирует, что визуальная валидация появляется только после того, как пользователь покинул поле — то есть после завершения кирилличного набора.
Проблема переключения клавиатуры
Один нюанс, который подвёл нас в ташкентском e-commerce проекте: пользователи постоянно переключают раскладки. Поиск товара на русском, промокод на латинице, номер телефона, который начинается кириллицей и заканчивается международным форматом. Каждое переключение — когнитивная нагрузка.
Наша стратегия снижения трений:
- Используйте
inputmode="numeric"для полей телефона и OTP — это вызывает цифровую клавиатуру напрямую, минуя вопрос о скрипте - Для полей имени добавляйте
autocomplete="name", чтобы ОС могла заполнить данные без пересчёта макета при открытии клавиатуры - Тестируйте каждую форму на реальном Android-устройстве с локалью СНГ — эмуляция iOS недостаточна, потому что экосистема кирилличных клавиатур Android (SwiftKey, GBoard с пакетами для СНГ, Samsung с казахским) ведёт себя иначе
Чеклист тестирования
Перед выпуском любого интерфейса для СНГ проверьте:
- [ ] Отрисовку строки из 42 символов казахского алфавита в каждом текстовом контейнере
- [ ] Переход по табу через все поля формы на кирилличной клавиатуре
- [ ] Обрезку текста на мобильном брейкпоинте с названием товара казахской длины
- [ ] Появление ошибок валидации при потере фокуса, а не при вводе
- [ ] Отсутствие обрезки текста-заполнителя на кирилличном языке из-за межстрочного интервала поля
Клавиатура — это то место, где реально живут ваши пользователи. Проектируйте для неё.