How bad design and implementation can ruin the experience

I was recently working on an Ed-tech project. The project is in early hand-off and testing with the users. The most basic features are live Mock/MCQ exams, course enrollments, live classes, downloadable resources, and sign-in/sign-up.

Buttons

Let’s talk about buttons first, buttons are the staple of any digital experience that connects the entire system. Users use buttons to navigate, complete tasks, and operate most things by clicking.

In the world of UI design buttons contain different states such as default, hover, focus, active, disabled, and can be even more. Button states are designed to flow the state and information of the system to the user.

Problems

Before diving into the actual problem some issues with the button already occur during the initial testing phase. While users try to sign in or sign up in the system, we found that users are clicking the buttons multiple times.

It takes a certain amount of time to send a request to the server and get a response back (Generally in milliseconds) but the problem is that due to slow internet or other reason, it can take a few seconds to get a response from the server.

It’s also because of poor design, in the initial button design contained a focus state (To show that the button was clicked) but not all the necessary information for the user to understand what’s happening, So users click on buttons multiple times because they felt they didn’t click the button properly in the first time and so on.

Due to multiple clicks, multiple requests are sent to the server and that creates a problem in the system. To address this multiple-clicks problem development team implemented a solution to restrict multiple clicks by making the button disabled after multiple clicks.

The solution was to disable the button after multiple clicks (ie. 2 clicks) and implement it in the main button component itself. That triggers problems on other pages that contain buttons, especially on the exam page.

Because the exam system was running perfectly before and never tested properly again after the new release.

A new live exam was scheduled and over 500+ students are enrolled to give an online exam. As an exam format, students attempt one question at a time, submit by clicking the next button, and load a new question as well.

The problem occurs after giving two questions and users are not able to load new questions because the button is disabled after two clicks and 500+ students are not able to complete the exam.

What could have been done?

Design

Any interactive system works based on feedback. A well-built system provides necessary information on what’s happening, and what is the current state of the system through feedback based on user actions.

For example in the case of the sign-in process, after a user clicks on the sign-in button system should provide feedback that can be either a text containing “Signing in” as a message or adding a loading state in the button or other visual clues that provide a message that something is happening based on the action until server’s response.

Development

Rather than implementing a system that restricts multiple clicks by disabling the button after two clicks, buttons should be disabled after a click to prevent another click until it gets the response from the server.

Well, every situation doesn’t require a disabled button, so rather than implementing it in the main component, disabled props can pass to the button component when required. So to make the experience better not only is disabling the button enough, but It also requires a complete feedback system.

Furthermore, to prevent such errors from happening, a test-driven development approach can be helpful. Writing test cases for each functionality will help to detect any issues and solve it before releasing any changes.

In conclusion

About more than 500+ students are enrolled for exams. Even though it’s in the early phase of testing and exams being free, among those enrolled students some students may not return to the platform ever again because those experiences can hurt their decision-making. It’s a test exam but losing students can be directly related to a possible loss in future paid enrollment that generates revenue for an organization. This kind of error happening on a big scale can affect the organization’s image.