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

Меня зовут Антонина, я дизайнер интерфейсов ЮMoney. Мы изучили десятки исследований — от Baymard Institute до Google web.dev. Единого документа с лучшими практиками не нашлось: источники противоречили друг другу или оказывались слишком общими.

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