UX / UI
DataGram
Новый интерфейс среды разработки BigData
Onboarding
Интерфейс Редактора трансформаций начинается с подсказок для знакомства пользователей с основными элементами управления
Сквозная навигация

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

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

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

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

Поэтому занятое панелью место используется для отображения панели свойств элементов. С ней пользователь работает чаще, но она не всегда актуальна: когда нет выбранного элемента.
Отображение панелей анимировано. Возврат к панели управления — снятие выделения: удаление объекта или клик по свободной области сцены.
Панель элементов
Панель элементов актуальна при создании диаграммы или добавления новых элементов. Она не всегда актуальна для сценариев редактирования свойств уже в созданной диаграмме. В больших диаграммах она съедает полезное пространство, поэтому вся панель по умолчанию свернута.
Важный элемент онбординга — знакомства пользователя инструментом.
Иконки елементов диаграммы
Элемента диаграммы используются как на самой сцене, так и на панели элементов. У каждого элемента несколько свойств: графическое изображение, имя, направление данных.

Для каждого места и сценария использования для элементов проработана система отображения свойств.
Для отображения направления данных на панели достаточно заголовка. Графически отображать направление актуально только на сцене.
Когда пользователь знакомится с интерфейсами системы названия элементов актуальны. Со временем они превращаются в визуальный шум.
В интерфейсе предусмотрены элементы скрывающие подпись к объектам. А дискриптор все ровно появляется при наведение в тултипе.
Новая сетка
Новая сетка легче. Она несет только визуальное изменение. Шаг позиционирования объектов на сцене остается прежним.

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

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


Темный интерфейс реализуется просто - меняются цветовые значения в css файлых.
Пример главной страницы
Главную страницу можно сделать прокручаваемой лейнтой, если не с самими рабочими пространствами, то с точками входа в них.
Что исправлено по сравнению с версией 2.0
BASICS
Ошибки логики
Элемент снят с выделения - а в панели свойств все равно можно продолжить его редактирование.
Пустая панель не функциональна и занимает место - когда элемент удален или схема только что открыта / создана.
Элементы управления
Сортируем, группируем, расставляем по местам
Нужны при работе с системой
  • Пользователь и выход
    Элемент управления системой - глобально ко всей системе
    Занимает много места
    Используется редко
  • Возврат к системе
    Новый элемент

    Элемент управления системой - глобально ко всей системе
    Занимает много места
    Используется редко
Редактировании содержания проекта
  • Копировать, вставить, удалить
    Элементы управления объектами на сцене
    Копировать и вставить - актуальны к использованию
    Удалить элемент можно тремя способами, поэтому саму иконку можно удалить.
  • Выравнивание
    Элементы управления всеми объектами на сцене
    Функция редактирования
  • Увеличить, уменьшить, подогнать
    Элементы управления рабочей областью
    Все актуальны. Можно добавить один...
  • Только схема
    Новый элемент

    Элементы управления рабочей областью
    Убирает из рабочего пространства все бары
    у элемента 2 состояния или 2 события : только рабочая область и как обычно
    Он заменит ушки у баров
  • Вперед, назад по истории событий, очистить все
    Элементы управления событиями на рабочей области
    Все актуальны.
    Иконка "+" сбивает с толку - сейчас выглядит как элемент управления проектом.
Управления проектом
  • Настройки проекта
    Элементы управления настройками проекта
    Нужен редко
  • Открыть проект из сохраненных
    Начало работы
    Используется периодически
Управления кодом json
  • Просмотр и выгрузка ф файл
    Элементы управления json кодом
    Вызывает новый интерфейс и сохраняет в виде файла

    Возможно Оба элемента можно объединить в один интерфейс
  • Открыть проект из сохраненных
    Начало работы
    Используется периодически
  • Сохранение
    Элементы управления проектом и рабочей областью
    Используется часто
  • Только схема
    Новый элемент

    Элементы управления рабочей областью
    Убирает из рабочего пространства все бары
    у элемента 2 состояния или 2 события : только рабочая область и как обычно
    Он заменит ушки у баров
  • Вперед, назад по истории событий, очистить все
    Элементы управления событиями на рабочей области
    Все актуальны.
    Иконка "+" сбивает с толку - сейчас выглядит как элемент управления проектом.
Управления проектом и его содержанием
  • Сохранение
    Элементы управления проектом и рабочей областью
    Используется часто
Сортируем
Вместо стрелок добавляем новый элемент управления - "На весь экран"
Он сворачивает и разворачивает обе панели
В развернутом состоянии некоторые элементы не отображаются
Элементы управления
Лишнее


Три способа удалить объект
Иконка корзины - лишний элемент.