Improvement and homogenisation of app's UI design
Problem/Opportunity Statement
There are multiple improvements and consistencies that can be brought in our components (some suggestions may appear subjective but I'm happy to find & share UX resources to back them up):
-
1. (#783 (closed)) Background should be greyish, and cards should be white instead of vice-versa. For dark theme, background should be blackest, and cards should be light-black. PatternFly and almost every design system agrees on this - a lighter object on a darker container object make it look placed above the container. -
2. (#782 (closed)) Status badges are not very distinguishable from Buttons because they have shadow (see server details page, and compare action butoons with status). Also shape can be changed (maybe by increasing border radius). -
3. (#780 (closed)) Toggle tips and dropdowns -
3.a. UI elements with a popover (toggleTip, dropdown, etc.) should have soft edges (border color with very low opacity) and uniform & larger-than-current padding to give content a room to breathe. -
3.b. They should be smart enough in orienting them as per viewport so that they don't get clipped if the visibility-control button is on left edge or don't cause horizontal scroll bar to appear if the button is on right edge. -
3.c. They should also automatically close when clicking outside them (this is standard behaviour for such components throughout the web) - it even creates problem if user didn't click back on the visibility-control button before opening other popover that blocks its view, for e.g.:
-
-
4. (#780 (closed)) Specific to toggleTip, it should not have grey background (same as point 1) and should use smaller font size (and perhaps we can try to make font color lighter) - it's tip, it's supposed to draw lesser attention than everything else. Also the font on settings page's toggletip is bold which it shouldn't be - they all should be same in style. -
5. (#780 (closed)) The "Create" dropdown should've lines as divider between selectable items, not 4-direction surrounding boxes. -
6. (#780 (closed)) There's no standard widget for popover which can solve many of the problems in point 3 and 5. -
7. (#709 (closed)) The way cards are used on server details page differs from how they are used in other pages. -
8. Toasts: -
8.a. (#798 (closed)) When notifications appear, they block the top-right area where "Create" button (an important part of our UI) is present. -
8.b. (#799) It's not clear how to close them (clicking on the notification popover itself is so counter-intuitive), there should be a close icon-button or they should disappear after a fixed time interval. -
8.b. (#782 (closed)) Also white text on red background has poor readabilty and makes it look too alarming - we can instead use dark red text on light red background (see Danger Alert at PF). Maybe Snackbar from orasund/elm-ui-widgets is better suited for this than Toasty.
-
-
9. (#783 (closed)) There should be a neutral palette (shades of grey, ranging from white to black) as a part of ExoPalette that should be used at all places where shades of grey are used. I'd further suggest to save these colors with their own rgb (e.g. 96,96,96) instead of black with opcaity (e.g. rgba 0,0,0,0.2) because the latter is unreliable for e.g. when you use that on an element in front of another element that doesn't have neutral color, so the former will take care of all the cases. 10. Layout of different pages is not consistent for e.g. the home page and instance list page have 900px fixed-width layout whereas the project overview page and instance details page have full width layout (related #658 (closed)). Perhaps we should also try centring the whole thing when using fixed layout instead of keeping it sticked to the left edge.-
11. (#781 (closed)) The warning on form should not be hidden in a tooltip on create server page. We should just disable the button and show the warning on the space left of it. -
12. (#782 (closed)) There should be a standard Alert widget. Different pages use their own implementation that have visual differences. For e.g. floating ip list page's warning alert looks too loud, padding is less, etc. -
13. (#794 (closed)) Audit the app for uneven spacing problems, some of the identified ones are: -
The vertical spacing on create server form are uneven - some headings have padding others don't. -
#694 (closed), #641 (closed)
-
What would success / a fix look like?
Fix these problems / address the suggestions.
Also we should audit the entire app to find more inconsistencies or areas where UI design can be improved.
Create an interface style guide. See the Cockpit Project Interface Styleguide for an example & inspiration. Also SPUR – Super Picky UI Reviews.
Edited by Jaladh Singhal