Что такое UI и чем UI-дизайн отличается от UX
UI (User Interface, пользовательский интерфейс) — UI это внешний вид интерфейса: кнопки, шрифты, цвета, иконки, отступы и состояния элементов, через которые человек взаимодействует с сайтом или приложением.
Если UX отвечает, где стоит кнопка и что она делает, UI отвечает, как она выглядит и как реагирует на нажатие. На практике это одна работа, которую делят на этапы: сначала прототип и логика, потом визуальный слой.
Что входит в UI:
- типографика: шрифты, размеры, межстрочные интервалы;
- цвета: фон, текст, акценты, цвет ошибок и успеха;
- компоненты: кнопки, поля, чекбоксы, карточки, модальные окна;
- состояния: наведение, нажатие, неактивная кнопка, загрузка;
- иконки и иллюстрации;
- сетка и отступы.
Всё это собирают в UI-кит или дизайн-систему. Это библиотека готовых элементов, из которых строятся новые страницы. Сайт с дизайн-системой выглядит цельно, и новые разделы делаются быстрее: пример, страница новой услуги собирается из готовых блоков за день.
Как UI влияет на заявки. Контраст кнопки, размер шрифта, понятность иконок напрямую влияют на то, заметит ли человек действие. Пример: серая кнопка «Записаться» на сером фоне против яркой кнопки в фирменном цвете. На тестах второй вариант часто даёт заметно больше нажатий. Цифры в каждой нише свои, поэтому такие вещи проверяют A/B-тестом.
Доступность тоже часть UI. Текст должен читаться людьми со слабым зрением, контраст текста к фону по стандарту WCAG не ниже 4,5 к 1, поля форм подписаны, кнопки достаточного размера для пальца.
Частые ошибки. Пять разных стилей кнопок на одном сайте. Модный светло-серый текст, который невозможно читать на солнце. Анимации, которые тормозят телефон. Иконки без подписей, смысл которых понятен только дизайнеру.
В разработке мы делаем UI после согласованного прототипа, поэтому обсуждение цвета кнопки не тормозит решение о том, что на странице должно быть.