Project

General

Profile

Cleanup #35691

Cleanup #35688: mgr/dashboard: Community branding & styling recommendations

mgr/dashboard: Proposed Landing Page

Added by Ernesto Puerta 3 months ago. Updated about 1 month ago.

Status:
Resolved
Priority:
Normal
Assignee:
Category:
dashboard/general
Target version:
Start date:
09/05/2018
Due date:
% Done:

0%

Tags:
UI, low-hanging-fruit
Backport:
Reviewed:
Affected Versions:
Pull request ID:

Description

Current

Proposal

  • Change background color to F5F5F5.
  • Show an always-present border (#EFEFEF) around each clickable value which then fills-in on hover
  • Hover border (#D1D1D1)
  • Hover fill (#F3F3F3)
  • Remove comma from between the values that are hyperlinked
  • Change pie chart colors to Navy (1D699D) and Salmon (FF7592)

Note: This is not the complete landing page. For latest, please look at screenshot at https://tracker.ceph.com/issues/24573#note-36.

landing_page_original.png View (767 KB) Ernesto Puerta, 09/05/2018 11:39 AM

ceph_dash_1_fix.png View (68.5 KB) Ernesto Puerta, 09/05/2018 03:13 PM

ceph_chartcolors 2.png View - Pie Chart Colors - up to 5 colors combination (58.1 KB) Ju Lim, 09/10/2018 02:58 PM

ceph_chart_accessible.png View - 1px border example (36.9 KB) Michael Celedonia, 10/19/2018 01:27 PM

ceph_chart_accessible2.png View - Tooltip example (40.9 KB) Michael Celedonia, 10/19/2018 01:27 PM

2018-10-29-landing-page-chart-improvements.png View (58.8 KB) Alfonso MH, 10/29/2018 08:46 PM


Related issues

Related to mgr - Feature #27050: mgr/dashboard: Landing Page Enhancements Resolved 11/16/2018
Related to mgr - Feature #24573: mgr/dashboard: Provide more "native" dashboard widgets to display live performance data Resolved 07/05/2018
Related to mgr - Bug #36740: mgr/dashboard: PG Stats, Pool usage and read/write ops missing from Pools table Need Review 11/09/2018
Copied to mgr - Cleanup #35692: Proposed background color New 09/05/2018

History

#1 Updated by Ernesto Puerta 3 months ago

  • File landing_page.png added
  • Copied from Cleanup #35690: Proposed Masthead added

#2 Updated by Ernesto Puerta 3 months ago

#3 Updated by Ernesto Puerta 3 months ago

#4 Updated by Ernesto Puerta 3 months ago

#5 Updated by Ernesto Puerta 3 months ago

#6 Updated by Ernesto Puerta 3 months ago

  • File deleted (landing_page.png)

#7 Updated by Erwan Velu 3 months ago

The OSD box layout seems not scalable at my taste.
If you consider 3 digits numbers, the output will be messy to read
I don't know if that is visually possible but having up/in/down/out in fixed positions with numbers below will be a great improvement to get a constant place for those important numbers.
I think that's just an enhanced version of the same problem seen in Metadata & Monitors boxes as we have more sub-states and bigger numbers.

#8 Updated by Ju Lim 3 months ago

Updating the pie chart color palette to allow up to 5 different colors (as needed by the PG Status panel).

#9 Updated by Erwan Velu 3 months ago

Ju Lim wrote:

Updating the pie chart color palette to allow up to 5 different colors (as needed by the PG Status panel).

I suggest to select other colors as their are too close from each others (dark blue / light blue, purple). For people having color blindness that will be a nightware.

Please read this https://uxdesign.cc/what-my-color-blindness-taught-me-about-design-d3009a93ff9c or https://venngage.com/blog/color-blind-friendly-palette/

#10 Updated by Volker Theile 3 months ago

On http://paletton.com you can simulate color blindness to find out if the choosen colors are ok.

#11 Updated by Ju Lim 3 months ago

Noting that this needs to be reconciled and merged with https://tracker.ceph.com/issues/27050.

#12 Updated by Ju Lim 3 months ago

  • Related to Feature #27050: mgr/dashboard: Landing Page Enhancements added

#13 Updated by Ju Lim 3 months ago

  • Related to Feature #27050: mgr/dashboard: Landing Page Enhancements added

#14 Updated by Ju Lim 3 months ago

  • Related to deleted (Feature #27050: mgr/dashboard: Landing Page Enhancements)

#15 Updated by Ricardo Marques 3 months ago

  • Related to Feature #24573: mgr/dashboard: Provide more "native" dashboard widgets to display live performance data added

#16 Updated by Ernesto Puerta 3 months ago

Erwan Velu wrote:

I suggest to select other colors as their are too close from each others (dark blue / light blue, purple). For people having color blindness that will be a nightware.

Please read this https://uxdesign.cc/what-my-color-blindness-taught-me-about-design-d3009a93ff9c or https://venngage.com/blog/color-blind-friendly-palette/

Yup, that's been a topic we've discussed previously. The good thing is that all charts have tooltips, so in case of doubt just moving over is enough to make it clear. On one side, for data visualization, especially when it comes to status monitoring, green-red pairs are extremely intuitive (for 90% of the people), so we could look for another alternative, like adding background textures: ChartJS supports patternomaly.

#17 Updated by Ju Lim 3 months ago

Noting here regarding https://tracker.ceph.com/issues/35691#note-7 (content/text scaling issues) for the OSDs, Monitors, and Metadata Servers cards that Erwan Velu commented about.

I've some thoughts on how to address the scalability issue, and below are some solutions:

- (1) word wrap them onto 2 lines and change to a smaller font if needed to get it to fit if the text goes beyond n characters

- (2) replace the state with icons but then we would want that to be consistent elsewhere (e.g. pools list) and other cards as well as other views/pages to be consistent. See https://www.patternfly.org/pattern-library/cards/aggregate-status-card/#design for an example.
- (3) alternately, we just report what's "broken," e.g.
nnnnn (nnnn down, nnnn out) but this would need to be consistent elsewhere with the philosophy only report broken stuff vs. showing everything (ok and not ok states). See https://redhat.invisionapp.com/share/589XIRJBW#/screens for an example.

My current recommendation is to try (1) above to see if this might work.

#18 Updated by Lenz Grimmer 3 months ago

  • Subject changed from Proposed Landing Page to mgr/dashboard: Proposed Landing Page

#19 Updated by Lenz Grimmer about 2 months ago

  • Assignee set to Alfonso MH
  • Target version set to v14.0.0
  • Tags changed from UI to UI, low-hanging-fruit

@Alfonso - could you please look into this? I wonder if most of this hasn't already been addressed by your latest changes to the landing page in the meanwhile?

#20 Updated by Lenz Grimmer about 2 months ago

According to an IRC conversations with Alfonso about this, the only thing yet to be addressed here is adapting the color palette and whether or not to add textures to colors for visually impaired users.

#21 Updated by Lenz Grimmer about 2 months ago

Per our conversation during today's standup, we agreed to adapt the color scheme first and create a separate tracker issue that covers dashboard enhancements related to users with vision impairments (e.g. creating a high-contrast theme or using patterns for users affected by color blindness). These enhancements should not be specific to the landing page, but should apply to the entire dashboard.

#22 Updated by Michael Celedonia about 2 months ago

Hello everyone,

I'd like to propose a solution here that we are utilizing in our own design system regarding chart color accessibility. There are 2 parts to this solution:

1. Rather than changing the colors of the chart, adding a 1px border between chart segments allows us to clearly define the size of each segment for users who might not usually be able to see that change in color.

2. Utilizing a tooltip on hover or click for each of the segments allows colorblind users to make a clear connection between which value belongs to which label. I believe this is already implemented as stated by Ernesto above.

The idea with the above is to ensure we can still convey the same information that a color sighted user can gain from color. I have attached a mockup showing how that might look (I think whatever tooltip style you currently have should be fine, mainly want to show the 1px border).

The alternate as already stated is to add background textures, which is a good solution as well, though I've found it can be difficult to reflect the patterns in the key without the key shapes having to be unnecessarily large. However this might not be as big an issue and if it is the preferred solution I would be happy to create some mockups reflecting that.

#24 Updated by Alfonso MH about 2 months ago

As some of the suggestions have been addressed in related issue,
this is the work done (following suggestions):
- Updated chart colors.
- Added border for chart slices (visual impairment help).
- Adjusted chart vertical centering (Ernesto Puerta suggestion).

#25 Updated by Lenz Grimmer about 2 months ago

  • Status changed from New to Need Review

#27 Updated by Ricardo Marques about 2 months ago

  • Status changed from Need Review to Resolved

#28 Updated by Lenz Grimmer about 1 month ago

  • Related to Bug #36740: mgr/dashboard: PG Stats, Pool usage and read/write ops missing from Pools table added

#29 Updated by Lenz Grimmer about 1 month ago

Note that this modification resulted in a regression (loss of information) about Ceph Pools. I have submitted #36740 to keep track of this.

Also available in: Atom PDF