Thread by @vponamariov

50 UI tips. Each in one sentence.

👇

Typography

🔸Put headlines closer to their respective area
🔸Avoid justifying text in narrow columns
🔸Break description text into a list of features
🔸Make links look like links
🔸Use proper line-height
🔸Center text container

Forms

🔸Don't hide form tips under question icons
🔸Place input labels correctly (near inputs)
🔸Use progress elements in complex forms
🔸Show password rules right away
🔸Require fewer fields
🔸Use reasonable width of inputs

🔸Use labels instead of relying on placeholders
🔸Don't use dropdowns if the number of options is small
🔸Replace default file inputs with custom ones
🔸Autofocus the first input

Validation

🔸Autoscroll to the first error in large forms
🔸Help users fill the form without errors
🔸Consider positive as well as negative feedback
🔸Show validation errors in the right place

Focus and Contrast

🔸Use only one primary button
🔸Put an overlay on images for better text contrast
🔸Check text contrast

Grouping

🔸Group form elements correctly
🔸Group logically related elements in the layout
🔸Keep dangerous actions apart

Visuals

🔸Consider removing borders
🔸Use proper colors for table borders/striping
🔸Watch your shadows
🔸Give users a hint that there is more content in dropdowns

Usability

🔸Put frequently used options on top
🔸Add the copy to the clipboard button
🔸Don't use complex forms in modals
🔸Increase the clickable area

🔸Don't rely on dots in gallery sliders
🔸Consider removing confirmation modals
🔸Label your icons
🔸Provide further instructions
🔸Indicate where the user is

Loading states

🔸Leverage empty states
🔸Use skeletons
🔸Avoid layout shifting when the loading state started/ended
🔸Don't show loader right away, wait a bit (~0.3-0.5 sec)
🔸Entertain users if the loading time is long (showing different text/images)

Misc

🔸Make your icons look consistent
🔸Consider using a horizontal menu layout if the number of links is small

🔸Don't make the user hit submit button after inputting the verification code

🔸Take into account that the data can be large

🔸Don't forget to put the post date

🔸Remember - there is an exception for every rule

You can find most of the tips explained with pictures here

https://twitter.com/vponamariov/status/1368851471660421120