October 12, 2023

Юзабельность в приоритете. Помогаем "Контуру" сделать работу с их продуктом проще для пользователей

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

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

Проблема

Недавно к нам обратились коллеги из Контура. Они делают сервис для электронного документооборота — модуль Диадока для 1С. Через приложение и веб-версию Диадока проходят миллионы документов, а модулем чаще всего пользуются бухгалтеры.

У Диадока была одна серьезная проблема, попавшая в Топ-3 самых частых, — 45% пользователей не понимали, как переотправить документы.

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

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

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

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

Задача

В рамках проекта нам предстояло провести UX-исследование и придумать, как создать понятную визуальную логику переотправки документов внутри модуля Диадока.

Главная сложность заключалась в том, что мы не могли вносить значительные изменения, так как в этом нас серьезно ограничивала архитектура 1С.

Что для этого сделали:

- Сформулировали гипотезу: пользователи не могут переотправить документы из-за сложного UI.

- Провели UХ-исследование: отобрали респондентов, которым не только задавали стандартные вопросы, но и просили отправить документ по четырём разным сценариям.

- Подготовили прототип для визуальных изменений с учетом ограничений платформы 1С.

И всё это удалось сделать и проверить за три недели без дорогостоящего массового тестирования.

Наша гипотеза

Сперва мы пообщались с аналитиком и сотрудниками техподдержки Контура. Они рассказали нам о User flow клиентов. Это схема действий, по которой пользователь идёт от запуска приложения до достижения своей цели. Чем больше времени пользователь тратит до конечной точки выполнения задачи, тем хуже flow и приложение становиться менее конкурентоспособным.

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

- чаще всего очередная отправка происходит после аннулирования документов. Но само аннулирование бухгалтеры не всегда выполняли через переотправку. Хотя это было возможно, о чем расскажем ниже;

- пользователи не всегда понимают, что будет происходить с документом при нажатии кнопки «Переотправить»;

- бухгалтеров вводила в ступор странная логика — когда при новой отправке модуль спрашивал: «Аннулировать документ?», при этом файлы уже аннулированы.

Вопросы, составленные коллегами из Контура,на основе которых мы подготовили сценарии для UX-тестирования

Теперь о user flow. В случае с Диадоком он ломался из-за трёх вариантов для переотправки документов после аннулирования. При этом ни один из них не был понятным:

- Можно было повторно выслать файлы через кнопку «Переотправить». Но бухгалтеры не замечали её или не понимали, как использовать.

- Предварительно аннулировать один или несколько документов через кнопку «Аннулировать», а потом прислать контрагенту через функцию «Переотправить».

- Просто нажать «Аннулировать», а потом загрузить в систему новый файл и прислать его.

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

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

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

Провели UX-исследование

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

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

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

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

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

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

- большинство опрошенных сталкивались с проблемой переотправки всего 1-2 раза, но не могли решить её самостоятельно и сразу обращались в саппорт;

- 70% респондентов не могли найти подсказки по использованию функции;

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

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

На основе этих инсайтов мы разработали план по изменениям в дизайне. Всё, чтобы выстроить простой и понятный User flow.

Переделали user flow

Мы решили сделать ставку на информативность — пользователь всегда должен знать, что происходит:

1. Сделали flow «Переотправки» и «Аннулирования» более информативным. Теперь пользователь знал на каждом этапе, что происходит сейчас и что можно сделать по итогу операции.

2. Предложили отделить модальные окна от остального интерфейса. Разделение помогает сконцентрировать внимание на совершаемой операции. Это решение можно реализовать с последующими патчами от 1С. Сейчас архитектура системы не позволяет его внедрить, но управлять вниманием пользователей в перегруженном интерфейсе — важно.

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

4. Изменили flow групповой переотправки документов. Мы убрали дополнительный шаг с кнопкой «Подробнее» из модального окна, а ещё заменили текст на более информативный. Теперь пользователям не нужно нажимать на кнопку «Подробнее».

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

Ссылка переехала в более подходящее по контексту место

6. Заменили тексты в подсказках, которые появляются при наведении на кнопки. Хорошая вещь в такого рода интерфейсах, помогает объяснить, что делает тот или иной элемент.

Подсказки, чтобы меньше ошибаться

Результат

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

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

Часть изменений User flow мы подготовили на «перспективу». Их можно будет внедрить после обновлений архитектуры 1С. Например, упоминавшееся выше разделение модальных окон от остального интерфейса.

Что говорит заказчик

Дарья, менеджер разработки со стороны клиента:

"Удобство пользователя — наш высший приоритет, поэтому мы решили привлечь для решения проблемы лучшую экспертизу по UX/UI в лице команды ZeBrains. У нас сложилась комфортная, конструктивная и быстрая коммуникация с командой проекта. Отдельно стоит выделить дизайнера на стороне ZeBrains как грамотного, вдумчивого и опытного специалиста. Это влияет на скорость и качество выполнения работ. Считаю успешным наш опыт взаимодействия с командой ZeBrains".