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
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.
Issue 2: Default filter titles don’t contain easily understandable description of what the filter shows.
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”?
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.
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.
Suggestion: Move them below the input fields to indicate a workflow order (fill these out, then apply your changes to the filter you built).
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.
Issue 6: The Use Alias input field overlaps the drop down control above it.
Suggestion: Add more space between fields.
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/
Issue 8: Certain strings in the expression are in bold red when there’s no error.
Suggestion: Remove bold and red text treatment from strings.
Usability Issues Identified
Issue 9: Element does not support type ahead matching or search, which causes usability issues when list is long.
Suggestion: This pattern needs to be a component which can be embedded in other modals or pages as needed.
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.
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.
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.