Как улучшить пользовательский опыт на сайте?

Основные направления работы:

• определить, зачем разные посетители приходят на сайт

• проверить путь от входа на страницу до заявки, заказа или другого результата

• упростить навигацию и сделать названия разделов понятными

• убрать лишние действия, но сохранить необходимые для бизнеса данные

• проработать ошибки, пустые состояния и подсказки

• проверить сценарии на мобильных устройствах и после публикации изменений

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

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

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

Начните с главных задач пользователя

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

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

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

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

Проверяйте весь путь пользователя, а не отдельную страницу

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

Проверка пользовательского пути обычно включает следующие этапы:

1. Откуда человек попадает на сайт и соответствует ли страница его ожиданиям

2. Как он находит нужный раздел, товар или услугу

3. Какие сведения помогают ему принять решение

4. Какое действие сайт предлагает выполнить

5. Что происходит после заявки, заказа, оплаты или авторизации

6. Как пользователь понимает, что действие завершилось успешно

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

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

Найдите места, в которых пользователи испытывают затруднения

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

Информацию о затруднениях пользователей можно собрать из следующих источников:

• статистики посещений и последовательности переходов

• записей пользовательских сессий

• поисковых запросов внутри сайта

• ошибок форм, оплаты и авторизации

• обращений в отдел продаж и службу поддержки

• наблюдения за тем, как человек выполняет конкретную задачу

• отзывов клиентов и сотрудников, работающих с заявками

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

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

Сделайте структуру сайта понятной без знания компании изнутри

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

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

• где он находится

• где искать нужную информацию

• какое действие можно выполнить дальше

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

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

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

Контент должен помогать принять решение

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

На странице услуги обычно нужны:

• понятное описание результата

• условия и ограничения

• порядок работы

• исходные данные, которые потребуются от клиента

• объяснение факторов стоимости или сроков

• следующий шаг и способ связаться с компанией

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

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

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

Формы должны помогать завершить действие

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

При проверке формы важно обратить внимание на следующие элементы:

• понятные названия полей и примеры заполнения

• визуальное различие обязательных и необязательных данных

• объяснение требования к формату телефона, даты или номера документа

• сохранение уже введённой информации после ошибки

• сообщение рядом с полем, которое нужно исправить

• защита от повторной отправки

• понятное подтверждение успешного действия

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

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

Ошибка должна объяснять, что произошло и что делать дальше

Сообщение об ошибке является частью пользовательского сценария. Фраза «произошла ошибка» сообщает о проблеме, но не помогает её решить

Полезное сообщение отвечает на три вопроса:

• какое действие не выполнено

• что пользователь может исправить самостоятельно

• как продолжить, если проблема возникла на стороне сайта или внешнего сервиса

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

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

Мобильную версию нужно проверять как самостоятельный сценарий

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

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

• раскрывающемуся меню

• фильтрам и сортировке

• таблицам и длинным характеристикам

• календарям и выбору времени

• загрузке файлов

• подсказкам, появляющимся при наведении

• формам с несколькими этапами

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

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

Скорость и стабильность влияют на восприятие сайта

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

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

Ускорять следует прежде всего те участки, которые влияют на ключевые сценарии:

• загрузку основных страниц входа

• поиск и фильтрацию

• открытие карточки товара

• добавление в корзину

• оформление и оплату

• авторизацию и работу личного кабинета

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

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

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

Для каждой существенной доработки полезно заранее зафиксировать:

• какое затруднение обнаружено

• какой сценарий оно затрагивает

• почему выбранное изменение должно помочь

• что именно будет изменено

• как команда проверит работу функции

• по какому признаку будет оцениваться результат

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

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

Компетентный разработчик понимает проект целиком

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

Вопросы, которые помогают проверить подход разработчика:

• Какую задачу пользователя должно улучшить изменение?

• Какие страницы, данные и последующие действия оно затронет?

• Какие состояния и ошибки нужно предусмотреть?

• Что команда проверит после публикации?

• По какому результату можно понять, что проблема решена?

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

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

Как оценить план улучшения пользовательского опыта

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

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

Для каких сайтов применимы эти рекомендации

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

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

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

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

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