Uploaded image for project: 'Apache NiFi'
  1. Apache NiFi
  2. NIFI-1323

UI visual design enhancement

Attach filesAttach ScreenshotVotersWatch issueWatchersCreate sub-taskLinkCloneUpdate Comment AuthorReplace String in CommentUpdate Comment VisibilityDelete Comments
    XMLWordPrintableJSON

Details

    • Improvement
    • Status: Resolved
    • Trivial
    • Resolution: Done
    • 1.0.0
    • None
    • Core UI
    • None

    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)

      nifi-search-results@2x.png
      Search results example

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

      Attachments

        1. flowfont.zip
          105 kB
          Rob Moran
        2. nifi-add-processor-dialog.png
          262 kB
          Rob Moran
        3. nifi-component-samples.png
          404 kB
          Rob Moran
        4. nifi-configure-processor-properties.png
          234 kB
          Rob Moran
        5. nifi-configure-processor-properties-set-value.png
          202 kB
          Rob Moran
        6. nifi-configure-processor-scheduling.png
          217 kB
          Rob Moran
        7. nifi-configure-processor-settings.png
          243 kB
          Rob Moran
        8. nifi-dialog-sample-@800px.png
          93 kB
          Rob Moran
        9. nifi-drag-drop-component@2x.png
          96 kB
          Rob Moran
        10. nifi-global-menu.png
          255 kB
          Rob Moran
        11. nifi-global-menu-pending-user@2x.png
          106 kB
          Rob Moran
        12. nifi-interaction-and-menu-samples.png
          310 kB
          Rob Moran
        13. nifi-lineage-graph-@800px.png
          74 kB
          Rob Moran
        14. nifi-sample-flow.png
          224 kB
          Rob Moran
        15. nifi-sample-flow-@800px.png
          114 kB
          Rob Moran
        16. nifi-search-results@2x.png
          187 kB
          Rob Moran
        17. nifi-shell-sample-@800px.png
          178 kB
          Rob Moran

        Issue Links

        Activity

          This comment will be Viewable by All Users Viewable by All Users
          Cancel

          People

            Unassigned Unassigned
            rmoran Rob Moran
            Votes:
            0 Vote for this issue
            Watchers:
            10 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Slack

                Issue deployment