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

Привет, Хабр! Меня зовут Диана, я продуктовый дизайнер в СберМаркете. Наша команда развивает личный кабинет ресторанов, чтобы администраторам и менеджерам было удобно в нём работать и принимать заказы на доставку. В этой статье хочу поделиться, как мы улучшали раздел Заказы: «полечили» звуковые уведомления, сделали анимированную фавиконку, чтобы наша вкладка не терялась среди остальных, и добавили возможность создавать тестовый заказ для обучения новых сотрудников ресторанов.

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

• Какую функцию выполняет раздел Заказы и почему мы решили его улучшать?

• Решили проблему с уведомлениями

• Тестовый заказ в ЛК для обучения новых партнеров

• Оживили баннер или как мы призвали пользователей включать звук в браузере

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

Почему мы решили улучшить раздел Заказы?

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

Как мы решали проблему с уведомлениями

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

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

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

Также мы разместили ссылку на инструкцию, как настроить уведомления в браузерах и в мобильном приложении (IOS, Android). Для примера взяли браузеры Google Chrome и Яндекс Браузер, так как ими чаще всего пользуются наши пользователи. 

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

Тестовый заказ в ЛК для обучения новых партнеров

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

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

2. Не могли быстро «справиться» с новым для них интерфейсом — об этой проблеме поговорим сейчас.

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

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

Почему мы не пошли в историю с онбордингом и всплывающими подсказками?

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

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

Как мы призвали пользователей включать звук в браузере? Оживили баннер!

Когда сотрудник ресторана впервые заходит в наш ЛК у него появляется тот самый «противный» всплывающий пуш от браузера: «Сайт запрашивает разрешение на показ уведомлений — Разрешить/Блокировать». Некоторые пользователи, не задумываясь, нажимают «Блокировать» или закрывают окно и больше не получают уведомления о новом заказе. В связи с этим мы разместили баннер рядом со списком заказов по тапу, на который повторно вызывается окно браузера с запросом на уведомления. 

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

• пользователь увидел баннер;

• нажал на кнопку «Включить»;

• появилось браузерное окно с предложением включить/блокировать уведомления;

• дал согласие на получение уведомлений;

• затем баннер пропадает и все счастливы.

Решили ли мы проблему? Хотелось бы сказать да, но нет. Вот почему:

1. Пользователи на баннере нажимают «Включить», а в браузерном окне нажимают «Блокировать». Баннер пропадает и нет возможности заново вызвать это окно. Про это я уже рассказала выше.

2. В ходе исследования выяснилось, что пользователи попросту не замечают баннер. Решение — в следующем абзаце.

В итоге проблему с баннером мы решили просто — сделали колокольчик «звенящим» или, другими словами, непрерывно анимированным, чтобы он уж точно обратил на себя внимание. И у нас это получилось! Для этого понадобился лишь один story point фронденд-разработчика 🙂

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

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

Сначала мы сделали её динамической. Другими словами это svg-фавиконка, которая может быть не только статичной, но и анимированной. Она отображала любое количество новых заказов в таких браузерах, как Google Chrome, Microsoft Edge, Opera, Яндекс.Браузер и Mozilla Firefox. Но оказалось, что для Safari это решение не годится: svg-фавиконки там не поддерживаются. В связи с этим, мы решили применить альтернативный вариант в виде фавиконок в формате png.

Сделали шесть разных (1, 2, 3, 4, 5, 5+), соответствующую количеству новых заказов. Но такой вариант для Safari тоже не подошёл — оказалось там вообще не получается анимировать фавиконку, он один раз её кэширует и всё. Поэтому с Safari решили смириться, к тому же наших пользователей, которые пользуются этим браузером, минимальное количество. 

А какой же итог?

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

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

1. Иногда даже самые маленькие фичи имеют для пользователя большой вес и, если они работают неправильно, то это очень сильно ухудшает пользовательский опыт в целом. Чтобы понять, что не так нужно периодически проводить исследования с помощью различных инструментов, например — запускать опросы в UX Feedback, проводить интервью с пользователями, собирать обратную связь через новость в ЛК.

2. Нужно знать свою аудиторию, особенно, если это она специфическая (в нашем случае это администраторы и менеджеры ресторанов). Мы знаем что наши пользователи в меньшем количестве пользуются Safari, поэтому решили пойти по принципу 80/20 и сделали для большинства пользователей удобно и не потратили много ресурсов.

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

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

Product&data команда СберМаркета ведет соцсети с новостями и анонсами. Если хочешь узнать, что под капотом высоконагруженного e-commerce, следи за нами в Telegram и на  YouTube. А также слушай подкаст «Для tech и этих» от наших it-менеджеров.