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 :

enter image description here

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.

enter image description here

2 Answers 2


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.

  • yea, nice idea, this realy help me, but what do you think about writing before each title, his type (exemple : Exercice : the title of the exercice, Exam: the title of the exam) ? or there is any better way ? Commented Dec 14, 2019 at 22:09

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.