UX и UI: в чём разница и почему заказчику важны оба

UX и UI объясняют метафорами: «UX — это скелет, UI — кожа», «UX — двигатель, UI — приборная панель». Метафоры звучат убедительно и ничего не проясняют.

Полезнее посмотреть, какие конкретные решения принимаются на каждом уровне.

UX — это решения о том, что происходит

Вопросы, на которые отвечает UX-часть работы:

• Сколько шагов в оформлении заказа и какие?
• Нужна ли регистрация до покупки?
• Что видит человек, если фильтр ничего не нашёл?
• Что происходит после отправки формы — куда он попадает и что узнаёт?
• Какие поля обязательны и почему именно они?
• Как устроен каталог: по типу услуги, по отрасли клиента или по цене?
• Что показывать первым на странице услуги — цену, состав или примеры работ?

Заметьте: ни один из этих вопросов не про внешний вид. Ответы на них можно записать текстом, и они останутся верными при любом визуальном стиле.

UI — это решения о том, как это выглядит и ощущается

• Какого размера заголовок и какой шрифт;
• где кнопка и как она выглядит в нажатом состоянии;
• цвет ошибки и цвет успеха;
• отступы, сетка, поведение при сужении экрана;
• иконки, иллюстрации, фотографии;
• анимация перехода и её длительность.

UI — это не «красота». Это точность: кликабельное должно выглядеть кликабельным, важное — крупнее второстепенного, ошибка — читаться как ошибка.

Как выглядит перекос в одну сторону

Хороший UI, плохой UX. Красивый сайт, на котором нельзя найти цену. Стильная форма из двенадцати полей. Аккуратная типографика в каталоге, где нет фильтра по единственному параметру, который волнует покупателя. Такой сайт нравится на презентации и не приносит заявок.

Хороший UX, плохой UI. Логичный, проходимый, но выглядит как внутренняя админка. Работает, но не вызывает доверия — а для услуги за сотни тысяч доверие и есть половина решения. Читается как «сделано на коленке», даже если бизнес серьёзный.

Второй перекос встречается реже, но лечится дешевле: структура уже правильная, надо переодеть. Первый обычно означает переделку.

Почему их разделяют в процессе

Порядок работ не случаен: сначала решения о поведении, потом о внешнем виде. Причина простая — менять их стоит по-разному.

Переставить блоки в схеме — полчаса. Переставить их в готовом макете — день. Переставить в свёрстанном шаблоне — несколько дней и риск сломать адаптив. Поэтому спорные вопросы структуры лучше закрывать до того, как появился первый красивый экран: на красивый экран психологически труднее сказать «давайте иначе».

Что проверять заказчику в макете

Смотреть макет как картинку — упущенная возможность. Проверьте по списку:

1. За сколько секунд видно цену или её порядок? Если её нет вовсе, это решение, а не забывчивость — спросите, почему так.
2. Пройдите сценарий пальцем по мобильному макету. От входа до отправки формы. Все экраны этого пути должны существовать.
3. Спросите про состояния. Как выглядит форма с ошибкой, пустой результат фильтра, длинное название товара в карточке, отсутствие фотографии.
4. Проверьте самый длинный текст. Дизайн обычно рисуют на коротких заголовках, а в жизни у услуги название в четыре строки.
5. Посмотрите на кнопки. На странице должно быть понятно, какое действие главное. Пять одинаково ярких кнопок — это отсутствие выбора.
6. Тёмная тема, если она заявлена. Не инверсия, а вторая согласованная палитра — подробнее в статье «Тёмная тема сайта».

Где здесь доступность

Значительная часть UX-требований совпадает с требованиями доступности: подписи у полей, видимый фокус, контраст, возможность пройти форму с клавиатуры, текстовые сообщения об ошибке.

Это не отдельная работа «для особых пользователей». Это те же вещи, которые ломают путь у обычного человека на плохом экране, в перчатках или при ярком солнце. Подробнее — «Доступность сайта для бизнеса».

Коротко

UX отвечает на вопрос «получится ли у человека», UI — «поверит ли он вам по дороге». Оба нужны, и порядок между ними имеет цену: решения о поведении принимаются первыми, потому что позже они дорожают.

Состав работ по дизайну и вёрстке — в прайсе.

Оригинал опубликован на verstalabs.ru.