Привет!
Сегодня рассказываем о 5 примерах ошибок при описании UI-элементов — и как их избежать.
Ошибка 1: Появляется попап
Что в ТЗ? 🔍
После нажатия появляется попап
В чем проблема? ⚡️
"Попап" – расплывчатое понятие. Это скорее категория, а не конкретный элемент. Внутри понятия "попап" может быть много элементов:
↗️ Модальное окно (Modal) – блокирует экран, требует действия
↗️ Bottom Sheet – всплывающая шторка снизу
↗️ Тост (Toast) – краткое уведомление, исчезает само
↗️ Баннер (Banner) – полоска сверху/снизу, например для временных уведомлений
↗️Алерт (Alert) – срочное сообщение с критичной информацией
В итоге один разработчик реализует bottom sheet, а другой обойдется баннером
Что делать? ✨
Детальнее проработывай какое поведение пользователя ожидается при взаимодействии с элементом: нужно просто уведомить пользователя или от него потребуется какое-то действие?
Ошибка 2: Хинт под полем
Что в ТЗ?🔍
Добавить хинт с лимитами в поле ввода суммы. Когда пользователь введет сумму – подсказка исчезнет
В чем проблема? ⚡️
Перепутали плейсхолдер , лейбл и хинт:
- Лейбл – пишется над полем. Название поля
- Плейсхолдер – пишется внутри поля и исчезает при вводе значения в поле
- Хинт – пишется под полем. При вводе значения не исчезает
Что делать?✨
Используй строгую терминологию при описании элемента и взаимодействия с ним
Ошибка 3: Кнопка Назад
Что в ТЗ?🔍
При нажатии на кнопку "Назад" пользователь возвращается на предыдущий экран
В чем проблема?⚡️
Пользователь не нажимает на кнопку "Назад", а свайпает вправо📱 или нажимает системную кнопку📱 и приложение ведет себя не так как описано в ТЗ
Что делать?✨
Если есть форма, куда пользователь вводит данные — всегда прописывай поведение при выходе:
📚 сохранять черновик?
📚 спрашивать подтверждение выхода?
Прописывай не только нажатие кнопок на экране, но и учитывай особенности платформ при навигации: жестовое управление, физические кнопки
Ошибка 4: Выберите из списка
Что в ТЗ?🔍
При нажатии появляется список для выбора карты
В чем проблема?⚡️
📱 разработчик использует Action Sheet, а 📱 – Dialog. Один и тот же элемент выглядит и ведёт себя по-разному, потому что "список" – тоже не точный термин, а платформы используют свои нативные компоненты
↗️ Action Sheet 📱 – всплывающее меню снизу, закрывается свайпом и кликом на оверлей
↗️ Dialog 📱– всплывающее окно по центру экрана, поверх основного экрана. Обязательно есть кнопки действия («ОК»/«Отмена» или «Выбрать» / «Назад»)
↗️ Bottom Sheet 📱 – всплывающее меню снизу. В отличие от 📱, на 📱 может полностью закрывать экран. Закрывается также свайпом и кликом на оверлей
Что делать?✨
Вместо "списка" укажи конкретные элементы для каждой платформы
Опиши единое поведение: закрытие свайпом вниз и кликом мимо. Так UX будет привычным на обеих платформах, даже если реализация разная
Ошибка 5: Работает как раньше
Что написано в ТЗ?
«Окно закрывается стандартным способом»
«Поведение элемента – как на других экранах»
В чем проблема?⚡️
Платформы iOS и Android регулярно обновляют системные компоненты и поведение интерфейса. То, что работало в 2022 году, может быть несовместимо с текущей версией ОС
Жест "назад" 📱
↗️ Раньше: пользователь закрывал окно кликом по оверлею
↗️ С Android 10: появился универсальный жест "назад" — свайп с края экрана
↗️Если приложение не обновило логику, жест конфликтует с внутренней навигацией
↗️ Пользователь свайпит – и вылетает из сценария
Bottom Sheet 📱
↗️ Раньше: Bottom Sheet закрывался только по кнопке "Отмена" или кликом по оверлею
↗️ С iOS 15+: пользователи ожидают свайп вниз как основной способ закрытия
↗️ Если свайп не работает — окно кажется "залипшим" и кажется что приложение сломалось
Подводя итог, хочется отметить, что главный шаг к недопущению грубых ошибок – это общий язык между командами. И начать стоит с того, как мы называем элементы.
А какие «волшебные фразы» из ТЗ преследуют вас в кошмарных снах? Пишите в комментариях — сравним травмы системных аналитиков 🫂