Hey anyone who wants to read this.
What do you guys think the of the format of these input groups?
Thanks, and brutal honesty is in play.
Top one;
Field too spaced apart, also they need to be in a bit from the border to not overlap, maybe leave 10px at each side and between. Header needs the text centred.
Bottom one,
Looks better, text in header needs centralised.
If you are asking for a certification number, you should maybe consider ability to upload a scanned copy of the certificate.
Thanks for the feedback. Sorry, i should have said my titles were looking garbage as these snaps are of drafts.
About the fields overlapping the borders, that configuration was intentional and experimental UI. Just curious if it’s too confusing or tacky to use, or if it’s refreshing and interesting. It looks neat to me, but I made it so I am totally biased and it may not.
The top one looks confusing to me, almost as if something glitched on the page. Question: Are you in Falls Church? I live in Springfield, VA off Braddock Road, just outside the beltway.
One thing that stays pretty constant in design is field inputs. It’s a type of interaction that you don’t want to deviate from the norm too much. Users tend to have pretty strong assumptions on how forms look and feel.
Yesterday I went into the big outside to do some cold sales. I watched a millennial onboard onto my application over her shoulder. I was quite proud of my design – she blasted through my multi-step onboarding without batting an eye.
After she signed up, I asked her “did you notice anything off when you signed up?”. She looked at me a little weirdly and was like “No…”
Score!
I don’t want my users to think about onboarding to my app. I want their phone number, address, email, and finally credit card information. I spent many, many hours designing my forms so that my users would spend the least amount of time on them.
One thing I tend to do myself when designing is making everything - buttons, fields, fonts etc - too small. I quadruple the size of my input fields and containing text, then work DOWN in size until it looks good.
The top one looks confusing because there is no padding around the input fields. The indigo border is underneath the input borders, and the lines created by the input borders breaking the container border creates an illusion of any empty field. Sometimes people use examples of what should go into the input (oldschool placeholders) above the input field, so the two filled in names further add to that illusion.
If you do a google search for form design there are TONS of resources about it online.
2 Likes
Hey man thanks a lot, I appreciate your feedback!