Страница подтверждения заказа: что покупателю нужно увидеть после покупки

Надпись «Спасибо» ещё не объясняет, что произошло

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

Дальше разбираем интернет-магазин с оформлением без регистрации, оплатой картой через ЮKassa и подтверждением наличия сотрудником. У этой страницы несколько задач. Сообщение о принятом заказе, сведения об оплате и обещание доставки обозначают разные события; маркетологу предстоит подготовить для них отдельные тексты, а разработчику — связать каждый текст с данными магазина. Ниже — пункты приёмки. По ним можно оценить макет и работающую страницу, не читая код: установить, какое состояние подтверждает каждый блок, какие сведения остаются у покупателя и что он сможет сделать дальше.

1. Есть номер, по которому магазин найдёт заказ

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

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

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

Я советую использовать в сообщении, письме и разговоре с поддержкой один понятный покупателю номер заказа, поскольку смесь номеров оплаты, внутренних кодов и номеров отправления заставляет оператора сначала выяснять, о какой записи говорит клиент. Если у перевозчика свой номер, подпись «Отправление» поможет отделить его от номера заказа.

2. Статус оплаты совпадает с ответом платёжного сервиса

Возврат с платёжной страницы не подтверждает оплату. В сценарии с переходом на платёжную страницу (Redirect) ЮKassa возвращает пользователя на адрес магазина и при успехе, и при ошибке; надпись «Оплачено» выбирают по состоянию платежа, полученному запросом или уведомлением.

В документации ЮKassa succeeded означает успешное завершение, canceled — отмену. При двухстадийной оплате waiting_for_capture означает авторизацию денег в ожидании списания. Статус pending обозначает незавершённый платёж; в отдельных сценариях он сохраняется и после подтверждения покупателем. Эти названия нужны разработчику. Посетителю показывают понятное объяснение текущего состояния.

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

3. Покупатель видит, что именно заказал

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

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

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

4. Следующее действие названо без расплывчатых обещаний

Сообщение «Менеджер свяжется с вами» оставляет открытыми два вопроса: зачем он звонит и когда ждать звонка. Срок берут у отдела продаж.

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

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

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

5. К заказу можно вернуться после закрытия вкладки

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

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

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

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

6. Ошибка и ожидание остаются понятными на телефоне

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

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

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

Что проверить за пятнадцать минут

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

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

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

Если сама последовательность оформления ещё вызывает вопросы, пригодится план тестирования сайта. Для доработки страницы подтверждения можно обсудить задачу со ШТАБ ИТ: понадобятся текущий адрес страницы, перечень способов оплаты и правила обработки заказов.