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?
3 Answers
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 :).
-
Thank you. In cases of buttons generally title cases are used. For example "Search Here". So yeah. Commented Nov 11, 2017 at 18:24
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.
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.
-
1