Что такое UX/UI-дизайн: простыми словами для владельца сайта

Что такое UX/UI-дизайн?

UX (User Experience) переводят как «пользовательский опыт», UI (User Interface) как «пользовательский интерфейс». По определению Практикума, UX-дизайн занимается тем, как работает интерфейс, а UI-дизайн фокусируется на его внешнем виде. Проще говоря, UX отвечает на вопрос «удобно ли дойти до цели», а UI на вопрос «понятно ли, что нажимать, и приятно ли на это смотреть».

В базе знаний Elma365 разница описана ещё короче: UX отвечает за то, как легко человеку добраться до результата, а UI делает этот путь наглядным и приятным. Там же упомянут международный стандарт ISO 9241-210, который описывает проектирование, ориентированное на человека. Значит, у дисциплины есть формальная основа, и она шире вкусовых споров о красоте.

Само направление выросло вместе с техникой. По обзору Bang Bang Education, массовый интерес к графическим интерфейсам начался с компьютера Macintosh, который был доступен широкой аудитории, а выход iPhone дал толчок мобильному UX/UI-дизайну и заставил адаптировать сайты под смартфоны. Сегодня любая страница, форма заказа или личный кабинет проходит через руки дизайнера интерфейсов, пусть даже в маленькой команде эту роль играет владелец проекта.

Область применения широка: по перечню из того же материала Практикума, UX/UI-дизайн нужен везде, где человек работает с цифровым продуктом, от интернет-магазинов и мобильных приложений банков до корпоративных систем вроде CRM и государственных порталов. Для владельца бизнеса это значит одно: у любой страницы с формой, каталогом или кабинетом есть интерфейс, и он либо помогает продавать, либо мешает.

Чем UX отличается от UI?

Коротко: сначала проектируют UX, потом поверх него рисуют UI. В том же материале Elma365 порядок работ описан именно так: структура и логика идут раньше визуального интерфейса. Если сделать наоборот, красивые экраны придётся переделывать, когда выяснится, что путь пользователя в них не помещается.

Возьмите кнопку «Купить». UX решает, на каком шаге она нужна, сколько экранов отделяет человека от оплаты и что произойдёт после нажатия. UI решает, какого она цвета и размера, как выглядит при наведении и не сливается ли с фоном. Красивая кнопка на запутанном пути заказ не спасёт. Понятный путь с еле заметной кнопкой тоже теряет часть покупателей.

В крупных компаниях эти роли часто делят между разными людьми, и в одном из разборов встречается пример, где UX и UI ведут разные дизайнеры, потому что сервис состоит из сложных графиков и таблиц. В небольших проектах работает универсал, а граница между ролями постепенно стирается. Для заказчика вывод практичный: в техзадании указывайте оба результата, схему пути и визуальные макеты, иначе вы получите только одну половину.

Этапы работы над интерфейсом

Работа над интерфейсом идёт по циклу, и каждый этап отвечает на свой вопрос. Пропущенный шаг даёт о себе знать после запуска: приходится переделывать экраны, а недовольные посетители уже ушли. Базовая схема выглядит так.

1. Анализ задачи. Дизайнер беседует с будущими пользователями, изучает конкурентов и данные аналитики и выясняет на вопрос, для кого делается продукт.
2. Прототип. Набросок структуры, от схемы пути до кликабельных экранов, показывает, как человек будет пользоваться продуктом.
3. Визуальный дизайн. Появляются цвета, шрифты, кнопки и иконки, собранные в единый набор компонентов.
4. Проверка. Макет показывают живым людям и вносят правки: человек быстро находит кнопку или теряется, решают наблюдения, а не мнение автора.

Хороший пример проверки по данным даёт кейс интернет-магазина «Антошка». Команда выделила три ключевые страницы: карточку товара, корзину и оформление заказа. Карточку перестроили так, чтобы внимание шло от фото к цене и кнопке покупки, а затем сравнили аналитику за два месяца до и после запуска. Доля тех, кто оформил заказ после просмотра карточки, выросла на 45% на десктопе и на 47% на мобильных.

Для макетов и прототипов чаще всего берут Figma, Sketch и Adobe XD, об этом сказано в разделе об инструментах дизайнера в том же материале Практикума. Рабочий макет в таком редакторе доступен разработчикам и заказчику по ссылке, поэтому правки обсуждаются на картинке, и пересказывать их в чате не нужно.

Дизайнер интерфейса при этом остаётся посредником между тремя сторонами. Для пользователя он ищет удобный путь, для бизнеса держит в голове целевое действие, для разработчика готовит макеты, которые можно реализовать. Когда одна из сторон выпадает, получается либо красивая страница без заявок, либо удобный прототип, который нельзя собрать в срок.

Правила удобного интерфейса

Универсальный набор правил придумал Якоб Нильсен: десять эвристик, которые описаны на странице Nielsen Norman Group и которые Практикум советует начинающим дизайнерам. Жёсткими требованиями они не считаются, это ориентиры для проверки: по ним удобно пройтись по своей странице и найти слабые места. Вот пять, которые чаще всего решают судьбу страницы.

• Видимость состояния. Интерфейс должен вовремя сообщать, что происходит: форма отправлена, файл загружается, заказ принят.
• Единообразие. Люди проводят большую часть времени в чужих продуктах, поэтому корзина, поиск и меню должны выглядеть привычно.
• Предотвращение ошибок. Продуманный дизайн устраняет проблемы заранее: подсказки в полях, значения по умолчанию, подтверждение опасных действий.
• Минимализм. Каждый лишний блок конкурирует с нужной информацией и снижает её заметность.
• Понятные ошибки. В тексте сообщения простыми словами указана причина сбоя и предложен выход.

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

Эти правила легко проверить за вечер. Откройте форму заявки и ответьте себе: видит ли человек, что заявка ушла? Не придётся ли ему вводить телефон заново после ошибки? Нет ли рядом баннера, который отвлекает от главной кнопки? Каждый такой ответ превращается в конкретную задачу для разработчика.

Визуальные правила проще: заметная иерархия, достаточный контраст, один стиль для кнопок и заголовков, адаптация под телефон. За техническую часть оформления отвечают стили, о них мы писали в справочнике про CSS. Дизайнер задаёт, как должно выглядеть, а верстальщик переносит это в код без отклонений.

Влияние UX на конверсию и продвижение

Деньги в UX вкладывают не из любви к красоте. По данным Surf, Forrester Research оценивает возврат так, что каждый вложенный в UX доллар приносит сто долларов, а исследование Nielsen Norman Group показывает, что 88% пользователей не возвращаются после негативного опыта. Если приводить посетителей рекламой или из поиска, а интерфейс их теряет, бюджет работает вхолостую.

Скорость тоже часть UX. Авторы кейса на Хабре напоминают заявление аналитиков Google о том, что каждые полсекунды дополнительного ожидания снижают конверсию в среднем на 10-15%. Команда этого интернет-магазина ускорила загрузку, переставила элементы страницы товара по приоритету и довела конверсию с 0,8% до 1,3%, а средний недельный процент отказов снизился с 22,8% до 17-18%. Это отчёт самой команды, поэтому к цифрам стоит относиться как к ориентиру, а не как к обещанию.

Даже мелкая правка текста кнопки меняет результат. Платёжный сервис Sezzle заметил, что сегменты аудитории по-разному откликаются на призывы к действию, и показал новым пользователям кнопку «Попробовать бесплатно», а постоянным «Оформить рассрочку». По данным британского агентства, конверсия выросла на 15% после анализа поведения и A/B-тестирования.

Дизайн больше не решает проблемы пользователя в полной мере.

Хайди Тауссент, менеджер команды Rapid Research в Google, цитата из того же кейса на Хабре

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

Как проверить UX своего проекта?

Для проверки не нужен отдельный отдел исследований. Хватит метрики, записей посещений и нескольких знакомых, которые согласны пройти путь заказа. Порядок такой, от простого к сложному.

1. Назовите целевое действие страницы: заявка, звонок, покупка, подписка.
2. Пройдите путь с телефона, как обычный посетитель, и запишите каждую заминку.
3. Откройте Вебвизор в Яндекс Метрике и посмотрите записи визитов: где человек замирает, где возвращается назад, где бросает форму.
4. Сравните страницы по отказам, глубине просмотра и времени, отдельно для телефонов и компьютеров.
5. Попросите двух-трёх знакомых выполнить задачу без подсказок и молча наблюдайте.
6. Исправьте одну гипотезу, дождитесь данных и сравните показатели до и после.

Вебвизор записывает действия посетителей и показывает их в формате видео: движения курсора, клики, прокрутку и работу с формами. Одна запись, где человек трижды промахивается мимо кнопки, убедительнее любого мнения в рабочем чате. Только не делайте выводов по одному визиту: ищите повторяющиеся паттерны.

Тот же интернет-магазин из кейса на Хабре разбирал внутренние страницы по четырём показателям: отказы, глубина просмотра, время и тип источника. Так нашлись проблемные страницы на разных устройствах. После правок на мобильных телефонах на трети страниц отказы упали с 40% до 18%, а посетители стали чаще переходить из каталога в карточку товара.

Ошибки в интерфейсе, которые стоят заказов

Большинство потерь связано с мелочами, которые накапливаются годами. Вот ошибки, которые встречаются чаще всего.

• Главная кнопка сливается с фоном или спрятана ниже экрана.
• Рядом с основным товаром или услугой стоят блоки, которые уводят внимание.
• Форма просит лишнее, а после ошибки очищает поля.
• Мобильная версия получается копией десктопной и остаётся неудобной для пальца.
• Страница грузится медленно из-за тяжёлых картинок и лишних скриптов.
• Всплывающие окна закрывают содержимое, и крестик не найти.

Показательна история «Антошки». В том же кейсе сказано, что за несколько лет доля пользователей с мобильных устройств выросла на 400%, а интерфейс остался прежним. Рядом с основным товаром стоял блок дополнительных товаров, который отвлекал от решения. Кнопка целевого действия и итоговая стоимость в корзине находились внизу страницы, и при большом заказе их не было видно.

Такие недочёты видно только глазами посетителя. Поэтому раз в квартал проходите свой путь заказа заново, особенно после изменений в каталоге, акций и добавления новых блоков. Об одном из частых раздражителей, баннере согласия на файлы cookie, мы писали отдельно: его оформление тоже часть UX, и его удобно сделать так, чтобы он не закрывал содержимое. Подробности в справочнике про cookie.

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

Если ресурсов мало, начните с одной страницы, которая приводит больше всего трафика. Исправьте на ней главное препятствие, замерьте результат и только потом переходите к следующей. Так вы не растянете работу на месяцы и сразу увидите, что даёт отдачу. Результаты записывайте в таблицу: дата правки, страница, показатель до и после. Через несколько итераций у вас появится собственная база проверенных решений для будущих страниц.

Частые вопросы