4

I was trying to made a UI Style guide, but during making buttons a question comes to my mind that, is there any special difference of button having uppercase letter and lowercase letter. Any UX logic behind this?enter image description here

5

Choice of upper case and lower case is totally related to the magnitude of attention your message requires.

It's more about how we use language to emphasize the UX. For example

DON'T HIT THAT REFRESH BUTTON!

When you read this sentence, it's more like someone is shouting at you not to hit that refresh button, your inner voice automatically reads it louder than other texts on the screen.

This is because I have added emphasis to this text "BOLD + UPPERCASE".

Hence if you want to use upper-case in buttons, make sure the actions/warnings are really critical otherwise it will do more harm than good. You don't want to shout often in your real life, do you?

Other places on webpage or app where you can use complete upper-case are single-word headings or short headings like ABOUT US.

Hope you understand the concept of where to use upper-case and where not to by reading this :).

  • Yes answer seems really interesting... Thank you.. – Sushant Kumar Pradhan Nov 11 '17 at 18:23
  • Thank you. In cases of buttons generally title cases are used. For example "Search Here". So yeah. – Anupam Pareek Nov 11 '17 at 18:24
1

This is purely contextual but the main difference between the uppercase and lowercase letter/words/sentences holds the same difference between the treatment of the buttons or any UI element you want to go with.


Uppercase letters are basically the alert types where you want to catch the attention of the people by making your words bold and clear but it lacks smooth readablity e.g.

THIS IS AN ALERT MESSAGE AND YOU HAVE TO PERFORM THIS FUNCTION TO GO FURTHER.



Wheras when you write something with the lowercase lettering, it provides a casual and an easy way to proceed with the next step and to go further. e.g.

This is an alert message and you have to perform this action to go further.

1

There's a good discussion about this Here

Seems that generally this is best reserved for your page's main CTA as it gives more visual weight to that button.

Uppercase text can also be used to give smaller sized headers more prominence.

  • If you can copy some of the relevant text to this answer. – Mayo Dec 14 '17 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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