«Я удалила половину интерфейса, и этого никто не заметил»: как мы улучшили UX, чтобы отучить систему мешать работать

от автора

Собрались однажды продакты, разработчики и отдел дизайна и решили: хватит терпеть жалобы на устаревший и запутанный интерфейс. Был сервис деск-лабиринт, стал продукт с умной навигацией — минус половина элементов, без боли адаптации, с добавлением привычных паттернов.

Привет, Хабр! Меня зовут Света, проектирую интерфейсы в ITSM 365. Мы с командой стояли у истоков дизайна первой версии системы, потом упростили его и распространили на новые продукты, сейчас запускаем интерфейс 2.0. Расскажу и покажу, что было раньше и как мы это изменили.

Что было до: с чем приходилось иметь дело

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

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

Привычка решает: некоторым нашим клиентам и эта версия казалась удобной. Но чаще все-таки нет.

Привычка решает: некоторым нашим клиентам и эта версия казалась удобной. Но чаще все-таки нет.

Как мы шли к «после»: эволюция вместо революции

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

В чем же именно проблема? В карточках? Формах? Списках? Может, вообще все нужно переделать? Временные костыли и доработки платформы прикрывали изъяны, но легче никому не становилось.

  • Навигация

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

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

  • Администраторам доступно расширенное меню, в том числе с настройками системы. 

  • У специалистов навигация сосредоточена на работе с поступающими обращениями. 

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

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

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

Сразу стало лучше, но есть куда стремиться. Как же добраться в это светлое будущее? Одно мы знали точно: никто не хочет учиться работе в системе заново — он хочет сразу решать свои задачи.

  • Канбан-доска

Вместо большого страшного списка и «где моя задача?» — добавили доску с колонками «Новая», «В работе», «Решена», «Просрочено». Открываешь утром систему, сразу видишь: три тикета с просрочкой, пять новых, над двумя уже начал работу. Уже готов план на день — без отчетов и поисков. Бонус: функция drag-and-drop — перетащил тикет, статус обновился.

Было: перегруженная страница с канбаном под списком заявок. Cтало: разные представления канбана в соседних вкладках

Было: перегруженная страница с канбаном под списком заявок. Cтало: разные представления канбана в соседних вкладках
  • Чат для всего

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

Чат создает цельный пользовательский опыт от «у меня сломалось» до «все работает, спасибо!». Статьи, файлы, тикеты, согласования — все в одном потоке, вместо разрозненных разделов, карточек и комментариев.

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

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

Куда движемся сейчас: интерфейс как навигатор

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

  • Поиск в системе

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

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

Так выглядит выдача по запросу — услуги, статьи и заявки на одном экране

Так выглядит выдача по запросу — услуги, статьи и заявки на одном экране
  • Поиск в системе

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

  • Всегда наверху — заголовок

  • Ключевые поля — несколько строк с иконками

  • Раскрывающиеся детали — история, файлы, комментарии

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

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

    Теперь интерфейс своего рода гид по активностям пользователя. Сервис деск подсказывает: «обратите внимание на эти активности», «эта заявка ждет вашего ответа», «похожая проблема решена таким образом», «такие новости произошли в вашей компании». Больше никто не теряется, система сама направляет внимание на приоритеты.

На витрине — все необходимое для работы, с подсказками и направлением внимания

На витрине — все необходимое для работы, с подсказками и направлением внимания

Что в итоге: о пользе для пользователей

Мы убрали лишние клики, ускорили работу и услышали: «Наконец-то понятно, где что лежит!»

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

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

Новый интерфейс для подачи заявок уже доступен для тестирования — напишите нам через форму на сайте или на почту — cs@itsm365.com

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

ссылка на оригинал статьи https://habr.com/ru/articles/1066270/