Theme colours proposal

[germa89]

Current status

In PyMAPDL docs we have switched away from the default black header (rgb(0, 0, 0)) and white background (rgb(255, 255, 255)).
Now we use a lighter dark (rgb(35, 35, 35)) and a darker white (rgb(245, 245, 245)).

Proposal

I'm not UX/UI expert, but I believe that we should to run away from strong colours (not black, nor white, or primary colours). As any UX/UI change it is difficult for me to argue why we should do this PR, but on a very simple approach: I just like these palette better than the current one. 🤷🏻‍♂️

Header comparison

Background

Deployed example

You can check how those colours look in PyMAPDL docs:

https://mapdl.docs.pyansys.com/version/dev/index.html

Code changes

The code for that change is given in here:

https://github.com/ansys/pymapdl/blob/de18185752e8e1cfdf9f21f7efd1b2f64f9559df/doc/source/_static/custom.css#L23-L47

Related PR: ansys/pymapdl#2727

Related somehow to: #398

Note: Supercool that github renders the color!!

[RobPasMue]

Pinging @ansys/developers since this change affects all of us.

While I do agree (personally speaking) with the fact that the colors are more user friendly, I don't think we can do this change as lightly as proposed. Meaning, that our marketing team and UI/UX team would have to approve this change.

Also, if we decide not to change it... I strongly suggest that PyMAPDL aligns with the rest of the colors, mostly because we are all using the same brand styling and it looks very odd that one library goes "solo" in this topic. Navigating through documentation sites should be smooth for users and the theme shouldn't change. As part of the ecosystem, there are certain rules we all have to respect and be aligned with (even though we may have personal preferences).

If we decide to change it, all libraries would have to update their ansys-sphinx-theme versions to the latest one in which this change is implemented.

Nonetheless, this big change requires alignment and agreement from the entire PyAnsys ecosystem since it affects all of us - as well as the teams in charge of branding and accessibility (UI/UX). Pinging as well our @ansys/documentation team since they will have a lot to say for sure.

CC'ing @ansys/pyansys-core for observability and action based on decision

[Revathyvenugopal162]

Additionally, you can check the accessibility standards using the guidelines provided here: https://wave.webaim.org/report#/https://sphinxdocs.ansys.com/ and https://www.w3.org/WAI/standards-guidelines/wcag/. Currently, we are evaluating using white and black backgrounds. If we change the colors, we will need to adjust all the color contrasts accordingly

[seanpearsonuk]

I would like to propose:

• make light mode a true light mode, which means that the navigation bar is white(ish), not black. Many people detest dark modes in general, so if people are choosing light mode, we should honour that.
• use shades of grey instead of pure black-and-white, as already proposed by @germa89. Note also that ansys.com uses a lot of patterned black rather than solid black everywhere. But I'm not convinced that we have to change both colours. I think that the black can be toned down but the white can be retained. If both are shades of grey, then the pages can look dirty. I believe that this is true in general.
• use more yellow. ansys.com uses black-and-white predominately but also uses more yellow than PyAnsys, and many ansys.com pages are very colourful within that conservative colour scheme. Our docs (speaking at least for PyFluent) contain little additional colour. This could be improved by using more yellow, and I think we should avoid mixing in any new colours. An extra band of yellow could liven up the appearance (similar to ansys.com). I believe that this could look particularly good in light mode, especially if light mode were implemented as light mode, as mentioned above.

[RobPasMue]

• make light mode a true light mode, which means that the navigation bar is white(ish), not black. Many people detest dark modes in general, so if people are choosing light mode, we should honour that.

I completely agree on this - we should try to search for a true light mode. Having that dark navigation bar on "light" mode is not what a user would expect. Going with a lighter shade of black like PyMAPDL's could be a good option.

• use shades of grey instead of pure black-and-white, ... If both are shades of grey, then the pages can look dirty. I believe that this is true in general.

I agree as well! Only one of them should be toned down. We can see this in the new PyMAPDL docs. While I do like the lighter dark on the navigation bar, the "dirty" white is not that nice... I would have plain white there.

• use more yellow. ansys.com uses black-and-white predominately but also uses more yellow than PyAnsys, and many ansys.com pages are very colourful within that conservative colour scheme.

Also, ansys documentation uses many different tones of yellow as far as I can tell... That would give us some room for manouvering

[jgd10]

Are there any UX experts we could bring in to this discussion? I think there are existing conventions we can, and probably should, follow regarding the color schemes.

[RobPasMue]

We've worked in the past with @timdansys - he might be able to chime in

[ClionaJC]

Hello everyone!

Jérôme Blanche has kindly invited me to this conversation.

I have no opinion on the first point, as I think there is a history behind it that I may not be aware of.

If you are talking about using shades of grey, then you may be losing some colour contrast (and therefore potentially some users).

In relation to the yellow it is a very inaccessible colour. I know that it is part of the branding, but failing needing to adhere to a template it is a bad idea to use yellow for linking, etc.

If anyone wants me to explain either of the above points, please let me know.

[seanpearsonuk]

@ClionaJC Thanks!
At least some of have agreed that trying to contrast light grey with dark grey is not good, and I had proposed white with dark grey. Pure black and white is just not good.
I don't mind between yellow and any other colour as long as we lift the appearance above the current drabness.

[Andy-Grigg]

Could we take inspiration from the ADL here? I realize fully overhauling the layout would be a lot of work, to the point at which we'd probably be writing a sphinx theme from scratch. But maybe the color palettes might be useful?

[ClionaJC]

@seanpearsonuk No problem. As in general rule, in what I was taught in my MA, the stronger you can make the colour contrast the better. However, I realise that there are also other affordances involved and that I am only joining this conversation now.

I am still going to strongly object to the yellow though (you can, of course, take or leave this advice). It's one of the top inaccessible colours and, in my opinion, should not be used for sectioning text, or anything functional like linking.

[mia-guo-ux]

I agree with the idea that we could make light mode a true light mode. Designs have been updated. Please let me know what you think.

[jorgepiloto]

Oh wow! That style looks gorgeous, @mia-guo-ux. I like it a lot. It even makes me think if we should only support light theme docs.

How do you devise the style for the rest of the pages? I would like to see how this lightgray background fits with the left and right sidebars we use for listing pages and sections.

[greschd]

Agreed, it looks very nice! A tiny nitpick: I think there should be some visual distinction of the header bar. Maybe a thin line, or slightly different shade of grey?

Or maybe not, I'm not an expert on these things 🙂

[ClionaJC]

@greschd That makes sense to me. Both, if possible...

[ClionaJC]

@mia-guo-ux Great work, as usual... ;)

[Revathyvenugopal162]

Agreed, it looks very nice! A tiny nitpick: I think there should be some visual distinction of the header bar. Maybe a thin line, or slightly different shade of grey?

Or maybe not, I'm not an expert on these things 🙂

We can make use of the inherent header from pydata theme , a slight shadow box

or our own box

[RobPasMue]

We can make use of the inherent header from pydata theme , a slight shadow box

I like the slight shadow approach honestly =)

[ClionaJC]

In case anyone has time/is interested this article in relation to cognitive load on a mobile phone versus PC is quite relevant.

If you only have time to read the abstract and the conclusion it will still give you some idea of what the study covered: https://link.springer.com/article/10.1007/s00779-022-01707-8

[germa89]

I agree with the idea that we could make light mode a true light mode. Designs have been updated. Please let me know what you think.

Damn... I love it.....

[seanpearsonuk]

For comparison, please also see Vega-Altair light theme, which caught my eye in the presentation by @clatapie - I think it looks very smart, and motivated me to make the initial comments about light theme. All the separations are handled very nicely in this page.

[clatapie]

The following approach, displayed by Vega is also interesting:

We could imagine a drop-down button:

• with all the PyAnsys libraries - which might be too heavy
• with the PyAnsys website and the PyAnsys dev guide.

[greschd]

We could imagine a drop-down button: [...] with the PyAnsys website and the PyAnsys dev guide

What if every PyAnsys library (optionally) gets to add 2-3 closely related projects to this drop-down? For example, PyDPF Composites would probably add:

• DPF Core
• PyACP (pre-processor)

So the full list would be

• DPF Core
• PyACP
• All PyAnsys projects (link to PyAnsys website)
• PyAnsys dev guide

[MaxJPRey]

@greschd I agree with this idea.
It might help to promote other tools that are usually related in workflows and help users to navigate to what they are interested in.

I would just suggest to put at first

• All PyAnsys projects (link to PyAnsys website)
• PyAnsys dev guide

So it stays consistent across libraries.

[MaxJPRey]

We can make use of the inherent header from pydata theme , a slight shadow box

I like the slight shadow approach honestly =)

I agree. The shadow is quite helpful when used as a separator between elements.

[mia-guo-ux]

Here are some additional screens, with updates to side nav, card style and page header. In addition, there are some design suggestion added to this issue

In terms of PyMAPDL homepage, the current build adopts an image as the header, which is completely fine as long as we keep the same pattern across all PyAnsys product homepages.

For simplicity, I propose the attached design:

[ClionaJC]

@mia-guo-ux The graphics on the first page are beautiful!

It's also very helpful for me to see how other people are writing instructions.

[jorgepiloto]

Closing this in favor of 403.