Redesign User Interface

Goals

• Modernize look and feel of the UI
• Introduce a responsive design
• Lay foundation for multi-tenant dataflows

Background and strategic fit

The goal of this redesign effort is to introduce a new look and feel to NiFi’s original UI design – a fresh face to bring it more up to today’s standards when you think about the multitude of modern, web-based applications. Additionally – going beyond just the visual design – start to pave the way for an improved user experience, one that can accommodate a wide variety of user personas and ever-expanding use cases.

 Modernize Look and Feel

• Reserve use of heavier design elements and vibrant colors for important messaging and calls–to–action, providing users more successful interaction and overall a more efficient experience
• Flatten design elements by minimizing use of drop shadows and gradients
• Desaturate color palette to minimize use of potentially distracting colors
• Refresh iconography with SVG versions to allow flexible reuse and aid in scaling across various screen resolutions

Responsiveness

Restructure the UI to better handle a variety of viewport sizes by introducing methods to:

• deal with elements/groups of related elements wrapping to new lines, avoiding collision and overlap;
• and scale down and/or reduce visual elements to better accommodate available real estate

Multi-tenant DataFlows

In conjunction with these UI updates, some structural changes will lay the foundation for our upcoming multi-tenant dataflow effort 1. At a high level, multi-tenant dataflow will introduce a way to scope what portions of the dataflow a user can access/modify/adminster. This additional layer will necessitate repositioning of number of elements to keep the target of the action and the expected scope clear to the end user.

For example, it may make sense to support viewing details both globally and for the currently selected dataflow. Multi-tenant dataflow will support separating the dataflow into sections that can support different user authorizations. Introducing a space where action buttons can be positioned accordingly will make the resulting behavior more clear. 

1 Multi-Tenant Dataflow

Assumptions

Requirements

User interaction and design

Questions

Below is a list of questions to be addressed as a result of this requirements document:

Not Doing