Cleanup #35691
Cleanup #35688: mgr/dashboard: Community branding & styling recommendations
mgr/dashboard: Proposed Landing Page
0%
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.
Related issues
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
- Copied from deleted (Cleanup #35690: Proposed Masthead)
#3 Updated by Ernesto Puerta over 5 years ago
- Copied to Cleanup #35692: Proposed background color added
#4 Updated by Ernesto Puerta over 5 years ago
- File landing_page_original.png View added
- Description updated (diff)
#5 Updated by Ernesto Puerta over 5 years ago
- File ceph_dash_1_fix.png View added
- Description updated (diff)
#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
- File ceph_chartcolors 2.png View added
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
- File ceph_chart_accessible.png View added
- File ceph_chart_accessible2.png View added
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.
#23 Updated by Alfonso Martínez over 5 years ago
#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
#26 Updated by Tatjana Dehler over 5 years ago
#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.
#32 Updated by Ju Lim about 5 years ago
- File Screen Shot 2019-01-31 at 10.28.29 AM.png View added