Сегодня я покажу 10 самых частых косяков в интерфейсах, которые я встречаю буквально в 80–90% проектов на ревью. И самое главное — как их быстро и без боли исправлять.
Полное игнорирование мобильной версии (или как любят говорить «сделаем потом»)
Самая массовая ошибка.
Команда делает красивый десктоп на 1440 px, а мобильную версию либо растягивают «резиной», либо вообще оставляют на «потом». В итоге 60–75% пользователей (а часто и больше) получают интерфейс, в котором ничего не нажимается пальцем, текст уезжает, а кнопки прячутся за пределы экрана.
Что я вижу чаще всего:
- Кнопки слишком маленькие
- Текстовые поля без достаточного отступа от края
- Горизонтальный скролл там, где его быть не должно
- Шапка, которая съедает 40% экрана
Как исправлять быстро
Переходите на mobile-first подход хотя бы на уровне low-fidelity.
Правило большого пальца: минимальный тач-target ~ 44×44 px, комфортный ~ 48–56 px. Проверяйте на реальных устройствах (не только в DevTools), особенно на старых Android и маленьких экранах.
Отсутствие единой дизайн-системы (или «каждый экран рисует свой дизайнер»)
Разные кнопки, разные радиусы, 3 разных оттенка primary, шрифты меняются от страницы к странице. Пользователь не понимает, где кликабельно, а где нет. Доверие к продукту падает моментально.
Типичные проявления:
- Primary button в одном месте — #0066FF, в другом — #0055EE
- Карточки в одном модуле с shadow-md, в другом — shadow-lg + border
- Размеры иконок 20 px → 24 px → 32 px на одной странице
Как поступаю я
Даже если проект маленький — заведите хотя бы минимальную дизайн-систему в Figma (Colors, Typography, Components, Spacing scale).
Самое важное — договориться о spacing scale (4 px или 8 px grid) и строго его придерживаться. Это сразу убирает 70% визуального шума.
Слабая визуальная иерархия и перегруженные экраны
Заголовок H1, под ним 4 подзаголовка одинакового размера, 7 кнопок, плотный текст, иконки, бейджи, метки — всё кричит одновременно. Пользователь смотрит 3 секунды и уходит.
Что не нравится больше всего:
- Отсутствие контраста по размеру и весу шрифта
- Все важное в центре, ничего не выделено
- Hero-секция занимает 80% первого экрана, а СТА внизу
Рекомендации:
Используйте шкалу контраста:
- 1 уровень — основной заголовок / самый важный CTA
- 2 уровень — подзаголовки / важные метрики
- 3 уровень — поясняющий текст / второстепенные действия
- 4 уровень — метки, иконки, подсказки
И никогда не больше 3 цветов + 2 акцентных на одном экране.
Плохой контраст и пренебрежение доступностью
В 2026 году это уже не «фича для слабовидящих», а must-have.
Я до сих пор вижу плейсхолдеры светлее основого текста, красный error-текст на розовом фоне, фокус-стейт вообще отсутствует или совпадает с hover.
Небольшой чек-лист
- Проверьте контраст - Отличный сервис для этого, которым сам пользуюсь
- Добавьте видимый focus-outline, но не убирайте полностью
- Протестируйте в режиме high contrast / grayscale / color blind симуляторе
Один раз потратив 15 минут на проверку, вы избавите себя от кучи негативных отзывов позже.
Отсутствие состояний и микро-фидбэка
Кнопка не меняется при наведении / нажатии.
Форма отправляется — и тишина.
Ошибка валидации — просто красная рамка без объяснения.
Loading — пустой экран 5 секунд.
Пользователь не понимает, что происходит → раздражение → уход.
Минимум, который должен быть всегда
- hover/active/focus состояния на всех интерактивных элементах
- Spinner при загрузке данных
- Умные сообщения об ошибках (на примере пароля выглядит так: «Пароль должен содержать минимум 8 символов» вместо «Ошибка»)
- Уведомление об успехе
Я всегда добавляю это , потому что потом разработчики просто не захотят это пилить либо сделают как им кажется "лучше".
Эти пять ошибок — мой личный «топ-5 раздражения» за последнее время. Они встречаются не потому, что дизайнеры плохие, а потому что на проектах часто экономят время именно на этих «мелочах».
Слишком длинные или сложные формы
12 полей на первом шаге, обязательный телефон + email + ФИО + дата рождения, нет guest/social login, после ошибки — вся форма очищается.
Не нравится больше всего:
- Нет прогресс-бара
- Нет autofill и масок
- Нет «Продолжить как гость» на видном месте
Как исправить
Разбейте на 2–4 шага максимум. Добавьте autofill, маски, smart defaults. Поставьте «Продолжить как гость» или Apple/Google Sign-In первым вариантом. Показывайте конкретные сообщения об ошибках рядом с полем.
Плохая навигация и потерянная ориентация
Нет breadcrumbs, back-button в браузере ломает flow, глобальное меню спрятано за гамбургером даже на десктопе, поиск бесполезный.
Что вижу постоянно:
- Разные названия одного раздела в меню и на странице
- Нет secondary navigation на сложных страницах
- После клика по ссылке пользователь теряет контекст
Мой стандарт
Через 3 клика пользователь должен понимать: где он, как вернуться, что дальше. Breadcrumbs + secondary nav + поиск с автодополнением и синонимами — это база.
Игнорирование контекста использования
Автозапуск видео без mute, тяжёлые анимации на слабом устройстве, микроинтеракции требуют точного попадания, нет offline-индикаторов
Раздражает следующее:
- Нет quick actions для частых операций
- Нет graceful degradation при плохом соединении
- Всё рассчитано на идеальные условия
Как обычно поступаю я
Думаю о worst-case: одна рука, 3G, прерывания, низкий заряд. Добавляю persistent CTA, skeleton screens, offline-сообщения.
Чёрный ящик в AI-фичах
AI-рекомендации, чат-боты, генерация — «мы подобрали это» и всё. Нет «почему?», нет кнопки «перегенерировать», нет фидбека.
Типичные провалы:
- Пользователь не понимает, почему система предложила именно это
- Ошибка AI → нет способа сказать «это не то»
Что добавляю всегда
Пояснения в UI («Потому что вы смотрели похожие товары»), кнопка «Перегенерировать» / «Не подходит? Скажи почему», возможность дать фидбек прямо в интерфейсе.
Отсутствие тестов с реальными людьми
Персоны из воздуха, ни одного usability-теста до продакшена. Запустили — и тонну оттока.
Частые ошибки:
- «Нам некогда тестировать, давайте запустим»
- После запуска: «А почему пользователи не понимают?»
Мой минимум
5–7 интервью + 2–3 usability-сессии на прототипах. Даже если бюджет маленький — 30-минутные Zoom с реальными пользователями окупаются в 10 раз.
А какие из этих косяков вы чаще всего видите?
Пишите в комментариях — давайте обсудим и, может, в следующей статье разберём ещё парочку.
Пишите в личку, если хотите обсудить проект, получить фидбек по кейсу или просто поболтать о дизайне — всегда рад живому общению!