I want to put two buttons in a screen, is it good practice to put them in same color ? side by side like this: Screenshot

  • I'm guessing at the meaning of your buttons but Google translate said the button on the left is "repeat order" and the other button is constantly being translated as "student section" but the word qayim on its own means value so does the button on the right mean "give the total value of the order" or "order total"?
    – deemyBoy
    Commented Dec 17, 2015 at 12:16
  • I would worry more to have a different color for each button in a form... Commented Dec 17, 2015 at 12:16
  • The buttons are, the left is Reorder and the right is Rate the order
    – Amer Enaya
    Commented Dec 17, 2015 at 12:18

2 Answers 2


Context is the king. It would be good to know more about what the page is about and what these buttons intend to do. But, here are few generally valid, insights into CTA(buttons) design/ux.

1) Ideally, there should be one main call to action, per task. Good read here: https://uxmag.com/articles/usability-tip-one-main-call-to-action-item-per-task

2) Use visual weight to differentiate b/w the buttons. To help improve accessibility, try to mix visual weight with things like a button and a link, rather than two buttons etc. Link standing for an action that is less important. Good read here: http://uxmovement.com/buttons/visual-weight-of-primary-and-secondary-action-buttons/ & http://www.lukew.com/ff/entry.asp?571

3) Use appropriate labels to make easy for the user to distinguish what they intend to do, and also think about their placement and order. For example, "Back button" makes more sense to be placed left of the page.

So as you see, in general, use 1) and 2) to good use if possible. If not, focus on good labeling is what I would suggest.

  • OK but the two buttons are with the same importance
    – Amer Enaya
    Commented Dec 17, 2015 at 12:03
  • @AmerEnaya Assuming rating is about giving review in some form (stars, opinion etc), could you not, put that interface directly without via button? So for eg, a 5 star section, where users can directly provide a rating. So that saves effort of clicking a button, and solves your issue of 2 buttons.
    – Amit Jain
    Commented Dec 17, 2015 at 18:39

Are you able to append an icon to better distinguish the action.

Repeat - Font Awesome Repeat

Rate - Font Awesome Star Half

Text alone does seem to challenge users.

Green also indicates success. Perhaps a more neutral colour within any brand guidlines that you are constrained by.

  • 1
    This is more a review of the UI, whereas the question is more specific about whether or not the same colour can / should be used.
    – JonW
    Commented Dec 17, 2015 at 14:39
  • +1 Iike this answer because it goes beyond answering a simple binary choice "yes same colour, no different colours" which would not be helpful even if it is what the OP wanted. For me it tells me everything that is poor about the OP's design and why and what he needs to change or could change to make a better, more intuitive interface and human beings work much better with icons than text - imagine Word with all text labels and no icons?!? Well done user3083791 - why not pick a username while you're at it! And I agree that green indicates success so not a good choice for button colour imh(?)o
    – deemyBoy
    Commented Dec 18, 2015 at 4:12
  • I think adding icons is a good solutions but about green color it is the color of identity so I do not think it will be a problem
    – Amer Enaya
    Commented Dec 18, 2015 at 6:42

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.