Project

General

Profile

Feature #27218

mgr/dashboard: Style guide to give a the UI an overall look and feel

Added by Volker Theile 7 months ago. Updated 6 months ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
dashboard/general
Target version:
-
Start date:
08/24/2018
Due date:
% Done:

0%

Source:
Tags:
Backport:
Reviewed:
Affected Versions:
Pull request ID:

Description

Currently there is a wild mix of workflows spread across the whole UI how things, e.g. invalid form field input or successful actions, are handled.

For example the 'Block> Images > Add RBD' dialog does not check if the entered name already exists while typing it. This shouldn't be a problem nowadays. If you enter an already used name and press 'Create RBD', the error message, that the name already exists, is displayed as notification. IMHO such messages shouldn't displayed via notification, instead they should be displayed in the form. As a user i expect that the 'Name' input field is now marked as red and a meaningful info message like 'Name is already used' is shown below the invalid form field.

The 'Object Gateway > Users > Add' form is an example how it should be done.

Some dialogs display a notification on successful actions. IMHO notifications are only useful for erroneous actions. The user realizes a successful action via the UI activity, e.g. after a RBD image is successfully created the list view is displayed afterwards. On error, the add dialog is still shown.

Topics to be discussed for a style guide to give a the UI an overall look and feel:

  • Mark invalid form fields as red and show a meaningful error message
  • Do NOT use notifications for form validation messages
  • Use async validation during typing wherever possible
  • Do NOT use notifications on successful actions
  • Define how to type menu entries and breadcumbs (Every word starts in uppercase or only the first one, e.g. 'User Management' vs. 'User management').
  • Use read-only inputs fields in forms to display not editable text.
  • ...

add-user-embedded.png View (38.1 KB) Patrick Nawracay, 09/07/2018 09:31 AM

confirmation-dialog.png View (19.1 KB) Patrick Nawracay, 09/07/2018 09:31 AM

custom-dialog-osd-flags.png View (86.8 KB) Patrick Nawracay, 09/07/2018 09:31 AM


Related issues

Related to mgr - Documentation #24210: mgr/dashboard: Implement and document UX design workflow and guidelines New 05/21/2018
Related to mgr - Cleanup #35688: mgr/dashboard: Community branding & styling recommendations New 09/05/2018
Related to mgr - Cleanup #36070: mgr/dashboard: Use a unified quoting style (double quotes) across all UI elements (e.g. notifications) New 09/18/2018
Related to mgr - Cleanup #33606: mgr/dashboard: Use ModalComponent in all modals New 08/28/2018
Related to mgr - Bug #34312: mgr/dashboard: Style guide for frontend/Angular coding conventions New 08/29/2018
Related to mgr - Feature #36607: mgr/dashboard: Display description on mouse hover New 10/28/2018

History

#1 Updated by Volker Theile 7 months ago

  • Subject changed from mgr/dashboard: UI style guide how to handle invalid form input to mgr/dashboard: Style guide to give a the UI an overall look and feel
  • Description updated (diff)

#2 Updated by Patrick Nawracay 7 months ago

Volker Theile wrote:

  • Mark invalid form fields as red and show a meaningful error message
  • Do NOT use notifications for form validation messages
  • Use async validation during typing wherever possible
  • Do NOT use notifications on successful actions
  • ...

I agree with all those points but also think, as you do, that, for some form elements, it's not possible to validate on every keystroke simply because of the time it'd take or the load it'd produce.

+1

#3 Updated by Lenz Grimmer 7 months ago

  • Related to Documentation #24210: mgr/dashboard: Implement and document UX design workflow and guidelines added

#4 Updated by Stephan Müller 7 months ago

I would suggest to add a list of components that should be used if possible.
As this topic has the potential to raise a lot of bike-shed painting discussions, it makes sense to schedule a meeting to evaluate all needed things in an ehterpad first and than add the outcome to this, to this tracker issue or just link the etherpad

#5 Updated by Patrick Nawracay 7 months ago

I was just asked to use the WarningPanelComponent for error messages to reuse components which are already there and to be consistent accros the UI. I think it's worth noting it in the style guide, too.

#6 Updated by Patrick Nawracay 7 months ago

Although specifically created for SUSE, it might make sense to adopt the Writing Guides in the UI wherever text is presented to the user. There's also a similar Writing Guide from RedHat. Discussing the writing style seems to be worth of having a separate discussion about it, as it could be rather comprehensive and time consuming. It could also make sense to cherry pick from both worlds.

#7 Updated by Ernesto Puerta 7 months ago

  • Related to Cleanup #35688: mgr/dashboard: Community branding & styling recommendations added

#8 Updated by Volker Theile 7 months ago

  • Description updated (diff)

#9 Updated by Volker Theile 7 months ago

  • Description updated (diff)

#10 Updated by Patrick Nawracay 7 months ago

We use different buttons to cancel a dialog/wizard. One type of button looks just like a link, the other is a white button. And one time there's a back button instead of a cancel button. Sometimes it's a modal dialog, sometimes the dialog is embedded in the page. I don't have a strong opinion on any of these but we should stick to one type of button and dialog.

Some examples:



edit:

There seems to be consistency with adding/creating something. These forms are always embedded.

#12 Updated by Lenz Grimmer 6 months ago

  • Related to Cleanup #36070: mgr/dashboard: Use a unified quoting style (double quotes) across all UI elements (e.g. notifications) added

#13 Updated by Volker Theile 6 months ago

  • Description updated (diff)

#14 Updated by Lenz Grimmer about 1 month ago

  • Related to Cleanup #33606: mgr/dashboard: Use ModalComponent in all modals added

#15 Updated by Lenz Grimmer about 1 month ago

  • Related to Bug #34312: mgr/dashboard: Style guide for frontend/Angular coding conventions added

#16 Updated by Lenz Grimmer about 1 month ago

  • Related to Feature #36607: mgr/dashboard: Display description on mouse hover added

Also available in: Atom PDF