Project

General

Profile

Actions

Cleanup #37337

closed

mgr/dashboard: Consistent labeling for buttons: 'Edit pool' (pool) vs. 'Update RBD' (images) vs. 'Update' (RGW) vs. 'Submit' (Cluster wide flags) ...

Added by Ernesto Puerta over 5 years ago. Updated about 3 years ago.

Status:
Resolved
Priority:
Low
Category:
General
Target version:
% Done:

0%

Tags:
usability
Backport:
nautilus
Reviewed:
Affected Versions:
Pull request ID:

Description

Buttons for saving Update forms are labelled differently:
  • 'Edit pool' in Pool's editor
  • 'Update RBD' in Image's editor
  • Just 'Update' in RGW users & buckets
  • 'Submit' in OSD cluster-wide flags.
For creation, it kind of happens the same:
  • 'Create Pool/Create RBD' for Pools&Images.
  • Just 'Add' for RGW.
While nothing really burning, I'd try to get a shared label for these. That would also make i18n easier. My bet is just either 'Add/Update' or just 'Submit' for both Add/Edit:
  • 'Edit' is redundant and a bit confusing, since you're already 'editing' the thing.
  • Less is more: 'Update {{whatever}}' does not really add extra info, as the whole UI context tells you what you're updating. And this way you avoid naming inconsistencies like the 'Update RBD' when you are 'Editing an Image'.
  • 'Update' vs. 'Submit': Submit sounds more vintage (web 1.0, aka 'submit a form'), but 'Update' forces you to keep 'Add' and 'Update' (nothing terrible though).

Any thoughts?


Files

current.png (16.6 KB) current.png as per proposed in original Ernesto Puerta, 02/26/2019 08:44 PM
suggestion.png (13.8 KB) suggestion.png new suggestion Ernesto Puerta, 02/26/2019 08:44 PM

Related issues 2 (1 open1 closed)

Related to Dashboard - Bug #41244: mgr/dashboard: Confusing naming of buttons in edit dialogsNewIvo Almeida

Actions
Copied to Dashboard - Backport #39003: nautilus: mgr/dashboard: Consistent labeling for buttons: 'Edit pool' (pool) vs. 'Update RBD' (images) vs. 'Update' (RGW) vs. 'Submit' (Cluster wide flags) ...ResolvedErnesto PuertaActions
Actions #1

Updated by Ernesto Puerta over 5 years ago

  • Subject changed from Consistent labeling for buttons: 'Edit pool' (pool) vs. 'Update RBD' (images) vs. 'Update' (RGW) vs. 'Submit' (Cluster wide flags) ... to mgr/dashboard: Consistent labeling for buttons: 'Edit pool' (pool) vs. 'Update RBD' (images) vs. 'Update' (RGW) vs. 'Submit' (Cluster wide flags) ...
Actions #2

Updated by Ernesto Puerta over 5 years ago

I briefly went through both EOS and Patternfly projects for guidelines:
  • in EOS I didn't find any direct suggestion.
  • in PF they're commonly using 'Save' and 'Cancel' (instead of our 'Edit'/'Update'/'Submit' and 'Back').
Actions #3

Updated by Lenz Grimmer over 5 years ago

Per our discussion, we'll use "Action + Object", e.g. "Delete RBD", "Create Pool".
Use "Cancel" for aborting an operation instead of "Back" or something else.

Follow https://www.patternfly.org/styles/terminology-and-wording/ for "Create" vs. "Add"

Examples: Create OSD, Create Pool, Create RBD Image but Add User, Add Group, Add Permission

Actions #4

Updated by Ernesto Puerta about 5 years ago

  • Status changed from New to In Progress

Updated by Ernesto Puerta about 5 years ago

Most naming inconsistencies come from the high redundancy in text items, that needs to be kept manually. There are enough textual/UI hints for the user to become aware of their current actions and outcomes: URL, breadcrumbs, frame title, button label, task title.

My suggestion would be to:
- Keep/use CRUD-like naming for URLs: <resource>/{create,edit,delete,clone,copy}
- Keep breadcrumbs, as they help understand the user where they are within the website navigation.
- Keep Form Titles in Headline capitalization ("Action Resource", or even simpler: "Resource")
- Simplify buttons: only "Save/Cancel", without resource/item mentioning (no button labeled "Add Image", but just "Save").

as per proposed in original new suggestion

Actions #6

Updated by Lenz Grimmer about 5 years ago

Hi Ernesto,

Ernesto Puerta wrote:

Most naming inconsistencies come from the high redundancy in text items, that needs to be kept manually. There are enough textual/UI hints for the user to become aware of their current actions and outcomes: URL, breadcrumbs, frame title, button label, task title.

My suggestion would be to:
- Keep/use CRUD-like naming for URLs: <resource>/{create,edit,delete,clone,copy}
- Keep breadcrumbs, as they help understand the user where they are within the website navigation.
- Keep Form Titles in Headline capitalization ("Action Resource", or even simpler: "Resource")
- Simplify buttons: only "Save/Cancel", without resource/item mentioning (no button labeled "Add Image", but just "Save").

new suggestion

I would be very much in favor of adapting this, thank you for this proposal! I'm all for simplicity, so the second suggestion would be my favorite. Thanks!

Actions #7

Updated by Lenz Grimmer about 5 years ago

  • Tags set to usability
Actions #8

Updated by Ernesto Puerta about 5 years ago

Thanks, Lenz. I'll update my PR to get it aligned with the former proposal. I've also asked Ju to have a look at this for her views on it.

Actions #9

Updated by Ju Lim about 5 years ago

First off thanks for bringing this up. I've to admit it was confusing to me as well when I first started looking at Ceph Dashboard, and I'm glad we've folks willing and able to take this one up!

  • +1 Keep/use CRUD-like naming for URLs: <resource>/{create,edit,delete,clone,copy}
  • +1 Keep breadcrumbs, as they help understand the user where they are within the website navigation, and it should say “Action Resource”.
  • Have Form Titles in with appropriate capitalization/camelcase, i.e. “Action + Object” (e.g. Create Bucket) so it’s clear to user what he/she is doing -- especially if they walk away from their browser (a lot of context-switching happens in a regular day) and returns back to the Ceph Dashboard window/tab in the browser.
  • Buttons should be ““Action + Object” (e.g. Create Bucket) or “Cancel” (which replaces “Back” as it’s confusing when it’s really aborting/cancelling the action). The reason I suggest not using “Save” or “Submit” is they are not clear to the user what they are doing. From past experience and usability testing especially in wizards with many steps, “Next” and “Save” was not clear whether data is being persisted or not, whether it was saving a state or actually creating something, etc. It's probably less a concern since we don't yet have any wizards in Ceph Dashboard yet.
Actions #10

Updated by Ernesto Puerta about 5 years ago

Thanks a lot for the feedback, Ju!

So, just to clarify:
  • On breadcrumbs, you suggest moving from, let's say:
    1. "Object GW >> Bucket >> Create" (current) to
    2. "Object GW >> Create Bucket" or
    3. "Object GW >> Bucket >> Create Bucket"?

If everyone else is happy with the suggestions I'll make the changes (not many) to bring the missing bits in.

Actions #11

Updated by Ju Lim about 5 years ago

Regarding breadcrumbs, both #2 or #3 work, though I'd suggest going with #3 ("Object GW >> Bucket >> Create Bucket").

  • On breadcrumbs, you suggest moving from, let's say:
    1. "Object GW >> Bucket >> Create" (current) to
    2. "Object GW >> Create Bucket" or
    3. "Object GW >> Bucket >> Create Bucket"?
Actions #12

Updated by Lenz Grimmer about 5 years ago

Ju Lim wrote:

Regarding breadcrumbs, both #2 or #3 work, though I'd suggest going with #3 ("Object GW >> Bucket >> Create Bucket").

  • On breadcrumbs, you suggest moving from, let's say:
    1. "Object GW >> Bucket >> Create" (current) to
    2. "Object GW >> Create Bucket" or
    3. "Object GW >> Bucket >> Create Bucket"?

Thanks for the suggestions! Option#3 sounds good to me as well.

Actions #13

Updated by Ernesto Puerta about 5 years ago

  • Status changed from In Progress to Fix Under Review
Actions #14

Updated by Lenz Grimmer about 5 years ago

  • Target version changed from v14.0.0 to v15.0.0
  • Backport set to nautilus
  • Pull request ID set to 26572
Actions #15

Updated by Ernesto Puerta about 5 years ago

  • Status changed from Fix Under Review to Pending Backport
Actions #16

Updated by Nathan Cutler about 5 years ago

  • Copied to Backport #39003: nautilus: mgr/dashboard: Consistent labeling for buttons: 'Edit pool' (pool) vs. 'Update RBD' (images) vs. 'Update' (RGW) vs. 'Submit' (Cluster wide flags) ... added
Actions #17

Updated by Ricardo Marques about 5 years ago

  • Status changed from Pending Backport to Resolved
Actions #18

Updated by Lenz Grimmer over 4 years ago

  • Related to Bug #41244: mgr/dashboard: Confusing naming of buttons in edit dialogs added
Actions #19

Updated by Ernesto Puerta about 3 years ago

  • Project changed from mgr to Dashboard
  • Category changed from 132 to General
Actions

Also available in: Atom PDF