Hey guys! 👋 In today’s post we’ll break down forms, their use cases, and a few tips and tricks on how to make them user-friendly and more intuitive💡a visual guide on how to create UX-friendly forms in your Ul designs.
I’m going over all the details in the carousel itself, so without further ado, let’s start swiping and see what we’ve got 👈
Things we'll cover:
- The basics
- Labels
- Required fields
- CTA
- Error messages
- Input fields
- Placeholder text
INTRO
First off, let’s create our form wireframe and break down the components.
01. LABELS
Keep your labels visible at all times. Offer an easy way to validate user’s input. When forms are complex it’s easy to get confused as to what fields you're currently filling out.
02. OPTIONAL VS. REQUIRED FIELDS
Keep your forms clutter-free. No need to mention which fields are required or optional. Put an asterix beside required headers. This creates enough visual cue to understand that this field is different.
03. ACTIONABLE CTA
Make the primary CTA prominent and offer a secondary button to cancel the form. Also make it look like something you can actually click.
04. ERROR MESSAGES
Use error messages with incorrect data input. Make them descriptive enough to help users understand what step of the process they are wrong about.
05. INPUT FIELDS
Take note of what input fields you choose. If you want to allow users to choose more than one option - use checkboxes, if you want them to choose only one - use a radio button or a select field. Make it easy to understand.
06. PLACEHOLDER TEXT
Use descriptive placeholder text to help users get a sense of what the ideal input should look like.
07. INPUT TYPES
Mind the input types too. Some input fields are made specifically for email fields, phone numbers, credit card numbers, file uploads etc.
Did you find this post helpful? Let me know if you wanna see more design basics tips!
Comment what would you like to learn next? That’s it. Thank you all for your support 🙏🏼Have a beautiful day 😊