7/25/24, 9:30 PM Notes

Notes
in.i.mi.com/note/h5

Best practice for tables :

1. Differentiate between table fields and rows. Dark background colour and fields should
be uppercase.

2. Styling the rows based on even and odd patterns for better readability.

3. Merge database column into single like first and last name into username. The result is
better view and spacing.

4. Add labels for better readability. Status etc.

5. Remove the unwanted actions.

Best practice for forms :

- use the correct HTML input type: if you use the correct HTML input type, you get some
built-in input validation so we have a lot of built validations that happen just by using the
right type for each input field.

- use built-in validators HTML properties: required, minLength.

- pattern matching with Regex : pattern="/.*[0-9]].*/"

- define custom Tooltips for built-in validators: title="password must be 8 characters long"

- don't validate too early: Do not validate the input until it has actually been changed and
the user tabs away from the input

example: gives an error message before I've even finished typing what I'm trying to type
instead we should do is just wait until the user actually tabs away from the input to the
next one or unfocus away from the input field before we actually show the validation
message.

https://in.i.mi.com/note/h5#/ 1/6
7/25/24, 9:30 PM Notes

- static heights for validation messages: if you give static heights, then the rest of the
elements don't jump down to form by expanding the form. it gives a better user
experience.

- specific validation messages: for each every individual input.

- highlight invalid inputs with errors: red borders. it gives where the errors are and what
they are.

- remove error messages when valid.

- highlight the current input field while input is focused. highlight the input field while you
enter some text

- add a label: if you don't add a label for the input fields, then people might get confused
because there is no placeholder visible if you enter some text.

- consistent spacing: use consistent spacing for every form field.

- it looks better and more readable.

- elements are [different distances from the line.

- don't use different typefaces and multiple styles.

- don't use div as a button: use buttons because buttons are part of the form.

- Always underline your Links: if you are going for a text link instead of a button link, it can
actually be a great choice. In some cases, a link can be identified as something
actionable.

https://in.i.mi.com/note/h5#/ 2/6
7/25/24, 9:30 PM Notes

- new trend: text links look like regular text sometimes they're made Bold but in most
cases, they just blend in.

- simply always underline your links, if you can make them Blue as well because Google
strongly enforced the pattern of underlining blue links.

- CTA position :

In Windows, the CTA button is the first and secondary button.

in Mac, the secondary button is the first and the CTA button.

if you go with one option, use it everywhere across your product and don't mix it up.

there is a tiny bit of more brain processing required when the CTA is on the left that is
simply because our eyes first focus on the CTA and then move to the secondary button.

- Multi-step form: if you have more form fields, you can split them into different forms.

- in some cases, single form but separated with more space.

- Uppercase or title case :

- use all caps for labels on the buttons but it will decrease the readability a little because
the longer the text on the button, the worse it gets.

- you can use all caps for very short button labels and for longer button labels you can
Title case (First letter capital ) instead.

- All caps: CREATE ACCOUNT

- Title case: I Accept The Terms And Conditions.

- Add server-side validations.

you can do all the validations that you want on the front end but your true validation has
to happen on the server and that's because people could go and tamper with your form or
like Postman, they send a new request HTTP request to whatever browser endpoint is
and able to bypass all of your validations that were on the frontend.

https://in.i.mi.com/note/h5#/ 3/6
7/25/24, 9:30 PM Notes

Note: frontend validation is for user experience and your true validation to be what
happens on the server.

Most designers think live validation is good UX.

Yes, telling users about mistakes early seems like a good idea.

But it’s not. It actually degrades UX a lot.

Here’s why (plus a simple solution that’s worked forever):

Problem 1: It interrupts the user before they’ve had a chance to fill out the field

This is because, for fields that need to be a certain number of characters, the first
keystroke will trigger an error.

Problem 2: It distracts users while they’re answering the question

Showing an error as the user tabs to the next field can cause users to be distracted by
errors appearing in the previous field.

If the user moves to fix the previous field, an error appears in the field below.

Problem 3: It causes the page to jump

This is because as the input becomes invalid and valid, an error will appear and
disappear which can cause users to make mistakes.

Problem 4: It can cause users to think their answer is valid when it isn’t

For example, a user could sign in with a correctly formatted email address that doesn’t
exist on the server.

Everything looks good before submission only to show an error after submission.

Problem 5: It can’t be used with multi-input fields

This is because multi-input fields need to be validated as a whole.

https://in.i.mi.com/note/h5#/ 4/6
7/25/24, 9:30 PM Notes

You could validate multi-input fields on submit but this would be inconsistent and
confusing.

Here’s what you can do instead:

✅ Validate when the user submits the form.

- simple and straight: if something can be fulfilled by just creating an input field then go
ahead. if an input field is not enough, maybe you need a drop-down then go ahead but
start from the very basic. if an input field works fine

and then there's no need for a drop-down.

- labels and placeholders:

- use both labels and placeholders. if you skip labels then it will create confusion for users
while filling out the form because after filling in, the placeholder hides.

- labels and placeholders must be super sharp, simple and straightforward.

- labels should be aligned properly.

- Reduce cognitive load:

- users are might not interested in filling out such long boring forms.

- Reducing cognitive load means reducing the number of fields and also reducing the
amount of stress, the user is taking for just filling out the form.

- you need to separate the long form into categories.

- Auto-fill and assistance.

- always provide context with the action button.

https://in.i.mi.com/note/h5#/ 5/6
7/25/24, 9:30 PM Notes

- Avoid sign-in and sign-up: it requires a bit of thinking to identify the difference.

- specify what is optional and not what is mandatory: instead of putting * symbols for all
required fields, you can just specify the optional field.

- it's a good idea to combine multiple fields on the same line but don't combine multiple
unrelated fields on the same line.

https://in.i.mi.com/note/h5#/ 6/6