Что такое UX-дизайн и как он влияет на бизнес

Человек приходит на сайт не для того, чтобы изучать ваш интерфейс.

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

Именно этот опыт называют UX.

UX-дизайн — это проектирование взаимодействия человека с сайтом, сервисом или приложением так, чтобы он мог понятно, удобно и без лишних препятствий решить свою задачу.

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

Речь не только о кнопках, цветах и расположении блоков. На пользовательский опыт влияют структура сайта, тексты, поиск, навигация, скорость загрузки, логика форм, работа на мобильном устройстве и даже то, насколько предложение компании соответствует ожиданиям клиента.

Поэтому UX — это не просто дизайнерская задача. Это точка пересечения продукта, маркетинга, технологий и бизнес-процессов.

Что такое UX-дизайн на простом примере

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

Он вводит в поиск «Давинес» вместо Davines. Сайт ничего не находит.

Покупатель пробует написать «Дайвинес». Результатов снова нет.

Тогда он открывает каталог, но не понимает, в какой категории искать нужный товар. Фильтров много, названия непонятные, а часть параметров доступна только после нескольких переходов.

Через пару минут человек закрывает сайт и отправляется на маркетплейс.

С технической точки зрения всё работало исправно:

• сайт открылся;
• поиск принял запрос;
• каталог загрузился;
• ошибок на экране не появилось.

Но клиент не достиг своей цели, а бизнес потерял потенциальную продажу.

Это и есть проблема пользовательского опыта. Это не абстрактный учебный пример: сейчас мы работаем с сайтом, где подобный сценарий нужно проверять на реальных поисковых запросах пользователей и поведении в каталоге.

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

• «давинес» → Davines;
• «дайвинес» → Davines;
• «давнес» → ближайшее совпадение Davines.

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

UX не гарантирует рост продаж сам по себе. Он помогает находить и устранять причины, по которым пользователь не может сделать то, зачем пришёл.

Бывает и обратная ситуация: сильное предложение продаётся даже через недоделанный сайт. В одном из наших прошлых проектов трафик запустили до того, как появились личный кабинет, автоматические письма и часть запланированных функций, но люди всё равно покупали — продукт оказался достаточно привлекательным. Это не доказывает, что UX не нужен. Скорее, такой случай помогает разделить влияние продукта и интерфейса: хороший сайт не создаст ценность из ничего, но может перестать терять уже существующий спрос, сократить ручную нагрузку на команду и сделать опыт после покупки предсказуемее.

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

UX и UI часто упоминают вместе, хотя они отвечают за разные стороны интерфейса.

UI — User Interface, пользовательский интерфейс. Это то, как сайт или приложение выглядит: цвета, типографика, кнопки, поля, иконки, карточки товаров и другие визуальные элементы.

UX — User Experience, пользовательский опыт. Это то, насколько понятно и удобно человек достигает своей цели.

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

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

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

Можно сказать проще:

UI — это то, что человек видит. UX — то, что с ним происходит.

Пользователь не изучает ваш сайт

Внутри компании сайт часто воспринимают как последовательную презентацию. Сначала посетитель должен прочитать вступление, затем изучить преимущества, познакомиться с компанией, посмотреть услуги и только после этого нажать кнопку.

Большинство людей используют сайты иначе.

Они быстро просматривают страницу, ищут знакомые ориентиры и пытаются ответить на несколько вопросов:

• Я попал туда, куда нужно?
• Здесь решают мою задачу?
• Сколько это стоит?
• Можно ли доверять компании?
• Что мне делать дальше?

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

Это не означает, что длинные тексты никому не нужны.

Одни посетители хотят сразу увидеть предложение, стоимость и кнопку действия. Другие изучают характеристики, условия, кейсы, отзывы и документы. Хорошая структура даёт короткий путь первым и достаточно информации вторым.

Проблемы начинаются, когда сайт заставляет каждого посетителя проходить один и тот же сценарий.

Например:

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

У человека ограничено внимание. Чем больше элементов приходится анализировать и чем больше решений принимать, тем выше вероятность, что он откажется от действия.

Усложнять просто. Упрощать сложно.

Как UX влияет на бизнес

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

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

Конверсия

Цепочка обычно выглядит так:

Человек понимает предложение → находит нужную информацию → снимает сомнения → доверяет компании → выполняет действие.

На каждом этапе могут появляться препятствия.

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

В интернет-магазине проблемы могут находиться в поиске, фильтрах, карточке товара, условиях доставки или оформлении заказа.

Задача UX — понять, где именно ломается путь, и предложить изменения, которые можно проверить.

Эффективность рекламы

Реклама приводит людей на сайт. Но она не может заставить их разобраться в непонятном предложении или пройти неудобную форму.

Представим, что два сайта получают по 10 000 посетителей при одинаковой стоимости трафика. На первом целевое действие выполняет 1% пользователей, на втором — 2%.

Второй сайт получает в два раза больше обращений при том же рекламном бюджете.

Это не означает, что разницу всегда создаёт только интерфейс. На результат также влияют аудитория, предложение, цена, репутация и качество трафика. Но если сайт теряет людей из-за непонятной структуры или сломанного сценария, бизнес платит за посетителей, которым не помогает стать клиентами.

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

Нагрузка на продажи и поддержку

Хороший интерфейс отвечает на вопросы до того, как человек обращается к сотруднику.

Если посетители регулярно спрашивают:

• сколько стоит услуга;
• какие документы понадобятся;
• как работает доставка;
• можно ли вернуть товар;
• где посмотреть статус заказа;
• почему платёж не прошёл,

часть этих вопросов может указывать на проблемы сайта или продукта.

Это не значит, что нужно заменить менеджеров справочным разделом. Но специалист не должен постоянно объяснять то, что интерфейс мог показать сам.

Понятные статусы, тексты ошибок, инструкции и условия снижают количество повторяющихся обращений и освобождают время команды для более сложных задач.

Удержание клиентов

Для сервисов и приложений важна не только первая регистрация. Человек должен решить задачу, получить результат и захотеть вернуться.

При этом большое время внутри продукта не всегда является хорошим показателем.

Пользователь может долго находиться на странице, потому что внимательно изучает полезный материал. А может — потому что не понимает, где найти нужную функцию.

Поэтому время нужно рассматривать вместе с другими данными:

• завершил ли человек сценарий;
• на каком этапе остановился;
• вернулся ли в продукт;
• столкнулся ли с ошибкой;
• обратился ли в поддержку.

Хороший UX не старается удержать человека внутри любой ценой. Он помогает быстрее получить нужный результат.

Доверие к компании

Пользователь не знает, как устроены процессы внутри бизнеса. Он делает выводы по доступным сигналам.

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

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

Но визуальная аккуратность не заменяет понятного предложения. Можно сделать дорогой и эффектный сайт, который всё равно не отвечает на главный вопрос посетителя: почему ему стоит выбрать эту компанию.

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

Из чего складывается пользовательский опыт

UX сайта состоит из множества связанных элементов. Для первичной диагностики их можно объединить в шесть групп.

1. Структура и информационная архитектура

Информационная архитектура определяет, как содержание сайта разделено на страницы, разделы и категории.

Например, покупатель интернет-магазина должен понимать, где искать товар: по типу продукта, бренду, назначению или другой знакомой характеристике.

На корпоративном сайте структура должна помогать разным посетителям найти свой путь: одному нужна конкретная услуга, другому — отраслевой опыт, третьему — условия сотрудничества.

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

Поэтому UX начинается не со списка страниц, а с вопроса: кто придёт на сайт и какую задачу каждый из этих людей попытается решить?

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

2. Тексты и заголовки

Текст в интерфейсе должен помогать принимать решения и выполнять действия.

Заголовок «Комплексные инновационные решения для устойчивого развития бизнеса» звучит солидно, но почти ничего не объясняет.

Понятный заголовок отвечает на вопросы:

• что предлагает компания;
• для кого;
• какую задачу решает;
• что отличает её от альтернатив.

Тексты кнопок, форм и ошибок тоже являются частью UX. «Отправить» сообщает меньше, чем «Получить расчёт». «Произошла ошибка» помогает меньше, чем объяснение причины и следующего шага.

3. Навигация

Навигация должна давать человеку ощущение контроля.

Пользователь понимает:

• где он находится;
• куда может перейти;
• как вернуться;
• что произойдёт после нажатия.

Если важные разделы спрятаны, одинаковые действия называются по-разному, а логика меню меняется от страницы к странице, человеку приходится каждый раз заново изучать интерфейс.

4. Сценарии и функциональность

Сценарий — это последовательность действий, с помощью которых человек решает задачу.

Например:

поиск товара → выбор варианта → добавление в корзину → оформление → оплата → получение подтверждения.

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

UX рассматривает не отдельный экран, а весь путь.

5. Визуальная иерархия

Визуальная иерархия помогает понять, что на странице главное, а что второстепенное.

Размер, контраст, расположение и свободное пространство должны направлять внимание. Если одинаково выделено всё, не выделено ничего.

Пользователь должен быстро замечать:

• основное предложение;
• ключевые условия;
• главное действие;
• важные предупреждения;
• текущий статус процесса.

Дизайн здесь работает не как украшение, а как способ организовать информацию.

6. Доступность и техническое качество

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

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

Технически работающая страница не обязательно является удобной. Скорость, адаптивность, отсутствие ошибок и доступность — такая же часть UX, как дизайн макетов.

Как проектируют хороший UX

Хороший пользовательский опыт редко появляется благодаря вдохновению одного дизайнера. Обычно это последовательный процесс, в котором решения связываются с задачами бизнеса и пользователей.

1. Определяют бизнес-цель

Перед изменением интерфейса нужно понять, какой результат нужен компании.

Например:

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

Формулировка «сделать сайт современнее» не объясняет, какую проблему должен решить проект.

2. Изучают пользователей и их задачи

Не стоит придумывать за клиента, что ему удобно и чего он хочет.

Источниками информации могут быть:

• разговоры с пользователями;
• веб-аналитика;
• записи пользовательских сессий;
• поисковые запросы внутри сайта;
• обращения в поддержку;
• вопросы менеджерам по продажам;
• отзывы;
• причины отказа от покупки;
• результаты юзабилити-тестирования.

Часто у бизнеса уже есть большая часть необходимых данных. Они просто находятся в разных отделах и не рассматриваются как единая картина.

Особенно полезно разговаривать не только с постоянными и довольными клиентами, но и с теми, кто не завершил покупку или выбрал конкурента. Именно они могут показать препятствия, которые бизнес изнутри уже перестал замечать.

Если провести такие интервью невозможно, стоит начать с сотрудников первой линии: менеджеров по продажам, консультантов и поддержки. Они регулярно слышат вопросы, возражения и формулировки клиентов. Часто это один из самых доступных источников UX-инсайтов.

3. Проектируют структуру

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

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

4. Собирают прототип

Прототип позволяет проверить логику до того, как команда потратит время на визуальный дизайн и разработку.

На нём можно увидеть:

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

Исправить структуру в прототипе обычно проще, чем после запуска готового продукта.

5. Создают визуальную систему

После проверки логики появляется визуальный дизайн: типографика, цвета, компоненты, состояния и правила поведения интерфейса.

Визуальная часть должна поддерживать структуру, а не маскировать её.

6. Передают решение в разработку

Дизайн не заканчивается после передачи макетов.

Нужно проверить, как решение реализовано:

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

Даже хорошо спроектированный UX можно потерять на этапе разработки.

7. Проверяют результат

До и после запуска важно определить, по каким признакам будет понятно, что изменение сработало.

Это могут быть:

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

Не каждое изменение удаётся оценить одной цифрой. Но без заранее определённых критериев команда рискует обсуждать результат на уровне мнений.

Иногда решение может раздражать самого дизайнера и при этом помогать бизнесу. В выпуске подкаста с Кристиной Тарасовой она вспоминает боковую кнопку связи, которая ей визуально не нравилась, но заметно влияла на конверсию сайта.

Это не означает, что любое навязчивое решение нужно оставлять ради цифр. Но пример показывает принцип: профессиональное решение нельзя оценивать только через «нравится — не нравится». Нужно смотреть, помогает ли оно пользователю, как влияет на показатели и не создаёт ли побочных проблем.

UX не заканчивается после запуска

Невозможно один раз спроектировать идеальный интерфейс и больше к нему не возвращаться.

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

После запуска стоит регулярно смотреть:

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

Улучшение UX необязательно начинается с полного редизайна.

Иногда достаточно:

• изменить структуру страницы;
• переписать заголовок;
• добавить важное условие;
• упростить форму;
• настроить поиск;
• объяснить ошибку;
• показать следующий шаг;
• изменить бизнес-процесс за интерфейсом.

Редизайн имеет смысл, когда текущая система действительно мешает развитию: структура не масштабируется, визуальный язык не соответствует бренду, компоненты работают непоследовательно, а локальные исправления становятся дороже пересборки.

Но если проблема находится в предложении, продукте или качестве трафика, новый внешний вид её не решит.

Как понять, что сайт теряет клиентов из-за UX

Попробуйте ответить на следующие вопросы.

Предложение

• Понятно ли за несколько секунд, чем занимается компания?
• Видит ли человек, какую задачу вы решаете?
• Может ли он быстро понять, подходит ли предложение именно ему?
• Не подменяют ли конкретику общие слова о качестве и профессионализме?

Информация

• Можно ли найти цену или понять, от чего она зависит?
• Видны ли основные условия сотрудничества, покупки или доставки?
• Есть ли ответы на причины сомнений?
• Не приходится ли клиенту обращаться к менеджеру за базовой информацией?

Действия

• Понятно ли, что нужно сделать дальше?
• Выделено ли главное действие?
• Не конкурируют ли между собой несколько равнозначных кнопок?
• Можно ли завершить сценарий без необязательной регистрации и лишних полей?

Навигация и поиск

• Может ли человек быстро найти нужный раздел или товар?
• Понимает ли поиск опечатки, транслитерацию и разные варианты названий?
• Помогает ли страница без результатов продолжить путь?
• Совпадает ли структура каталога с тем, как выбирают покупатели?

Мобильная версия

• Удобно ли пользоваться сайтом одной рукой?
• Достаточно ли крупные кнопки и текст?
• Не перекрывают ли экран всплывающие элементы?
• Можно ли заполнить и проверить форму без постоянного масштабирования?

Данные и процессы

• Известно ли, на каком этапе пользователи уходят?
• Собираются ли ошибки форм и неудачные поисковые запросы?
• Передают ли продажи и поддержка повторяющиеся вопросы продуктовой команде?
• Соответствует ли сайт нынешнему уровню и предложению бизнеса?

Если на значительную часть вопросов сложно ответить, проблема не обязательно решается редизайном. Сначала нужно определить, где именно ломается путь пользователя.

Частые вопросы о UX-дизайне

Что такое UX простыми словами?

UX — это впечатление и результат взаимодействия человека с сайтом, приложением, сервисом или продуктом. Хороший UX помогает человеку понятно и без лишних препятствий решить свою задачу.

В чём разница между UX и UI?

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

Может ли хороший UX увеличить конверсию?

Хороший UX может убрать препятствия, из-за которых пользователи не выполняют целевое действие. Но конверсия также зависит от предложения, цены, доверия, аудитории и качества трафика. Поэтому влияние изменений нужно проверять по данным.

Как понять, что сайту нужен UX-аудит?

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

Всегда ли для улучшения UX нужен редизайн?

Нет. Иногда проблему можно решить изменением структуры, текста, поиска, формы, навигации или бизнес-процесса. Полный редизайн нужен, когда локальные исправления не устраняют системные ограничения текущего сайта.

Главное

UX-дизайн — это не попытка сделать сайт удобным «вообще».

Он начинается с конкретных вопросов:

• зачем человек пришёл;
• что он пытается сделать;
• что мешает ему пройти путь;
• как это препятствие влияет на бизнес;
• какое изменение имеет смысл проверить.

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

Не всегда плохая конверсия означает, что сайту нужен полный редизайн. Проблема может находиться в структуре, текстах, поиске, форме заявки, продукте или самом предложении.

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