Интерфейс системы мониторинга «Эшелон Бизнес»

Перед началом нашей работы система «Эшелон Бизнес» выглядела так:

Эшелон Бизнес

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

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

Первым делом убираем перегруженную верхнюю панель, подбираем иконки.

Эшелон Бизнес

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

Эшелон Бизнес

Заказчик просит добавить синенького — ведь это же для бизнес-заказчиков интерфейс. Добавляем.

В результате, утверждаются 3 логичных и понятных иконки, и 2 противоречивых.

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

Точно так же иконка с лупой привычно соответствует кнопке «поиск». Здесь же возникает когнитивная путаница — иконка с телескопом у поиска и иконка с лупой у инструмента «лупа». Люди, которые ориентируются не на подпись, а на знак, будут нажимать на лупу, ожидая увидеть поиск. Но вместо поиска будут получать «лупу». Изменить ничего нельзя — переименовывать инструмент «Лупа» заказчик отказался.

Эшелон Бизнес

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

Эшелон Бизнес

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

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

Эшелон Бизнес

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

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

Эшелон Бизнес