In forms where certain input fields have case sensitive input data, is it an accepted or standard practice to indicate somewhere on the form that caps lock is on? I am thinking that this concept doesn't really apply in mobile devices because the shift key is sticky in most on screen keyboards, but in desktop applications or use cases is this something that would provide better user experience or should it be handled in some other way?

  • 2
    OT, but is it actually possible to detect whether the caps lock is on in a webpage using JavaScript ? – JonasCz - Reinstate Monica Jun 9 '15 at 11:30
  • 1
    @JonasCz Lets put that question to the people at Stackoverflow... – Michael Lai Jun 9 '15 at 11:41
  • 3
    Apparently there is: stackoverflow.com/questions/348792/… – Michael Lai Jun 9 '15 at 11:54
  • 1
    I'm curious as to whether CapsLock detection is universally possible. It's certainly possible, at least under X, to make CapsLock (and NumLock!) into dead keys, or give them some other function. – jamesqf Jun 9 '15 at 17:27
  • 1
    No. Not standard. But I think you are right to suggest it's a better user experience, because it's a common error. – Jedi Commymullah Jun 10 '15 at 1:34

Indicating the caps lock is on is a design pattern used for passwords. When the passwords are hidden and every character is only represented by a dot, users might not know they're typing capitals where they shouldn't.

It's easy to overlook the fact your caps lock is on. For example, I'm used to typing with ten fingers. While typing my elbows are set quite wide so my hands come on the keyboard in a slight angle causing my left hand to block my view of the caps lock key. I wouldn't be able to see the light on my macbook indicating my caps lock is on. And if I'm correct a lot of windows keyboards don't even have this light indicator.

When it's just plain text that users are filling in the caps lock indicator isn't necessary. They'll find out soon enough if caps lock is on.

If your afraid that it might frustrate users, because they'll have to correct their mistake, don't be. They'll see it as their error and not an error of the application they're using.

If an input field has to be all caps, it's good practice to help your users by setting a text-transform: uppercase; on the input field.
For example: in Europe, bank accounts now have to have an IBAN numbers in front of it. It consist of your country's letter, two digits and then 4 letters. These letters have to be capital (I don't know if it's an absolute requirement, but when corresponding with your bank the letters will be in capital). My bank uses that text-transform: uppercase; method on their input fields and I have to say, it makes for some delightful user experience.

Same goes for input fields like names where the first letter is always an capital.
But think about your audience first. I don't think there are any countries where the first name doesn't start with a capital, but last names don't always start with a capital. Like mine and many others who are from the Netherlands. I often get frustrated when I'm adding a contact to my iPhone. The last name section capitalizes every word I enter there. My last name consists of three words with only a capital in the last word. Apple based it's design pattern for the capital first letter on American people where not a lot of people have a last name like mine. And I don't think Australia has that problem too. But still, consider your audience.

| improve this answer | |
  • 5
    I actually don't remember ever seeing a non-Mac keyboard without a light indicator. Truthfully though, it is not located on the key itself, but usually above the keys, either on the right (above the num pad) or the left. – Linkyu Jun 9 '15 at 12:10
  • 4
    @Linkyu My laptop (netbook) doesn't have any keyboard status lights. This means for me that there's one (and only one) feature that windows has that I'd like on Ubuntu: a note on the login screen when capslock is on. – Chris H Jun 9 '15 at 12:48
  • @Linkyu I think the location of the LED on those keyboards is mostly driven by price. I wonder if UX was even considered. – kasperd Jun 9 '15 at 13:27
  • @ChrisH oh, that's a good point, I hadn't considered smaller laptops. – Linkyu Jun 9 '15 at 14:29
  • @kasperd it seems logical to me that they are usually simply placed wherever it's the most convenient, yeah. – Linkyu Jun 9 '15 at 14:31

I think the feature is very useful for password fields where you cannot see what you are typing and it gives you comfort to know you are typing the intended characters.

Of course, most keyboards have a led that is on when you have the caps lock active, but it's nice to be reminded in the context of the form.

This is a good practice because most password fields don't show you the typed characters, so this enhances the feedback during typing. An usual text field that shows you the text while you are typing, already provides great feedback, so I don't see the need for an indication of the caps lock key. The text is already on the screen, you can easily see if you are typing capital letters.

If the input is case sensitive, you can display a subtle warning or tooltip next to the field while the user is typing. I would make sure this is subtle enough not to disrupt the user flow.

| improve this answer | |
  • Leave it up to the system. On Windows, for example, if the field is a password field and your caps lock is on, Windows will alert the user. No need to do it yourself. – Brad Jun 9 '15 at 19:49
  • An LED on your keyboard is only useful if you're looking at your keyboard while you type. I just wrote this comment without once looking at my keyboard. – Bill Dagg Jun 10 '15 at 20:23

I believe it is wrong to give a warning that the caps lock is on because after all if a user already typed in his email/username before entering his password he probably knew its on.

Additionally some people have passwords with many capital letters in them so they use the caps lock instead of the shift key.

Its not your responsibility to tell a user to look at his caps lock led/at his phone keyboard while typing his password. But if you really want to make the user know why his password might be wrong you can tell him caps lock is on AFTER failing to enter the password once already.

I despise websites that bug me/give me a warning while typing or while im doing a thing im used to be doing as if its wrong.

| improve this answer | |
  • 3
    It doesn't seem like you're considering touch typists. If the Caps Lock key is on, it may not be because it was intentionally pressed. It may be because it was accidentally hit when another key was intended -- e.g. the 'A' key. This can happen while typing the password (for example) after the login name has already been typed. Also, what if the login name was automatically filled in? If the Caps Lock key was on accidentally, the user may not notice. – Bill Dagg Jun 10 '15 at 20:20
  • 1
    Its not a programmers job to correct his user's mistakes. There is a reason why i suggest a notification of some sort after a user has failed to type in his password and the caps lock is on. – downrep_nation Jun 10 '15 at 20:51
  • 2
    First, nobody said anything about correcting a user's mistake. It's about helping the user to avoid mistakes. Second, it is a designer's job to make the user's life easier. One way to do that is to help the user reach their end goal with the minimum of frustration. Helping the user to avoid errors in the first place does that. Furthermore, in the case of a field where the characters are hidden the error message won't help them correct the problem if they are still not aware that the caps lock is pressed. – Bill Dagg Jun 11 '15 at 3:23
  • 1
    Another option is a checkbox to show the typed in password,that way the user knows if caps lock is on or not - or any mistake for that matter. – downrep_nation Jun 11 '15 at 4:49
  • Most definitely wherever that is a viable option. – Bill Dagg Jun 11 '15 at 15:42

Showing on the screen that Caps Lock is ON is a good practice. This is because you never know which actions user will perform while handling your system/website.

Consider a novice user by mistakenly pressed caps lock and as it is not shown on the screen he is trying to enter the data/password. At the time of submitting he will surely be frustrated and remember we should always keep the user at ease. Even same case can happen for other users as well by mistake.

So to handle all types of users efficiently, showing on screen about the Caps Lock will be really helpful.

| improve this answer | |
  • Doesn't have to be a novice user. :-P – Bill Dagg Jun 10 '15 at 20:24

This is quite interesting question to be answered. It is the very first heuristic by Nielsen Norman which states "visibility of system status- the system should always keep users informed about what is going on, through appropriate feedback within reasonable time".

I want to focus on responsibilities of UX practitioners, we should always see things from user perspective and i think it is one of the important tasks in our life to make delightful experiences.

We are actually making computers intelligent so that they can be the best friend of human and help in doing our day today activity in every possible manner. Now if we focus on future of interfaces we would be able to visualize the behaviour of GUI, regardless of screen size or affordances every digital device will be using AI and it will be intelligent enough to inform before we need.

Coming to the discussion perhaps we may save a click (which is always our intention while designing for better user experience) while user interact with a form field or interact with the page. So lets imagine that as soon as i opens a page which has any form field or maybe it is a login page it shows me or tells me that my caps lock is on rather than showing me after i click or already have typed. Perhaps, this kind of feature can be always delightful and enhance user experiences.

| improve this answer | |

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.