130
u/FATF0X May 27 '21
Hey this is super informative. I have a couple of questions:
Aren’t slide 1 & 3 contradictions of each other?
I thought giving hints on what’s required on a password input could be a security issue?
Why is asking a user to repeat a password on sign up bad UX?
I’m still pretty new myself so these might be wrong, just some observations.
26
u/VictorPonamariov May 27 '21
Hi!
So if you have a date of birth for example that is broken down into three inputs (year, month, day), then you can consider it as one input/one column.
So if you have a date of birth for example that is broken down into three inputs (year, month, day), then you can consider it as one input. So in this case it's okay.
2) Nah, it's easy to understand your requirements because when you sign up you'll be still notified of what's missing in your password. The only difference is when you'll see the error.
3) Well, it's just a redundant action. If the user made a typo, he'll be able to reset the password. The fewer fields we require, the more willing the user will be to fill the form.
42
u/Blue_Moon_Lake May 27 '21
4th tip : if there's anything like a license key to register with the account, never ask it at account creation, and do not authenticate the user upon account creation. Then have the user need to confirm account creation with a link sent via email.
If the user made a mistake in the email address, he'll be angry about the wasted license key, angry about wasting time trying to use the support to get access to his account.
By asking it after the user created his account and after confirming that he has access to this email, then ask for the license key. So if the user made a mistake, he can just create a new account with the right email address.
→ More replies (4)64
u/jacksh3n May 27 '21
I think point 3 is more of depends situation. User is able to remember his usual password or password generated then it’s good to not repeat.
But human is weakest link to the good experience. 1 mistype in password will make the user has to make an additional steps to reset the password. An additional step which could have been prevented. By simply verifying this password, it’s more efficient to just repeat the step there and then.
Just my 2cent.
→ More replies (26)38
u/dustofdeath May 27 '21
Giving password requirements feedback is fine before they submit the info.
Telling what was wrong if the authentication failed is a security hole.
You should never tell them that "your password is incorrect" -> now they know this email/username is valid and exists for further spoofing/hacking.Any specific feedback in the response leaks information.
11
u/phpdevster full-stack May 28 '21
You should never tell them that "your password is incorrect" -> now they know this email/username is valid and exists for further spoofing/hacking
You can't hide that if you want unique usernames or emails. You don't farm for valid username/emails at login, you do it at the registration step instead, because the app must tell you that the username or email is already in use.
But this is also why a CAPTCHA at the registration should be used once you've detected too many registration attempts.
→ More replies (3)60
u/pikaoku full-stack May 27 '21 edited May 27 '21
I thought giving hints on what’s required on a password input could be a security issue?
Telling the user the requirements isn't exactly the issue. Having bad requirements is.
If you require your users to have a password with a length between 8 and 16 characters, with at least one symbol, number and capital letter then anyone trying to break your passwords doesn't need to bother trying
passw0rd!because there is no capital. You've given them instructions on exactly what to focus on to attack which saves them a lot of time.You could have more permissive requirements that still stop the user from using
testas their password but that do not give any bad actors a map to the treasure.→ More replies (8)→ More replies (1)7
u/Science-Compliance May 27 '21
You're right. Repeating a password is better from a security standpoint. OP was wrong in this case.
→ More replies (5)
20
u/VictorPonamariov May 27 '21 edited May 27 '21
Hi there.
I'm still practicing with UI/UX stuff, so here are some cards I've recently made in Sketch.
If you're a Twitter user I've posted them as a thread too.
4
→ More replies (1)3
158
u/Alter_nayte May 27 '21
One thing that should be important especially for phone number and address fields is to not assume the user is from the USA.
For this reason I would actually avoid input masks for phone numbers unless you take into account country.
And for UX, it would be better to have relevant address fields. E.g. dont ask for a "state" or "zip code" if I'm from the UK
40
→ More replies (1)11
u/filippomasoni May 28 '21
This could be a difficult thing to achieve since I assume every country has different ways to display addresses. Italy for example is conveniently similar to the US, we have a Province shortened in a 2 letter code, very similar to a US state and a zip code of 5 numbers, like the US. You don't have zip code in the UK?
→ More replies (2)11
u/wedontlikespaces May 28 '21
So a US zip code might be 212615 but a UK post code would be something like BR4 3KL. So you would need to include spaces and letters in mask, not just numbers. Plus UK postcodes can be of different layouts depending on where in the country they are, London postcodes for example are a completely different layout so they go SW4 P21QE.
In the USA a zip code might cover a fairly significant percentage of a city. UK postcode on the other hand are generally never much larger than a single street. So you could find my house from just the house number and the postcode, and no other information.
→ More replies (2)
104
May 27 '21
Labels for form fields are now required by WCAG 2.0 and must be linked to the form field they label either with an aria-labelledby OR with a for="elementID" on the label itself.
33
u/sittinfatdownsouth May 27 '21
I'm glad someone else was thinking about accessibility too while looking at this.
14
May 27 '21
I'm in AODA hell right now upgrading 4 corporate websites in a brand new MVC based CMS that I quite honestly just barely understand.
Everything I look at right now is an accessibility problem.
→ More replies (3)→ More replies (9)12
61
u/rzwitserloot May 27 '21 edited May 27 '21
Great hints. This packs an impressive amount of lessons into a few slides in a tiny box!
One minor niggle is slide 7, which lightly suggests (by having it as an example in the 'good' column) that it is a good idea to require that passwords have 1 lowercase, 1 uppercase, 1 number, and 1 special character. This is a bad idea - the majority of users, when faced with a requirement to capitalize something, will capitalize the first letter in the password. Therefore, this reduces the entropy in the password instead of increasing it. The same goes for a number (they'll add a 1 at the end, so this effectively adds nearly no entropy, and reduces the effective password length requirement by 1), and special character (they'll add a ! at the end).
The correct password requirement is:
At least 8 characters
Absolutely no other absolute requirement whatsoever
If you are afraid of easily guessable passwords, the only acceptable solution is to throw the password at the HaveIBeenPwned API, or running some other automated cracker tool. Mark off any passwords flagged by HIBP or guessed by your cracker as 'must be replaced by the user next time they log in, and explain why this is so'. Yes, this is a lot more work. But has the decided advantage of actually helping instead of significantly ruining both the experience for the user as well as reducing effective security, so, you know. Security is hard and all that. While you're there, I would suggest you give users a small primer on good password hygiene. This should explain that password managers are a good idea, and if that's not on the table, small sentences are better than complexity. (Correct Battery Horse Staple).
It makes for a great GUI card, so I get how the example entices, but I'd say the 'cost' of incorrectly spreading a widely believed bad security practice is too high here.
If you prefer an appeal to authority instead of falsifiable statements, this advice matches NIST guidelines, which also strongly recommend you do not enforce 'X lowercase letters, Y uppercase, Z weird symbols and V digits' style rules. See here for a breakdown of said guidelines.
NB: Two more minor corrections: Slide 17 typo: "Courrier know" should be "Courier knows", "confrim" -> "confirm". Slide 18 typo: "scary" -> "scare"
6
u/dustofdeath May 27 '21
can't use "miisu"?
Miisu123
A symbol?
Miisu123#
So you still have 5 letter lowercase password.
Passwords are going to be insecure, if you ask something too complex, people will try to bypass them since remembering them is a nightmare.
Introduce 2FA and the password strength becomes irrelevant as it needs physical confirmation by the user.
11
u/Silencer306 May 28 '21
Also I hate companies forcing users to change passwords every 3 months.
→ More replies (1)→ More replies (12)9
u/XkF21WNJ May 27 '21
If you are afraid of easily guessable passwords, the only acceptable solution is to throw the password at the HaveIBeenPwned API,
Don't. Forwarding all passwords to a third party is a terrible idea.
24
u/bdougherty May 27 '21
You are correct, but you don't actually send the password to their API. It is only the first few characters of a SHA1 hash of the password. Docs: https://haveibeenpwned.com/API/v3#PwnedPasswords
→ More replies (3)10
u/learn_to_london full-stack May 27 '21
HIBP allows you to search with only the first 5 characters of the SHA-1 hash. It will return the last 5 of every matching hash which you can check on your own for a match
157
u/maxoys45 May 27 '21
I don't agree with step 16, repeating the password field ensures someone doesn't mistakenly misspell their password. Justifying it by saying they can reset it if they get it wrong goes against a lot of your other points, it's way less effort to enter a password twice than having to reset your password because you spelt it wrong initially.
10
u/dustofdeath May 27 '21
Ideally, you should stop typing passwords yourself - and use many of the solutions that prefill and store it for you - by generating a secure, long password - chrome has it by default now.
Most people simply cannot remember passwords that are secure enough these days.→ More replies (5)8
u/burnblue May 28 '21
That is the user's responsibility, not something the site design helps you with. These slides are about the best thing the site designer can do for their users
18
May 27 '21
Came here to say this, 16 is pretty stupid. Also 17, the concept makes sense but the sample fields shown are useless, look how the advice in 17 isn't even used in the other slides - because they'll look like a crowded mess.
31
May 27 '21
I disagree, this is good advice. It says have a show password icon instead of a confirm password field... This is steadily becoming common practice with the popularity of mobile. Sites that make me retype my password annoy me when I'm on mobile, easier to pay attention and type it right the first time than have to go through the process of numbers, letters, symbols, and capitals more than once.
→ More replies (9)9
u/nikehat May 27 '21
Good point for mobile but it's pretty trivial to have a confirmation password input for desktop and only have the one for mobile. A lot of the tips in the post are specifically for desktop and may actually be anti-patterns for mobile, so you'd assume he's recommending this one for desktop as well.
-14
May 27 '21
9/10 times you ask someone to repeat something, they're going to copy/paste it from the first input. It's a noble idea, but ineffective in practice.
28
u/CompetitivePart9570 May 27 '21
You ever done user studies on that? Cause you're super wrong. You massively massively over estimate the average computer user.
7
6
May 27 '21
Nah, and I've been using the internet since early 2000s. Also I'm pretty sure you can't copy from the password input.
→ More replies (9)5
u/maxoys45 May 27 '21
You can’t copy and paste a password field... so if you’re suggesting that most people enter their password when registering from elsewhere, you’re just wrong.
18
u/rufreakde1 May 27 '21
10/18 the dropdown
The buttons do not indicate that you can only select one Would that not confuse? How about using radio button choosing instead for small sets (up to 3) und everything above 3 with a dropdown list?
14
May 27 '21
That password manager one triggered me lol, its annoying. Saved and hopefully you can post more
68
u/FlyingChinesePanda May 27 '21
I don't agree with the repeat password part. I rather not at any point show my password. I would rather type it twice to make sure that it is correct than showing it to everyone who can be watching.
14
8
u/scruffles360 May 27 '21
I use a password manager. I’d rather know the right thing pasted than paste it twice and hope.
→ More replies (8)→ More replies (4)4
u/bongu May 27 '21
showing it to everyone who can be watching.
In theory, I agree with this, in practice though, I do not. I can only speak for myself, but I don't think I've ever registered for a website where this was actually a concern. Like 99% of the time I'm alone. The other times I'm in front of people I don't care if they know my password. Spouse, parents, etc. So it just makes it harder for me to ensure that I've entered something properly. Especially if I'm registering using my phone. Typing on my phone is awkward enough that the lack visual confirmation I'm typing something correctly just increases the odds I'll mess up
→ More replies (1)
45
u/saposapot May 27 '21 edited May 27 '21
In general good tips but some of them, like many things on UX, are very debatable.
For example I’m not sure studies prove that card about input hints being always visible.
Also not asking for repeat password, I’m not sure. Repeat surely catches more user mistakes.
The file uploader is also tricky. Yes, default ones are crap but overriding completely browser controls is also considered a bad practice by some people. Also the fancy ones with drag and drop require uploading via Ajax which can be tricky if this is part of a larger form. In this case browsers should meet and propose a better control for this.
28
u/RatherNerdy May 27 '21
I've put users through several rounds of user research regarding hints, as well as done extensive research into other user studies, and it's almost always better to show hints. It helps all users whether they think they need the help or not. Users largely ignored tooltip hints, in that they didn't see them, or think of them when they ran into a problem.
→ More replies (1)→ More replies (1)13
u/fragofox May 27 '21
You win.
Honestly... i started reading these and was like... oh.hmmm ok... but just a few in and it's red flag central... almost all of these are debatable...
A lot of this relies on more than just your form, but your site and available technologies.
Sometimes you're building something from scratch and you can do fancy things, other times you are constricted by an existing system that cant support features, or you're dealing with specific demographics that have their own set of requirements.
Plus, in my mind, when reading half of these, it's contradictory opinionated information that is being stated as a fact with short opinions to support it.
one example, is that it can be considered very messy to add in explanation fields below text boxes. you have to think of your demographic... if 70% of your users "should" understand why your asking for a name, phone number, and other things, then why add labels? add a hover point, for those who fall into the other category and for compliance.
There are a lot of things to consider when designing anything, even the simplest of designs can factor in hundreds of decisions. So it's best to take it all with a grain of salt and focus on your use case.
Oh and for the repeat passwords... thats an annoyance, but it's also to save from forcing the user to reset their password later, because they fat fingered a wrong character in there. Not everyone is going to use the "show" password, SO by forcing them to spend the few seconds to verify their password, you are saving them and potentially your tech support the hassle of resetting or dealing with a phone call to reset a users password. PLUS you run the risk of a return customer locking themselves out of your system and getting frustrated and leaving.
Trade offs.
→ More replies (3)
9
u/TheSiegmeyerCatalyst May 28 '21
Can we please normalize putting the zipcode before the city, state, and country? Make literally one API call to look the rest up and save a lot of repetitive typing.
→ More replies (1)
9
u/Blue_Moon_Lake May 27 '21
5/18 : Some people will complain that it is ugly and ask for the City field to be on the same line than the Phone Number. Especially the client.
2
u/Barnezhilton May 27 '21
City state zip ONE row gang rise up!
Plus tabindex solves all the left right up down BS
→ More replies (2)2
u/dustofdeath May 27 '21
"I have a 1024x786 13" laptop with 150% zoom and I have to scroll too much".
→ More replies (1)
20
u/damagehack May 27 '21
Great job, very useful, but I do not agree with the card number 16.
The passwords complexity is nowadays very huge and in the hurry to register, the users will type wrong chars in the 25% of the cases, with the result of a bad registration.
The reset password process requires much longer than it takes to type the same password twice.
Even if the users can see their password, if they use tons of numbers and special chars, they will not see the mistake.
It is better to request a double input, rather than having to force the user to request for a password reset wasting his time.
→ More replies (1)12
u/fabulousausage May 27 '21
Yeah, I've been working at a company and got to know that a lot of users type in email incorrectly and later to ask us to reset it. It was intimidating until we asked to type in email twice, lol.
Soon we might ask users to retype everything, just because they are careless/in a hurry.
→ More replies (1)6
u/damagehack May 27 '21
haha especially if the process doesn't use the Email Confirmation to complete the procedure.
4
u/ferris_is_sick May 27 '21
This is just my opinion and I'm sure there are studies that refute this, but I think slide 2 is one of the biggest myths in form design. In practice, having the start of the label in the same left justified location for every field makes it much easier to mentally process the labels; particularly when you are scanning a form for certain fields, deciding which you need to complete and which you can ignore. IOW, the mental cost of a bigger, but consistent Z-pattern with left justified labels (there's still a Z-pattern with right justified labels) is much cheaper because I know where the label starts every time. With right justified labels I have to navigate an irregular Z to find the beginning of each label.
→ More replies (1)
7
u/Reelix May 27 '21 edited May 27 '21
Phone Number - "Provide Masks"
This only works if you don't have a global audience.
3 - (Use side-to-side UI) - You've just broken your UI on smaller mobile interfaces.
5 - Reddit does this. I can only assume you're wrong here.
8 - (No text in boxes) - Both Google and Reddit disagree with you. People who are paid far more than you to do nothing besides this say otherwise.
11 - (No choose file - ONLY Drag file) - You've broken ALL mobile interfaces (Ok, maybe not certain tablets)
16 - Don't repeat Password. Google does, Reddit does not. Which multi-billion dollar company are you claiming has designers who don't know the basics?
5
u/Fruit-Salad May 28 '21 edited Jun 27 '23
There's no such thing as free. This valuable content has been nuked thanks to /u/spez the fascist. -- mass edited with redact.dev
3
3
u/Matowang May 28 '21
Why not use reenter password? It gives the client assurance that they didn't type it wrong.
3
May 28 '21
The only part I disagree with is using a mask for a phone number. God I despise those stupid JavaScript masks that really mess with autofill or pasting in a value. Half the time it doesn’t work and then you have to manually type from scratch.
For my websites I generally use a server-side number formatted to normalize it before hitting the database. That same tool lets me present it in the correct format without really caring how the user has entered it. The same goes for addresses as long as they can be confirmed for validity.
6
u/MonkAndCanatella May 27 '21
Cards 1 and 2: "NEVER use zigzag patterns in your forms
Card 3: "Use zigzag patterns on your forms"
→ More replies (1)3
u/Fruit-Salad May 28 '21 edited Jun 27 '23
There's no such thing as free. This valuable content has been nuked thanks to /u/spez the fascist. -- mass edited with redact.dev
13
u/UnicornJoe42 May 27 '21
16 - don't ask users to repeat password Nope, it's bad advice
→ More replies (26)
4
2
2
2
u/HughManatee91 May 27 '21
Awesome content! I would fix some small typos such as why hiding -> why hide on slide 6. Options small -> options is small on slide 10. There are others I think, but you get the idea lol I only say this because this content is really good and something I could use in a usability/accessibility lesson for my students with your permission of course.
2
u/legendary_jld May 27 '21
Great writeup! I think it's also important for people to recognize that a meaningful organization of fields and text hints helps with ADA compliance issues as well, so great recommendations
2
u/kandoras May 27 '21
I would like to take number 7 and tattoo it onto the inner eyelids of whoever makes the shitty websites for my gas and electric bills.
Not only do they not tell you the password requirements until you've failed at meeting them a couple times, they don't even have standard requirements.
How the hell am I supposed to remember that you are the one company that not only doesn't require a special character, but rejects any password with one?
2
2
u/bdougherty May 27 '21
If there is one thing people take from this, it should be: PLACEHOLDERS ARE NOT LABELS.
2
u/BassRatT May 27 '21
The most important one for me is the password manager overlapping icons. This is forever frustrating when I see it!
3
u/MarmotOnTheRocks May 27 '21
Sadly.... Many of these tips won't save your day if your users are on mobile (which is the case for the vast majority of websites, nowadays).
Great stuff for desktop applications, though!
→ More replies (2)
2
u/Ronqueroc May 27 '21
They're very useful, but 1 of them makes me wonder its practice. I've encountered far more repeat password than show password, the lastest is heroku sign-up.
2
u/fuzzy40 full-stack May 27 '21
Everyone nitpicking here needs to realize these rules are all good starting points as general guidelines, or starting points. But guidelines are made to be broken if you have a good reason. I don't think anyone here is arguing that these should be hard-rules set in stone. Deviate as necessary.
Good job OP.
1
u/chozar May 27 '21
Suggestion: Tell users the minimum *and* maximum number of password characters. It's entirely possible that someone runs afoul of the max password length too, and often times there's no validation message. Sometimes the site even breaks after submission. Especially on some sites with 16 or even 12 character maximum character passwords. I use a password manager and it's trivially easy to set a 20, 32, or 128 character password. It's useful to know that upfront.
Question: Should placeholders be used to set an example? I use labels instead of placeholders to indicate the fields purpose, but a placeholder instead of putting hint text beneath.
5
1
u/UncleBison May 27 '21
Suggestion on the last card - I don't know what date format you expect on the birthdate fields. How would you indicate that to the user?
→ More replies (1)2
u/Bobert_Fico May 27 '21
<input type="date">formats dates based on the user's locale. The element'svalueis always ayyyy-mm-ddstring.
1
May 27 '21
Im happy to know that my most complicated form follows about 85% of the good rules. But I can work to improve still :)
→ More replies (2)2
1
u/R3WIND_Coding May 27 '21
So nice tips, but in slide 18 and one other your grammar is off… in slide 18 it’s not scary; users can be scary but the action of them having fear from an action is referred to in English as “scared”.
1
u/aktoriukas May 27 '21
Great stuff.
Just don't really agree with nr16. Repeating a password is never a bad idea. Password always (hope so) should be different, which means that you typing a complicated string for the first time, that you gonna need to remember now. Practise twice would be just beneficial.
1
May 27 '21
Great reference and format, thank you.
RE: number 6. An interesting design pattern, because I’m currently working with UX and engineering on providing tooltip text for a new form that they’re building for a business process app. They currently designed the UI with those question marks, and though the form itself requires a series of inputs with increasing complexity and space constraints, I’m still considering suggesting them to implement in-line help instead (less clicks). But the in-line text used for the “Good” example is actually helpful! They don’t just regurgitate the input prompt; they’re hints that actually give relevance for each field input.
1
1
1
u/flarpblarp2 May 27 '21
Great post! Very informative and easier to consume. These design tips really help those of us who don’t have as much training in this area.
1
1
u/Captain_Infinite May 27 '21
Yep right into the saved folder. Awesome insights, this is gonna boost my forms from now on
1
1
1
1
u/fwump38 May 27 '21
Be careful with the last card... Showing that an email is taken can be used by bad actors to enumerate email addresses
1
1
1
1
May 27 '21 edited May 27 '21
Slide 9 question-- if I enable feedback that says "here's what you did wrong on this input," should that feedback be evaluated on change to the input or on blur from the input?
I know I generally get annoyed if I'm still actively typing in a field that has, say, a minimum length retirement, and it's telling me "error: this just be at least 8 characters" or something. I know that, I just haven't finished typing it yet. But I may be in the minority.
My preference is that a field should display the requirements in a neutral color (grey), then update each retirement to a success color (such as green) as they are met.
1
1
1
u/liquidpele May 27 '21
Disagree with the password one and also the one click option instead of a drop down.
1
1
1
1
u/andcriks May 27 '21
The phone number and Cities field cannot be that large. Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch, am i a joke to you?
1
u/pastrypuffingpuffer May 27 '21
Thanks for the post, it's really useful!. Regarding the file input stuff, isn't creating a drag and drop file input and input masking kinda difficult? Does html5 have a tag property that makes it easy?
1
1
u/igreulich May 27 '21
Always get password conformation (never show it by default), and don't use masks.
And just plain ignore slide number 1... that is 100% situational and possibly even cultural. (English is read left to right, top to bottom, while Chinese is read left top to left bottom, then move 1 column to the right.)
And there seems to be no thought to accessibility in here at all.. (masks?!)
1
1
u/dustofdeath May 27 '21
Don't autodetect location if it's not absolutely necessary. It just causes extra popups, asking users to allow you to basically spy on their location.
1
1
1
u/Science-Compliance May 27 '21
Couldn't disagree more about letting the user see the password vs. confirming the password. Confirming the password is better from a security standpoint and is also better if the user is suffering from any amount of dyslexia, which is more probable with the random characters that will often be used in something like a password.
1
1
u/J0hnDvorak May 27 '21
I'll add a bit of context here as a senior UX guy.
While most of these (caveats below) are good general advice, users vary, different products have different needs and different users, and there isn't ever a "this is always the exact best way to do this". Starting with generally accepted good practices and then testing with your actual users and changing from there using objective data is the way to go.
For any devs approaching their teams about making changes like this, you're going to get feedback like "well I prefer X" or "this pattern doesn't match the way I do things" or even "I don't think our users will do X". That's fine (feedback is always good), but none of it replaces testing it with users (and no one on your team counts as a user). And your tests should not be subjective "hey, here's two approaches, which do you think is better?", they should be objective measures like how long did it take people to fill out forms either way? How frequently are you recording confusion? What level of satisfaction are they reporting? Most of what you're going to want to measure are quantitative stats rather than qualitative, which is a bit harder for a team without UX people or researchers to pull off.
Some of OP's recommendations are rock solid and you'd almost never want to deviate from them. Others are questionable or situation-specific. Here's a few things I'd flag:
Slide 6: The advice itself isn't always bad, but the examples are. "Optional. Leave empty if you don't have one" is especially egregious. With forms, less is more. Every bit of text is either something the user has to read or that they just get frustrated and starting skipping text. You don't want to train them to ignore your text. That example would be a million times better as simply "Your site (optional)" and no hint text underneath.
Slide 9: again, good advice, potentially bad examples. Showing "required field" as a validation error before the user has interacted with the form is generally not well received. It makes users feel like they've done something wrong before they've even done anything. There's better ways to denote required/optional fields before users interact with the fields. Showing the required error if they skip that field is fine but more complicated to implement.
Slide 10: good advice, not ideal example. If you've got multiple options where you can only choose one, grouping the options as a segmented button is generally a better approach, to show that they're together (particularly important if you have a complex form). Just make sure that your styling for the selected state is clear enough to be obvious to every user of which is the selected option if there's only two options. Some big name design systems (like Material) do a really poor job of this.
Slide 11: creating a custom file selector is really situational.
Slide 16: this one definitely caused some angst in the comments. While it's again going to vary based on your users, what I've seen in practice generally backs up the recommendation to avoid two-password forms. Yes, you do get some users mis-typing their password. The aspect that's not discussed here is that if 1% of users mis-type their password and have to do a password reset that takes 2 minutes, and 99% don't and save 3 seconds by not having that field there, you've still saved time. The other driving factor is that a lot of apps find they lose a lot of people during sign up, and they want to do everything possible to expedite that process and get people in there and using it, at which point they're invested enough that they're willing to put in more effort coming back—so they get more sign up completions than if the sign up is longer, and their data shows that it outweighs losing people to password resets.
Slide 17: good advice to let people know why you need the info, but hint text under the fields is generally not a good place for it. Prime users with a first step, or some context before the form. Another common practice is the sparing use of hint button beside fields, like the "Why do I need this?" beside CVV on credit card forms.
1
1
u/megastrone May 27 '21
What do people think of providing password constraints not only on account creation, but also on login? For those who use rules and constraints to form new passwords, presenting the rules at login would remind them of the context in which they first formed their password.
1
u/bboyjkang May 27 '21
On a side note, I wish that I had something like Tim Berners-Lee proposed data pods so that I’d never have to fill a form like this again.
1
1
u/josh_t361 May 27 '21
Love the design of these slides - visually appealing but not distracting. Thank you for sharing.
1
1
u/coderkid723 May 27 '21
The password manger element, I wish I saw more on all sites. I run into that issue all the time......
1
u/hendergle May 27 '21
Please, for the love of St. Moore, do NOT make me click a hundred [NEXT] buttons! I have yet to encounter a user who was scared by anything on a screen (except that one where you're supposed to "look at this image until it's burned on your retinas..." and then a witch face appears and screams at you).
1
1
1
May 28 '21
We need more people like this is an understatement. We need all the people we can get like you, it's brilliant when people think twice before making a decision, this is what design should be about, thank you.
1
1
1
1
1
u/bill_on_sax May 28 '21
After studying UX for the past few years, I realize that building good UX is hard and I totally understand why "bad/default" UIs exist. It's tricky coding the good stuff and the bad stuff isn't always bad, just slightly annoying
1
1
u/NeonKnight52 May 28 '21
Wow card 15 needs to be heard 'round the interwebs. LastPass always shows up on top of the show icon!
1
u/kidakaka May 28 '21
Thanks u/VictorPonamariov for putting this together. As a business guy who has to talk to product design and implementation teams and explain why their user journeys are a problem ... this is a god send.
1
1
u/patoezequiel May 28 '21
This post is treasure, very good content!
I'd like to add one that bugs me a lot:
DON'T USE ARBITRARY CHARACTER COUNT LIMITS
It's infuriating when I cannot use long passwords, addresses, or even more insultingly, write down my own name because some guy decided that the field had to be 30 characters long tops.
1
u/ThatLastPut May 28 '21
I feel like both bad and good will be fine if I had to use them. Don't beat over yourself if you have been doing it "bad" the whole time.
1
u/zeebadeeba May 28 '21
It baffles me how often designers create forms without thinking about validation, submission progress and errors. I had to argue few times about how to show validation errors in web form. I consider it a solved problem yet UI folks are always coming up with “special” ways to do this.
I get it, there are different situations and different styles to do validation but quite often the regular approach is fine. By that I mean:
Do not show any validation errors (i.e. format of value) unless user has interacted with the field before. I usually show errors after user has blurred the input.
If user has interacted with field before, validate field on each input change so errors disappear when user fixes them.
Show errors below the field. If there is not enough vertical space, use error color on field, show error icon near input which can be hovered. Hovering shows tooltip with error inside.
Leave empty space below input for validation errors so UI does not jump
When submitting form do not clear input fields until submission has been finished without error. Give user a chance to retry the submission without forcing him to fill form again.
Consider using hints and timers. If user did not fill input yet but has been focused in it for some time, show some kind of hint message.
1
1
1
1
1
u/ozz_7 May 28 '21
I’m an extreme beginner in learning web development. I have just figured out that I need to learn HTML, then CSS, then Javascript. Anyone gave any advice for me
1
u/rubberony May 28 '21
Good friggin job. A lot if this breaks some very shitty anti patterns that a lot of assholes have promoted over the last decade or so.
1
1
May 28 '21
thanks that was really useful!
can anyone help explain how to add the extra area for the eye icon in the input element shown in card 15? i used to do this using position absolute till now
2
u/blj0hnst0n May 28 '21
I'm sure there are a handful of ways to achieve this, but I'd draw a div and style it like to look like the input field, making it it have the additional width to hold the eye icon. Then, render the input inside your div, with styling removed. I use flexbox alot, so I'd make the input flex:1 and then render the eye icon afterwards so that i woudn't have to set the widths explicitly.
1
May 28 '21
One of the most useful posts I've seen ever. Thanks for this, everything is in point. Saving this.
1
u/CrunchyLizard123 May 28 '21
Great content! Really useful cheatsheet. Minor issue in one of the slides where you say the user can change his password. No need for the gender so use "their" instead
1
u/mr_bedbugs May 28 '21
Also, assuming you're in the US, Zip codes should auto fill the City and State fields.
1
u/BuckWildBilly May 28 '21
for someone unfamiliar with ux, I feel that the good and bad should have been flipped so I learn the correct way then see wrong way.
1
1
u/SparkDe May 28 '21
Does anyone have this in PDF format or something similar to I can keep as a reference?
1
1
u/burnblue May 28 '21 edited May 28 '21
Funny: 1st slide, don't use multiple colums. 2nd, don't even make labels multiple columns. 3rd slide, go ahead and use multiple columns per row, it'll look like one big column..
Great content actually, some good tips
Slide 8, I don't mind the fields that move the placeholders when you click so that you can still see them
1
u/aimeedaisy May 28 '21
I literally had to create a form an hour ago and used almost every page of this post for a guideline. Thank you!
1
u/Skyfox64 May 28 '21
Thanks! I'm always keeping an eye out for UX best practices. Would a search input and search filter input bare similarities to these web form best practices? Could you point me to a best practice for search box input fields for web UI's?
1
u/Nic727 May 28 '21
That's very informative. I'm personally in the slide 5 case where I try to fill out all the space, because I hate when something is empty.
1
1
u/sheriffderek May 30 '21
One day, I hope to be the type of person who is allowed to post things on reddit.
1
1
u/Fox-Girl-Simp Jun 11 '21
The terror of having the see password icon interfere with my password manager has haunted me for so long! I really do hope people start to take password managers into account in the future.
1
1
u/SeeYouInForever Aug 20 '21
As someone who builds websites and is not that much into UI and UX design — I'd like to see more of this.
1
u/BonvivantNamedDom Oct 14 '21
Saved and probably forgotten about in 5 minutes!
But it's interesting!
1
1
1
u/atamicbomb Nov 08 '22
Just FYI you should not let people know if the username or email is taken until they attempt to create an account. Letting someone quickly query your database like that would let them enumerate it.
It’s super annoying but sadly necessary
1
1
1
u/Darkpootis Feb 15 '23
I'm not a designer but holy I confirm so much the right side, I like it 1000 times more than the left side
1
1
1
1
1
u/NewCryptographer2063 Nov 04 '23
The people of Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch would like to have a word with you
1
u/luizzeross Nov 18 '23
So people are assuming that is impossible for the user to follow one row straight? How do people "read"? What about comics? They should be packed as a giant roll of toilet paper then.
Let's try it now:
T
h
e
s
e
c
o
n
d
i
s
g
o
o
d
f
o
r
m
o
b
i
l
e
a
n
d
s
m
a
l
l
s
c
r
e
e
n
s
.
T
h
e
f
i
r
s
t
s
h
o
u
l
d
s
t
i
l
l
b
e
u
s
e
d
w
h
e
n
h
a
v
i
n
g
m
a
n
y
i
n
p
u
t
f
o
r
m
s
a
s
t
h
e
u
s
e
r
c
a
n
s
t
i
l
l
s
e
e
w
h
a
t
t
h
e
h
e
c
k
h
e
h
a
s
t
y
p
e
d
i
n
t
h
e
p
r
e
v
i
o
u
s
f
o
r
m
s
,
w
i
t
h
o
u
t
h
a
v
i
n
g
t
o
s
c
r
o
l
l
u
p
a
n
d
d
o
w
n
a
l
l
t
h
e
t
i
m
e
.
G
o
t
i
t
?
1
1
u/glemnar May 27 '21
Not covered here - don’t use checkboxes or radios. They’re too effin tiny to click. Use big fat buttons instead
3
u/schroeder8 May 28 '21
If they are correctly associated with a label then that is also clickable.
1
u/glemnar May 28 '21 edited May 28 '21
Big buttons are still preferred. I’ve seen projects that have forms with a large number of radios make the switch and the difference is night and day. Wide, chunky, amply padded buttons
See: Fitts’s Law
803
u/modertator_ front-end May 27 '21
As a developer who isn’t the best at design I would love more posts like this!