@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!
Timestamps for me 2:56 3:47 4:32 5:37 6:29 (Phone No) 7:23 7:56 ( Supplemental text (ℹ️) ) 8:20 (White Space) 9:20 (Split form into multi-step process) 10:09 (Split form into multi-step process using white space)
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!
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.
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.
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?
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
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. "
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.
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.
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.
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.
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.
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.
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
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.
14:30 well, maybe if he would've used a different placeholder, like a "John Doe" or "Type your name here", could've worked better. Thing is, I know you're aware that some people do actually need guides a bit too obvious for others. It all depends on your target clients, I guess
When i first started doing form design i absolutely made the mistake that using placeholder text as my label was the cool clean way to go... its really not. Form design is more about functionality than it is in aesthetics. Also something to note, in the corporate environment form design skills are highly sought after even if management doesn't usually know the difference between form design and other UX designers. Building complex enterprise web tools also means building form interfaces that are beautiful as well as usable.
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.
14:48 I was going to ask if having NAME both on top of the input field and inside it as a placeholder value would be unnecessary but when I saw it, I imagined that it would look very empty if there was nothing inside the input box. Is it better to just leave it blank?
Empty can be a good thing in web design! He mentions it a few times in this video, but in general white space is so much better than cluttered design. Simple is good. Also, as he also said, you don't need to have any redundancies. Saving space for useful things is a key to design!
the email subscribe form on designcourse.com isn’t using a element with a submit button, so when I type my email and hit “enter”, absolutely nothing happens. One thing that drives me nuts on site forms when I can’t just hit enter when I’m done.
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
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
To the placeholder problem Pro: Cleaner & Shorter Con: Disappears Solution: Put the placeholder outside for the currently active form, e.g. in grey below
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
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.
Hi, nice video. Any advice about the way to indicate that a field is mandatory? I recently read an article (don't remember the URL) indicating that it was better not to put an "*" after the field name but rather add "(Optional)" for non mandatory field. However, I feel that people are so used to see this asterisk pattern that they could not realise that fields are mandatory if there is none. Any thoughts?
what if we are creating a from with drop dwon menu, in drop down menu we can left it empty, we have to give a placeholer in drop down menu, so here it would look bad with some fields are without placeholder and dropdown with holder , here in this case i think we have to give placeholder to text inputs also. or if you clear my confusion would be great
What if we are relying on placeholder values + icons? When the user focuses and starts typing, placeholder value disappears but the icon stays there. I am talking about forms with only 3-4 fields such as fullname, email, password, confirm password
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?
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.
Actually it makes total sense. I'm working on a corporate sign up form that has several fields and I split it into 6 different pages to create a multi-step form. As Gary said, it's extremely intimidating for anyone to be presented with a form which has a couple dozen fields (I mean who likes filling out forms). Users will think, "wow, this is time consuming, I'm not going to fill out this long-ass form." For UX best practice splitting fields up in chunks and probably a maximum of 4 fields per page would be more user friendly and before your user notice it they completed a couple of pages and in return you get the lead.
I think it's really dependent upon your data type, but most times you can come up with at least a few different groupings. Even if you are dealing with data entry you can usually break things up. Sometimes being overly familiar with the data can make it harder to categorize. You might be so used to viewing it a specific way that it is difficult to see it from a more segmented perspective. Another example where it might not be possible is if you are digitally replicating a paper form. This is a very specific situation where making changes based upon web practices could be a huge mistake and cause problems for your end users. Even then you can often use a more categorized approach to the data collection and then provide a replication of the standard form at the end for review. As an example think of something like Turbo Tax. I've worked on applications where we did exactly this sort of work. The goal should be to make the process easy and digestible for new users. If you are able to provide an example then maybe you could get some useful feedback here on how you might segment your form. If you can't disclose the data you are working with, then maybe you can come up with some substitute data field names.
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.
For the most part I agree with everything but there is one detail I don't understand; are you saying validation error messages should ONLY appear when typing and disappear when you stop typing? Supposing you type something and tab to the next field without looking and there is no error message, this may slow you down and cause annoyance.
I'm one of those who love using placeholders. hahah. But what about teh ::before and ::after for labels nstead ? I think those are better alternatives.
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
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!
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.
Timestamps for me
2:56
3:47
4:32
5:37
6:29 (Phone No)
7:23
7:56 ( Supplemental text (ℹ️) )
8:20 (White Space)
9:20 (Split form into multi-step process)
10:09 (Split form into multi-step process using white space)
I absolutely needed this! Thanks so much Gary.
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!
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
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.
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 love how he beefs everyone without being disrespectful
Great video btw!
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
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. "
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.
Thanks sir please make more videos like this video that show us what we need to do and what not in UI Designs.
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.
I loved it! Not often I am sad that a video ends but after watching this one I want more! :D
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.
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.
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.
I like how you magically change shirts at 0:49
Your Channel helps me soooooooooo much. I learn so much from you.
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.
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.
10:15 ready to receive massive amounts of fanmail, Gary? :P
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
And I thought my forms looked fine. Great content!
Very few UA-camrs have videos with this much simplicity.
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.
14:30 well, maybe if he would've used a different placeholder, like a "John Doe" or "Type your name here", could've worked better. Thing is, I know you're aware that some people do actually need guides a bit too obvious for others. It all depends on your target clients, I guess
This is so useful, Thanks and bring us more!
That was a simple but really valuable video. Please more of those!
In my page, I use placeholders as labels, but when the field is :hover or :active, it shows a tooltip with the label. Is that a good approach?
.
Šimon Rataj As some others have mentioned for visually impaired users they need the labels for the screen readers.
Just a question.. The Google material design even which is used in Gmail login form.. They use labels within input. Is that bad design ?
When i first started doing form design i absolutely made the mistake that using placeholder text as my label was the cool clean way to go... its really not. Form design is more about functionality than it is in aesthetics. Also something to note, in the corporate environment form design skills are highly sought after even if management doesn't usually know the difference between form design and other UX designers. Building complex enterprise web tools also means building form interfaces that are beautiful as well as usable.
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.
Amazing tut on form design and accessibility, looking more, thanks lot
14:48
I was going to ask if having NAME both on top of the input field and inside it as a placeholder value would be unnecessary but when I saw it, I imagined that it would look very empty if there was nothing inside the input box.
Is it better to just leave it blank?
Empty can be a good thing in web design! He mentions it a few times in this video, but in general white space is so much better than cluttered design. Simple is good. Also, as he also said, you don't need to have any redundancies. Saving space for useful things is a key to design!
Great tips, I love all the examples!
This is the most useful UI form design video I have ever in seen in like 3 years. THANK YOU!! you are great.
Well done, simple concepts and many examples.
the email subscribe form on designcourse.com isn’t using a element with a submit button, so when I type my email and hit “enter”, absolutely nothing happens. One thing that drives me nuts on site forms when I can’t just hit enter when I’m done.
Don’t take this the wrong way, I am far from good at designing and your videos are very helpful! Just thought you should know,
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
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
If placeholder is not suitable for the use cases you mentioned, when to use the placeholder? What is its purpose?
do some research and you will find out using label + placeholders are better.
To the placeholder problem
Pro: Cleaner & Shorter
Con: Disappears
Solution: Put the placeholder outside for the currently active form, e.g. in grey below
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
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.
Cool outro!
Thank you for such valuable information, I will definitely apply your suggestions in my next design. Love your every video ❤️.
Great points well taken. Thank you for your video!
Yay... I am not going to suck anymore 😅😃
You still are but a little less than before
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.
This is priceless these are really important things that are most of the time overlooked by developer. Thank you so much
Learned a lot from this video. Thank you!
Thanks Gary, nice video learned a lot. Could you please make a video on step form with validation as well.
Are we not going to talk how absurdly good the lighting in his room?
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.
Totally diggin the extro music.
I shall heed your advice indeed sire! & I like the ending music
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.
Hi, nice video. Any advice about the way to indicate that a field is mandatory? I recently read an article (don't remember the URL) indicating that it was better not to put an "*" after the field name but rather add "(Optional)" for non mandatory field. However, I feel that people are so used to see this asterisk pattern that they could not realise that fields are mandatory if there is none. Any thoughts?
what if we are creating a from with drop dwon menu, in drop down menu we can left it empty, we have to give a placeholer in drop down menu, so here it would look bad with some fields are without placeholder and dropdown with holder , here in this case i think we have to give placeholder to text inputs also. or if you clear my confusion would be great
Great stuff Gary!! Thanks for the info!!
What if we are relying on placeholder values + icons? When the user focuses and starts typing, placeholder value disappears but the icon stays there. I am talking about forms with only 3-4 fields such as fullname, email, password, confirm password
Thank you so much for this video, now I have great ideas on how to design forms, your tips are awesome, thank you!!!
Hi, super nice video! Please make more video’s like this!
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?
Great tips, thank you!!
Really useful information.. thank you sir...
What do you think about placing the "required" and "optional" tags as placeholders of the text fields?
Thank you so much for this great advice. Amazing content😉👌🏼
Me who has been designing forms like at 4:40. sweats nervously
What site is this demo on?
This guy is just the best.
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.
what if my form has 20 - 30 fields, and having multiple pages entries doesn't make sense?
Actually it makes total sense. I'm working on a corporate sign up form that has several fields and I split it into 6 different pages to create a multi-step form. As Gary said, it's extremely intimidating for anyone to be presented with a form which has a couple dozen fields (I mean who likes filling out forms). Users will think, "wow, this is time consuming, I'm not going to fill out this long-ass form." For UX best practice splitting fields up in chunks and probably a maximum of 4 fields per page would be more user friendly and before your user notice it they completed a couple of pages and in return you get the lead.
I think it's really dependent upon your data type, but most times you can come up with at least a few different groupings. Even if you are dealing with data entry you can usually break things up. Sometimes being overly familiar with the data can make it harder to categorize. You might be so used to viewing it a specific way that it is difficult to see it from a more segmented perspective.
Another example where it might not be possible is if you are digitally replicating a paper form. This is a very specific situation where making changes based upon web practices could be a huge mistake and cause problems for your end users. Even then you can often use a more categorized approach to the data collection and then provide a replication of the standard form at the end for review. As an example think of something like Turbo Tax.
I've worked on applications where we did exactly this sort of work. The goal should be to make the process easy and digestible for new users.
If you are able to provide an example then maybe you could get some useful feedback here on how you might segment your form. If you can't disclose the data you are working with, then maybe you can come up with some substitute data field names.
09:00 it is pagination.
i'm a web developer that totally sucks at design. this helps em a lot
😅I was skeptical but it turns out I suck at forms. Thanks.
Any additional resources you can recommend specifically for form design?
Thanks for the advice!
some simple but helpful tips. thanks!!!
could I instead use the placeholder attribute to direct the user as to the format he/she will need to enter data?
is it okay to autofocus to the textbox for the line input? i kind of like it though 😥
Loved this one, was really useful thanks.
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.
This is very good and very needed
Great video as common.
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.
Great video, I was already typing a comment about the multi step process and the example following made me change it! :D
that high contract orange background color makes my eyes burned.
thanks for helping us :)
I had watched your css grid tutorial
that was awesome it helps me lot to fix my footer section at bottom
Thank You buddy 🙇❤.
Excellent video!
I am able to create a label for my inputs but I am unable to align everything well.
For the most part I agree with everything but there is one detail I don't understand; are you saying validation error messages should ONLY appear when typing and disappear when you stop typing? Supposing you type something and tab to the next field without looking and there is no error message, this may slow you down and cause annoyance.
Amazing video! This is a gem, and yes I subbed.
I'm one of those who love using placeholders. hahah. But what about teh ::before and ::after for labels nstead ? I think those are better alternatives.
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!