Udemy Figma Course: Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more by Andrei Neagoie & Daniel Schifano.
Episode 11: Forms + UI Elements
Forms are crucial to the success of the product you are designing for and can impact the business of the product if certain forms rely on optimization and hitting certain goals.
UI Elements are the elements within your user interface. e.g. cards, icons, navigation, badge, pickers etc. The most common UI Elements are the Form Elements
Forms are everywhere. We might think that form is just a standard set of input on a page, but when we are designing a user experience, they are featured in a lot of different places.
With Forms being such an integral part of building products, it's critical to get them right.
Before you build a form, think about the types of questions you want to ask your user. This takes some time to figure out but can be done through some quick prototyping, testing and iteration, this way you can find the result that works best for your product.
Examples of Forms:
Your Email & Password Input on a Login Page.
Your Text Input to send a message.
Your Search Inputs.
etc.
The Best Practices when Creating Forms.
Forms are essentially replaced by conversations we have with each other. So when you design a form, you should always keep in mind that it should feel like a friendly conversation between your user and the product.
Too Many Questions:
The first scenario we often find ourselves in is the number of questions we have on a form.
So below, we have a form; but it's kind of long. We need to keep it as short as possible and only ask the necessary questions. Remember that some optional inputs need to be there. We should mark them as such, but avoid using an asterisk if some inputs are optional.
Think about this; if some inputs are optional. Do you need those inputs at all? Asterisks muddy your design and create too much noise. Visual Noise sometimes can be confusing.
Conversational Flow:
Make your form a bit more conversational. For example; It looks suspicious asking a user for their Credit card information before their name.
Long Form:
As a designer, sometimes we find ourselves in a scenario where long-form is necessary. In this scenario, the long form needs to be sectioned/categorized based on related information so it doesn't bore out the user filling the form.
Layouts:
Sometimes using a Two Column form makes it difficult for user to understand the flow of a form.
Aligning a form on a single column makes a user understand they have to fill the form from the top to the bottom.
Buttons:
It is actually up for debate that most humans read from left to right. This is why it is advisable in this scenario to place the primary button(Submit/Create account) on the left before the secondary button on the right.
As well, so the user doesn't click on the cancel button while expecting it to have been the submit button because it came first.
In the case of the next step, the primary button(next) is placed on the right hand, while the secondary button (previous) to navigate to the previous page is placed to the left. This is why I said one should logically think of the right position for the primary and secondary buttons.
Note: The contrast/focus on the primary button needs to be well-highlighted for users. Plus make your buttons more descriptive.
Multiple Form Pages with Progress Status:
Sometimes when forms are too long, you might need to split them into different pages while indicating the progress of the form completion for a better user experience.
Types of Inputs
Text Field: These are used for short written responses like First name, Last Name. e.t.c.
Text Area: These are used to incorporate longer responses from the user.
Drop-Down Menu or Selex: These are used when there are multiple options a user needs to choose from. When you click, the input menu will appear just below, where the user will see the predefined options. It is best to use dropdown menus when the user needs to select from more than five options but not too many because of a little bit of an accessibility issue.
Checkboxes: Checkboxes are typically used when there are one or multiple options for the user to select from. Users can make multiple selections to a checkbox.
Radio Button: These are similar to checkboxes, but you can only select one option at a time.
Multi-Select Text Field: This input allows users to add multiple inputs. When you enter text into this input, it will be displayed as a chip.
DropDown Search: The way this interaction works is when a user begins typing, available options that match the user's search will filter. It helps save the user's time.
Best Practices for Inputs
The height of your input should always be the same as your primary button to maintain visual consistency.
All input in a form should be the same length. Note: This is a guideline, it may vary based on the type of question you may ask the user to answer. e.g. CVV (credit card info).
When working on a Product Design, set your nudge to your base unit or some variation of it.
Your Labels should be short, clear and easy to read. (One to two words is generally enough to describe what is being asked.)
Make sure only the first letter of your Label is capitalized for easy scanning and readability.
Placeholders at their best, show repetitive information and at their worst, it hides important information and reduces accessibility.
Icons can be used in reinforcing the Label or what is asked from a user for input.
Feedback is another reason why we may use icons, to help users understand if their action was successful or not. These icons are often used in addition to colour which is super important for accessibility because some colour-blind users cannot tell the difference between Green or Red and they will have to rely on icons.
Input States
There are different states that we need to consider when designing inputs. Different states tell the user what is currently happening and what should happen next. These states can be differentiated with text, colours, and borders and these visual cues are integral to a good input.
Types of Input States
Default State:
This shows a Label with an empty field that hasn't been interacted with.
Active Field State:
In this state, the user has clicked into the input space and it becomes active with highlighted border/outlines to help the user focus on the field with a flashing stroke which informs the user that an action needs to happen.
Filled State: Once the user has filled the input and clicked away from the field, it becomes a filled state. Note: It looks similar to your Default State but the only difference is that there is text in the field.
Disabled State:
Sometimes you run into a case where the input should be disabled due to a requirement restriction. These inputs are generally shown as filled, to indicate that you can't fill/interact with it until a certain condition is met. Just keep in mind that when designing forms and stuff like that, we should be designing for a Disabled State because such a scenario could occur.
Success State:
When an answer is correct, you have the option to show a success message. We can communicate that with green colour and an icon.
Error State:
When a user has entered something incorrectly or maybe the user has missed an input, they should be shown an error message. The message should have an appropriate colour red and can be assisted with an icon. As well, this message should be in line with the input, so the user can easily identify the input they have issues with.
Assistance
There will be times when a user comes to an input and needs a bit of assistance like a tip, or a hint.
Hint Text:
For example, a hint on the Date Format when a user wants to fill out their Date of Birth. This will help the user fill out the input much quicker if you do it right.
Auto Format:
Below is an auto-format credit card number. Essentially we have the power to automatically format the user's answer depending on the scenario. This is done to avoid any format errors and this helps users read and review their answers easily. This auto-formatting is done to things like Credit card numbers, Phone numbers, e.t.c.
Auto-Complete:
Sometimes, users need to enter something long or they may not necessarily know what they are trying to search for, but we should help them with Auto-Complete. This saves the user time and also reduces the possibility of errors while formatting and spelling.
Default Values:
It is always smart to pre-fill text fields with the most likely answer expected by the majority of users.
Best Practices for Buttons
Buttons are a very important part of any UI. They are not only used for forms but can be used to link users to other parts of the site or within the same page.
Buttons should describe the actions you want the user to take. The Instructor(Mr. Daniel Schifano) thinks the use of Submit and Cancel as a button, is okay in most technical applications, but they usually feel way too dry or generic. He advised considering the use of words like Sign up, Send Information, or Create an account, which is much more descriptive/action-based. These kinds of words also help emphasize the value of completing certain actions.
Differentiate Between Buttons you may need to use two buttons at certain points and this happens quite a lot. Usually in this scenario, you should come up with Primary and Secondary Buttons that are easily distinguishable. The rules are; buttons that function differently should appear differently. So, remember to make the primary button that should take the user to the expected path much more prominent.
Rest of the things I learned in this Episode
Learned about a lot of best practices in UI Elements.
Learned about Atomic Elements and re-learned creating master components properly.
Learned how to create, override, edit and use instances.
Re-Learned how to create responsive Components.
Practised how to create a registration form on Figma.
The journey gets better...
#Figma #ProductDesign #UIUXDesign #UIUX #UIUXCourse #Branding #BrandStrategy #Forms #UIElements #Udemy #UdemyCourses #ZTM #ZeroToMastery #DocumentingMyTechJourney #BuildingMySkillset #TechSkill #SkillSets #ProductDesigner #EngrShege #ES