[
https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Rob Moran updated NIFI-1323:
----------------------------
Attachment: nifi-configure-processor-settings.png
nifi-configure-processor-scheduling.png
*nifi-configure-processor-settings*
*nifi-configure-processor-scheduling*
I wanted to comment on these two mockups as they demonstrate some ideas for
change beyond just styling:
The first is making the contents of this dialog scrollable. The thought here is
to make the configuration workflow a little more efficient. As a user you could
simply scroll or tab through the entire configuration process without having to
move away to interact with tabs to move to another section. Tabs have been
replaced with pills, that when clicked on will jump to that section. If you
were to scroll or tab through the content, the corresponding pill for that
section would highlight.
Additionally, this scrollable model can accommodate any number of inputs and
other settings-related controls depending on the type of processor and/or
dynamic changes that may occur based on dependent settings.
The second is context-sensitive help. In *nifi-configure-processor-settings*
you can see as the 'Penalty Duration' input is in focus, help text appears to
the right giving the user more insight to the task at hand. Help text for
'Yield Duration' is shown as well since it is together "on the same line." This
also enables the user to stay focused on the configuration process without
having to move away to hover a help icon.
The third is starting to think a little more about language and making tasks
for less-experienced users easier. In *nifi-configure-processor-scheduling*
you'll see the scheduling section has been designed in such a way that reading
through it gives a clear picture of the outcome – _schedule by time and run as
often as possible._ Options related to 'CRON' would be exposed under 'show more
time options.' Here we can provide more intuitive controls to set advanced time
options instead of making the user enter a properly formatted expression they
may not know. At the same time, we should continue to provide advanced users
the ability to use that expression if they want.
> 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-configure-processor-scheduling.png,
> nifi-configure-processor-settings.png, nifi-dialog-samp...@800px.png,
> nifi-global-menu.png, nifi-interaction-and-menu-samples.png,
> nifi-sample-fl...@800px.png, nifi-sample-flow.png,
> nifi-shell-samp...@800px.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-add-processor-dialog.png*
> Dialog sample. This sample shows the 'Add Processor' dialog.
> *nifi-component-samples.png*
> To show styling for all components
> *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-global-menu*
> To show global menu
> *nifi-interaction-and-menu-samples.png*
> To demonstrate user interactions - hover states, tooltips, menus, etc.
> *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-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-shell-sample-@800px*
> Shell sample in 800px wide viewport. This sample shows the 'Data Provenance'
> table.
--
This message was sent by Atlassian JIRA
(v6.3.4#6332)
