Status, Icons, and Color:
The Apache Nifi 1.0 release brought its users a welcome refresh of the UI with emphasis on a flatter more modern design that included muting the color palette. While these updates have been well received the community around Apache Nifi requested that we "bring some color back". Well we listened and in Apache Nifi 1.1 we have introduced more color in the UI for easier recognition of status changes and necessary user actions!
One area (identified by the community) where color makes sense are the icons. In many cases in the Nifi UI icons provide valuable feedback worthy of drawing the attention from the user. However not all icons meet this requirement. To differentiate it was decided that wherever icons are reporting status or require the user to take an action then the icon should receive color and if an icon invokes an action in the UI then it should not.
Let's take a look at the canvas:
At first glance you will notice the red bulletins and yellow warning icons "jump out" to the user. These icons report status and require user action so they have been given a brighter color to draw the user's eye. Looking a bit closer you will notice the flow status bar as well as the status icons on the face of the components (and connections) on the canvas. Notice that whenever the values are 0 the icons are still a muted blue color but when something is running, stopped, enabled, or transmitting the icons are now colored green, red, or light blue (for both enabled and transmitting) respectively. This subtle change allows the user to quickly gain context as to what is going on in their flow. Finally, we see that the icons in the 'Operate pallet' and the 'Context Menu' have retained a dark blue color because these invoke an action and do not report status.
Let's also check out the Summary shell:
Again you can see that the action invoking icons are a dark blue while the status reporting icons have much brighter colors allowing the user to quickly gain context about their flow.
In this article we have talked about icon color, what it means, and when it is appropriate. Users will see that this design concept is implemented throughout the Nifi UI and should be followed for any future features to come. I hope you have found this article helpful and thanks for reading!
