UX patterns to be aware of as a web developer

Here are some common UX patterns I’ve encountered whilst developing web applications. I will continually update this list as I encounter more:

• When a form submission fails with a validation error, make sure you scroll the user’s screen so that the error is clearly visible. You can use document.querySelector('<some-error-element>').scrollIntoView() to scroll to a particular DOM element.
• When displaying user-provided text, ensure your UI components handle long text gracefully. One approach is to truncate the text if it exceeds a particular threshold and then either display a show more... button or show the full text as a tooltip on hover.
• When displaying user-provided images, ensure you handle various image sizes – from very small to very large.
• When a form submission is pending, disable the form fields and the submit button.
• As much as possible, use the URL as the source of state in your UI so that if the user reloads the URL or visits a bookmarked page, they can open your application in a particular state (e.g., with particular search filters applied or with a particular dialog opened). If using React, consider using nuqs instead of useState to make this easier.