Интерфейс — итоги
Кратко — что стоит унести из раздела "Интерфейс". Если пункт кажется туманным — откройте указанную главу или оглавление.
FAQ — Часто задаваемые вопросы
Типичные ошибки и ситуации при проектировании экранов и проверке чужих интерфейсов. Ниже также — формулировки как в поиске ("что такое UX", "чем отличается…", "как сделать…") с коротким ответом и ссылкой на главу. Пункты для самопроверки макета — в чек-листе.
Вопрос. Сделал "красивый" макет в Figma, а пользователи не находят кнопку "Купить". В чём ошибка?
Ответ. UI реализует стратегию UX: путь к цели важнее декора. Проверьте иерархию, контраст CTA и сценарий "с нуля" без подсказок дизайнера. Подробнее здесь — глава 1, глава 6.
Вопрос. UX и UI — "одно и то же, только дизайнеры так делят"?
Ответ. UX — опыт и путь пользователя к задаче; UI — конкретные экраны, элементы и отклики. Плохой UX можно "подкрасить", но сценарий останется мучительным. Подробнее здесь — глава 1.
Вопрос. Нажал "Отправить" — секунду тишина, пользователь жмёт снова и получает дубликат заказа.
Ответ. Нужна немедленная обратная связь: спиннер, блокировка кнопки, сообщение "отправляем". Без отклика система кажется сломанной. Подробнее здесь — глава 5, глава 6.
Вопрос. На телефоне меню "уехало" за край, на десктопе всё ок — достаточно уменьшить шрифт?
Ответ. Нужна адаптивная вёрстка: перестройка блоков, touch-цели от ~44 px, проверка на реальном устройстве. Уменьшение шрифта лишь ухудшает читаемость. Подробнее здесь — глава 2, глава 6.
Вопрос. Серый текст на светло-сером фоне "стильно", но люди жалуются на зрение.
Ответ. Контраст должен соответствовать WCAG (ориентир 4.5:1 для основного текста). Эстетика уступает читаемости и доступности. Подробнее здесь — глава 2, глава 6.
Вопрос. Иконка "понятна мне" — без подписи. Пользователи не понимают.
Ответ. Универсальных иконок мало; для редких действий нужен текст или tooltip. Тестируйте на людях вне команды. Подробнее здесь — глава 2.
Вопрос. Три разные кнопки "Сохранить", "OK", "Применить" делают одно — пользователи путаются.
Ответ. Нарушен принцип согласованности: одинаковые действия — одинаковые названия и место на экране. Подробнее здесь — глава 6, глава 3.
Вопрос. Поле пароля принимает ввод, ошибка только после отправки формы.
Ответ. Валидация и подсказки должны работать рядом с полем (формат, длина, совпадение). Так снижают число неудачных отправок. Подробнее здесь — глава 3, глава 5.
Вопрос. Выпадающий список на 200 стран — пользователь не находит "Россию".
Ответ. Длинные списки нуждаются в поиске, группировке или autocomplete, иначе select не масштабируется. Подробнее здесь — глава 3.
Вопрос. Toggle выглядит включённым, но функция off — визуальный баг или логика?
Ответ. Состояние переключателя должно однозначно совпадать с данными: цвет, положение, aria-checked. Расхождение UI и логики — критичный дефект. Подробнее здесь — глава 3.
Вопрос. Пользователь "заблудился" в разделе — нет ощущения, где он.
Ответ. Добавьте хлебные крошки, подсветку активного пункта меню и заголовок страницы, совпадающий с пунктом навигации. Подробнее здесь — глава 4.
Вопрос. Боковое меню на мобильном перекрывает полэкрана и не закрывается жестом.
Ответ. Overlay-панели должны иметь явное закрытие (крестик, tap вне, swipe) и не блокировать контент без необходимости. Подробнее здесь — глава 4.
Вопрос. Список из 5000 товаров грузится одной страницей — браузер "умирает".
Ответ. Нужны пагинация, бесконечный скролл с лимитом или виртуализация — навигация по данным, а не один гигантский список. Подробнее здесь — глава 4.
Вопрос. Toast-уведомление исчезло через 2 секунды — пользователь не успел прочитать ошибку.
Ответ. Критичные сообщения держат дольше или дают кнопку закрытия; ошибки дублируют у поля. Подробнее здесь — глава 5.
Вопрос. Модальное окно нельзя закрыть — только перезагрузка страницы.
Ответ. Модалка обязана иметь Escape, крестик и понятное действие; блокировка фона без выхода — антипаттерн. Подробнее здесь — глава 5.
Вопрос. Анимация загрузки 3 секунды на каждый клик — "живой" интерфейс или раздражение?
Ответ. Анимация должна подсказывать состояние, а не задерживать работу; длительные переходы отключают на слабых устройствах. Подробнее здесь — глава 5.
Вопрос. Tab по форме прыгает в случайном порядке — только мышью можно заполнить.
Ответ. Это провал доступности: логичный tab-order, focus-visible, labels связаны с input. Проверьте с клавиатуры и скринридером. Подробнее здесь — глава 6.
Вопрос. "Удалить аккаунт" стоит рядом с "Сохранить" без подтверждения.
Ответ. Деструктивные действия выделяют цветом, отступом и вторым шагом ("Вы уверены?"). Предотвращение ошибок — часть UX. Подробнее здесь — глава 6, глава 3.
Вопрос. Тёмная тема "для галочки" — половина иконок не перекрасилась.
Ответ. Тема — система токенов (цвета, тени, границы), а не инверсия фона. Неполная тема хуже, чем одна светлая. Подробнее здесь — глава 2.
Вопрос. Копировал паттерн с Dribbble — у нас другой продукт, метрики упали.
Ответ. Референсы — вдохновение; интуитивность важнее оригинальности в рамках привычных паттернов вашей аудитории. Проверяйте юзабилити-тестом. Подробнее здесь — глава 6, маршрут веб-дизайна.
Вопрос. Лендинг "как у Apple" — много воздуха, но нет цены и CTA выше первого экрана на ноутбуке.
Ответ. Минимализм не убирает ключевую информацию: ценность, цена, действие должны быть видны в первом viewport целевой аудитории. Подробнее здесь — маршрут — лендинг.
Вопрос. В корзине нет итога с доставкой — пользователи бросают на шаге оплаты.
Ответ. E-commerce требует прозрачной суммы до финального клика; скрытые комиссии — частая причина отказа. Подробнее здесь — маршрут — интернет-магазин.
Вопрос. Голосовой интерфейс "не слышит" в шумной комнате — это только микрофон?
Ответ. Голосовой UI нуждается в fallback (экран, кнопки), подтверждении распознанного текста и учёте шума. Подробнее здесь — глава 1.
Вопрос. Разработчик говорит "сделаем как в Material" — этого достаточно для UX?
Ответ. Design system ускоряет UI, но сценарии и тексты всё равно проектируют под ваших пользователей. Подробнее здесь — глава 1, глава 6.
Вопрос. Ошибка "Something went wrong" — пользователь не знает, что делать.
Ответ. Сообщение указывает причину и следующий шаг ("проверьте email", "повторите через минуту"). Подробнее здесь — глава 5.
Вопрос. Футер без ссылок на оферту и поддержку — "мелочь для дизайна"?
Ответ. Футер — часть навигации и доверия: контакты, правовые документы, соцсети. Пользователи ищут их именно там. Подробнее здесь — глава 4.
Вопрос. Сдал макет без проверки на телефоне — заказчик открыл с iPhone, всё "поплыло".
Ответ. Перед сдачей пройдите маршрут проверки на двух размерах экрана и сценарий нового пользователя. Подробнее здесь — маршрут веб-дизайна.
Вопрос. Что такое UX простыми словами?
Ответ. UX (user experience) — опыт пользователя при решении задачи в продукте: насколько путь понятен, быстр и приятен. UI — лишь видимая часть этого опыта. Подробнее здесь — глава 1.
Вопрос. Чем UX отличается от UI?
Ответ. UX проектирует сценарий и логику; UI — кнопки, цвета, шрифты и отклики экрана. Красивый UI с запутанным сценарием даёт плохой UX. Подробнее здесь — глава 1.
Вопрос. Что такое юзабилити (usability)?
Ответ. Юзабилити — удобство использования: насколько быстро новичок достигает цели, сколько ошибок делает, насколько доволен процессом. Измеряют тестами и метриками задач. Подробнее здесь — глава 6.
Вопрос. Что такое адаптивный дизайн (responsive)?
Ответ. Адаптивный интерфейс перестраивается под ширину экрана — телефон, планшет, десктоп. Проверяют на реальных устройствах, а не только уменьшением окна браузера. Подробнее здесь — глава 2, глава 6.
Вопрос. Что такое доступность интерфейса (accessibility, a11y)?
Ответ. Доступность — равный доступ для людей с нарушениями зрения, моторики, слуха: контраст, клавиатура, скринридеры, подписи к иконкам. Подробнее здесь — глава 6.
Вопрос. Что такое CTA-кнопка на сайте?
Ответ. CTA (call to action) — главное действие на экране: "Купить", "Зарегистрироваться", "Скачать". Должна быть заметна по контрасту и расположению. Подробнее здесь — глава 3, маршрут — лендинг.
Вопрос. Wireframe, mockup и прототип — в чём разница?
Ответ. Wireframe — схема блоков без дизайна; mockup — визуальный макет; прототип — кликабельный сценарий. Идут от идеи к проверке с пользователями. Подробнее здесь — маршрут — прототипирование.
Вопрос. Figma — для чего нужна начинающему дизайнеру?
Ответ. Figma — инструмент для макетов, компонентов и прототипов в браузере. Стандарт индустрии для UI/UX и handoff разработчикам. Подробнее здесь — маршрут веб-дизайна, Графика.
Вопрос. Что такое Material Design?
Ответ. Material Design — design system от Google: компоненты, отступы, анимации для Android и веба. Ускоряет UI, но сценарии всё равно проектируют под ваших пользователей. Подробнее здесь — глава 1, глава 6.
Вопрос. Как правильно сделать тёмную тему на сайте?
Ответ. Тёмная тема — система токенов (фон, текст, границы, иконки), а не инверсия цветов. Проверьте контраст по WCAG на обеих темах. Подробнее здесь — глава 2.
Вопрос. Что такое user flow (пользовательский сценарий)?
Ответ. User flow — цепочка шагов от входа до цели (оформление заказа, регистрация). Рисуют до пиксельного дизайна, чтобы не строить лишние экраны. Подробнее здесь — глава 1, маршрут.
Вопрос. Как спроектировать форму регистрации на сайте?
Ответ. Минимум полей, валидация у input, понятные ошибки, видимый прогресс и одна главная кнопка. Лишние поля на старте снижают конверсию. Подробнее здесь — глава 3, глава 5.
Вопрос. Зачем нужны хлебные крошки (breadcrumbs)?
Ответ. Хлебные крошки показывают путь в иерархии сайта и дают быстрый возврат на уровень выше. Особенно важны в каталогах и документации. Подробнее здесь — глава 4.
Вопрос. Что такое модальное окно (modal)?
Ответ. Modal блокирует фон и требует явного действия — подтверждение, форма, предупреждение. Должно закрываться по Escape и крестику. Подробнее здесь — глава 5.
Вопрос. С чего начать изучение веб-дизайна?
Ответ. Словарь UX/UI → элементы экрана → принципы → маршрут с проектами (лендинг, магазин, портфолио). Подробнее здесь — оглавление, маршрут.
Вопрос. Что такое design system (дизайн-система)?
Ответ. Design system — набор компонентов, правил и токенов для согласованного UI в продукте. Material, Ant Design — примеры готовых систем. Подробнее здесь — глава 6.
Вопрос. Какой контраст текста нужен по WCAG?
Ответ. Для обычного текста ориентир — минимум 4.5:1 к фону; крупный текст — 3:1. Проверяют инструментами вроде WebAIM Contrast Checker. Подробнее здесь — глава 2, глава 6.
Вопрос. Mobile first — что это значит?
Ответ. Mobile first — проектирование сначала под узкий экран, затем расширение для десктопа. Снижает риск "обрезанного" мобильного вида. Подробнее здесь — глава 2, глава 6.
Вопрос. Как устроен landing page (лендинг)?
Ответ. Лендинг ведёт к одному действию: ценность, доказательства, цена, CTA на первых экранах. Без лишней навигации, отвлекающей от конверсии. Подробнее здесь — маршрут — лендинг.
Вопрос. Что такое UX-исследование и юзабилити-тест?
Ответ. UX-исследование выявляет потребности и боли аудитории; юзабилити-тест — наблюдение за выполнением задач на прототипе. Дизайн без теста остаётся гипотезой. Подробнее здесь — маршрут — исследования.
Вопрос. Что такое интерфейс приложения и чем он отличается от сайта?
Ответ. Интерфейс — любая точка контакта с системой: сайт, приложение, терминал, голос. Принципы UX/UI одинаковы; паттерны платформ различаются. Подробнее здесь — глава 1, Веб-сайты.
Вопрос. Как проектировать интернет-магазин — с чего начать?
Ответ. Каталог → карточка товара → корзина → оплата с прозрачной суммой. Каждый шаг проверяют на мобильном. Подробнее здесь — маршрут — интернет-магазин.
Что запомнить
Основные категории
- Интерфейс — точка взаимодействия между пользователем и системой, включающая физические, цифровые и голосовые формы.
- Пользовательский интерфейс (UI) — визуальное и функциональное представление системы, через которое пользователь взаимодействует с продуктом.
- Пользовательский опыт (UX) — совокупность ощущений, эмоций и реакций, возникающих у пользователя в процессе взаимодействия с продуктом.
- Принципы проектирования — согласованность, читаемость, минимализм, обратная связь и доступность, обеспечивающие качественное взаимодействие.
Три основных правила использования
- UI реализует стратегию UX: визуальные и функциональные элементы должны отражать продуманный путь пользователя к цели.
- Интуитивность важнее оригинальности: интерфейс должен быть понятен без обучения, опираясь на общепринятые паттерны.
- Обратная связь обязательна: каждый пользовательский ввод требует немедленного и ясного отклика от системы.
Три фундаментальных момента
- Юзабилити — мера эффективности, простоты и удовлетворённости при использовании интерфейса.
- Адаптивность — способность интерфейса корректно отображаться и функционировать на устройствах с разными размерами экранов и возможностями.
- Доступность — обеспечение равного доступа к интерфейсу для всех пользователей, включая людей с ограниченными возможностями.
Куда идти дальше
| Тема | Раздел |
|---|---|
| Софт рядового пользователя | Софт рядового пользователя |
| Веб-дизайн — маршрут | Веб-дизайн — маршрут от UX до портфолио |
| UX (глоссарий) | UX |
| Веб-сайты и веб-приложения | Веб-сайты и веб-приложения — о разделе |
| Графический дизайн | Графический дизайн |
| Сеть и интернет | Сеть и интернет — о разделе |
Проверьте себя: Чек-лист самопроверки.