fbpx
WE CREATE BRANDS PEOPLE L♥VE
Share

8 forms for you UI


Tegra - December 16, 2019 - 0 comments

8 forms for you UI

✍️ 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! ⁣⁣

Text  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.

Text

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.

Email  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.

Email

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.

Password  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.

Password

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.

Check  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.

Check

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  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.

Radio

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 area  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.

Text area

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.

File  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.

File

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  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.

Select

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.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *