Enhancing Mobile User Experience through DOM-Based Error Messages for Sign-Up Failures

[barchakuz]

Solution of issue #842

Summary

This pull request aims to address the issue where an alert tab is displayed for sign-up failure messages instead of utilizing the Document Object Model (DOM) to dynamically create and display error messages below the sign-up form. By implementing this change, the user experience will be enhanced as error messages will seamlessly integrate into the webpage, improving usability and reducing user effort.

Motivation

The motivation behind this pull request is to improve the user experience on the sign-up page by displaying error messages using the DOM. This approach provides a more user-friendly experience, aligning with best practices and enhancing the overall usability of the website.

Testing

Testing has been conducted by simulating sign-up failure scenarios and verifying that the error messages are displayed correctly below the sign-up form. Additionally, compatibility testing has been performed on various desktop and smartphone configurations to ensure consistent behavior across different devices and browsers.

##Screenshots Before After

https://github.com/camicroscope/caMicroscope/assets/66128370/309e78b2-359f-4502-8450-99160678af57

Benefits

• Improved Accessibility: Mobile users, especially those with smaller screens, often have to scroll up to reach alert boxes displayed at the top of the page. By dynamically creating error messages below the sign-up form, users can easily access and read the error messages without having to scroll far.
• Effortless Sign-Up Process: Alert boxes typically block all buttons and interactions until they are closed, requiring users to close the alert before they can attempt to sign up again. With error messages integrated into the webpage using the DOM, users can quickly identify and address sign-up issues without any additional effort, leading to a smoother sign-up process.
• Increased Interaction Rate: Removing barriers such as alert boxes that interrupt the sign-up process can lead to an increase in user interaction rate. Users are more likely to complete the sign-up process if they can easily understand and address any errors encountered during sign-up.
• Enhanced User Experience: Providing error messages directly on the sign-up form using the DOM creates a more seamless and intuitive user experience. Users can easily identify and correct errors without being interrupted or redirected by alert boxes, resulting in a more positive overall experience with the website.