Sign-in form best practice
Вставка
- Опубліковано 23 сер 2024
- Use built-in, cross-platform browser features to create sign-in forms that are secure, accessible and easy to use.
Resource(s):
Sign-in form best practices → goo.gle/2NzgbDD
Related Playlist(s):
Day 3 → goo.gle/WDL20Day3
Subscribe to the Chrome Developers → goo.gle/Chrome...
Speaker:
Sam Dutton
#webdevLIVE #SameSite #useragentclienthints event: web.dev LIVE 2020; re_ty: Publish; fullname: Sam Dutton; product: Chrome - General;
i could listen to this guy all day. pls make more of these basics best practices videos!
01:59 Well formed HTML is the backbone of a good sign-in experience
04:34 Don't repeat inputs
04:57 Use buttons for buttons
07:13 Make sure inputs are clearly visible
07:40 Design for thumbs
08:00 Make text big enough
08:51 Warn of invalid input values
09:29 Help users start faster with input attributes
11:04 Prevent keyboards obscuring the sign in button
11:57 Help users avoid re-entering data with input name, id, type and autocomplete
14:25 Enable the browser to suggest a strong password
14:48 Add the required attribute to both email and password fields
15:03 Make sure to add a Show Password button to enable users to check the text they've entered
15:57 Validate data before submission
16:40 What you cannot measure, you cannot improve
17:35 Website performance
17:52 General guidelines: Don't make users hunt, keep it focused, minimize complexity, incentives sign in, allow email or phone, make password reset easy, link to terms and policies, keep branding and style consistent
Some of these are pretty obvious. If you don't do them, then you're probably just trying to get things done fast without quality checks which is ultimately bad for both parties.
Edit: Thank you for the comprehensive list
Thank you!
Thank you for being you!
Basics that no one taught us
Of course - user experience is at the bottom of everyone else’s priority list. The same goes for full test coverage.
Not in my book 😉 all my code is fully tested and I have an eye for UI/UX.
Only expierence can teach us these.....
Very good indeed, particularly pleased to see accessibility getting so much attention! 👍
However, using the "autocomplete" attribute gives you FAR more control over what data the browser or other autocomplete agent (e.g. user/pass utility) tries to use, compared to using special "name" attribute values, from which different browsers will attempt to infer the right settings but they are not standard in anything like the same way autocomplete attribute values are.
Also multi-step login is actually slower for more confident users, problematic for many password managers, and if the user has entered the email incorrectly then it's far more complicated for them to correct as they either have to go back to the first form and change it or use a new form with both email and password (which is all that was needed in the first place).
This is insanely useful, thanks for providing so many great sign-in tips. I learned a bunch!
I wasn't looking for this because I didn't know how much I needed it. Thank you.
Best sign in form is no sign in form at all, that makes so much sense.
Muchas gracias por las enseñanzas compartidas en este video. Excelente equilibrio entre: profundidad del tema, tiempo del vídeo, velocidad de locución, entre otros. Además de la capacidad de mantener el interés de el que lo ve. Videos como este deberían ser el estándar. Se nota que tomó tiempo de preparación.
15:00 no javascript is required. just "required" attribute is required ;-)
tell that to a react developer
Bill Somen 😂 using front end frameworks.
@@bren.r 🤣🤣🤣
Fantastic guidelines that all make sense, and excellent production!
yesss, i love it. even being a beginner subject, I learned great tips that I didn't know existed, thanks a lot
So simple and yet so powerful.
Great content, and Sam is such a good speaker to deliver it!
Wow, this video was so amazing and helpful! I liked these best practices and I learned new pieces of code. Thank you so much! 😄
Isn't defining sizes in terms of pixels a bad idea? There's a wild variety of resolutions at every screen size.
Super cool!! More best practices videos please! :D
Speaking of sign-in, when will Chrome stop inserting saved login information to completely random form fields that have no indication that they would be anywhere near login?
Great video, thanks alot!
Watching out for new ones :D
This is exactly what I was looking for. Thanks!
Don't split sign-in fields across multiple pages/views. That makes it harder to use a password manager.
Does it work at all?
thanks for usefull info Google team!
Thanks! I didn't know all these tips.
Very professional with awesome tips, Thanks!
Loved this content, learned few new tricks. Thanks!
One task at a time is quite annoying for auto type password managers
Not if done correctly - just ensure the password input visibility is hidden so it can still be auto filled then the password is already auto filled on the next screen for the user. No additional clicks necessary.
Brendan Rosa I prefer password managers which type into the GUI
@@berndeckenfels you aren't your user
@@berndeckenfels 1Password can fill it correctly
Am I missing something? I can't find anything under the mentioned codelab link (web.dev/codelab-sign-in-form ). Other than that, great summary of the best practices!
Here you go, web.dev/codelab-sign-in-form-best-practices/
@@nickspirit3 - Thank you
Great and very useful video. Many thanks!
BRAVO!!!!
More please :-)
Amazing video....such simple tips but so beneficial :)
There are multiple places in the audio and slides where it should have said `autocomplete=current-password` and `autocomplete=new-password`, not `name=…`. The `autocomplete` attribute is standardized with predefined meanings for the values whereas the name can be whatever you want.
I was curious about how to work with passwords. Thanks for great video!
Read from the end: Could you kindly name some of the shown books in the background? 🐈 For one of 'em I would like to know the name :-)
Same here!
... and don't add any ad- or external trackers on password pages.
UA-cam web doesn't do autofocus on search box. Though it's obvious to search there, it takes extra work for most people to move mouse and click and then type. Helps a lot of lazy users like me. So please consider my request.
Perfect! Thanks for that!
Woah, hold up! There are people who don’t use s for buttons?!
Home Happens to be like this too :)
!
Well, I was using input type="button" 🙁
All the time, but probably not in the way you think. For example dynamically loading content in an area when there is a mouse over or a section comes into view, to improve page laod experience, or simplify development. Also many javascript extensions phone home for better or worse, such as changing content, etc. Think of a password manager.
Thank you for this!
This was enlightening. Thanks!
This is gold!!
Great Video!
Very helpful. Thanks a lot.
Loved It, Loved It!!
Very well explain, great content!!
Great video!
There's an issue with Chrome and Forms. I'd have termed it Webkit, but this issue doesn't appear on Edge. This has to do with the autocomplete. For a Login form, it only makes sense to add the autocomplete attribute to the inputs, and not for a Registration form. Chrome doesn't allow autocomplete=off and doesn't the autocomplete, it will autocomplete anyway. This presents an issue: once I log in to a site, save my password with my browser, anyone can steal my password because it also autocompletes my email and password on the Register page.
Why doesn't Chrome implement show password functionality as a standard part of ?
Sections without headers are not valid at all ... why not using simple divs? Or just the label as the container? It works very well ...
Very informative video.
So much to learn so little time 😩
Dont know why but my mind is going to Gumbiya Park the entire video.
Nice explained
Does the autofill feature also work in a 2-stages login process (11:47)?
Yes
Thanks
I hate forms, where e-mail address and password is asked in two steps... makes the use of a password manager even worse on desktop systems and also is annoying on mobile devices.
Does it bother anyone else that the bookcase doors are open? I guess there were probably some unwanted reflections.
Why are you recommending pixel based padding today? A real problem I recently learned is that changing the font size on Android also changes the effective viewport scaling. Is there any reason not to use rems for all of my units? This is especially important given the font scaling that Android does -- so your unitless designs work correctly on each device. My 3000x1440 screen was effectively rendered to only 265 pixels wide in portrait if I selected 1 font tick larger than default. Things like Bootstrap don't even *support* that narrow of a width and require custom media queries!
Text size is a huge issue in nowadays website (in app is even worst)
Many young web designer don't understand that readiblity is more important than aesthetic.
It’s the Wild West. There are no standards people conform to anymore. It’s just a second thought.
Sooo goood! :)
4:36 even worse, some websites block you from copying and pasting to fill in those duplicate inputs
"Stop It, Get Some Help"
Splitting the login into multiple steps as mentioned at 11:46 is really annoying for people using password managers :/
Don't mess up input types, use inputmode attribute.
Yes the attention to detail in this video is awesome 👏
15:41 Isn't it dangerous to show the password on screen? Let's say you have well-reviewed Chrome extension installed, but it ends up being secretly malicious trying to sniff your password.
Doesn't changing your input type from password to text offer a big risk for security? I'm not an expert, so any info is welcome.
No, it doesn't make any difference. If a malicious extension can read your web pages, it can also read any password fields.
@@mat80 I see. Thanks
I literally hate when email and password are asked in multiple steps, it's really annoying with a password manager
I know right? It's like
1. Must have 6-12 characters (limiting only to 12 characters is a hassle sometimes)
2. At least one capital letter
3. At least one symbol or non-alphabetic character
4. Cannot be the same as your birthday or email (this one is just annoying, especially websites that aren't important, like game discussion forums)
@@baronoke5432 Indonesian
Remember folks, when Goggle says "best pratices" two things are important to note:
1- they don't follow these pratices
2- They are what's best for google for Web Designers to do, not what's best for the designer, developer or their client. they are what's best for Google.
Another item that makes me abandon a site before I read the first word is a cookie farm site.. sites that force users to agree to cookie terms before you even know if the site is worth acknowledging. It's just as bad as the spam calls that say press 2 if you want to be removed from the call list. That only proves they got a live response and can add your number to a live user list.. Cookie farm sites have zero integrity in my book...
Totally disagree with using px for any type of spacing, it is impossible to judge the true size of a pixel on a screen, after all a phone with a 4k screen has far smaller pixels than a phone with a 720 screen. The same goes for laptop and desktop a 4k screen can be anything from 65" to 17" a pixel varies wildly in size.
Basically unless you are designing for a single viewport and know you will not ever be displaying on anything else do not use pixels in any of your positioning.
I get what you're saying, but that isn't how CSS works. In CSS an inch is 96 CSS pixels - it has nothing to do with the size of the device. In fact, devices of high & low density change the size of a CSS pixel to effectively scale content. Eg, many phones have a device pixel ratio of 2 or more, meaning each CSS pixel is 2 or more device pixels.
Me: I wont be able to write any code, If i don't have google in my life.
Google : Hey, we have videos as well where a guy sits in a corner and tell you what is smart and what is not..
For frrrrrrrreeeeeeeeeeee...........
i had job interview and i asked to encrypt the password before POST to the server in the client side, that really sad
can i omit the submit button? I have a UX requirement. if the input completes 6 characters I should call the http request immediately. This is good? I think it kills accessibility.
Juan Crisóstomo sounds dodgy to me. Why six characters? Does it work if someone pastes into that input? What if the user does a typo, wasted submit etc.
I agree with m12652
, I suppose it's like a pin-code? I feel uncomfortable even when Windows/banks uses that format, I'd probably be sceptical to any untrusted website using it. I get that it's not doing anything out of the ordinary, but regular users don't know that, they might think they're tracked or hacked ir whatever.
If it is a requirement, go for it, if you're working on an internal application for a company, sure, then it might be fine, but in that case maybe sso would be better omitting the loginform entirely?
Using auto-signin in itself doesn't have to be bad, people are just not used to it. Also, do you get unlimited tries? Seem much faster to crack a system that automatically tells you if you typed your password wrong, or do you have to wait several seconds for it to validate on slow internet connection even when you know you mistyped the last number?
It may cause many issues, but it's not bad in itself.
Do you mean like how 2FA works on Apple products that when the last digit is entered it makes the request? I think that’s great user experience. Less clicks. Of course if the response is invalid, inform the user and clear it lol.
What's the business plan? What's the business name?
Vo gogel se stretna so namohniot Makedonec koj napravi prolet za bitonot koe namohen ko gogel.
I DARE YOU to do some advertisement on this video
Hmmm... auto completing logins and passwords. Not a great idea in a shared environment as there’s no guarantee while the user is away from their desk that they locked their machine. Edit... forgot to say, brilliant video by the way. Thank you.
I don't really get, why you're encouraging autoFocus, it's being warned about everywhere
11:41 is such a big NONO. Please never do this. Username and Password are part of one and the same form, so please never ever seperate them. This WILL mess up all kinds of tools including some accessibility features and/or password managers.
😢😢؟
Nekoj me falı nekoj kydi koe neznam zemjata ə trkalesta sekoj ima pravo no nikoj maw vo zeminava topka nemozi həp dae stavi oti nalakomo ə hovehkoto oko nikoj dryk
"get the basics right" a.k.a. Don't do what google has done with their forms.
NO GOOGLE: Not the best practices. YOUR practices. You don't own the web. Get over it.