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

Обучение в онлайн-университете: профессия “UI-дизайнер

К нам обратилась компания Forland, выпускающая софт для автоматизации и управления аграрным бизнесом. Программа клиента собирает и обрабатывает данные с датчиков и оборудования, установленного на сельхозтехнике. А затем на основе этих данных помогает планировать использование техники для полевых работ, учитывать рабочее время персонала, управлять топливом и ресурсами – удобрениями, посевным материалом.

У клиента были следующие проблемы:

Программа выглядела устаревшей. Софт клиента был сложным. Качественным, хорошо продуманным, но слишком запутанным и скучным, как Excel 2002 года.


Программа выглядела как привет из начала нулевых

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

Как мы подошли к редизайну

Редизайн – способ исправить ошибки предыдущего интерфейса и внедрить новую функциональность.

Когда клиенты говорят о UI refreshment, часто имеют в виду изменение только внешнего вида программы. Но редизайн ради самого редизайна лишен смысла: изменение цветовой гаммы, перемещение пунктов меню и основных кнопок только запутает пользователей.

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

Мы не улучшали функциональность программы, в нашем случае она и так был хорошей. Мы доработали интерфейс, сделали его простым и интуитивно понятным. Настолько, чтобы в нем быстро разобрались агрономы старше 50 лет (в нашем регионе это основная возрастная группа сотрудников-аграриев).

Как изменили интерфейс и оформление программы

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

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

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

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

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


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


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

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

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


Было. Куда нажимать и какая кнопка за что отвечает – непонятно


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

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

Мы решили проблему добавлением одной функции – “Сохраненное транспортное средство”. Здесь диспетчер может сохранить список ТС, с которыми работает каждый день, и в любой момент просматривать данные о них – траекторию движения, пройденный километраж, количество топлива.


В сохраненных ТС можно найти любую машину с подробными данными о ней по названию

Добавили новую функцию “Вид”. Раньше просматривать карты было неудобно, информация смешивалась и сложно воспринималась. Мы добавили возможность просматривать карту в разных предустановленных режимах:

  • “Карта”;
  • “Список механизмов”;
  • “Технические характеристики”;
  • “Характеристики полей”.

Эти виды можно включать все вместе или по отдельности. Обязательным элементом будет только карта, остальное – на усмотрение пользователя.


Функция “Вид” упростила просмотр карты и сделала ее понятнее

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


Просматривать информацию в программе удобно со смартфона, не приходится всматриваться в мелкие буквы на экране

Результат редизайна

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

Читать еще: “Увидеть интерфейс глазами дизайнера: о взаимодействии фронтендера с дизайнером


Мнение автора и редакции может не совпадать. Хотите написать колонку для “Нетологии”? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

©