Codeforces’s Problemset Evaluation By Lovepreet Singh

Codeforces is a competitive programming platform used by thousands of people daily and has a huge archive list of programming problems known as a problem set. Programmers visit this page to practice their skills or to retry a problem they have seen previously. In this blog, we are going to see different usability issues with the UI that are found using heuristic evaluation and thinking aloud with real users. The solutions to the various problems are given after going through the evaluation methods and recommending the solutions which can give a better user experience.

Usability Problems

In this part, we will explore major usability issues that a user faces in the problem set’s UI following the evaluation methods used. 

Page Search Icon

The problem set UI contains a local search bar that allows a user to search inside the currently opened page from tens of pages. However, the search bar is not opened by default and an icon of the right arrow is given to open it as we can see in Figure 1. This arrow does not represent the search functionality in any way and the user can assume that there is no search function provided for filtering. The icon is very small and hard to recognize as something important without any information attached to it.

Figure 1: Local page search in the problem set (source)

The search UI is breaking Neilson's Consistency and Standards heuristic by not following the standards used by most of the websites by opening the search bar by default and using a standard search icon for a search function. When a task was given to the users to filter out a problem on the page, all the users didn't consider the right arrow icon for finding a search bar and assumed this icon as a shortcut for the next page. This behavior shows the influence of industry standards on the user where the user is connecting his previous experience to the icons, so the website should follow the standards in the industry.

Global Search

The global search bar provided in Codeforces’s UI does not search for a specific problem from the problem set. The user searching for a problem might assume that the problem does not exist on Codeforces if the search function cannot find it and might go away from the website. We can see in Figure 2 that after searching for a problem "AB Tree", the search results are not showing any reference to the problem set.

Figure 2: Codeforces's global search (source)

In the thinking aloud method, users struggle to find a specific problem in the problem set when given by name. After a long time, most users went on to take help from Google to search inside Codeforces which resulted in finding the problem easily.  Codeforces should search inside the problem set for a given text in the search bar so that users can directly search for a problem. Using this approach, the design will follow Neilson's Flexibility and efficiency of use heuristic that allow a user to speed up the interaction with the design. 

Finding a Problem's Solutions

All the problems in the archive list have solutions by different users and two steps are required to get to the solution of a problem. Besides, the steps are not clearly marked to point to the solution but represent something else as we can see in Figure 3.

Figure 3: Finding the solution of a problem (source)

First, the user has to click a number on the right which represents the number of users who have solved the problem, and then the user has to click a random number assigned to the solution on the left. The learnability is high in this case as the user has to navigate and experiment with different options to find the solution. The design is not following Neilson's heuristic known Recognition rather than recall as the design is enforcing the user to remember the steps to find the solution.

Undocumented Elements

Lastly, there are certain elements on the UI for which no documentation is provided to know their use. One of such elements is shown in Figure 4 where the three horizontal bars are given which should show some menu bar after following the standards but it only shows a pop up with some empty user list. 

Figure 4: Undocumented element (source)

There is no documentation link or information provided on the UI that can inform about the role of the element. When the task is given to the users to explain the use of this element, the users fail to do so as no information was provided for its use. The best recommendation is to add some link beside the UI to inform users about the role of a certain element and then it will also follow Neilson's help and documentation heuristic.

Conclusion

Codeforces have some major design issues that hinder the user to perform certain actions efficiently or the inability to do certain tasks. It should follow some industry standards and consistencies so that the learnability curve for new or returning users should be not high. The website should try to reduce the cognitive load of the user by providing direct access to certain functions which a user performs frequently such as looking for the solution of a problem, finding the solution by a particular user, etc. These design enhancements will certainly be good for the user experience and will increase the learning experience of the user which is the core motive of the website.