UX feedback -- Report Menu Editor


#1

What we did

UX evaluated the presentation for editing Report menus demonstrated at: https://bluejeans.com/s/7p@C4/ and created a set of feedback, organized into the following categories:

  • Development effort required
  • UX team to investigate further if prioritized

Development effort required

Issue 1: Commit and Discard buttons are active when they should not be in some interaction states:

  • The Commit and Discard buttons are active when I haven’t made any changes yet.
  • Commit button remains active even after I’ve committed changes (when there are no new, additional changes).
    giphy

Suggestions:

  • Make Commit and Discard buttons inactive until the user makes a change.
  • If the user has already Committed a change, ensure that the Commit button is not still active afterwards.
  • Include tooltips over the buttons that explain what each action does: “Commit shows what the new report folders will look like if they are saved.” “Save applies the new menu folder changes to the Reports tree.”

separator

Issue 2: CloudForms discards changes a user makes to the manage folders section if the user clicks elsewhere on the UI before clicking Commit first. It does not prompt the user before discarding.

Suggestion: If the user tries to click anything other than the Commit button after modifying the report menu, show the “Abandon changes?” dialog below that CF currently shows when you commit, but don’t save, and click outside the content panel.

abandonchanges

separator

Issue 3: When there are no Available Reports for the user to select, the selection panel disappears or is rendered as a line.

reportline

Suggestion: Set a minimum width of 275px to the selection panels. The panel will work at the smallest mobile breakpoint and will fit ~45 characters per line. Also two selection panels and a nav column will fit on most desktops without stacking at this size.

separator

Issue 4: The UI doesn’t maintain or indicate tree node selection.

  • When the user selects a tree node to edit, the tree control does not indicate which node is selected.
  • Once the user commits a change to the report menu, the UI loses the tree selection (the Manage Folders nodes no longer appear).
  • When nothing in the tree is selected, the title of the child node placeholder to the right is “Manage Accordions and Folders.” When the user selects a tree node, the title of the child nodes to the right changes to “Manage Folders.”

nodeselection

Suggestions:

  • When the user selects a tree node, either by clicking the caret or the row body, expand it to show child nodes underneath. Users will be able to see that the child nodes in the tree match the accordion titles on the right; always show which tree node the user has selected (maintain the highlight).
  • Maintain the tree selection after the user clicks Commit (continue to show the Manage Folders child nodes she has updated).
  • Display the same title for the child nodes shown on the right, regardless of whether or not a node is selected.

separator

Issue 5: The title of the content panel ( Editing Group ) doesn’t describe what the tasks below it is actually doing.

Suggestion: Change the title to “Edit Report Menus for "Group Name”
separator

Issue 6: It’s unclear that you can edit folder label names in the accordion and the default label for each accordion section (caret) is misleading.

  • To change the name of the folder in the accordion, the user has to double click to edit, but there is no visual indicator that it is editable.
  • The caret/expand character shown isn’t actually clickable and the user cannot expand the accordion.

Suggestion:

  • To show that the user can modify the name of the folder in the accordion, show an edit icon when the user hovers on the folder.
  • Remove the caret from the label so that people will not try to expand the accordion.

menueditpencil

separator
Issue 7: Alignment of Inline Notification is incorrect.


Suggestion: Move inline notification warning iconand text to the left, as shown in the PatternFly image (below) at http://www.patternfly.org/pattern-library/communication/inline-notifications/

separator

UX team to investigate further

Issue 8: Where a user currently edits report folders is confusing (further, the UI refers to these folders as menus). Access Control for Groups for other parts of the UI is part of the user menu (User > Configuration).

Suggestion: UX to investigate if prioritized.

separator

Issue 9: How to edit the report folder structure for different users is difficult in multiple ways described in the dev effort section:

  • Tree interactions are inconsistent with trees throughout the product and also with standard pattern behavior.
  • The accordion pattern used implies the user can expand each accordion when it can’t.
  • Placing an accordion next to a tree table with the same content is confusing and redundant.

Suggestion: UX to investigate if prioritized.