UI, user interface, это визуальная часть сайта или приложения, с которой напрямую взаимодействует пользователь: кнопки, меню, поля ввода, иконки, цвета, шрифты. Если представить продукт как автомобиль, UI это приборная панель и руль, все, что человек видит и трогает руками, тогда как двигатель прячется под капотом.
UI отвечает за то, как продукт выглядит и как устроены отдельные элементы управления им. Хороший интерфейс не обязательно самый красивый: часто он вообще незаметен, потому что человек над выбором кнопки не раздумывает — просто нажимает и получает результат.
Чем UI отличается от UX
Эти два термина путают чаще всего. UX, user experience, это весь опыт пользователя при работе с продуктом: насколько легко найти нужную функцию, сколько шагов до покупки, понятно ли, что произошло после нажатия кнопки. UI это конкретное визуальное воплощение этого опыта: как именно выглядит кнопка, какого она цвета, где расположена на экране.
Можно сравнить с книгой. UX это сюжет и логика повествования, понятно ли читателю, что происходит и почему. UI это шрифт, верстка страницы и обложка. Плохая верстка испортит впечатление даже от хорошего сюжета, но красивая обложка не спасет книгу без внятного сюжета.
Из чего состоит UI
Элементы управления: кнопки, переключатели, чекбоксы, выпадающие списки, поля для ввода текста. У каждого элемента есть привычное поведение, которое пользователи ожидают увидеть, и нарушать эти ожидания без веской причины не стоит.
Визуальный стиль: цветовая палитра, шрифты, отступы между блоками, иконки. Здесь интерфейс встречается с брендингом компании: UI должен выглядеть узнаваемо и соответствовать общему стилю бренда, оставаясь заодно с остальным сайтом.
Обратная связь интерфейса: как система показывает, что кнопка нажата, что форма отправлена, что произошла ошибка. Без такой обратной связи пользователь не понимает, сработало действие или нет, и часто нажимает кнопку повторно.
Адаптивность: как интерфейс перестраивается под разные размеры экрана, от большого монитора до маленького телефона. Элемент, удобный на компьютере, может оказаться слишком мелким для пальца на экране смартфона.
UI-кит и дизайн-система
Для крупных сайтов и приложений отдельные экраны обычно не рисуют с нуля каждый раз. Сначала собирают UI-кит: набор готовых элементов вроде кнопок, полей и заголовков с фиксированными цветами, размерами и отступами. Дальше все новые страницы собирают из этих готовых деталей, как из конструктора.
Такой подход экономит время команды и держит сайт визуально цельным: кнопка «Купить» выглядит одинаково на карточке товара, в корзине и на странице оплаты, и ее вид не зависит от того, кто из дизайнеров рисовал конкретный экран.
Пример из практики
Интернет-магазин обуви получал жалобы на то, что покупатели случайно оформляли заказ не того размера. Разбор интерфейса показал причину: выпадающий список размеров был очень мелким, а кнопка подтверждения заказа располагалась прямо под ним без запаса по расстоянию. После увеличения размера элементов выбора и добавления отступа перед кнопкой подтверждения число обращений в поддержку по ошибочным размерам снизилось почти в три раза за месяц.
Типичные ошибки
- Делают интерфейс визуально эффектным, но непривычным: меняют стандартное расположение кнопок «назад» и «далее» местами просто ради оригинальности, из-за чего пользователи чаще ошибаются.
- Используют слишком мелкий текст и маленькие кнопки для мобильной версии, хотя большая часть трафика у многих сайтов идет именно со смартфонов.
- Не показывают состояние загрузки или ошибки: пользователь нажимает кнопку оплаты, ничего не происходит на экране, и он не понимает, платеж прошел или нужно нажать еще раз.
- Копируют интерфейс конкурента один в один без учета собственной аудитории и задач продукта, хотя удачное решение в чужом контексте не гарантирует такого же результата в своем.
Как оценивают качество UI
Точных числовых метрик у UI как такового немного, чаще смотрят на косвенные признаки: сколько времени человек тратит на поиск нужной кнопки, сколько раз он ошибается кликом и возвращается назад, насколько по-разному выглядят похожие элементы на разных страницах сайта.
Полезный прием: показать несколько экранов человеку, который впервые видит продукт, и попросить назвать назначение каждой кнопки без подсказок. Если человек путается в очевидных для команды вещах, виноват тут обычно сам интерфейс, а внимательность человека ни при чем.
Частые вопросы
Кто занимается UI в компании? Обычно UI-дизайнер, который работает в связке с UX-дизайнером: один продумывает логику и путь пользователя, другой оформляет это визуально. В маленьких командах обе роли иногда совмещает один человек.
Можно ли оценить качество UI по одним скриншотам? Частично. По скриншоту видно стиль, цвета и расположение элементов, но не видно, как интерфейс ведет себя при реальном взаимодействии: скорость отклика, анимации, поведение на разных экранах. Полную оценку дает только тест на живом продукте.
Влияет ли UI на конверсию сайта? Да, напрямую. Неудобная форма заказа, мелкая кнопка оплаты или нечитаемый текст на кнопке могут стоить бизнесу заметной доли продаж, даже если сам продукт и цена полностью устраивают покупателя.
Работа над UI обычно идет рядом с проверкой юзабилити продукта: удобно ли реальным людям находить нужные функции и доводить действие до конца. Спроектировать интерфейс сайта с учетом целей бизнеса и поведения аудитории помогает услуга разработки сайтов.