Коротко
- Ошибка дизайна — это не «некрасивый цвет», а место, где человек останавливается, сомневается или уходит.
- Чаще всего интерфейс ломают слабый контраст, крошечные кнопки, формы с лишними полями и сообщения без инструкции, что делать дальше.
- Красивый макет без иерархии читается хуже скромного, но понятного.
- Доступность — не опция «на потом»: низкий контраст до сих пор стоит в топе проблем главных страниц интернета.
- Большинство типичных промахов ловится коротким тестом с несколькими людьми, а не ещё одним редизайном «для свежести».
Ошибки дизайна — это решения в интерфейсе, из-за которых человек не понимает, куда смотреть, что нажать и услышала ли его система вообще. Не обязательно кричащие. Чаще тихие: серый текст на сером, кнопка, которая выглядит как заголовок, форма, где обязательное поле прячется где-то внизу. Пользователь редко говорит «здесь плохой UX». Он просто закрывает вкладку.
На практике я всё чаще вижу не нехватку вкуса, а недостаток контакта с реальным сценарием. Макет собран, на презентации все кивают, а на телефоне в маршрутке человек не попадает в иконку корзины. Ниже — разбор промахов, которые съедают внимание, доверие и заявки. И что с этим делать, если вы сами рисуете интерфейс или принимаете работу подрядчика.
Что считать ошибкой, а что — вкусом
Вкус — субъективен. Ошибка дизайна — проверяется. Если несколько разных людей на одном действии спотыкаются в одном месте, это уже не «им не зашло». Это сбой в модели: интерфейс обещает одно, делает другое. Эвристики юзабилити Якоба Нильсена держатся десятилетиями именно потому, что опираются на поведение, а не на моду. Система должна говорить языком человека и показывать своё состояние. Когда этого нет, начинается тихая катастрофа.
Полезное различие, которое спасает от вечных споров на ревью. Есть slips — промахи из-за невнимательности: хотел «Сохранить», попал в «Удалить», потому что кнопки стоят рядом. И есть mistakes — осознанные ошибки из-за ложной картины мира: человек думает, что «Профиль» — это настройки аккаунта, а там портфолио. Первые лечатся расстоянием, подтверждением, нормальным размером цели. Вторые — словами, подписями, структурой.
Логика должна быть на экране, а не в голове дизайнера. Если объяснение «ну это же логично» занимает больше одного предложения — логики в интерфейсе нет. Это не жёсткость. Это экономия нервов всем, кто потом этот экран откроет.
- Ошибка — пользователь не находит действие за несколько секунд на типичном экране.
- Ошибка — после клика ничего видимого не происходит, и человек жмёт ещё раз.
- Ошибка — текст читается только на большом мониторе при идеальном освещении.
- Не ошибка — кому-то не нравится ваш оттенок синего, если контраст и иерархия на месте.
Эта рамка отсекает вкусовые войны. Можно спорить о «тёплом» или «холодном» бренде. Нельзя спорить, должна ли кнопка выглядеть как кнопка.
Визуальные промахи, которые глаз ловит раньше мысли
Человек ещё не успел «оценить дизайн», а уже решил, стоит ли напрягаться. Визуальный шум, слабый контраст и плоская иерархия делают страницу тяжёлой, даже если текст хороший. По наблюдениям, именно здесь новички путают чистоту с невидимостью: убрали всё лишнее — и вместе с лишним исчезли подсказки.
Серый текст, который кажется элегантным
Светло-серый на белом выглядит дорого на макете. В жизни это туман. По критериям WCAG 2.1 для обычного текста нужен контраст не менее 4,5:1, для крупного — 3:1. Уровень AAA ещё жёстче: 7:1 для обычного текста. Это не прихоть аудиторов. Это запас на сниженную остроту зрения, блики, дешёвый экран, полдень у окна.
Отчёт WebAIM Million за 2026 год зафиксировал низкий контраст текста на 83,9% главных страниц из выборки в миллион сайтов. Это снова самая частая автоматически выявляемая проблема доступности. В среднем на страницу приходилось 34 отдельных случая слабого контраста. Не «мелкий огрех маленьких лендингов». Норма интернета, и она плохая.
На практике я несколько раз спасал лендинг одним движением: заменил бледный серый на что-то ближе к графитовому — и «нечитаемый блок» стал обычным абзацем. Дизайнер обижался, что исчезла лёгкость. Пользователи перестали щуриться. Лёгкость, которая мешает читать, уже не лёгкость.
- Контраст проверяйте не на глаз, а в инструменте: Contrast Checker, Stark, аудит в Chrome.
- Не кладите мелкий текст на фото без подложки или затемнения.
- Плейсхолдер в поле — не замена подписи. Он светлее и исчезает, как только человек начинает печатать.
- Ссылки должны отличаться не только цветом. Около 8% мужчин имеют нарушения цветового зрения, чаще всего красно-зелёного типа.
Цвет как единственный носитель смысла — отдельная классика. «Зелёное — ок, красное — ошибка» работает, пока в аудитории нет человека с дальтонизмом и пока скриншот не ушёл в чёрно-белую печать. Иконка, текст, паттерн — более дешёвые страховки, чем кажется.
Типографика без ритма
Здесь падают даже сильные визуалы. Слишком много кеглей. Слишком плотная междустрочная. Строка на всю ширину монитора, где глаз теряет начало следующей. Шрифт с тонкими штрихами, который на мобильном становится серой кашей.
Работает простая дисциплина. Два-три размера для текста, один акцентный заголовок, чёткая ступенька: H1 заметно больше H2, H2 — больше H3, тело не прыгает туда-сюда. Междустрочная для абзаца обычно комфортнее в районе 1,4–1,6. Ширина строки — ориентировочно 45–75 символов. Отдельный грех — текст в картинках. Красиво в макете, смерть для масштабирования, перевода и скринридеров.
Нет иерархии, всё «важное»
Когда на экране всё кричит, не кричит ничего. Три CTA одного размера. Баннер, бейдж, акция, таймер, чат-виджет и ещё стикер «хит». Человек сканирует страницу, а не читает линейно. Исследования айтрекинга Nielsen Norman Group ещё с 2006 года описали F-образный паттерн: больше внимания сверху и слева, дальше взгляд падает вниз по краю. Если главное действие сидит в правом нижнем углу серым текстом — его просто не заметят.
Иерархия строится размером, контрастом, пустым пространством и положением. Не количеством теней. Пустое пространство — не дыра, которую надо чем-то закрыть. Это пауза, которая говорит: вот это главное.
Интерфейсные сбои: человек не понимает, что кликабельно
Визуал может быть аккуратным, а пользователь всё равно стоит как на чужой кухне. Не знает, где дверь. Вот здесь уже не «картинка», а путь.
Навигация, которой нужен экскурсовод
Пункты с одинаковыми названиями. «Услуги» и «Решения». «Блог» и «Медиа». Меню из двенадцати строк плюс бургер, внутри которого ещё три уровня. Человек ищет не архитектуру информации. Он ищет ответ. Если ответ спрятан за абстрактным словом, его нет.
По опыту, самый быстрый тест — карточная сортировка: дайте реальные названия страниц людям из целевой аудитории и попросите разложить. Их логика почти никогда не совпадает с вашей оргструктурой. «О нас» в момент задачи ищут редко. «Цены», «Доставка», «Вход» — постоянно.
- Названия пунктов — на языке клиента, а не на языке отдела маркетинга.
- Текущий раздел должен быть виден. «Где я?» — базовый вопрос, его нельзя игнорировать.
- Поиск нужен, когда контента много. И он должен находить, а не показывать ноль на опечатку.
- Футер не спасает сломанное меню в шапке. Это запасной выход, а не главный.
Мобильное меню отдельно умеет прятать критические действия. Телефон, корзина, вход — если они исчезли в «ещё», часть людей до них не доберётся. Бургер — компромисс, а не достижение.
Иконки, которые понимает только автор
Сердце, звезда, флажок, три точки. Что из этого «сохранить», «выбрать», «пожаловаться», «ещё»? Без подписи — лотерея. Нестандартная иконка без текста — загадка. Даже стандартная иногда разъезжается между платформами: «поделиться» на iOS и Android выглядит по-разному.
Минимализм здесь часто врёт. Вы не очистили интерфейс. Вы сняли подсказки. Иконка плюс короткое слово почти всегда выигрывает у одиночки, особенно в продуктах, которыми пользуются редко. Банковское приложение раз в неделю — не лента, где жест уже в мышцах.
Цели, в которые невозможно попасть
Кнопка или заголовок? На макете очевидно. На солнце, на дешёвом экране, одной рукой — уже нет. Плоский дизайн убрал тени и «выпуклость» кнопок, а вместе с ними — подсказку «в меня можно ткнуть». Ссылки без подчёркивания. Кнопка-текст. Карточка, которая кликается целиком, но курсор этого не выдаёт. Или наоборот: большая карточка, а живая только крошечная название.
Apple в Human Interface Guidelines рекомендует зону нажатия не менее 44×44 pt. Material Design — около 48×48 dp. Это про палец, а не про эстетику пикселя. Между двумя ссылками в футере на мобильном должно быть воздух, иначе люди будут открывать «Политику» вместо «Контактов» и злиться на вас, а не на свой палец.
Отдельно — разрушительное действие рядом с подтверждением. «Сохранить» и «Удалить» одного цвета, в одной строке, с одинаковым весом. Это фабрика случайных промахов. Опасное действие отодвиньте, перекрасьте, попросите подтверждение. Не после каждого клика в настройках, а там, где цена ошибки высока.
Формы, тишина системы и тексты, от которых хочется закрыть ноутбук
Форма — место, где макет встречается с бюрократией. Здесь отваливаются не из-за кернинга. Здесь просят слишком много и плохо объясняют, что пошло не так.
Поля «на всякий случай»
Каждое лишнее поле — маленькое «а оно мне надо?». Телефон, когда вы не будете звонить. «Отчество», которого нигде дальше нет. Факс. Второй адрес. Капча на три шага раньше, чем нужно. Я как-то открыл чекаут клиента и насчитал четырнадцать полей, среди которых было «название компании» для покупки одной свечи. Маркетинг хотел сегментацию. Люди хотели свечу.
Подписи ставьте снаружи, а не внутри поля. Обозначьте и обязательные, и необязательные — двусмысленность здесь дорого стоит. Маски телефона делайте под реальные форматы, а не под фантазию разработчика. Автозаполнение браузера не ломайте самописными инпутами без нормального autocomplete. Пароль с требованием «спецсимвол, большая, маленькая, число и ещё что-то» без подсказки силы — это не безопасность, это барьер. Лучше длина и менеджер паролей.
- Не дробить дату на три выпадающих списка, если подойдёт один календарь.
- Не прятать кнопку оплаты под ещё одной страницей с рассылкой.
- Показывать доставку и итог до ввода карты.
- Добавлять гостевое оформление. Принудительный аккаунт перед ценностью — классика отвала.
Валидация — в момент, когда ещё можно исправить, а не после сабмита двадцати полей. И не только красная рамка: напишите, что именно не так. «Неверный формат» — плохо. «Похоже, пропущен @ в почте» — уже можно жить.
«Что-то пошло не так»
Это предложение стоит вынести из продукта внутренним регламентом. Оно не говорит, что сломалось, исчезли ли данные, стоит ли попробовать ещё, или писать в поддержку. Плохая обратная связь вообще один из самых дорогих промахов: человек нажал, экран молчит. Полсекунды — нормально. Три секунды — уже тревога. Для действий на несколько секунд нужен индикатор ожидания, для более длинных — прогресс, который реально двигается. Иначе повторные клики, двойные заказы, ярость.
Хорошее сообщение об ошибке имеет три части: что случилось, почему это важно, что сделать сейчас. Человеческим языком. Без кода 500 посреди экрана. Без вины пользователя. «Вы ввели неправильно» звучит как выговор. «Этот пароль не подошёл. Осталось две попытки или сбросьте его здесь» — уже диалог.
Пустые состояния тоже часть интерфейса. Первый вход в «Мои заказы» без единой строки — не белая пустыня. Это место сказать: здесь появятся покупки, начать можно с каталога. Иначе человек решит, что раздел сломан.
Доступность, мобильная версия и скорость
Доступность откладывают на второй этап, которого не бывает. Это не отдельная аудитория «где-то там». Это человек с занятой рукой, со старым телефоном, с солнцем на экране, с размытой оптикой после мигрени. Дальше за контрастом — фокус с клавиатуры, подписи к полям, альтернативный текст к содержательным изображениям, настоящие заголовки, а не просто жирный текст.
Клавиатурой должно быть возможно пройти форму и меню. Фокус видимый, не снятый из-за эстетики «без рамки» и пустой замены. Видео с автозапуском звука — отдельный вид вражды. Движущиеся баннеры, которые не останавливаются, сбивают тех, кому трудно удержать внимание. Мелкие шрифты в юридическом подвале не становятся неважными только потому, что так удобнее верстать.
Мобильная версия до сих пор умеет быть сжатым десктопом. Кнопки наезжают. Горизонтальный скролл. Модалка, которую не закрыть большим пальцем. Фиксированная шапка съедает треть экрана. Ховер-эффекты, которых на тачскрине нет, — и человек не видит, что элемент живой. Адаптив — не «натянуть контейнер». Это другой приоритет: сначала действие, потом украшения.
Скорость тоже входит в дизайн. Тяжёлый герой-ролик, три семейства шрифтов, аналитика пачкой — интерфейс вроде есть, но его ещё нет. Человек не оценивает параллакс. Он оценивает, успеет ли оформить билет, пока не отъехал Wi-Fi.
Откуда растут эти промахи
Странно винить только исполнителя. Большинство просчётов рождается раньше макета. Ещё до первого прямоугольника в Figma уже заложен кривой бриф, чужие слова и привычка согласовывать «красивые картинки», а не путь человека.
- Нет реального пользователя в брифе. Есть «аудитория 25–45, активные».
- Рисуют экранами, а не сценарием. Красивая витрина, пустая касса.
- Тексты оставляют на потом. Потом в кнопки пишут «Отправить» и «ОК».
- Компоненты плодятся без системы: каждая страница — свой инпут.
- Согласовывают статичные картинки, а не кликабельный прототип.
- Тестируют на команде. Команда уже знает, куда тыкать.
Последнее самое коварное. Вы не можете быть наивным пользователем собственного продукта. Мозг достраивает то, чего нет на экране. Поэтому «нам и так понятно» не считается. Небольшая качественная выборка ловит львиную долю очевидных проблем: ориентир около пяти человек на итерацию часто вытягивает около 85% таких сбоев, после чего дизайн стоит править и смотреть снова. Для тонкой аналитики этого мало. Для ответа «куда нажимать» — часто достаточно, чтобы перестать гадать.
Ещё одна яма — мода. Стекло, неоновый градиент, скрытый скролл, кастомный курсор, который лагает. Тренд не является аргументом. Если он съедает понятность, он плох для этого экрана. Можно сделать смело. Нельзя сделать загадочно там, где человек отдаёт деньги или свои данные.
Как проверить макет, пока не поздно
Отдельный отдел исследований не нужен, чтобы убрать грубые ошибки дизайна. Нужна привычка смотреть на экран чужими руками. Даже полчаса с телефоном коллеги из другого отдела показывает больше, чем десятый раунд правок «чтобы выглядело дороже».
- Пройдите главный сценарий на телефоне, одной рукой, при неидеальном освещении.
- Уберите цвет в голове: понятны ли состояния без красного и зелёного?
- Пройдите форму с клавиатуры. Куда девается фокус?
- Дайте макет человеку вне команды и молчите. Без «ну вот же, справа вверху».
- Прочитайте микротексты вслух. Если стыдно — перепишите.
- Проверьте контраст заголовков, абзаца, плейсхолдеров и кнопок, в том числе отключённых.
- Найдите действия, которые стоят слишком близко: удалить и сохранить, назад и далее, отклонить и подтвердить.
Список намеренно бытовой. Он ловит большинство того, из-за чего потом стыдно на продакшене. Тепловые карты и серия интервью нужны, когда гигиена уже сделана. Иначе измеряете шум.
| Типичная ошибка | Как проявляется | Что сделать |
|---|---|---|
| Слабый контраст | Текст виден только на хорошем мониторе | Довести до 4,5:1, убрать серый на сером |
| Неясные цели клика | Непонятно, что кнопка — это кнопка | Подпись, видимая цель, зона 44–48 pt |
| Форма-анкета | Бросают на середине | Убрать лишнее, подписать поля, валидировать вовремя |
| Молчаливый интерфейс | Повторные клики, двойные заявки | Мгновенный отклик и нормальный текст ошибки |
| Навигация для своих | Ищут сайт через Google, даже будучи на нём | Язык клиента, видимое состояние «где я» |
| Декор вместо иерархии | Нет одного главного действия | Один акцент, воздух, второстепенное — тише |
Сравнение грубое, так и задумано. Большинство продуктов падает не на уникальных проблемах, а на этом наборе. Если закроете шесть строк таблицы — уже обгоните кучу «красивых» сайтов, которые рисовали настроение, а не путь.
Что делать с уже живым продуктом
Редизайн всего подряд — соблазн и ловушка. Риск заменить старые понятные грабли на новые красивые. Лучше собрать экраны, где люди отваливаются: аналитика, обращения в поддержку, записи сессий. Починить обратную связь, формы, контраст, кнопки. Потом навигацию. Визуальный эффект — в конце, когда сценарий уже не скрипит.
Если принимаете работу подрядчика, не спрашивайте «ну как вам, красиво?». Попросите пройти сценарий на вашем телефоне. Попросите состояния: пустой, загрузка, ошибка, успех, невалидное поле, длинный текст, русский и английский. Макет счастливого пути — полпродукта. Другая половина — всё, что пошло не по плану.
Дизайн ошибается всегда. Вопрос, видите ли вы это раньше клиента. Поставьте короткий тест на этой неделе: три человека, один сценарий, вы с закрытым ртом и блокнотом. Список находок будет неприятный. Это хороший знак. Значит, наконец смотрите не в макет, а в то, как им пользуются.
