UX feedback -- Expression Editor


#1

Comments and questions encouraged.

UX evaluated the expression editor demonstrated at: https://redhat.bluejeans.com/playback/s/qORPO3GLfck1p23TscLwFSXh58wrelq3D9aVRrGzm22J3Bh9xJFn94XR0D9NpFL4
and created a set of feedback, organized into the following categories:

  • Design solution included
  • Usability issues identified
  • PatternFly issues identified

2017-11-22_10-58-06
Design Solution Included

Issue 1: “Global filters” is the node title here, but Global typically means available throughout the application. These filters are actually default or already created for you?

Suggestion: Rename to Default Filters.

separator

Issue 2: Default filter titles don’t contain easily understandable description of what the filter shows.

exp_tooltip_filter

Suggestion: Preferably rename the title to something more descriptive, in natural language. Also, instead of repeating the node name in the node tooltip, use natural language. E.g., change “Environment/Prod” to “Show all VMs with the tag production”?

separator

Issue 3: The filter expression (text in yellow below) doesn’t appear to be clickable. When clicked, the link text turns yellow and is appears underlined (non standard HTML link treatment; typically, yellow means warning in a UI). In addition, natural language describing the expression would be more efficient to skim/understand.

linkyellow

Suggestions:

  • Rename the link to what’s shown below and show the text as blue: “Show all VMs with the tag production (expression label)” where the label text is a natural language description of the expression and the internal name is in parentheses next to it. No text should appear in red.

  • Observe the treatment for linked text as shown in PatternFly. See the Style Samples section at http://www.patternfly.org/styles/typography/

Issue 4: Action buttons present multiple challenges:

  • The “go” checkbox and delete buttons are above the fields whose input they apply.
  • There is another identical delete button above the expression.
  • The middle Delete button is active when there are no changes or expression in the dialog.

expmovebuttons

Suggestion: Move them below the input fields to indicate a workflow order (fill these out, then apply your changes to the filter you built).

separator

Issue 5: The Advanced Search dialog is far wider than the content in it and its action buttons are far from the form content.

Suggestion: Size the dialog to the content.

separator

Issue 6: The Use Alias input field overlaps the drop down control above it.

expression_inputoverlap

Suggestion: Add more space between fields.

separator

Issue 7: Labels are missing or not formatted as PatternFly shows. The CONTAINS label is capitalized. It is also the only label for any of the input fields.

Suggestion: Label the other input fields, as shown in PatternFly: http://www.patternfly.org/pattern-library/forms-and-controls/field-labeling/

separator

Issue 8: Certain strings in the expression are in bold red when there’s no error.

2017-11-22_10-43-26

Suggestion: Remove bold and red text treatment from strings.

2017-11-22_10-58-06

Usability Issues Identified

Issue 9: Element does not support type ahead matching or search, which causes usability issues when list is long.

image

Suggestion: This pattern needs to be a component which can be embedded in other modals or pages as needed.

separator

Issue 10: It’s not clear how the the checkbox titled “user will input the value” interacts with the drop down next to it. Should that control be a combo box instead?

Suggestion: UX to work with Dev to investigate and decide if the control should change.

separator

Issue 11: The workflow on the Advanced Search dialog isn’t clear to me. E.g.:

  • There are action buttons in the top section, but (I think) you begin modifying the expression in the bottom section?
  • Why is the expression in yellow in the top section with action buttons if the bottom section acts on it as well?
  • The invitation to activate the bottom part of the form isn’t obvious (i.e., that clicking on the expression or empty state indicator (???)
  • Is one section optional? Descriptive labels could identify why there are two sections and what you can do with them.
  • Not sure which buttons do what on the dialog (difference between Load and one of the X buttons? Difference between Load and Apply? Difference between Apply and Save?) and when buttons should be enabled/disabled based on workflow.

Suggestion: UX should work with Dev to propose a possible reordering/rearrangement of the sections on the form.

separator

Issue 12: From the user point of view, the current Advanced Search dialog is actually filtering an existing list, not searching. In addition, the Expressions Editor is embedded in many areas of the Operations UI.

Suggestion: The UX team is working on a pattern of interactions for Advanced Filtering. When this is available, UX and Development should reconvene to understand priority and effort required to apply these new patterns as components as necessary.


#2

I wonder - if the primary reason to keep the tree is to navigate between saved searches, why is it required to be shown at all times? e.g. I would expect to expand in only when i need it, or even in a dropdown next to the search / filtering above the content?


#3

Great initiative.

Some comments from my side:

  1. Issue 6: The Use Alias input field overlaps the drop down control above it.
    Why isn’t the alias moved next to the expression name (for which it serves as an alias) but rather stays sort of in the middle of the form? that way it will not overlap anything and there won’t be more space needed.
  2. the yellow highlighting seems a bit strange and does not fit the rest of the UI colors well.
  3. Issue 4 - absolutely agree, those buttons have to move somewhere/be deleted because of the duplication.
  4. some fields are mandatory but are not marked as such, and user gets an error only after pressing “submit”

I added a while back a few UX issues that are related to this dialog, some repeat the above, some add to it, please have a look:
https://github.com/ManageIQ/manageiq-ui-classic/issues/1943
https://github.com/ManageIQ/manageiq-ui-classic/issues/1980
https://github.com/ManageIQ/manageiq-ui-classic/issues/1945
https://github.com/ManageIQ/manageiq-ui-classic/issues/1946


#5

Agreed…seems like it’s taking up some valuable horizontal real estate, too. I know we’ll be talking about the explorer trees in a future meeting (IMO, these saved filters/searches are using that explorer pattern). OK by you if we postpone this discussion until then?


#6

Thank you, A. Will review these soon.


#7

A few more issues:
https://github.com/ManageIQ/manageiq-ui-classic/issues/2878
https://github.com/ManageIQ/manageiq-ui-classic/issues/2879


#8

Thanks for pointing these out Alissa … we can provide design suggestions inside of these issues.

Currently, I’m not sure of the different between Save & Apply, but agreed that we need a Cancel for sure. I’m assuming that clicking the “X” is performing a cancel now, but we will look into it!