You Suck at Form Design ((Probably))

Visit linode.com/designcourse for a $20 credit on your new linode account.
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to analyze why exactly you probably suck at designing forms. I see it all the time. So, we're going to go over 10 form design fundamentals, and then take a look at some REAL examples that were submitted to me just last week.
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Are you a FORMS master? Oh also, hey everyone. I started a NEW Instagram account. ADD ME! @designcoursecom

[@iamtafara]

Thank you so much for these tips,, and for the record i suck at form design,, but not anymore

[@dominigon]

Was hoping for more neat stuff, can't believe that peoples do such silly mistakes at design

[@dominigon]

Also why is too much ads in this vid?

[@dovdov2032]

@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!

[@witchowski]

whoa... thank you!!

[@dovdov2032]

@navi This works for many programs that utilize the tab layout. VScode, and many text editors as well!

[@sensiblewheels]

Thanks for this!!!

[@samyakjain4468]

Noo just press ctrl+w

[@alcrian8627]

Or just use ctrl+w in your current tab to close it... I use both methods

[@kylenicholas6362]

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

[@vadymtymofiienko521]

Your UI and UX lessons are the most useful and full of life and content on KZbin! For real, watching you and saving your videos, thank you.

[@senpaiyaa]

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!

[@Christian-ob9cf]

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!

[@jrkdigital]

I absolutely needed this! Thanks so much Gary.

[@GDScriptDude]

Very timely for me. I was pausing the video and correcting my forms as I watched. Already subscribed etc.

[@GajuKharche]

Thank you for such valuable information, I will definitely apply your suggestions in my next design. Love your every video ❤️.

[@th34lch3m1st]

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.

[@DesignCourse]

Yeah, I really need to position them and not rely on automatic placement. Thanks for the comment!

[@RexGalilae]

Dayum! Used the UX card on him to make a point. Quite the finesse :D

[@Pouya..]

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.

[@Adwokatini]

I loved it! Not often I am sad that a video ends but after watching this one I want more! :D

[@MinimaLune]

This is the most useful UI form design video I have ever in seen in like 3 years. THANK YOU!! you are great.

[@striking_village]

I had watched your css grid tutorial that was awesome it helps me lot to fix my footer section at bottom Thank You buddy 🙇❤.

[@shahbazali789]

Thanks sir please make more videos like this video that show us what we need to do and what not in UI Designs.

[@exequielvibar2371]

Thank you so much for this video, now I have great ideas on how to design forms, your tips are awesome, thank you!!!

[@brucencnp]

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.

[@Artist77osi]

Amazing tut on form design and accessibility, looking more, thanks lot

[@MoritzFischer]

That was a simple but really valuable video. Please more of those!

[@abdusalam3ar]

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.

[@pratikthorat3480]

Your Channel helps me soooooooooo much. I learn so much from you.

[@stargazing0010]

This is so useful, Thanks and bring us more!

[@gradyhodge8517]

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.

[@shakalozachikagopromotions8771]

Thank you so much for this great advice. Amazing content😉👌🏼

[@aug110]

I love how he beefs everyone without being disrespectful Great video btw!

[@NbaLive4ever]

Great stuff Gary!! Thanks for the info!!

[@rocketqueen232]

Loved this one, was really useful thanks.

[@shivakarthik6056]

Thanks Gary, nice video learned a lot. Could you please make a video on step form with validation as well.

[@charbelabouyounes6683]

This is priceless these are really important things that are most of the time overlooked by developer. Thank you so much

[@CrackerJayherber]

Great points well taken. Thank you for your video!

[@unleashthedog]

Great video, I was already typing a comment about the multi step process and the example following made me change it! :D

[@jeroenvanrensen9505]

Hi, super nice video! Please make more video’s like this!

[@requenz_]

Learned a lot from this video. Thank you!

[@Francisco-dh4cf]

Great tips, thank you!!

[@bobby_tablez]

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!

[@manishchourasiya3988]

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

[@yomaru_1999]

Well done, simple concepts and many examples.

[@manjunathkarbhasgi1721]

Really useful information.. thank you sir...

[@genechristiansomoza987]

Thanks for the advice!

[@absolutholz]

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.

[@KarimMaassen]

10:15 ready to receive massive amounts of fanmail, Gary? :P

[@mohammedameer7783]

And I thought my forms looked fine. Great content!

[@goroh83]

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 .

[@benjaminfortune2707]

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?

[@Z3ROR]

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.

[@mehrsahs5119]

some simple but helpful tips. thanks!!!

[@nikhilmwarrier7948]

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.

[@fjeanjoseph]

I shall heed your advice indeed sire! & I like the ending music

[@jimfilbert1928]

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.

[@wazzadev7209]

This is very good and very needed

[@joecm]

Really useful, thank you

[@JeovannyTovar]

Amazing video! This is a gem, and yes I subbed.

[@nathanrey]

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.

[@erikjansson1790]

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.

[@SYPCWAK]

Thanks for the helpful video

[@milleniummoses]

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.

[@aarjumainali8863]

thank you. it was very helpful

[@ademineshat]

Very useful, thank you!

[@techwake360]

Thanks a lot that was most most most help full

[@marv8107]

First video ive seen from you and damn ... you are absolutly right! Have a sub :)

[@muldoon67]

Excellent video!

[@ricardoacostatorres1350]

Watched a lot of your vids, one of the best right here. Cheers from Belgium.

[@MrTawil]

so good, that so helpful thanks, man please do more :D

[@d3struction61]

I like how you magically change shirts at 0:49

[@JD-sn1lr]

Totally diggin the extro music.

[@DocLithium]

Very few KZbinrs have videos with this much simplicity.

[@bartekbrodzik7134]

More videos like this! Perfect man :)

[@justmemaya]

new subscriber here! Awesome stuff! Thank you!

[@KK-he9ne]

This was awesome!

[@pranoymehra2150]

This helped a lot!

[@sephirothcrescent1502]

that high contract orange background color makes my eyes burned. thanks for helping us :)

[@griffithjoe1]

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!

[@betasetupper6103]

Kool Tips. Thanks

[@ssougnez]

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?

[@juraev0056]

Yay... I am not going to suck anymore 😅😃

[@asandax6]

You still are but a little less than before

[@thiagof9481]

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

[@madfury3179]

What do you think about placing the "required" and "optional" tags as placeholders of the text fields?

[@mouloudaourtilane3262]

everything you said was so useful.

[@jamdonut]

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

[@victorfds]

Great video as common.

[@poojapremnath5830]

Just a question.. The Google material design even which is used in Gmail login form.. They use labels within input. Is that bad design ?

[@aminansar5294]

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

[@jacquesduplessis6175]

Cool outro!

[@JohnnyPhoenix]

Are we not going to talk how absurdly good the lighting in his room?

[@georgephiri8974]

could I instead use the placeholder attribute to direct the user as to the format he/she will need to enter data?

[@scardera]

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.

[@SharifMatar]

What site is this demo on?

[@samgutierrez335]

😅I was skeptical but it turns out I suck at forms. Thanks. Any additional resources you can recommend specifically for form design?

[@jclee1182]

This guy is just the best.

[@pm599hd]

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

[@zamfofex]

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.

[@exvimmer]

Thanks. I have one question. Can photoshop be a replacement to xd or Figma? Is photoshop better?

[@mark_xy]

is it okay to autofocus to the textbox for the line input? i kind of like it though 😥

[@TsunaSawada26]

If placeholder is not suitable for the use cases you mentioned, when to use the placeholder? What is its purpose?

[@menma8741]

do some research and you will find out using label + placeholders are better.

[@reydion1648]

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?

[@roodiger]

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!

[@wingsofwar]

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.

[@cristianMoraJ]

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?

[@nileshpanchal737]

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

[@JassarDev]

That "you suck" conclusion is gold, lol! if the form has 1-2 fields only, would you still use a label for it? Subscribe form for example

[@fannyahlm1402]

Yes. One important factor about labels Gary isn't mentioning, is that labels are REALLY important for visually impaired users. People who rely on screen readers needs labels to be able to use your form. Placeholders doesn't count as an element, and is there for not accessible for screen readers, meaning that the user will have no indication what so ever on what your input is for. Use labels, ALWAYS.

[@dominigon]

of course

[@loge9981]

It all depends on the environment and context my friend ;) youre welcome

[@davidmills6203]

i'm a web developer that totally sucks at design. this helps em a lot

[@MrGonzJay]

Good information but the number of ads are crazy I had to step away 🤣

[@sonicdesign300]

I've been very eager to provide the best UX possible when it comes to forms, the ones you showed in this video are "consumer grade" forms, I'd love to know your thoughts/recommendations when dealing with admin tools, like a back office that has to have heavy forms with tons of data. You could say there's real interest by the consumer in this topic due the fact they will need it, but i've seen horrible platforms that provides useless workflows or make things very complex.