Дизайн
Ян Австрейх
2451

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

Конспект материала UX-специалиста из Nielsen Norman Group Марии Росалы.

В закладки

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

Есть два способа отслеживания посылок.

  • Вручную. На сайте или в приложении в виде шкалы в хронологическом порядке показано, где находится товар. Пример — FedEx.
Можно посмотреть дату, когда заказ оказался в новом месте. Есть шкала с основными этапами доставки. Данные о пройденных этапах можно найти в разделе «История доставки»
  • С помощью push-уведомлений. Сервис сам сообщает, куда пришла посылка. Также сообщения могут приходить по SMS, электронной почте и в мессенджерах.
Ритейлер J.Crew отравляет уведомления по SMS. В сообщении есть ссылка на сервис для отслеживания

Онлайн-ритейлер Gilt отправляет письма на электронную почту. В письме есть изображение товара, это помогает понять, у какой из покупок обновился статус.

Автор Марии Росала представила различия между сервисами для отслеживания статуса заказа и уведомлениями в виде талицы.

Ниже — рекомендации по оформлению страниц для отслеживания.

Отслеживание на сайте

1. Сделайте доступной информацию о статусе заказа в профиле пользователя

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

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

На сайте Amazon можно отследить статус доставки

2. Сервис должен показывать в первую очередь текущий статус заказа

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

Сервис для отслеживания Государственного департамента США. Здесь клиенты могут проверить статус готовности нового паспорта. Однако статус не видно сразу, его скрывает текст вокруг
Ucas.com отвечает за приём студентов на учёбу в университеты Великобритании. Сервис для отслеживания отображает список обновлений, самые последние — вверху. Есть дата и время каждого обновления. Шаблон сайта позволяет менять название университета

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

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

3. Описывайте обновления статуса просто и понятно

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

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

Сайт службы доставки Echo. Статусы «Посылка покинула промежуточный пункт», «Информация о посылке направлена в Почтовую службу США из Великобритании», «Свидетельство об отправке создано» ни о чём не говорят пользователям

4. Убедитесь, что информацию удобно читать

Особенно если информация об отслеживании представлена в формате таблицы.

В сервисе от Echo столбцы таблицы слишком узкие, в результате дата и время занимают две строчки. Такой текст сложно читать. В сервисе Royal Mail (фото ниже) каждое обновление статуса можно распознать по датированному заголовку. Здесь только два столбца, и в каждом достаточно места для текста.

Сервис отслеживания статуса заказа от Royal Mail

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

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

USPS даёт пользователям выбрать, какие из шести видов обновлений статуса они хотят получать и как: через SMS, на электронную почту или обоими способами

6. Расскажите, какая информация нужна для доступа к сервису

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

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

  1. Люди в курсе, что трек-номер, номер заказа или любая другая информация о заказе понадобится им в дальнейшем.
  2. Вы рассказали, где можно получить эту информацию.
Her Majesty’s Passport Office из соображений безопасности требует, чтобы пользователи отслеживали статус изготовления нового паспорта. Сайт подсказывает, где искать трек-номер

7. При ошибке в сервисе пользователю нужно чётко сообщить, что случилось и как это исправить

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

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

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

8. Расскажите пользователю, что он может отслеживать статус заявки с помощью сервиса

Служба гражданства и иммиграции США (USCIS) не сообщает об этом. Люди получают письмо с уведомлением о том, что их заявка принята, но в нём не говорится о возможности отслеживать статус на сайте USCIS.

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

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

9. Регулярно присылайте пользователям уведомления об обновлениях статуса

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

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

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

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

Сервис для отслеживания USCIS. Между 19 сентября и 3 декабря никаких уведомлений об обновлении статуса не поступало

Сервис для отслеживания Her Majesty’s Passport Office, наоборот, часто присылает пользователю уведомления об обновлении статуса (например, «В очереди на обработку»). Это помогает людям понять, что их заявка действительно находится на рассмотрении.

Her Majesty’s Passport регулярно присылает пользователям уведомления о статусе оказания услуги

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

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

10. Присылайте достоверные и точные уведомления об обновлении статуса заказа

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

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

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

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

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

Электронное письмо, которое Monzo отправляет после того, как пользователь создал учётную запись и присоединился к списку людей, ожидающих новой карты

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

Информация о предыдущих статусах может быть полезна тем, кому нужно связаться с организацией по поводу проблем с заказом или посмотреть, как долго заказ находился на определённом этапе. Некоторые сервисы для отслеживания показывают только текущий статус (как сервис Государственного департамента США).

Международная компания, которая специализируется на переездах в другие страны или дома, Shipping Force, также предлагает своим пользователям сервис для отслеживания. Каждое её уведомление вроде: «Вам были отправлены коробки для вещей», «Вам был назначен водитель» или «Товары находятся в безопасности на складе» — показывает клиенту, что процесс идёт по плану и беспокоиться не нужно.

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

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

12. Давайте одинаковые данные о статусе заказа, независимо от способа связи с клиентом

Если пользователи звонят в call-центр, они должны получать те же данные о статусе заказа, что предоставляет сервис для отслеживания.

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

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

Уведомления для отслеживания

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

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

Не заставляйте пользователей вводить номер заказа при переходе на сервис. Если пришло уведомление, и так понятно, какого заказа оно касается.

Club Monaco отправляет письмо, где пишет, что конкретный заказ доступен для отслеживания (слева). Но когда пользователь переходит по ссылке, его просят ввести номер заказа и почтовый индекс для доступа к сервису (справа)

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

Когда пользователи совершают покупку или подают заявку на услугу, дайте им выбрать, какие уведомления для отслеживания получать. Имейте в виду, что некоторые пользователи предпочитают получать информацию в SMS и на электронную почту, а не в виде уведомлений (некоторые — наоборот).

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

15. Не отправляйте пользователям слишком много уведомлений

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

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

Компания Nordstrom и служба доставки UPS отправили на электронную почту пользователя одинаковые уведомления

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

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

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

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

Если человек хочет отказаться от SMS-уведомлений, дайте возможность ответить на них словом Stop. Не надо писать «Если вы хотите отписаться от уведомлений…» каждый раз, но периодически эта фраза должна появляться.

AT&T присылает пользователю SMS-уведомления о текущем статусе доставки нового телефона. В конце написано: «Наберите слово Stop, чтобы больше не получать уведомления»

#UX

{ "author_name": "Ян Австрейх", "author_type": "self", "tags": ["ux"], "comments": 1, "likes": 10, "favorites": 56, "is_advertisement": false, "subsite_label": "design", "id": 74245, "is_wide": false, "is_ugc": true, "date": "Tue, 09 Jul 2019 13:51:47 +0300", "is_special": false }
0
{ "id": 74245, "author_id": 192524, "diff_limit": 1000, "urls": {"diff":"\/comments\/74245\/get","add":"\/comments\/74245\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/74245"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
1 комментарий
Популярные
По порядку
1

Дело за малым, сделать сервис с приемлимой ценой и удобством отправления.
Для примера, в США стоимость отправки бандероли начинается от $2.66. Оплатить её можно прямо на сайте, затем напечатать стикер на смоеклейке, приклеить к коробке и отдать её на почте или курьеру.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }