Дизайн интерфейса веб-сервиса

Сфера деятельности:
Тип:
Задание на дизайн
18 000

Веб-инструмент

Опишите задачу как можно подробнее, включая свою целевую аудиторию
Нужно сделать красивый дизайн для вебсервиса - автоматизированной системы мониторинга и диагностирования неисправностей, а также восстановления работы офисной техники после сбоев. Это единая платформа для управления абсолютно всей офисной техников (компьютеры, серверы, принтеры и МФУ, АТС, маршрутизаторы и пр.) и программным обеспечением (формирование каталога, выявление расхождений между закупленными и используемыми лицензиями).

Целевая аудитория сервиса:
1) Бизнесмены, руководители компании в малом бизнесе.
2) ИТ-специалисты, технические директора в среднем и крупном бизнесе.

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

С точки зрения юзабилити основные окна системы уже спроектированы (прикреплены к заданию). Также прикрепил примеры интерфейсов, которые мне нравятся.

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

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

Над панелью - логотип. (Логотипа пока нет. Скорее всего будет круглый.)

Список экранов:
1. Сводка
2. Dashboard (Экран компании)
3. Экран задачи
4. Экран компьютера
5. Экран принтера
6. Управление лицензиями.
7. Экран АТС
8. Экран маршрутизатора.
9. Список задач на бирже.

Все экраны, кроме АТС и списка задач на бирже, уже спроектированы, нужно только красиво отрисовать. Прототипы и комментарии к ним приложены.

Экран АТС делаем по аналогии с остальными, на нём показываем
Общая информация:
-IP-адрес
-Mac-адрес
-Внешние линии
-Кол-во абонентов
-ПО


1. Качество канала
• Доступность провайдера (в мс)
• Наличие потерянных данных (в %)
2. Кол-во звонков
3. Общая загрузка CPU (график) и использование CPU процессами Asterisk, MySQL и Apache; (график)
4. Общее использование RAM (график)
Использование RAM процессами Asterisk, MySQL и Apache; (график)
Как выглядят графики - прикладываю ниже.

Экран со списком задач на бирже можно сделать как на youdo.com. Нужно просто вывести заголовок задачи и краткое описание.

Иконки, обозначающие тип оборудования:
1. Компьютер
2. Сервер
3. Принтер/МФУ
4. АТС
5. Роутер/маршрутизатор
6. Телефон
7. Видеокамера
8. Сканер
9. Источник бесперебойного питания

2 иконки, обозначающие, кто обнаружил проблему:
1. Человек (на протитопе обозначен как человечек).
2. Система (на протитопе обозначен как монитор).

Информационные технологии

Простота
Информативность

1258

Есть ли у вас наброски, эскизы или что-то, что могло бы помочь?
Сводка. Тут отображаются все задачи: открытые и закрытые. На картинках показаны разные режимы сортировки задач (по задачам, по компаниям).
Экран компании. Содержание экрана компании нужно переделать. Под содержание я имею ввиду содержание вкладок, находящихся между списком оборудования и списком задач. Тут должен быть красивый dashboard. Dashboard'ы, которые мне нравятся, прикрепил ниже. Также указал, какой dashboard брать за основу для создания нашего. Подробнее о том, какую информацию тут указывать, написано в комментариях.
Экран задачи. Тут никаких комментариев. Всё есть на картинке.
Экран компьютера. Тут тоже без изменений. Только надо убрать пару лишних вкладок (антивирус, системное).
Экран принтера. Все как на картинке. Только чек-боксы, цены и кнопку "купить" надо убрать. При наведении справа должна всплывать цена и иконка корзины. Там, где написано "Экранчик принтера" должно показываться то, что написано на аппарата. Если всё ок, он пишет "готов", если не ок - выдает код ошибки.
Управление лицензиями. Тут никаких комментариев. Всё есть на картинке.
Этот экран аналогичен экрану принтера. Тут просто показал, какие информационные блоки должны быть.
Этот dashboard можно взять за основу при разработке нашего.
Это пример того, как можно показать нагрузку на принтеры. Только цвета наоборот: слева зеленый, потом желтый и потом красный.
Это еще один пример панели, которая расположена слева.
Это пример графиков ля экрана АТС. Они некрасивые. Тут даны для того, чтобы понимать, какая информация на них отображается.
На всякий случай сделал схематичное расположение блоков на dashboarde, чтобы было понятнее.
Комментарии и пожелания для дизайнеров
Описание данных, которые нужно выводить на dashboarde (экран компании).
Содержание:
Вкладки: Dashboard, Контакты, Лицензии, Управление печатью, Сотрудники, История, Карта сети.
Под вкладками: выбранный период (например, 01.10-31.10) и иконка "Скачать" (После нажатия скачивается отчет).
Ниже
Гистограмма доступности в %.
Столбцы:
-инфраструктура
----компьютеры
----серверы
----принтеры и МФУ
----АТС
-Сервисы
----1С
----Почта
----Интернет
Справа от гистограммы средний показатель доступности.

Ниже информация по инцидентам:
-Новые (количество+ изменение по сравнению с предыдущим аналогичным периодом (рост - красная стрелка, снижение - зеленая).
-Закрытые
-Круговая диаграмма по категориям оборудования, на котором произошел сбой (компьютеры, серверы, принтеры и МФУ, АТС)
И показатель удовлетворенности пользователей (по 10-бальной шкале и изменение по сравнению с предыдущим аналогичным периодом (рост - зеленая стрелка, снижение - красная).

Ниже
Гистограмма "Безопасность"
Столбцы:
-Резервное копирование
-Антивирусная защита
-Ограничение прав доступа
-Видеонаблюдение
-Резервирование
-Электропитание

Правее топ-5 загруженных компьютеров и серверов и показатель загрузки. Загружен может быть процессор (CPU), оперативная память (RAM), Жесткий диск (HDD или SSD).

Ниже
Как на картинке: ПО и нагрузка на принтеры и МФУ. Нагрузку на принтеры изображаем в виде тахометра с тремя равными зонами: зеленая, желтая, красная.
Пример приложен.
Количество принтеров, нагрузку на которые мы тут показываем, можно менять. Миниум 3. Можно больше.

Ниже: строка с комментарием.
Ниже: история

Еще несколько интерфейсов, которые мне нравятся:
1. https://www.behance.net/gallery/E-mail-client/8626803
2. https://www.behance.net/gallery/Ecommerce-Website-Analytics/10387403
3. https://dribbble.com/shots/902435-Website-Analytics-Dashboard/attachments/98800

Если будет уместно, нужно прикрепить к задачам, созданным пользователями, аватар и имя пользователя.
Прием работ
КОНКУРС ОТМЕНЕН