My UI/UX Design Learning Journey — DAY 11

7 min readNov 17, 2022

UI elements are the elements within your user interface. These are things like cards, icons, navigation, and badge on icons.

Forms are crucial to the success of the product you’re designing for and can impact the business of the product, certain conditions rely on optimization and hitting certain goals.
With forms being such an integral part of building products, it’s critical to get them right.

- Consider the type of questions you want to ask your user

- Take into account if the registration wants to capture other content like user interests or profile images.

- Take time to figure out what can be done through some quick prototyping, testing, and iteration. Then you can find a result that works best for your product.

In our design, we need to keep generating ideas, learn from those ideas, refine them, and then keep on going.

Best Practices around forms.

Forms essentially replace the conversations we have with each other so when designing a form, we should keep in mind that they are like a friendly conversation between your user and the product.

1. The number of questions in a form
When creating forms we need to keep them as short as possible and only ask questions that are absolutely necessary.

2. The order of questions
Making your forms conversational means they should logically flow like a conversation. You can start the conversation with their names before moving to sensitive questions.

3. Categorize if you need to
Sometimes we may be tasked with building long flows or long forms and not to bore your user you can categorize relatable information.

4. Buttons
This depends on the type of form, it can be placed right/left and its use depends on the scenario you are working with

5. Layout
Forms should always be arranged from top to bottom in a single column, so it’s easy for a user to read.

Basic and Advanced Inputs

Inputs are the most complex components due to their versatility, different states, and frequent use, They allow users to input data in a way that is quick, easy, and correct.

Varieties of input types

These are based on the type of questions or requirements

Basic text field
It is used for short written responses, users can probably add one line of text, so if the text gets too long they may have to scroll left to see what they’re entering.

2. Text area
This is used to incorporate input for longer responses, These are taller than regular text field and allows users to enter multiple lines of text and they automatically expand downwards when it reaches the bottom of the container.

3. Drop-down menu
These are used when there are multiple options a user needs to choose from, it’s best to use the drop-down menu when a user needs to select from more than five options.

4. Check box
They are used when there are one or multiple options for the user to select from, users can make multiple selections here.

5. Radio buttons
They are similar to check boxes but the interaction is entirely different, They are used for multiple options but users can only select one option.

Advanced inputs

Multi Select text
They function very similarly to a text area but you type inside of them and as you type you can select a new option, these field allows our user to add multiple inputs.

Drop-down search
The contextual search is added when we have a bunch of options with the drop-down menu, The way this interaction works is when a user begins typing, available options that will match the user search will filter.

Date Picker
They are used when we want our users to select a date or a range. This view shows all available dates, months, etc.

Best Practices around inputs

The height of the input should always be consistent with other input heights and buttons.
Input field length should be the same for all inputs, Sometimes having long input for short answers could confuse the user.
Your label should be short, clear, and easy to read, it’s best to keep your labels short, sweet and to the point.
Make sure only the first letter is capitalized for easy scanning and readability.
Placeholders at their best show repetitive information and at their worst hide important information, it is great for emails and passwords.
Icons in Forms can be really helpful sometimes they really serve no purpose but to reinforce the label or what is asked of the user.
Actionable icons are icons that add functionality To your input and they help give users additional ways to interact with your input.
Feedback icons help users to understand if an action was successful or not. They are often used in addition to color which is important for accessibility.
States tell the user what is currently happening and what they should do next. These states can be differentiated with things like color and text, these visual cues are integral to a good input.

Types of states

Default state — empty field

Active state — when the user clicks on the empty field

Filled state — when the input is filled

Disabled inputs are usually shown sometimes filled in OR greyed out.

A success state is when the user's answer is correct, and you have the option to show a success message.

The error state is when a user’s answer is incorrect or even missing, the input should show an error message.

Assistance

There are times when a user comes to an input and needs a bit of help, a tip, or a hint which will help the user fill out input much quicker.

Ways to provide hints to users

Hint text, use hints above or below your input fields to give users helpful information about the question you asked

Auto-format
We have the power to format the user input to avoid errors and help users read and review their answers.

Autocomplete
This applies where users have to enter a long input or they may not necessarily what they are searching for here auto-complete helps and save time.

Default Values
It is always smart to pre-fill your fields with the most likely answer expected of the users.

Best Practices around buttons

1. Use of descriptive or action-based words
The button should describe the action you want your user to take. For example instead of “submit” use “create account”.

2. Consider doing your best to write in the first person
Try making it personable, it has been proven that buttons that use words like I, me, or my have higher conversion rates for example, instead of sign up using create my account

3. Differentiate between primary and secondary buttons
They should be easily distinguishable, and buttons that function differently should appear differently

4. Consider having a good disabled button.
A disabled button is good for cases where a user can’t progress unless they fill in all the required fields.

Properties vs variants

Component properties and variants work together, we use component properties when our component has a toggle configuration like a version with or without an icon.
The variant is used when we have a major visual change, like a variant in size, color, or other types of styling.

Thanks for reading, feel free to share your thoughts, clap, like, follow, and share with others.

Available on socials

LinkedIn
https://www.linkedin.com/in/bashirat-amoo-94175921a/

Twitter
https://twitter.com/AmooBashirat

Catch up from the start here:

https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-1-df2b21e12

https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-2-6ec9945e8ae9

https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-3-56d5f20f8b4

https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-4-2f43df296d9c

https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-5-fdd39ce5ab39