Интерфейс — наше всё, или как грамотный дизайн бизнесу помог

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

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

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

История одного клиента

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

На старте мы поставили перед собой три важных вопроса:

• как должен выглядеть интерфейс системы в конкретных рабочих условиях?
• какие из выявленных критериев не удовлетворяются текущим интерфейсом?
• какими методами проектирования мы придем к эргономичному рабочему интерфейс

Прежде чем перейти к работе мы проанализировали целевую аудиторию.

Системой пользовалось около 400 операторов, условно их можно разделить на две группы: опытные пользователи (работают с системой 2 и более месяца), новички (до 2х месяцев опыта работы с системой). Разделение целевой аудитории по данному признаку было обусловлено выявленной корреляцией в результатах опроса пользователей по вопросу “вызывает ли интерфейс системы трудности в работе или нет?”.

Для оценки интерфейса мы использовали метрику SUS (System usability scale) — шкала удобства использования системы по ее функциональным модулям. Средние значения представлены в таблице:

Значение метрики SUS при котором можно уверенно говорить об удобстве системы — 68 и более. Это значение получено авторами метода статистически. Будем использовать наши измерения как отправную точку в исследовании и в последствии сравним их с итоговыми значениями.

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

1.1. Частые прерывания и многозадачность 2.1. Сотрудники склада — неопытные пользователи ПК

Работа на складе — процесс сложный и ответственный. Одно неверное движение — воцарится хаос. В нашем случае сотрудник в существующем процессе обслуживал клиента, проверял по накладной размещение груза, выполнял поиск товара на складе (как правило, сразу по нескольким заявкам от разных клиентов в очереди), фиксировал факт выдачи в системе. Таким образом, в течение рабочего дня сотрудник маневрирует работой за компьютером, окном общениям с клиентами, работой непосредственно на территории склада со всеми вытекающими отсюда активностями. Из-за чего неминуемо теряется фокус и падает производительность труда. Специфика ситуации заключается в том, что от самих прерываний, как правило, избавиться либо трудно, либо невозможно. В таких условиях снизить их влияние можно лишь облегчая возвращение работников к прерванному действию.

Частые прерывания

На основе проведенного анализа наша команда выдвинула несколько гипотез, которые позволят повысить удобство использования интерфейсов:

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

Чтобы проверить гипотезу был создан минимальный прототип приложения для планшета с ограниченной функциональностью (только подтверждение выдачи товара и помощь в его поиске на складе). Данный MVP был испытан на самом крупном складе клиента. Однако измерения времени обслуживания клиента показали, что прироста в скорости обслуживания не произошло, так как работнику склада, набирающему составной заказ, было неудобно манипулировать с мобильным устройством.

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

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

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

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

Большая часть клиентов (80%) — это физические лица, интерфейсы для разных типов клиентов были разделены и упрощены. Поиск клиента осуществлялся по номеру заказа, паспорту или номеру телефона. В новой версии достаточно было вбить несколько цифр — система сразу осуществляла поиск, сужая выдачу по мере заполнения поля. Ранее номер заказа представлял из себя число, у которого изменялись на единицу последние цифры по мере отгрузки заказов. Для повышения скорости поиска формат номера заказа был переделан так, чтобы изменяемая часть находилась в начале числа.

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

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

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

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

Многозадачность

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

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

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

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

3.1. Фоновый режим выполнения задач: Вывели выполнение длительных операции в фоновый режим. Потребность вмешательства пользователя минимизировали: если процесс предположительно будет длительным, система убеждается, что она получила всю информацию от пользователя до начала этого процесса.

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

Сотрудники — неопытные пользователи ПК

Средний срок работы сотрудников склада в компании клиента не превышал одного года.

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

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

1.1. Существенно упростить интерфейс для самых частых операций: Наиболее часто используемый интерфейс — это форма выдачи товара. Изначально отображалась вся информация о клиенте из ЦРМ- системы, товарах. Расположение нужного товара на складе указывалось в другой форме. Схема проста: оператор фиксирует факт выдачи товаров и удостоверяет личность получателя. Новый интерфейс по номеру накладной или номеру удостоверяющего документа сразу отображал товары с подсказкой о нахождении товара на складе и подтверждении выдачи.

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

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

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

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

6.1. Автосохранение. При внесении или изменении данных поля формы автоматически сохраняются, что сокращает время работы с интерфейсом и исключает потерю несохраненных данных.

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

Итог

Как результат, внедрение ПО с эргономичным интерфейсом привело к:

• уменьшению времени обучения сотрудников до двух недель. Среднее время выполнения типовых операций для пользователей из целевой аудитории “новички” сократилось в 4-6 раз.
• повышению пропускной способности операторов склада на 11%
• 100% отсутствию потерь данных
• повышению удобства работы с точки зрения сотрудников: индекс SUS вырос:

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

Если Ваша цель — эргономичный пользовательский интерфейс, то наша команда профессионалов с удовольствием поможет её достичь.