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