✍️ 8 forms for you UI
Courtesy of @zanderwhitehurst
🕺💃 Every product with customers has a form in their product. Understanding and designing forms correctly will improve your product experience.
🤷♂️ Forms can often appear confusing and impersonal, hence why drop off occurs during fork fill on your product. Use labels, placeholders and spacing to make your form fields less confusing.
🧠 Make your forms smart. During sign up, make forms active to save clicks. Your users should be able to navigate forms using their keyboard!
✂️ Design wise, give forms plenty of space and I’ll cover how to design them next!
Typically you'll use text form inputs to capture personal details. Be mindful of their width in relation to the value and experiment with fixing icons inside to prompt users.
Labels should be used to prompt users for personal or work email. Onboarding wise, experiment with passing the email address into a text form to increase referrals.
Passwords are the security key to your product. Make it easy for customers to complete this with a checklist of labels. They'll create a secure password and you'll increase customer conversion.
Checkboxes make it easy for users to select a value from a set of options. Avoid making the actual checkbox container too small, appear disabled or too similar to an active checkbox.
Radio boxes are used for lists of two or more options that are mutually exclusive. Users can only select one option and experiment with keyboard shortcuts to speed up selection.
Text areas are expanded versions of single line text forms. They are designed for longer answers and can be expanded. lnclude a word count to avoid awkward lengthy word count errors.
From personalized avatars to documents, file uploads are important and it helps to design them with a label, upload button, and supporting the text. Focus on the various file states.
Select forms are more commonly known as dropdowns. Dropdowns can be single select or multi-select. I prefer designing these inline with product schemes but they can exist natively.
Bonus — 4 tools that may be useful in your designer way:
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.