@DesignCouse, a little tip to save you time, if you want to close a chrome tab, hover over any part of the tab, not necessarily the little tiny x, and click the mouse wheel. You will never go back to clicking the x ever again :)! Thanks for all that you do. Time is valuable and we appreciate it!
6:32 I agree with the error form part here. I remember working with error handling before, what I'd rather do is give the message some timeout animation to fade-out or give it some dismiss button in case the user don't want to see it. Thank you for discussing this topic. This gives me some nice perspective!
This is actually what im stuck on at my current project. Im usually a backend developer, so im kind of new to doing design and frontend development. Thank you for this!
Just discovered Gary, really loving the videos so far. I figured this one in particular would scorch me for my forms, but I’m surprisingly doing most of my forms correct (in terms of this video). I use to be real guilty of the placeholder forms though
Simple and effective concepts, thanks for sharing. Just a small complaint: an ads every 3 minutes and half, right in the middle of a concepts, it is quite annoying. Ads don't bother me if I'm watching a good contents like yours. It's the brutal interruption that bother me. Now, I don't know how youtube advertisement system works, but if you could position the ads at the end of every concept (not in the middle) would be a huge UX improvement. And maybe, I don't know, show a little pop up with a countdown to the next ads, like some youtuber do, or maybe take a break in the speech and introduce the upcoming commercial break (it would be even pleasant). I repeat, there's great contents in your videos (that's why I'm a subs), I thank you for that, and I will still watching it even with this sudden interruptions. It's just that they crash my brain flow while I'm absorbing your concepts.
Good stuff. My 2 cents regarding tooltips: - never hide content behind tooltip- accessibility issue plus simple fact that a percentage of users will not connect the dots there's more info available or simply won't bother. All info and guidance should be visible by default. For accessibility issues regarding tooltips check HTML .
Was looking for a comment about tooltips. Aside from even accessibility, normal user experience becomes clunky if you've got a responsive / mobile layout IMO. How would that tooltip display if the form was 100% of the width of the page? This is how it would likely appear on a phone, or maybe even tablet. It'd either have to open right (off the page; bad), open to the left on top of the form itself (which seems clunky), go the whole hog & become an entire popout-modal, or appear inline, as it was at 7:45. Can agree that it can limit screen real-estate, but unless the tooltip is huge, I'd go with the last option, unless someone has a better idea. Maybe keep the tooltip button & it toggles message visibility, but expand the content inline?
I think the usage of just placeholders can be absolutely perfect for something small like name, mail and message. Though I allways preffer to use floating labels.
Nathan Reyes - The code doesn’t validate which causes problems for assistive tech; - the field is not read properly in a screen reader; - by default contrast is low (IE and Edge CSS compatibility issues) - when text is zoomed it doesn’t fit in the field and is unreadable; - the ”label” disappears when filling in the field as Gary Simon points out; - the completed form has no labels making it hard to confirm that it’s filled in correctly; - you exclude people with visual impairment; - you exclude people with dyslexia; - you exclude people with a wide range of cognitive disabilities. It’s not absolutely perfect, it’s absolutely terrible design and it's wrong on a humanistic level; a html spec level and a wcag level.
For that form-placeholder issue, I suppose you can do something like google, ie. when you focus on the input field, the placeholder goes blank and the label becomes visible.
Great tips. I don't agree with saying to not show the error on blur, I think that's perfectly acceptable. On blur or if dirty both work fine, but I would like to hear more about pros/cons of each. Everything else is on point though!
Another big problem with placeholder labels is the browser’s autofill feature. A lot of times an autofill can map the wrong data to the wrong field (ie Company name going in Address Line 2). When that happens and you don’t have separate labels the user has no idea if there is a mistake and will submit bad form data.
This is a great review on best practices. I'm surprised ADA standards weren't mentioned when talking about why labels and focus should be used. Recently, I've seen several contracts about large companies attempting to fix this issue with their hundreds of poorly designed forms. Good news, if you follow the best practices mentioned in the video your forms will become ADA friendly for most users in general.
Hi I love your explanation, can you make a video on complete junior code review where beginner can find the mistake and also can use best and good approach
a note on placeholders coz i hate them too, javascript could just be used to take the placeholder and put it at the start of the input e.g. name: without effecting the UI much, so its a good alternative if you really want to save the space above and below the input field. although this is obviously an advanced technique
Just in time, That was super helpful, Do more videos like this about global design that you can find in every website or application even mobile design would be nice . Thanks a lot.
At the informational text thing it kinda depends how important the important that information is. If it's a must read then i would place it between the label and input field. If it's not important, but only helps the user then a popup (i)-button is good enough.
I like how honest you are being, and as a web designer I can totally agree, these were all valid points 👍 Yes i also made these same mistakes 4 years ago...
Good tips and ideas here. It makes me crazy when I see form fields without labels. From an accessibility standpoint their absence is simply unforgivable. Also I am a big fan of simplifying inputs when possible. For example "name" instead of "first_name" and "last_name" and "address" instead of "street", "city", "postal_code", etc. Had the potential to make forms much less intimidating, especially on small screens and their keyboards.
To the placeholder problem Pro: Cleaner & Shorter Con: Disappears Solution: Put the placeholder outside for the currently active form, e.g. in grey below
I don't fully agree with the pagination example because in my opinion this is very, very application dependant. I would consider it a bit overkill in most cases? The grouping seems like a better all-round example for most use cases.
placeholder actually is not that bad, i think it's visually more appealing and modern than the label element. what I would do is find a workaround for this. For example use a title attribute on the inputs or some sort of tooltip visible only when typing
Personally, I agree that it can look better (depending on the design) while seeing the unfilled form. The problem he brought up if the form is already filled (maybe even through the browser’s autofill) is very legitimate, though. You don’t want the user to have to second‐guess themself when e.g. verifying data before submitting the form. Not everyone knows about the existence of tooltips, so not everyone will be able to use them effectively. What Google does for its login form is a nice approach, and it was even mentioned in the video. That is, moving the label from being inside the field to being outside it when you focus it. The problem, then, is that there is unnecessary movement that can be too distracting. At that point, you begin wondering why not just leave the label stationary outside the field.
THANK YOU THANK YOU THANK YOu for upping my forms game, if you will. Ive always disliked that part of web design simply because I found it difficult to style. I don't have to try and find templates anymore to avoid the cone pain staking task of making a form.
8:40 I would say it's wrong to split it like that. Whenever I see a form with multi steps I always think they split it because they want info they know I rather don't give away. but if I go thru the hassle with a few steps I'm just like oh ok and if I stop I have already submitted my email to them. I stay away from forms with multisteps like that. If I buy something in a webshop and want to check out it could make sense with multi-step form.
4:37 You should always use labels to make your websites accesible to blind / visually impaired people. In cases, where labels don't go well please use aria-label. Don't exclude people
Happy to see accessibility issues being raised! Another problem with placeholders as labels is that they don't fit into the field when text zoom is used. And, hey, the html doesn't even validate. It's just wrong.
4:37 I agree. UNLESS you use Google's Material Design approach (material.io/components/text-fields), where you move the label just above the input (or just over the top border in the left corner), upon interaction with the field. So by default this approach is pretty bad, but if Material Design is implemented, then it turns from worst to best. Because then the design is clean & beautiful, yet still 100% functional, even after the input has been filled.
Floating labels are definitely better than only relying on placeholder -- however, according to nngroup: www.nngroup.com/articles/form-design-placeholders/ "However, issues #5 and #6 from above are still a problem: fields with text in them are less noticeable, and users might think there is already a default value entered in the field. Also, the accessibility issues described earlier may still apply, because some browsers and assistive technologies don’t properly or reliably read placeholder text. Ultimately, floating labels do offer a better user experience than the label as a placeholder. But if you have the screen space, placing the label and hint outside the field is still the best way to go. "
When the form is very long and the number of fields is large, is not it better that the description is on the right and the field on the left to reduce the scroll?
5:15 just happened to me while subscribing to dribble, the irony. I used chrome's autocomplete by accident and i didnt know what the field complete was actually for
Hello, I work in a developer company, the framework we use has very messy forms, do you have videos where you show us how to make well-ordered forms? Bye.
As a *NO* frontend dev, this looks like a thing that all frontend should know, cause as a user, all these things border me when I have to make a registration in a site badly projected
Are you a FORMS master? Oh also, hey everyone. I started a NEW Instagram account. ADD ME! @designcoursecom
Thank you so much for these tips,, and for the record i suck at form design,, but not anymore
Was hoping for more neat stuff, can't believe that peoples do such silly mistakes at design
Also why is too much ads in this vid?
@DesignCouse, a little tip to save you time, if you want to close a chrome tab, hover over any part of the tab, not necessarily the little tiny x, and click the mouse wheel. You will never go back to clicking the x ever again :)!
Thanks for all that you do. Time is valuable and we appreciate it!
whoa... thank you!!
@navi
This works for many programs that utilize the tab layout. VScode, and many text editors as well!
Thanks for this!!!
Noo just press ctrl+w
Or just use ctrl+w in your current tab to close it... I use both methods
Thanks sir please make more videos like this video that show us what we need to do and what not in UI Designs.
Your UI and UX lessons are the most useful and full of life and content on UA-cam! For real, watching you and saving your videos, thank you.
it doesn't matter which one of your videos i choose to play , it ends up learning so much new stuff. Thank you for your content.
6:32 I agree with the error form part here. I remember working with error handling before, what I'd rather do is give the message some timeout animation to fade-out or give it some dismiss button in case the user don't want to see it. Thank you for discussing this topic. This gives me some nice perspective!
This is actually what im stuck on at my current project.
Im usually a backend developer, so im kind of new to doing design and frontend development.
Thank you for this!
I love how he beefs everyone without being disrespectful
Great video btw!
I absolutely needed this! Thanks so much Gary.
Just discovered Gary, really loving the videos so far. I figured this one in particular would scorch me for my forms, but I’m surprisingly doing most of my forms correct (in terms of this video). I use to be real guilty of the placeholder forms though
Simple and effective concepts, thanks for sharing. Just a small complaint: an ads every 3 minutes and half, right in the middle of a concepts, it is quite annoying. Ads don't bother me if I'm watching a good contents like yours. It's the brutal interruption that bother me. Now, I don't know how youtube advertisement system works, but if you could position the ads at the end of every concept (not in the middle) would be a huge UX improvement. And maybe, I don't know, show a little pop up with a countdown to the next ads, like some youtuber do, or maybe take a break in the speech and introduce the upcoming commercial break (it would be even pleasant). I repeat, there's great contents in your videos (that's why I'm a subs), I thank you for that, and I will still watching it even with this sudden interruptions. It's just that they crash my brain flow while I'm absorbing your concepts.
Yeah, I really need to position them and not rely on automatic placement. Thanks for the comment!
Dayum!
Used the UX card on him to make a point. Quite the finesse :D
Your Channel helps me soooooooooo much. I learn so much from you.
I loved it! Not often I am sad that a video ends but after watching this one I want more! :D
This is my fav channel rn. Perfect for quarantine ❤
Very timely for me. I was pausing the video and correcting my forms as I watched. Already subscribed etc.
And I thought my forms looked fine. Great content!
Very few UA-camrs have videos with this much simplicity.
Good stuff. My 2 cents regarding tooltips:
- never hide content behind tooltip- accessibility issue plus simple fact that a percentage of users will not connect the dots there's more info available or simply won't bother. All info and guidance should be visible by default.
For accessibility issues regarding tooltips check HTML .
Was looking for a comment about tooltips. Aside from even accessibility, normal user experience becomes clunky if you've got a responsive / mobile layout IMO. How would that tooltip display if the form was 100% of the width of the page? This is how it would likely appear on a phone, or maybe even tablet. It'd either have to open right (off the page; bad), open to the left on top of the form itself (which seems clunky), go the whole hog & become an entire popout-modal, or appear inline, as it was at 7:45. Can agree that it can limit screen real-estate, but unless the tooltip is huge, I'd go with the last option, unless someone has a better idea. Maybe keep the tooltip button & it toggles message visibility, but expand the content inline?
I think the usage of just placeholders can be absolutely perfect for something small like name, mail and message.
Though I allways preffer to use floating labels.
Nathan Reyes
- The code doesn’t validate which causes problems for assistive tech;
- the field is not read properly in a screen reader;
- by default contrast is low (IE and Edge CSS compatibility issues)
- when text is zoomed it doesn’t fit in the field and is unreadable;
- the ”label” disappears when filling in the field as Gary Simon points out;
- the completed form has no labels making it hard to confirm that it’s filled in correctly;
- you exclude people with visual impairment;
- you exclude people with dyslexia;
- you exclude people with a wide range of cognitive disabilities.
It’s not absolutely perfect, it’s absolutely terrible design and it's wrong on a humanistic level; a html spec level and a wcag level.
Cool outro!
That was a simple but really valuable video. Please more of those!
This is so useful, Thanks and bring us more!
For that form-placeholder issue, I suppose you can do something like google, ie. when you focus on the input field, the placeholder goes blank and the label becomes visible.
Learned a lot from this video. Thank you!
Great tips. I don't agree with saying to not show the error on blur, I think that's perfectly acceptable. On blur or if dirty both work fine, but I would like to hear more about pros/cons of each. Everything else is on point though!
Great tips, I love all the examples!
I shall heed your advice indeed sire! & I like the ending music
Amazing tut on form design and accessibility, looking more, thanks lot
This is priceless these are really important things that are most of the time overlooked by developer. Thank you so much
10:15 ready to receive massive amounts of fanmail, Gary? :P
I like how you magically change shirts at 0:49
thanks you so so so so much, this really helpful !! i'm stuck at so many many input form(more than 20 inputs is normal) day by day.
Another big problem with placeholder labels is the browser’s autofill feature. A lot of times an autofill can map the wrong data to the wrong field (ie Company name going in Address Line 2). When that happens and you don’t have separate labels the user has no idea if there is a mistake and will submit bad form data.
Thank you for such valuable information, I will definitely apply your suggestions in my next design. Love your every video ❤️.
Totally diggin the extro music.
This is a great review on best practices. I'm surprised ADA standards weren't mentioned when talking about why labels and focus should be used. Recently, I've seen several contracts about large companies attempting to fix this issue with their hundreds of poorly designed forms. Good news, if you follow the best practices mentioned in the video your forms will become ADA friendly for most users in general.
Hi I love your explanation, can you make a video on complete junior code review where beginner can find the mistake and also can use best and good approach
This is the most useful UI form design video I have ever in seen in like 3 years. THANK YOU!! you are great.
Thank you so much for this video, now I have great ideas on how to design forms, your tips are awesome, thank you!!!
i'm a web developer that totally sucks at design. this helps em a lot
This guy is just the best.
a note on placeholders coz i hate them too, javascript could just be used to take the placeholder and put it at the start of the input e.g. name: without effecting the UI much, so its a good alternative if you really want to save the space above and below the input field. although this is obviously an advanced technique
Thanks for the advice!
Just in time,
That was super helpful,
Do more videos like this about global design that you can find in every website or application even mobile design would be nice .
Thanks a lot.
At the informational text thing it kinda depends how important the important that information is. If it's a must read then i would place it between the label and input field. If it's not important, but only helps the user then a popup (i)-button is good enough.
Great video as common.
I like how honest you are being, and as a web designer I can totally agree, these were all valid points 👍
Yes i also made these same mistakes 4 years ago...
This is very good and very needed
Hi, super nice video! Please make more video’s like this!
Really useful information.. thank you sir...
On my way back to fix the placeholder thing now and, well, okay, the indicate which filed you are on thing too. Thanks! Awesome channel!
Great points well taken. Thank you for your video!
Great tips, thank you!!
Good tips and ideas here. It makes me crazy when I see form fields without labels. From an accessibility standpoint their absence is simply unforgivable.
Also I am a big fan of simplifying inputs when possible. For example "name" instead of "first_name" and "last_name" and "address" instead of "street", "city", "postal_code", etc. Had the potential to make forms much less intimidating, especially on small screens and their keyboards.
Love the James bond outro
What.... I need more UX tutorials like that.... Awesome.
At least we kind of agree with floating label of MD
Well done, simple concepts and many examples.
Yay... I am not going to suck anymore 😅😃
You still are but a little less than before
First video ive seen from you and damn ... you are absolutly right! Have a sub :)
I don't suck at form design anymore thank you 😁
some simple but helpful tips. thanks!!!
I return the user if they click on submit to focus on the field missing instead. That way they know whats up and they are ready to type in.
It all depends on the environment and context my friend ;) youre welcome
that high contract orange background color makes my eyes burned.
thanks for helping us :)
Loved this one, was really useful thanks.
Great video, I was already typing a comment about the multi step process and the example following made me change it! :D
Watched a lot of your vids, one of the best right here. Cheers from Belgium.
Thanks for the helpful video
One of the reasons I hate Material Design is the way forms are displayed as lines. Glad you addressed that making them into boxes is better.
I had watched your css grid tutorial
that was awesome it helps me lot to fix my footer section at bottom
Thank You buddy 🙇❤.
thank you. it was very helpful
Good information but the number of ads are crazy I had to step away 🤣
To the placeholder problem
Pro: Cleaner & Shorter
Con: Disappears
Solution: Put the placeholder outside for the currently active form, e.g. in grey below
Thanks Gary, nice video learned a lot. Could you please make a video on step form with validation as well.
I don't fully agree with the pagination example because in my opinion this is very, very application dependant. I would consider it a bit overkill in most cases?
The grouping seems like a better all-round example for most use cases.
placeholder actually is not that bad, i think it's visually more appealing and modern than the label element. what I would do is find a workaround for this. For example use a title attribute on the inputs or some sort of tooltip visible only when typing
Personally, I agree that it can look better (depending on the design) while seeing the unfilled form. The problem he brought up if the form is already filled (maybe even through the browser’s autofill) is very legitimate, though. You don’t want the user to have to second‐guess themself when e.g. verifying data before submitting the form. Not everyone knows about the existence of tooltips, so not everyone will be able to use them effectively.
What Google does for its login form is a nice approach, and it was even mentioned in the video. That is, moving the label from being inside the field to being outside it when you focus it. The problem, then, is that there is unnecessary movement that can be too distracting. At that point, you begin wondering why not just leave the label stationary outside the field.
Are we not going to talk how absurdly good the lighting in his room?
Excellent video!
Thank you so much for this great advice. Amazing content😉👌🏼
Really useful, thank you
Amazing video! This is a gem, and yes I subbed.
THANK YOU THANK YOU THANK YOu for upping my forms game, if you will. Ive always disliked that part of web design simply because I found it difficult to style. I don't have to try and find templates anymore to avoid the cone pain staking task of making a form.
Please make the Schengen visa application form with CSS. It is so complicated.
8:40 I would say it's wrong to split it like that. Whenever I see a form with multi steps I always think they split it because they want info they know I rather don't give away. but if I go thru the hassle with a few steps I'm just like oh ok and if I stop I have already submitted my email to them. I stay away from forms with multisteps like that. If I buy something in a webshop and want to check out it could make sense with multi-step form.
4:37 You should always use labels to make your websites accesible to blind / visually impaired people. In cases, where labels don't go well please use aria-label. Don't exclude people
Happy to see accessibility issues being raised! Another problem with placeholders as labels is that they don't fit into the field when text zoom is used. And, hey, the html doesn't even validate. It's just wrong.
Yo what about paragraphs? They should wrap every label, remember that.
Great stuff Gary!! Thanks for the info!!
Thanks a lot that was most most most help full
5:07 I knew exactly what the problem was the first moment I saw it, because I'm the one that forgets what the field is about XDD
new subscriber here! Awesome stuff! Thank you!
4:37 I agree. UNLESS you use Google's Material Design approach (material.io/components/text-fields), where you move the label just above the input (or just over the top border in the left corner), upon interaction with the field. So by default this approach is pretty bad, but if Material Design is implemented, then it turns from worst to best. Because then the design is clean & beautiful, yet still 100% functional, even after the input has been filled.
Floating labels are definitely better than only relying on placeholder -- however, according to nngroup:
www.nngroup.com/articles/form-design-placeholders/
"However, issues #5 and #6 from above are still a problem: fields with text in them are less noticeable, and users might think there is already a default value entered in the field. Also, the accessibility issues described earlier may still apply, because some browsers and assistive technologies don’t properly or reliably read placeholder text.
Ultimately, floating labels do offer a better user experience than the label as a placeholder. But if you have the screen space, placing the label and hint outside the field is still the best way to go. "
This was awesome!
When the form is very long and the number of fields is large, is not it better that the description is on the right and the field on the left to reduce the scroll?
Me who has been designing forms like at 4:40. sweats nervously
damn thanks I learn lot about forms designs
5:15 just happened to me while subscribing to dribble, the irony. I used chrome's autocomplete by accident and i didnt know what the field complete was actually for
Thanks for the valuable advices. However, I hope you cover dropdown menus in the another video. It's a very tricky component to do right.
Hello, I work in a developer company, the framework we use has very messy forms, do you have videos where you show us how to make well-ordered forms?
Bye.
everything you said was so useful.
As a *NO* frontend dev, this looks like a thing that all frontend should know, cause as a user, all these things border me when I have to make a registration in a site badly projected