You Suck at Form Design ((Probably))

what's up everybody Gary Simon here so today we're gonna check out form design and I can I can guarantee you if you haven't actually researched what constitutes good form design then you suck at form design alright I know this because I personally reviewed thousands upon thousands perhaps of your UI designs that I've seen that you guys submitted throughout the years and it's just one of those things that we're not born with having like understanding what great form design is so I'm going to be giving you 10 commandments of good form design of course there's other things you need to worry about as well and then afterwards I'm going to show you some real examples that were submitted just last week and we're gonna point out where are their contact forms or their forms in general go wrong alright so as always if you haven't subscribe and let's get started before we begin this video sponsored by little note now as a front-end developer or a designer you know that you need a personal portfolio and if you use a website builder like wigs or Squarespace they lock total customization and they lock you into using their platform but to be a pro you need to use the tools that the pros actually use so level up start building your own projects and your own portfolio on an enterprise level content management system like WordPress there's Drupal now real web development sometimes requires knowledge of spinning up servers managing domain names and setting up an occasional staging environment and there's no better or simpler way to learn the ins and outs of hosting your website then with Lenovo out hosting the node cloud hosting makes it as easy as possible for you to deploy a WordPress or Drupal website in seconds with a Freeland ode one-click app marketplace so click on the very top link here in the YouTube description to get your free node account along with $20 of free hosting and all the tools that you need to build enterprise class websites alright so here is our first little demonstration and real really my first point here contains two things that are wrong with this particular form setup and the first thing that's wrong is alignment as we can see we have our little form heading right here place your order now this defines a starting point a column right here then we have first name right here in the other label that starts another point and then we have another call them that starts here and it just doesn't flow well additionally you should always avoid trying to have your two column approach when it comes to the label and the input I in this way it creates kind of sort of like a zig zag Z where you have to scan here and then here you scan here and then here it's a kizhi going back you don't want that instead you want this alright so this fixes the alignment issue because everything starts and ends on the same column essentially and it also fixes the issue with the Z I sticking with this simplistic approach where everything has its own row is much easier to follow so you get to see it this looks better too this is just kind of cluttered alright another thing that I see sometimes and I was guilty of this myself is when it comes to the input the text field here taking the background and making that the same exact color as the background that is sitting on and trying to only signify underline in that while it's trendy and looks cool for some people they mistaken this for an actual border or a line separator so they don't actually know they're like okay first name where am I supposed to click some people you know they're not very internet savvy and so you can lose possible leads or contacts or you know whatever people whatever form they're trying to fill out so instead you should always make sure at the minimum that you are defining the actual rectangular area of the form input so don't do that do this instead or something like it next up this one is in a demonstration of this first name input field being currently active but there's no indication that it's active right it's styled exactly the same as the one that's inactive and that's not what you want what you would should have is some way I either through just taking the border bottom property in CSS and making it a different color like this or what's a more conventional approach is to simply change the border all the way around and sometimes you can also change the background color although I wouldn't make it rude jarring color maybe just a very subtle change in the background color from where it's at by default so don't do this do this instead all right next up I see this a million times you know when I do my live ui/ux I review show the negative space has it's called I see this all the time multiple times per show and that is completely opting out of having a regular label that sits on top of or outside of the the input field and instead using the placeholder attribute you don't want to do this let me show you why let's say for instance I clicking this and I start typing up some stuff and then I maybe I leave where I have a really bad memory I forget what this field is now what am I supposed to do well you could say well I can just hit the Delete key and we can go back I'm in and it'll reveal itself which is true but some people don't know that you know people who aren't developers don't know that so that's the big UX issue with relying on the placeholder value don't do this so many people do it it's not even funny so instead stick to this first name last name here it's simple we can understand it it's not going to go away when you focus on the input field or startup start typing all right so it's just much better a much much better approach and this isn't my subjective opinion they've done Studies on this all right next up here's a similar one where we have a placeholder value that's kind of instructing the user on the format of this phone number field right so this isn't ideal either for the same reasons when you focus on this input field and you start typing that goes away it hides you don't see it that's the default behavior of the placeholder value right so instead just push it outside in its own HTML element like in a paragraph element or a span tag that way it's always going to be there for them to see no matter what all right so do this but don't do that all right next up is error handling all we should have error handling in your forms but this particular met way of dealing with airfields which used to be a big thing back like in the late 90s to thousands I don't see it so much anymore because people have wised up and I'm sure some people still do it and that is I when somebody submits a form they'll put all of it at the top or at the bottom of the form input field and completely ignore and giving I ignore or they don't give any visual indicators about which field it is outside of just specifying it up here that's bad for use of her user experience instead do this you know if it's if their first name they didn't specify it outline it in red perhaps that's the usual standard convention and also put underneath the field whatever the error was all right here's another example um right here we have a lot of text and sometimes that may be necessary and if it's of the type of text that 100% you know maybe it's just supplemental information and you have a lot of form fields you want to save space which should always be the goal do this instead put it in a tooltip people could click it or hover it'll show up right on the side and that way if you save space alright next up what is wrong here it doesn't look too bad right but really we can see the big difference if I show the the improvement and that is whitespace make sure you use plenty of whitespace in your form elements first and foremost but also all throughout as it pertains to separating the label with the actual input container just feel much better this looks compared to this it's just jumbled and I've seen worse people have even put you know smaller amounts of whitespace it just looks horrendous it's the one of the greatest ways to make your design look like garbage is to have a lack of whitespace all right so here what do we have here so we have a bunch of fields right this is in my opinion too many for this type of use case here instead what you should do is try to compartmentalize or split your form into a multi-step form process like this so we have kind of like a breadcrumb sort of navigation up here or pagination pagination is it pagination or pagination I don't know anyhow and we can see that we've taken the first last in first name last name and email address and then we have a next button and then we go to the username password and confirm password field I this off automatically highlights the profile given way to go back of course and then complete the signup there you go so try to avoid a lot of form elements as much as possible and make it simple and the last form elements a person has to fill out the better that's the higher conversion rate based on people completing your your form whether it being ordering or membership whatever now here we have the same exact starting point as the last point that I made alright but what if for some reason for whatever reason you don't want to have a multi-step form well in this case still try to separate them out with white space where it makes sense so group up items that make sense to group up like the first name and last name and email address and then for the username password and confirm password you can simply just separate with white space that's a much better approach so that it's this doesn't look this looks much less daunting than this one over here alright so those are the primary points of course there's Barton there's a lot of other ones but those are the the biggest ones that I wanted to emphasize now I want to take a look at some of the entries I received from last week's UI UX design the negative space show and we're gonna take a look at the forms alright so I only have a few up here but these were all submitted with me within last week and I'm we're gonna see if we can figure out what perhaps is going on wrong here so the first thing if I click in here we can see it is if I start typing it goes away so this person is only relying on the placeholder attribute value to inform the users of it and he's not using labels gotta use labels don't use the placeholder don't ever do that again now we can also see he is indicating the currently focused input it's slightly darker that's fine he's also putting a border but still even though there is a left border here it's not as bad as the example in my slides where there's only a underline I would still opt to either have it encased all the way around kind of like up here or changing the background color maybe to a very slight gray or changing the background here to gray making this white I would just do that instead next up so this one doesn't have a form at all this is somebody's personal portfolio listen if you want somebody to hire you you want to give them every way possible to contact you just putting your email address and your phone number it's not enough some people may not have their email clients set up on their phone and maybe they just don't want to use their email client provide them with a form as much as possible all right next up what is wrong with this one well we have several things wrong with it first off we can see the text fields are you can tell there's just a lot complete white space like that looks bad alright so is focusing it at least changing it based on focus that's okay but you really want to beef these up make them big or give them more padding the CSS padding property property for this input field there is also a lack of white space right here contact form contact form what is happening why are you repeating these you don't want to do that probably using some sort of plugin and it put its own don't do that separate everything out now one thing you don't want to do in terms of error reporting this wasn't included in my my list of things that you should avoid during the slide portion if you're just focusing here and then you click outside you shouldn't have it say this is a required field when you would click out that should only occur when you actually type something all right so avoid that the send button call to action bad call to action you you want a strong beefier call-to-action that stands out much more all right here's one down here and again we're just relying on placeholder values it goes away not good it's also a little bit quite small could beat that up with a little bit more padding inside of this element here's one again these were all just from last week's submissions we're only relying on placeholder values everybody just they don't want to use labels for some reason and I understand it makes it more simple but in the end it's it's bad UX so definitely want to fix that up also I would say with the background here being very very light blue and this being white not quite enough contrast discerning the text field from the background itself here's another one this one this is an unnecessary use case of I'm going to make sure I'm not on top of this too much of the placeholder value first of all the placeholder that placeholder text doesn't really work well with this background color though it's like a it's like a light it's like an off-white it just doesn't work well but outside of that you shouldn't even use it anyways because you have name up here why would you put your name in here it's unnecessary we know name is associated with this text field get rid of the placeholder value completely because this is self-explanatory everybody knows name well yeah that's where my name goes you don't have to put it twice there same thing with email address your email address completely unnecessary so get rid of the placeholder values completely all right next up this is a pretty nice design I like the colors I we come down here we have a real small form join our emailing list we see that all the time this right here do you really want this to stand out more there is a very light border let me increase this there's a very light border around email the email input but you can barely see it what I would rather do is take this element give it a background color that's a little bit later wait that's the border one second background color right here at least to Iran there now you can actually see it much better than what it was before next up all right so we have once again placeholder values being used here now at least they did use and signify the fact that this is the currently focused eye input element but again they fail with the placeholder values and not using labels oh and also send message that should extend all the way out left and right and then finally once again here this is a floating label all right so you see what it did there you click in here and it is better than just using the placeholder value but in this case look how crammed up it is especially if there's a error field up here again they were doing that thing where I let me see if it happens down here yeah if you just click off there probably should be no there shouldn't be an error that shows up nonetheless the way this is this way this is showing up it's still not in a good placement so I would make that a little bit larger just because it shrinks down so much also there's no padding on the left portion of this I would push that padding at least to where this email part starts and also the call to action is almost looks like another input field you want that to stand out on its own like this primary blue color right here alright everybody so hopefully for those of you who suck at form design which is probably 95% of you you're gonna be better now you're not gonna suck anymore if you take and you heed my advice and put it to good use alright so make sure you guys subscribe if you haven't yet and I'll see you soon goodbye [Music]

Channel: DesignCourse

Views: 93,117

Rating: 4.9346843 out of 5

Keywords: form design, html form, html forms, css form, css forms, form design ui ux, forms ux, ux forms, ui ux forms, form tips

Id: z9H7p1_iI14

Length: 17min 58sec (1078 seconds)

Published: Tue May 05 2020