Challenge: improving gaming experience
Brief heuristic analysis: Futmondo
Lee artículo en español ➡ AQUÍ
The challenge
I had to choose an app on which to perform a heuristic analysis, explaining the reason for the choice. In addition, a proposal for improvement had to be described, creating a sketch or wireframe of a flow to later design one of the screens in high fidelity. I chose Futmondo app.
What is Futmondo?
Futmondo is an online football game in which you can create your championship, invite your friends to play in private leagues or join public leagues and face other users. Your main mission is to be the manager of your club, sign the best players and put them on your team every day. Players score based on their performance in real matches. The user with the highest score at the end of the league will be the winner.
¿Why Futmondo?
The average time of each interaction with the game is short, carrying out quick operations in minutes or in small periods of time (public transport routes, waiting times in medical appointments, etc.). Despite being a purely leisure application, it is known and commented on by the user community, that it has significant room for improvement in terms of usability, interaction and operation.
Usability issues
Improvement areas
As I mentioned before, the application has multiple areas in which the experience could be improved. However, in this case we will focus on two of them.
1. Main screen
- As seen in the following image, the application home page shows “My Championships”, or what would be the different games in which the player is currently participating. In the example there is only one game available. Within the game module, informative data is found in the upper strip (user ranking, score, available budget, etc.). In the lower strip are shown the icons that take you to the different sections where the game is managed.
- At first glance you can see that a large part of the screen is empty. It could be argued that space is left in case there are other parallel games, but in that case the visualization of said games would be facilitated with simple resources such as scrolling. Both in examples in which there is only one game and in others with more games, better use of space must be made, since the high absence of elements can inhibit usefulness and ease of use.
- Following the argument of space optimization, there is the problem of the size of the icons for accessing the sections. There is a notable navigation difficulty because the measurement standards for correct interaction with the thumb are not respected (they currently measure approximately 20x20 pixels).
- Another problem present on the main screen is the three buttons at the bottom. These buttons correspond to sections that differ in content, importance and frequency of use. Therefore, they present a high level of inconsistency; There is no hierarchy of placement (they appear to be floating randomly), no unity of visual criteria, and above all, the content is not associated with the icons, which can generate distrust and rule out interaction.
2. Flow to/from “My Profile”
The bottom white button in the center leads to the user’s profile. Within this profile you can access a series of sub-sections. I detect two problems:
- On the one hand, when accessing any of these sub-sections and using the return button, you return to the home page, not to the profile. This is tedious if what you want is to return to the profile, and above all unintuitive since you skip a level on the way back.
- The other problem lies in the duplicity of several of the mentioned sub-sections, since they are already accessed from other parts of the home screen (specifically from the ellipsis menu at the top). It is advisable to reduce visual noise by eliminating access to sections that are already accessed from other areas.
Non-compliance with heuristics
As a summary, we classify usability problems through a brief heuristic analysis:
- ❌ Speak user’s language: The way the information is displayed is not always logical, generating anxiety or frustration in certain decisions.
- ❌ Consistency and standards: The application has numerous consistency problems. Duplicate access and information through different buttons with different names. Sections with practically identical information and displayed in different orders.
- ❌ Recognize better than remember: The difficult association between content and access buttons makes user interaction difficult. The placement of certain buttons can be improved to make navigation cleaner and more intuitive.
- ❌ Aesthetics and minimalism: The use of spaces can be improved to optimize the visibility, understanding and functionality of certain elements.
Proposal
Wireframes
In order to improve the navigation flow from the main screen to the “My profile” section and back, the following wireframes have been developed.
This image shows the home page. Firstly, the abundance of free space has been taken advantage of to display the game information in a more extensive way. Text descriptions are added, apart from the already existing icons.
Likewise, the dimension of the modules is expanded to access the areas where the game is managed, facilitating tactile navigation with a size suitable for interaction with the fingers.
On the other hand, a tab bar has been added at the bottom, replacing the icons that previously floated randomly. Descriptive text is also added to them, as well as a unit of visual criteria in size and placement.
By tapping on the left button of the tab bar, the user would be directed to the “My profile” section.
Said “My profile” menu appears as a lower modal window, where the elements are again displayed in a broader way. Descriptive text is added back to the buttons and those that are duplicated elsewhere in the app are removed.
The exit button is also replaced with a smaller one and is placed in the upper right, promoting recognition of said element, where it is traditionally located on websites.
By accessing any of the sub-sections of the “My profile” menu, you would be given the opportunity to return to this same menu.
High Fidelity
Below is the design proposal for the main screen.
The size of the elements has been increased, making better use of space. This achieves a better visualization, which in turn makes navigation easier. In addition, what were originally the “Press” and “Locker Room” tabs have now been unified solely into “Locker Room”, since the content of both tabs was practically identical. In this way an unnecessary element is eliminated while giving meaning to the content of the new tab.
Finally, the new tab bar described in the “wireframes” section is shown, which provides unity of visual criteria both in size and placement.
Below is a brief example of the proposed visualization for the “My Profile” modal window, with a more structured appearance and cohesive elements, as well as a clearly defined exit icon.
Conclusion
Using a heuristic analysis of the application as a basis, various aspects to improve can be observed. It is vital to work on these deficiencies if we take into account that they directly affect the gameplay and user experience, leading to moments of frustration or abandonment of the game in the worst cases.
