0. Подготовка
На начальном этапе исследовал необходимый раздел интерфейса и определял сущности внутри него. Для понимания задачи было необходимо получить ответы на следующие вопросы:
Основная пользовательская задача —
управлять и документировать компьютерные сети.
В разделе Objects представлены компоненты сети, а также их параметры. Действия над ними включают создание, удаление, сортировку, редактирование, поиск.
В разделе Objects представлены компоненты сети, а также их параметры. Действия над ними включают создание, удаление, сортировку, редактирование, поиск.
Таблица содержит информацию о названии компонента, его типе, наборе тегов, положения
в системе, а также наличие проблемы. Над таблицей указано количество компонентов, которые отвечают заданным параметрам (поиску или фильтрации).
- характеристики компонента
- наличие проблемы
- комментарий
- детализация связей компонента
- IP-адреса
- NAT подключения
- положение в стойке, распределение места
- переход на страницу другого компонента
- сортировка таблицы по выбранному параметру
- просмотр стойки
- просмотр IP-адресов
Переход на страницу продукта, навигация между тремя разделами, переход на разводящую страницу, профиль и логаут.
1. Постановка задачи
Ограничения:
браузерный desktop
браузерный desktop
Аудитория:
администраторы, инженеры и архитекторы сети
администраторы, инженеры и архитекторы сети
Цели бизнеса:
создание бюджетного и масштабируемого сервиса
создание бюджетного и масштабируемого сервиса
Цели пользователя:
быстрое выполнение задач внутри сервиса
быстрое выполнение задач внутри сервиса
Проанализировать интерфейс, выделить проблемы, влияющие на скорость и удобство выполнения пользовательских задач.
Предложить улучшения, которые наиболее существенно повлияют на пользовательский опыт и помогут устранить существующие проблемы, описать это влияние.
Предложить улучшения, которые наиболее существенно повлияют на пользовательский опыт и помогут устранить существующие проблемы, описать это влияние.
2. Дизайн-процесс
Результаты
Подведение итогов
Подведение итогов
Проектирование
Дизайн страницы и отдельных блоков, объяснение особенностей решения
Дизайн страницы и отдельных блоков, объяснение особенностей решения
Гипотезы
Генерация идей по улучшению, каково их влияние на пользовательский опыт
Генерация идей по улучшению, каково их влияние на пользовательский опыт
Анализ интерфейса, поиск проблем
Описание существующих проблем и их влияние на выполнение пользовательских задач
Описание существующих проблем и их влияние на выполнение пользовательских задач
Анализ интерфейса, поиск проблем
3.
Проблемы: сложно упорядочивать информацию, высокая когнитивная нагрузка на пользователя, расположение элементов на экране плохо организовано для быстрого выполнения задач
- таблица и параметры находятся на разных страницах
- фильтрация таблицы крайне ограничена
- пустые места в стойках Rackspace занимают полезное пространство
- некоторые действия для компонентов трудно найти
- информация организована для низкого разрешения, на современных мониторах выглядит пусто
При подготовке к решению задачи изучил существующий интерфейс и пришел к следующим выводам:
Гипотезы
4.
Для достижения целей бизнеса имеет смысл взять OpenSource дизайн-систему, например GravityUI
Основные идеи по улучшению:
- Объединить таблицу компонентов с их параметрами в одну страницу
- Расширить инструменты фильтрации и сортировки
- Добавить режим отображения заполненных ячеек в Rackspace
- Вынести стандартные действия с компонентами и параметрами на экран
- Адаптировать информацию под любое разрешение экрана
Исходя из найденных проблем в пользовательском опыте, предлагаю сфокусировать влияние на:
сокращение когнитивной нагрузки
ускорение выполнения основных сценариев
легкий поиск информации и действий над ней
Проектирование
5.
6. Результаты
- Упросил работу с информацией → появились настройка положения и видимости блоков (и их содержимого), режим отображения занятых ячеек в стойке, информация о редактировании и цветовое кодирование
- Сохранил и улучшил изначальный функционал сервиса → адаптировал под современные экраны, расширил возможности фильтрации/сортировки, компактно пересобрал таблицу, добавил быстрые действия для измнения параметров и навигации
- Ускорил выполнение основных сценариев → объединил две страницы в одну, предусмотрел настройку ширины рабочей области
- Был приглашен на следующий этап собеседования🎉