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

UX сайта, или User Experience, — это опыт человека при взаимодействии с сайтом:

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

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

Для собственника или маркетолога понимание UX полезно ещё по одной причине. Этим термином часто называют почти любые проблемы сайта, объединяя дизайн, скорость, тексты, рекламу, SEO и даже работу отдела продаж. В результате становится непонятно, что именно требует изменений.

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

Что входит в UX сайта

Пользовательский опыт складывается из всей последовательности взаимодействия с сайтом.

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

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

На каждом этапе работают разные элементы сайта.

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

UX связывает эти элементы с задачей пользователя.

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

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

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

Эти понятия связаны, поэтому в разговорах о сайтах их часто смешивают.

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

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

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

Например, кнопка может быть хорошо заметна и технически исправна. С точки зрения UI с ней всё в порядке. Но если посетитель не понимает, что произойдёт после нажатия, возникает проблема пользовательского опыта.

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

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

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

Пользовательский сценарий как основа UX

Сценарий начинается с задачи человека и уже затем связывается со структурой сайта.

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

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

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

Даже на одном сайте обычно существует несколько сценариев.

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

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

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

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

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

Один интерфейс воспринимается по-разному на компьютере и смартфоне.

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

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

Поэтому мобильный UX нельзя оценивать только по тому, помещается ли страница в ширину экрана.

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

Техническая сторона таких ситуаций подробно разобрана в материале о проверке адаптивной вёрстки сайта.

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

Что часто ошибочно называют UX-проблемой

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

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

Если предложение проигрывает конкурентам по существенным для клиента условиям, новый дизайн не устранит разницу в самом продукте.

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

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

Поэтому небольшое количество обращений ещё не доказывает наличие проблемы с UX. В такой ситуации требуется проверять более длинную цепочку — от привлечения аудитории до фактического получения обращения. Она разобрана в материале «Сайт не приносит заявки: где теряются клиенты».

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

Пример: два сценария на одном сайте

На сайте NAIL APOKALIPSIS есть две разные аудитории.

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

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

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

В проекте сценарии разделили. Услуги ведут через реальные работы к онлайн-записи, обучение получило собственное направление. Дополнительно используется интерактив выбора длины, который помогает сопоставить обозначения 06, 08, 12 и 20 с визуальным результатом.

Устройство проекта показано в кейсе NAIL APOKALIPSIS.

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

Почему содержание тоже влияет на пользовательский опыт

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

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

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

Поэтому содержание тесно связано с UX.

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

Перегружать каждую страницу объяснениями тоже не требуется. Человеку проще воспринимать информацию последовательно, по мере продвижения к решению.

Обратная связь интерфейса

Часть пользовательского опыта формируется уже после действия.

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

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

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

Как бизнесу формулировать задачу на UX

Просьба «сделать сайт удобнее» слишком широкая. Формулировка «сделать современный UX» тоже мало помогает.

Для начала полезно определить четыре вещи:

1. Кто пользуется этим участком сайта?

2. С какой задачей человек приходит?

3. Что ему необходимо понять или сделать?

4. Как выглядит успешное завершение сценария?

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

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

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

Как оценивать UX без одной главной метрики

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

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

Но цифры требуют контекста.

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

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

Что в итоге означает хороший UX сайта

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

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

Единого шаблона идеального UX для любого бизнеса нет.

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