При нахождении на сайте Вы соглашаетесь с политикой обработки персональных данных.
Всё понятно!
UI: User Interface
UI (User Interface, «пользовательский интерфейс») — это комплекс визуальных и интерактивных элементов, с помощью которых человек управляет программой, сайтом или устройством: кнопок, меню, полей, текста и переходов между экранами.
Кратко
- UI это то, что человек видит и нажимает; UX шире и включает весь опыт взаимодействия с компанией, услугами и продуктами.
- Интерфейсы бывают не только графическими: есть командная строка, сенсорные, голосовые и другие.
- Качество UI проверяют по общим правилам (10 эвристик юзабилити) и по конкретным нормам, например контрасту текста по WCAG: не менее 4,5:1 для обычного текста.
- Хороший UI не заменяет полезный контент и понятное предложение: идеальный интерфейс может дать плохой UX.
Кому и зачем это знать
С запросом «UI» приходят люди с разными задачами. Найдите свою ситуацию.
Владелец сайта или бизнесаСитуация: Дизайнер или подрядчик говорит: «нужно доработать UI», а вы не уверены, что именно и зачем.Зачем: UI это внешний вид и поведение страницы: где кнопка, как читается текст, понятно ли меню. От него зависит, найдёт ли посетитель нужное действие, но не то, нужен ли ему сам продукт.Что сделать: Попросите показать список проблем интерфейса по конкретным экранам: что не так, кому мешает, как проверили. Просите правки по правилам (контраст, размер кнопок, понятность меню), а не «сделать красивее». Для независимой оценки закажите usability-аудит.
Маркетолог, руководитель проектаСитуация: Конверсия страницы низкая, и нужно понять, виноват ли интерфейс.Зачем: Интерфейс отвечает за путь к действию, но причина низкой конверсии может быть в предложении, цене или трафике.Что сделать: Сначала пройдите путь сами с телефона и компьютера и отметьте места, где задержались. Затем сверьте с 10 эвристиками из таблицы ниже. Правки делайте по одной и сравнивайте результат до и после, иначе непонятно, что сработало.
Дизайнер-новичокСитуация: Нужно понять, чем занимается UI-дизайнер и чем это отличается от UX.Зачем: UI-часть работы это внешний вид и поведение элементов: цвет, шрифты, размеры, состояния кнопок. UX-часть шире и включает исследование пользователей и логику сценариев.Что сделать: Начните с правил: 10 эвристик юзабилити и критерии контраста WCAG. Собирайте работы, в которых видно, какую задачу пользователя решает интерфейс. Если ищете практику, посмотрите стажировку для веб-дизайнеров по ссылке в конце страницы.
РазработчикСитуация: Дизайнер передал макеты, и нужно реализовать интерфейс без потери удобства.Зачем: Результат зависит не только от макета: состояния элементов, доступность с клавиатуры, читаемость на разных экранах.Что сделать: Проверяйте контраст текста по числам WCAG, размер крупного текста по определению (не менее 18 пунктов или 14 жирных), работу на узких экранах. Обсуждайте с дизайнером состояния элементов заранее, а не после вёрстки.
Новичок, студентСитуация: Встретили «UI/UX» в вакансии, курсе или задании и не поняли, чем они отличаются.Зачем: Термины часто пишут вместе, но это разные вещи: UI интерфейс, UX опыт.Что сделать: Запомните: UI то, с чем взаимодействуют, UX всё, что человек испытывает при взаимодействии. Сравнение в таблице ниже.
Из чего состоит UI и какие бывают интерфейсы
По общему определению, пользовательский интерфейс это пространство, где происходит взаимодействие человека и машины. Он включает всё, что мы видим и с чем взаимодействуем на экране.
| Элемент UI | Что это | Пример на сайте |
|---|---|---|
| Элементы управления | кнопки, поля ввода, переключатели, формы | кнопка «Оставить заявку», поле телефона |
| Навигация | меню, хлебные крошки, переходы между страницами | меню разделов, ссылки на соседние страницы |
| Текст и типографика | шрифты, размеры, интервалы, цвет текста | заголовки, читаемость абзацев |
| Цвет и композиция | палитра, расположение блоков, свободное пространство | выделение главной кнопки цветом |
| Состояния и отклик | реакция на нажатие, сообщения об ошибках, анимация | подсветка поля с ошибкой в форме |
| Адаптивность | работа на разных размерах экрана | та же страница на телефоне и компьютере |
Интерфейсы бывают не только графическими. В справочной статье перечислены, например, графические (GUI), командная строка (CLI), сенсорные, голосовые и разговорные интерфейсы, включая чат-ботов, а также жестовые. Для сайта чаще всего говорят о графическом интерфейсе.
Чем UI отличается от UX, юзабилити и веб-интерфейса
UI это интерфейс, то есть то, с чем взаимодействует человек, а UX шире: по определению Nielsen Norman Group, он охватывает все аспекты взаимодействия конечного пользователя с компанией, её услугами и продуктами.
| Понятие | Что это | Отношение к UI |
|---|---|---|
| UI | интерфейс: элементы, с которыми взаимодействует человек | предмет этой страницы |
| UX | весь опыт взаимодействия с компанией, услугами и продуктами | UI очень важная его часть, но не весь UX |
| Юзабилити | качество интерфейса: насколько им удобно пользоваться | свойство UI (по формулировке Nielsen Norman Group) |
| Веб-интерфейс | интерфейс, с которым человек работает в браузере | частный случай UI для сайтов и веб-приложений |
| Дизайн сайта | общий вид и структура сайта | шире UI: включает структуру и содержание |
Пример от Nielsen Norman Group: идеальный интерфейс сайта с рецензиями на фильмы не спасёт, если сами рецензии слабые. Поэтому UI нельзя считать единственной причиной хорошего или плохого опыта.
Как оценить качество UI: 10 эвристик юзабилити
Nielsen Norman Group в 1994 году опубликовала 10 эвристик юзабилити, то есть 10 общих правил для интерфейсов, и проверила текст в январе 2024 года. Это широкие правила, а не точные требования. Перевод названий наш.
| Эвристика | Что проверить на своём сайте |
|---|---|
| Видимость состояния системы | понятно ли, что происходит: форма отправлена, страница загружается |
| Соответствие системы и реального мира | используются ли привычные клиенту слова, а не внутренние термины |
| Пользовательский контроль и свобода | можно ли вернуться или отменить действие |
| Согласованность и стандарты | выглядят и работают ли одинаковые элементы одинаково |
| Предотвращение ошибок | мешает ли форма заранее ошибиться, а не только ругается потом |
| Узнавание вместо припоминания | не нужно ли помнить информацию с предыдущего экрана |
| Гибкость и эффективность использования | удобно ли и новичку, и опытному пользователю |
| Эстетика и минимализм | нет ли лишних элементов, которые отвлекают от главного |
| Помощь в распознавании и исправлении ошибок | понятны ли сообщения об ошибках и что делать дальше |
| Справка и документация | есть ли подсказки там, где они нужны |
Проверка контраста текста по WCAG: числа и пример
Одна из немногих точных норм UI это контраст текста с фоном. По критерию WCAG уровня AA (1.4.3) контраст обычного текста должен быть не менее 4,5:1, крупного не менее 3:1, а крупным считается текст от 18 пунктов или от 14 пунктов жирного начертания. Цель нормы в том, чтобы текст могли прочитать люди с умеренно сниженным зрением.
| Текст | Условный контраст | Результат по AA |
|---|---|---|
| Обычный абзац, серый на белом | 3,2:1 | не проходит: нужно 4,5:1 |
| Крупный заголовок, тот же цвет | 3,2:1 | проходит: нужно 3:1 |
| Обычный абзац, тёмно-серый на белом | 7:1 | проходит |
Значения контраста в примере условные, выдуманы для иллюстрации. Реальное отношение яркости цветов проверяйте в инструменте для проверки контраста и вносите в требования к макету.
Что делать с интерфейсом сайта: решения по ситуациям
| Что видите | Что сделать |
|---|---|
| Посетители не находят кнопку заявки | сделайте главное действие заметным по цвету и месту, проверьте на телефоне и компьютере |
| Текст трудно читать | проверьте контраст и размер шрифта по нормам WCAG |
| Форма заявки отпугивает | уберите лишние поля, добавьте понятные сообщения об ошибках |
| Одинаковые элементы выглядят по-разному | приведите кнопки, заголовки и ссылки к единому виду |
| Неясно, что именно не так | закажите usability-аудит или проведите проверку по 10 эвристикам и сравните результат до и после правок |
| Сайт устарел целиком | обсудите редизайн: он имеет смысл, когда проблемы системные, а не в одной кнопке |
Типичные ошибки
- Считать UI и UX одним и тем же: интерфейс часть опыта, но не весь опыт.
- Оценивать интерфейс «нравится или нет», а не по правилам и проверке на пользователях.
- Улучшать внешний вид и не проверять доступность: контраст, размер текста, работа на телефоне.
- Менять много элементов сразу и потом не понимать, что повлияло на результат.
- Ждать от красивого интерфейса того, что должно давать предложение и содержание.
Частые вопросы
UI: что это такое простыми словами?
Всё, с чем человек взаимодействует на экране: кнопки, меню, поля, текст, цвета и переходы между страницами.
User Interface: как переводится?
«Пользовательский интерфейс»: пространство, где человек и машина взаимодействуют.
Чем UI отличается от UX?
UI это интерфейс, UX весь опыт взаимодействия с компанией, услугами и продуктами. Интерфейс важная часть UX, но не весь UX.
Что такое графический интерфейс?
Интерфейс, в котором человек управляет программой с помощью окон, значков и мыши или касаний, а не командами.
Какие бывают виды интерфейсов?
Графические, командная строка, сенсорные, голосовые, жестовые и другие. Для сайтов чаще всего говорят о графическом.
Как проверить качество интерфейса сайта?
Пройдите путь клиента сами с телефона и компьютера, сверьтесь с 10 эвристиками юзабилити, проверьте контраст текста по WCAG и при необходимости закажите usability-аудит.
Какой контраст текста нужен по WCAG?
Для уровня AA не менее 4,5:1 для обычного текста и 3:1 для крупного (от 18 пунктов или от 14 жирных).
Связанные термины
- UX: User Experience: весь опыт взаимодействия, а UI только его интерфейсная часть
- Веб-интерфейс: интерфейс для работы через браузер, частный случай UI
- Дизайн сайта: общий вид и структура сайта, шире интерфейса
- RWD: Responsive Website Design: приём, при котором интерфейс подстраивается под размер экрана
- CX: Customer Experience: впечатление клиента от всех контактов с компанией, шире UX
Не понимаете, что мешает посетителям пользоваться сайтом? Мы проведём usability-аудит интерфейса.
Usability-аудит