9

Is there any kind of guidelines on passcode generation with regards to UX?

In particular I just ran into a site that used auto-generated codes but the codes it made were impossible to tell if a letter was a D and O or a 0. I i l 1 can also be indistinguishable depending on the type style.

This would seem like it should be a common UX guideline, never generate codes with those characters. Maybe even U V u v should be removed. g q and 9, 6 and G as well. Next to each other sometimes these or more obvious but in a random code it's not always clear.

Do such guidelines exist and are there any other characters that should be avoided? Maybe ! is another one?

Note: this question is not about passwords, it's about passcodes (maybe there is another name). A password is something a user can possible create. A passcode is something a computer creates like emailing you a 6 character code to type in.

For example Apple will popup a 6 digit number, a passcode, on an registered Apple device when you try to log into icloud.com. Apple doesn't have the UX problem above because their passcodes are only digits, no letters.

enter image description here

Conversely some other site had a 10-15 second puzzle to solve, once solved it showed a code

enter image description here

Is that code BB1CA1O8? BB1CA108 ? BB1CA1D8?

Get the code wrong and you have to re-fill out the form and solve the 10-15 second puzzle again

| improve this question | |
  • 3
    I don't think this is a UX question. If it is difficult to read the password than that is a font issue, not a password issue. Security of a password should not be compromised by limiting available characters. – musefan yesterday
  • 4
    Security is compromised if you end up having to copy and paste the passcode somewhere else with a readable font and the user experience is poor if you can not distinguish characters. – gman yesterday
  • 2
    Dunno, but I wish someone would tell Microsoft - I'm sick of their Craptcha that has the most ridiculously distorted letters, in a font where you sometimes can't discern upper from lower, and frequently cant tell 0 o O i l I 1 etc apart.. – Caius Jard 15 hours ago
  • 1
    @musefan How is readability of fonts not related to UX? – rexkogitans 47 mins ago
13

Microsoft chose to skip the characters A, E, I, L, N, O, S, U, 0, 1, & 5 for their Xbox Live codes.

Based on this question and answer it appears that they chose to reduce the possible characters to reduce confusion. Some like O & 0, S & 5 were probably dropped for visual similarity, while others like E & N may have been dropped for audial similarity with other letters when spoken.

However, they kept both B & 8 which are visually similar. It is also curious that they removed all vowels (A, E, I, O, U) except for Y, but that could be a coincidence.

| improve this answer | |
  • 11
    removing the vowels helps prevent random bad words. You can still get SHT and FCK but those aren't words – gman 21 hours ago
  • @gman Good catch! I was only thinking of code input, not generation. – Nathan Rabe 21 hours ago
  • 3
    FCK is a very famous word: google.com/search?q=FCKGW – Nayuki 17 hours ago
11

There is no UX guideline specific to passwords, but several usability heuristics can be applied to this use case:

Mono-spaced Fonts Reduce Ambiguity

Below is an example of how the mono-spaced font differentiates characters often confused with one another.

01OlB8

Use Color to Communicate

Color can easily help differientate characters as well. Lastpass on iOS does this well by assigning a different color to letters, numbers, and special characters.

a Lastpass password using color for each type of character

Skip Memorization Completely

This is the golden solution to eliminate ambiguity and reduce short-term memory load. The character count and ambiguity of the numbers and letters don't matter if the user can use the passcode without memorizing it.

If it is an option, the application should offer to copy-paste the passcode for the user.

iPhone keyboard offering to paste one-time code from text message

In other instances, 2 factor authentication can allow a user to simply verify themselves on the trusted device to give access to the untrusted device. Google handles this particularly well.

Google account verifying sign in

| improve this answer | |
  • 4
    As mentioned in a comment on another answer, the monospace font only reduces the ambiguity if both similar characters are present. In your example, if the zero and one weren't at the start, e.g. R7OlB8 - I wouldn't know if that was supposed to be a letter (O) or a number (0) as the third character, and a letter (l) or a number (1) as the fourth character. Also, just using colour as the sole distinguisher isn't advised due to colour-blindness. – crazyloonybin 19 hours ago
  • 1
    I do like the last option though, giving buttons to select whether to approve or reject the request, and get rid of the passcode altogether. – crazyloonybin 19 hours ago
  • 1
    @crazyloonybin Good point about the monospaced being ambiguous without the reference between the similar characters and the color-blindness. Those 2 options are not meant to be applied in isolation but instead used together to balance each other's shortcomings. Color-blindness is common, but it is not a reason to avoid using color to communicate information; instead color should not be the only method of communicating info. – Benjamin S 19 hours ago
  • 1
    Yes, of course, a combination of the different methods would be better than having one alone. I still prefer the approve/reject options to typing something in because it's a lot easier (plus I'm lazy!). LastPass does that with their Authenticator app, but they also provide the code for you to use as well if you prefer, again combining the different methods together: LastPass Authenticator Image – crazyloonybin 19 hours ago
  • 1
    I like the option of color as it makes me slow down and specifically check and read each character, rather than seeing "words" or "groups" that are misleading. Color-blindness could be mitigated by letting the user choose the colors they want to use, so they can pick ones that are distinct for them. – Dragonel 18 hours ago
8

There are no standard guidelines of which I am aware; what I've observed most often is that, when dealing with issues of security like this one, companies prefer to evaluate their own security model and implement what they feel is best for their interests, rather than adopt a one-size-fits-all standard model.

Option: Eliminating ambiguity

Conveniently, this same problem is present in another common use case: automobile license plates. Much like the passcode your mention here, the alphanumeric sequences 1) appear to be just a random assortment of meaningless characters, and 2) must be unambiguously legible.

There is some variation in license plate implementations (e.g. each state in the United States determines its own manner in which it issues license plates), however, most states will omit the letters I, O, and often Q to help mitigate some of the ambiguity.

Option: Accepting ambiguous characters interchangeably

There is another solution to consider: if you do not want to limit the character set of the generated code (which, in my opinion, is probably the easiest solution), simply accept both I/1 and O/0 in each others' places. This is sacrificing only a hair of entropy for the convenience of automatically resolving ambiguities in the passcode. Whether or not this increases or decreases the mental load of your users could be the topic of some quick user testing.

As @Džuris mentions, this strategy is employed by Crockford's Base32 encoding scheme.

| improve this answer | |
  • +1 for the last paragraph about allowing confused characters to be accepted interchangeably. – Nathan Rabe 21 hours ago
  • Crockford's Base32 is a good example of the suggestion in you final paragraph. – Džuris 14 hours ago
  • @Džuris Clever! Thanks for the info! – maxathousand 14 hours ago
  • Yes, typing the character I think it is and having it not be accepted is frustrating and accepting ambiguous characters interchangeably deals with that. But it's still frustrating to not be able to tell which character I'm seeing, on the assumption that ambiguous characters won't be accepted interchangeably (which is usually the case). Clarifying this in the UI could partially remove the frustration, but that probably wouldn't be worth it just to be able to increase your character set a bit. – NotThatGuy 56 mins ago
4

There are 2 solutions here:

  1. You can use a monospaced font that is solving this problem. One example is IBM Plex font. You can check it here: https://www.ibm.com/plex/specs/

enter image description here

To consider: You need to put in balance where you will display this code too. For smaller sizes screens you might still have a problem with any font you choose. Also, this is not great when you need to send the user an email with that code, you will need to use a system font for that and you hit this problem again.

  1. You can avoid using those characters that generate confusion for the user and solve this problem from the start. If it's a passcode that is generated automatically it will not be a problem if you remove those problematic characters. This solution will not work if the user will set this code manually.

After analyzing this I would pick solution number 2, it's solving the problem from the beginning and you don't have to deal with it anymore.

| improve this answer | |
  • 3
    I can't tell that the glyph to the left of the 1 is a 0 or an O. If the random passcode ends up being 31523O62GW only a few geeks might notice that zero is an letter 'O' Similarly the glyph to the left if 'i' is only distinguishable if there are other characters to compare it to 742l934 – gman yesterday
  • Check the font specimen. They have a crossed 0 too. That makes more sense, to be honest. That's why I would incline to solution 2 here. – Lonut yesterday
  • 5
    My point is it doesn't matter the 0 is crossed. It matters that unless there is a zero on the page to compare the letter 0 to most people won't notice an O in the middle of several digits. – gman yesterday
  • (2) is not a magic solution either. German passport numbers do not contain the letter “O” so there’s no ambiguity with “0”. But few people know this, and because the font on the passport does not use a slashed zero, people routinely enter a wrong passport number into forms (using “O” instead of “0”), e.g. when booking airline travel. Of course electronic forms could catch this mistake, but only if they all encode country-specific rules and keep them up to date at all times. – Konrad Rudolph 2 hours ago
4

LastPass's password generator has three options:

  • easy to say (avoid numbers and special characters)
  • easy to read (avoid ambiguous characters like l, 1, O and 0)
  • all characters

Unfortunately, I could not find anything more specific about the implementation.

1Password has a 'memorable password option' which concatenates 4 random English words together similar to the famous xkcd comic (correct-horse-battery-stable).

| 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.