search

ansys / ansys-sphinx-theme

PyData-based Sphinx theme from the PyAnsys community
https://sphinxdocs.ansys.com
MIT License
21 stars 5 forks source link

Theme colours proposal #399

Open germa89 opened 3 weeks ago

germa89 commented 3 weeks ago

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

image image

Background

image

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: https://github.com/ansys/pymapdl/pull/2727

Related somehow to: https://github.com/ansys/ansys-sphinx-theme/issues/398

Note: Supercool that github renders the color!!

RobPasMue commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

I would like to propose:

RobPasMue commented 3 weeks ago
  • 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 commented 3 weeks ago

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 commented 3 weeks ago

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

ClionaJC commented 3 weeks ago

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 commented 3 weeks ago

@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 commented 3 weeks ago

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 commented 3 weeks ago

@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 commented 3 weeks ago

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. PyMAPDL Home

jorgepiloto commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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

ClionaJC commented 2 weeks ago

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

Revathyvenugopal162 commented 2 weeks ago

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 image or our own box

RobPasMue commented 2 weeks ago

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

I like the slight shadow approach honestly =)

ClionaJC commented 2 weeks ago

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 commented 2 weeks ago

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. PyMAPDL Home

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

seanpearsonuk commented 2 weeks ago

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 commented 2 weeks ago

The following approach, displayed by Vega is also interesting: image

We could imagine a drop-down button:

greschd commented 2 weeks ago

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:

So the full list would be

MaxJPRey commented 2 weeks ago

@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

So it stays consistent across libraries.

MaxJPRey commented 2 weeks ago

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

I like the slight shadow approach honestly =)

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

mia-guo-ux commented 2 weeks ago

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 PyAnsys Page

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. Home

For simplicity, I propose the attached design: Home2

ClionaJC commented 2 weeks ago

@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.