Top UX mistakes to avoid during frontend development

This story highlights some important UX details that developers may overlook during development.

Photo by Kenny Eliason on Unsplash

1. Double Submission

Double Submission

Scenario:

User clicking the submit button more than once.

Consequence:

The user might accidentally submit the same information twice, resulting in duplicate records.

Solutions:

• Disabled the button on the first submission.
• Use loading overlay on the first submission.

2. Without Loading Handling

Without Loading Handling

Scenarios:

• When the user submits something.
• When the user navigates from one page to another and waits for data to be retrieved from the backend.

Consequences:

• Double Submissions.
• Users might hit the refresh button without being aware that the website is still in the process of loading.

3. Without Error Handling

Without Error Handling

Scenarios:

• When an unforeseen problem occurs.
• Wrong inputs.
• Access Denied.

Consequences:

• Create confusion for the user.
• Users are unable provide further information if they are reporting the issue to support team.
• Users may not be aware of how to seek help from the support team.

Solutions:

• Display a clear and user-friendly error message in the case of an expected problem.
• Display a user-friendly error message that guides users to seek help from the support team in case of an unexpected problem.

4. Element Overflow

Element Overflow

Scenario:

When the screen size is smaller or bigger than average screen size.

Consequences:

• Unappealing presentation.
• Some important information or wordings could be omitted.

Solution:

• Use CSS overflow property.

I hope the information I shared has been helpful and that you enjoyed reading it.

Lastly, why be a stranger? Connect me via LinkedIn.