nifi-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Rob Moran (JIRA)" <j...@apache.org>
Subject [jira] [Updated] (NIFI-1323) UI visual design enhancement
Date Fri, 05 Feb 2016 18:30:40 GMT

     [ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]

Rob Moran updated NIFI-1323:
----------------------------
    Description: 
(I will attach mockups 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.

---

*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. 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-header-@800px_)

*nifi-header-@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-interaction-and-menu-samples.png*
To demonstrate user interactions - hover states, tooltips, menus, etc.
_Will be updating this soon reflect recent design changes_

*nifi-add-processor-dialog.png*
Dialog sample
_Will be updating this soon reflect recent design changes_

*nifi-component-samples.png*
To show styling for all components
_Will be updating this soon reflect recent design changes_

  was:
(I will attach mockups 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.

---

*nifi-sample-flow.png*
Mockup of sample flow

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

*nifi-add-processor-dialog.png*
Dialog sample

*nifi-component-samples.png*
To show styling for all components


> UI visual design enhancement
> ----------------------------
>
>                 Key: NIFI-1323
>                 URL: https://issues.apache.org/jira/browse/NIFI-1323
>             Project: Apache NiFi
>          Issue Type: Improvement
>          Components: Core UI
>    Affects Versions: 1.0.0
>            Reporter: Rob Moran
>            Priority: Trivial
>         Attachments: nifi-add-processor-dialog.png, nifi-component-samples.png, nifi-interaction-and-menu-samples.png,
nifi-sample-flow.png
>
>
> (I will attach mockups 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.
> ---
> *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. 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-header-@800px_)
> *nifi-header-@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-interaction-and-menu-samples.png*
> To demonstrate user interactions - hover states, tooltips, menus, etc.
> _Will be updating this soon reflect recent design changes_
> *nifi-add-processor-dialog.png*
> Dialog sample
> _Will be updating this soon reflect recent design changes_
> *nifi-component-samples.png*
> To show styling for all components
> _Will be updating this soon reflect recent design changes_



--
This message was sent by Atlassian JIRA
(v6.3.4#6332)

Mime
View raw message