[NIFI-1323] UI visual design enhancement

• Type: Improvement
• Status: Resolved
• Priority: Trivial
• Resolution: Done
• Affects Version/s: 1.0.0
• Component/s: Core UI
• Assignee: Unassigned
• Reporter: Rob Moran
• Created: 22/Dec/15 13:36
• Updated: 20/Dec/16 20:09
• Resolved: 20/Dec/16 20:09

Description

(I will attach mockups and supporting files as they become available)

I am starting to work on a design to modernize the look and feel of the NiFi UI. The initial focus of the design is to freshen the UI (flat design, SVG icons, etc.). Additionally, the new design will propose usability improvements such as exposing more flow-related actions into collapsible panes, improving hierarchy of information, etc.

Going forward, the design plan is to help lay the foundation for other UI/UX related issues such as those documented in NIFI-951.

—
flowfont.zip
Contains icon font and supporting files

nifi-add-processor-dialog.png
Dialog sample. This sample shows the 'Add Processor' dialog.

nifi-component-samples.png
To show styling for all components, as well as those components when a user is unauthorized to access.

nifi-configure-processor-properties
nifi-configure-processor-properties-set-value
nifi-configure-processor-scheduling
nifi-configure-processor-settings
Configure Processor dialog. See related Comments below (in Activity section).

nifi-dialog-sample-@800px
Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab of a provenance event.

nifi-drag-drop-component@2x
To show updated component toolbar button style and user interaction improvements

nifi-drop.svg
NiFi logo without 'nifi

nifi-global-menu
To show global menu

nifi-global-menu-pending-user@2x
Demonstrates a generic notification with an aggregate count that appears on the global menu icon. When the menu is displayed, the same notification (and individual count) appears in line with the corresponding item.

nifi-interaction-and-menu-samples.png
To demonstrate user interactions - hover states, tooltips, menus, etc.

nifi-lineage-graph-@800px
To show lineage graph with explicit action to get back to data provenance event list.

nifi-sample-flow-@800px
Shows a very useable UI down to around 800px in width. The thinking here is that at anything lower than this, the NiFi user experience will change to more of a monitoring and/or administrative type workflow. Future mockups will be created to illustrate this.

nifi-logo.svg
NiFi logo complete

nifi-sample-flow.png
Mockup of sample flow. Updated to show revised tool and status bars. Management related actions will move to a menu via mouseover (see nifi-global-menu). Added benefits here include reducing clutter and more user-friendly menu with text labels to reduce time spent scanning only a large set of icons. This also helps gain valuable viewport width in a browser (see nifi-sample-flow-@800px)

[e-mail]
Search results example

nifi-shell-sample-@800px
Shell sample in 800px wide viewport. This sample shows the 'Data Provenance' table.

Issue Links

• mentioned in: Page Loading...

Sub-Tasks

• UI - Modernize JS dependency management and build: Resolved
• UI - Introduce AngularJS: Closed
• UI - Refresh NiFi Header to global menu: Resolved
• UI - Refresh Dialogs: Resolved
• UI - Toolbox Icons for hover and draggable: Resolved