Differentiate between 4 categories (color problem)

Question

I am wondering if there is someone who can help me to improve my application's user experience. I am developing a mobile e-learning platform which has 4 sections. I was asked to differentiate each section to be simple to memorise and be clearly visible. So I used different colors for each section as in the image below :

The problem here is that there is too much color which makes it difficult for the user to memorise sections and be comfortable with the application colors.

These are the product's pages.

As you can see there are a lot of colors which create vision problems; not only did I use 4 colors but also the primary color of the app (bleu) on every screen.

I am open to all suggestions in resolving this problem and make the design more professional.

Thank you for your help.

Answer 1

If you have a problem with too many colours, but still want to differentiate, why don't you just have a specific colour in the title (top of page), but avoid having different colours for the "voir" buttons.

When you think about what you're trying to achieve, it doesn't really make sense to have different colours for the same buttons. The buttons have the same functionality for each category, so you shouldn't differentiate their looks.

If you want to differentiate per item, you could show coloured labels on each item, but I'd avoid differing button or border colours depending on the category. This would also leave room for items to be in multiple categories/labels at the same time, without making your layout less intuitive.

But, these are just my 2c after taking a look at your screenshots. Hope it helps.

Answer 2

For readability, you don't want to use a yellow typeface against a white background. Compare that contrast to your raspberry red text against white which pops. I would recommend keeping your text in black and using graphic elements in colors to differentiate as you did with the ruled lines or colored bars. You could just continue to use ruled lines and boxes in colors to separate content and establish hierarchy of information. I agree that I wouldn't switch out the filled button colors as usually button colors often indicate urgency, red for alarm, such as you might see on the Bootstrap framework. (https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/) Also take a look at Material guidelines, as they also have advice on a design approach and creating a consistent graphic system. For instance, you can see outline buttons are less emphasized than contained buttons. (https://material.io/components/buttons/#usage)