Project

General

Profile

Cleanup #35691

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

mgr/dashboard: Proposed Landing Page

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

Status:
Resolved
Priority:
Normal
Category:
General
Target version:
% 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 Martínez, 10/29/2018 08:46 PM

Screen Shot 2019-01-31 at 10.28.29 AM.png View - Pie chart green and beige color changes (102 KB) Ju Lim, 01/31/2019 03:28 PM


Related issues

Related to Dashboard - Feature #27050: mgr/dashboard: Landing Page Enhancements Resolved
Related to Dashboard - Feature #24573: mgr/dashboard: Provide more "native" dashboard widgets to display live performance data Resolved
Related to Dashboard - Bug #36740: mgr/dashboard: PG Stats, Pool usage and read/write ops missing from Pools table Resolved
Related to Dashboard - Feature #37981: mgr/dashboard: Improve dashboard usability for visually impaired users New
Copied to Dashboard - Cleanup #35692: Proposed background color Won't Fix

History

#1 Updated by Ernesto Puerta over 5 years ago

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

#2 Updated by Ernesto Puerta over 5 years ago

#3 Updated by Ernesto Puerta over 5 years ago

#4 Updated by Ernesto Puerta over 5 years ago

#5 Updated by Ernesto Puerta over 5 years ago

#6 Updated by Ernesto Puerta over 5 years ago

  • File deleted (landing_page.png)

#7 Updated by Anonymous over 5 years 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 over 5 years ago

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

#9 Updated by Anonymous over 5 years 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 over 5 years ago

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

#11 Updated by Ju Lim over 5 years ago

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

#12 Updated by Ju Lim over 5 years ago

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

#13 Updated by Ju Lim over 5 years ago

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

#14 Updated by Ju Lim over 5 years ago

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

#15 Updated by Ricardo Marques over 5 years ago

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

#16 Updated by Ernesto Puerta over 5 years 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 over 5 years 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 over 5 years ago

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

#19 Updated by Lenz Grimmer over 5 years ago

  • Assignee set to Alfonso Martínez
  • 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 over 5 years 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 over 5 years 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 over 5 years 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 Martínez over 5 years 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 over 5 years ago

  • Status changed from New to Fix Under Review

#27 Updated by Ricardo Marques over 5 years ago

  • Status changed from Fix Under Review to Resolved

#28 Updated by Lenz Grimmer over 5 years 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 over 5 years ago

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

#30 Updated by Lenz Grimmer about 5 years ago

  • Related to Feature #37981: mgr/dashboard: Improve dashboard usability for visually impaired users added

#31 Updated by Ju Lim about 5 years ago

Noting that we're planning to change the green and beige on the color palette to match the status colors for better UX. See https://github.com/ceph/ceph/pull/26203#issuecomment-459385271 for further clarification.

Also available in: Atom PDF