Интерфейс платформы виртуализации VMmanager от ISPsystem

Было:

Стало:

1. Формализуем задачу

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

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

Были выделены несколько направлений для доработки/переработки:

1. При минимальном уменьшении размера окна приложения (то есть при ширине <1920 пикс.), большая часть информации "зарезается", уходит в три точки, либо пропадает вовсе.
2. Групповые операции сложно найти, если не знать об их существовании.
3. Функционал "Избранного/закладок" реализован без учета удобства и запросов пользователей.

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

2. Проблемы адаптива

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

3. Групповые операции

Быстрые/групповые операции перенесены в шапку таблицы, реализованы очевидными кнопками (вместо псевдо-ссылок). Список групповых операций расширен (не убирается по умолчанию в дополнительное контекстное меню) и виден всегда, но становится активным только при выборе (отметки чекбоксом) инстанса(-ов).

4. Состояние виртуальной машины

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

5. Прочие доработки

Доработана правая панель: появилась логика в расположении иконок, и функционал закладок стал доступнее. Плюс, добавлен функционал быстрого копирования ip-адреса виртуальной машины:

6. Вывод

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