Challenge: mejorando la experiencia de juego
Breve análisis heurístico: Futmondo
Read this article in English ➡ HERE
El reto
Debía elegir una app sobre la que realizar un análisis heurístico, explicando el por qué de la elección. Además, había que describir alguna propuesta de mejora, elaborando boceto o wireframe de algún flujo para posteriormente diseñar una de las pantallas en alta fidelidad. Elegí la aplicación de Futmondo.
¿Qué es Futmondo?
Futmondo es un juego de fútbol online en el que puedes crear tu campeonato, invitar a tus amigos a jugar en ligas privadas o unirte a ligas públicas y enfrentarte al resto de usuarios. Tu principal misión es ser el manager de tu club, fichar a los mejores jugadores y ponerlos en tu equipo cada jornada. Los jugadores puntúan en base a su actuación en los partidos reales. El usuario con mayor puntuación al final de la liga, será el vencedor.
¿Porqué Futmondo?
El tiempo medio de cada interacción con el juego es corto, realizando rápidas operaciones en minutos o en pequeñas ventanas de tiempo (trayectos de transporte público, momentos de espera en consultas médicas, etc.). A pesar de ser una aplicación meramente de ocio, es sabido y comentado por la comunidad de usuarios, que tiene un margen de mejora importante en cuanto a usabilidad, interacción y funcionamiento.
Problemas de usabilidad
Áreas de mejora
Como he comentado antes, la aplicación tiene múltiples áreas en las que la experiencia es mejorable. Sin embargo, en este caso nos centraremos en dos de ellas.
1. Pantalla principal
- Como se observa en la siguiente imagen, en la home de la aplicación se muestran “Mis campeonatos”, o lo que sería lo mismo, las diferentes partidas en las que el jugador participa en este momento. En el ejemplo sólo hay una partida disponible (“Tipos Tope Guapos”). Dentro del módulo de la partida se encuentran en la franja superior una serie de datos informativos (ranking del usuario, puntuación, presupuesto disponible, etc.). En la franja inferior se muestran los iconos que te llevan a las diferentes secciones donde se gestiona la partida.
- A primera vista se ve que gran parte de la pantalla queda vacía. Se podría argumentar que se deja espacio para el caso de que hubiera otras partidas paralelas, pero en tal caso la visualización de dichas partidas se facilitaría con recursos sencillos como el scroll. Tanto en ejemplos en los que solo hay una partida como en otros con más partidas, se debe aprovechar mejor el espacio, ya que la elevada ausencia de elementos puede inhibir la utilidad y la facilidad de uso.
- Siguiendo el argumento de la optimización del espacio, se encuentra el problema de tamaño de los iconos de acceso a las secciones. Hay una dificultad notable de navegación debido a que no se respetan los estándares de medidas para la correcta interacción con el dedo pulgar (actualmente miden 20x20 píxeles aproximadamente).
- Otro problema presente en la pantalla principal son los tres botones de la parte inferior. Dichos botones corresponden a secciones que difieren en contenido, importancia y frecuencia de uso. Por lo tanto, presentan un alto nivel de inconsistencia; no hay jerarquía de colocación (parecen estar flotando aleatoriamente), ni unidad de criterio visual, y sobretodo no se asocia el contenido con los iconos, lo que puede generar desconfianza y hacer descartar la interacción.
2. Flujo hacia/desde “Mi perfil”
El botón inferior blanco del centro lleva al perfil del usuario. Dentro de dicho perfil se puede acceder a una serie de sub-secciones. Detecto dos problemas:
- Por un lado, al acceder a cualquiera de estas sub-secciones y usar el botón de volver, se vuelve a la home, no al perfil. Esto es tedioso si lo que se quiere es volver al perfil, y sobretodo poco intuitivo ya que se salta un nivel en el camino de vuelta.
- El otro problema radica en la duplicidad de varias de las sub-secciones mencionadas, pues ya se accede a ellas desde otras partes de la home (concretamente desde el menú elipsis de la parte superior). Es conveniente reducir el ruido visual eliminando acceso a secciones a las que ya se accede desde otras áreas.
Incumplimiento de heurísticas
A modo de resumen, clasificamos los problemas de usabilidad mediante un breve análisis heurístico:
- ❌ Hablar el lenguaje del usuario: La manera en que se muestra la información no siempre es lógica, generando ansiedad o frustración en ciertas decisiones.
- ❌ Consistencia y estándares: La aplicación tiene numerosos problemas de consistencia. Accesos e información duplicada a través de botones distintos y con distinto nombre. Secciones con información prácticamente idéntica y desplegada en órdenes diferentes.
- ❌ Reconocer mejor que recordar: La difícil asociación entre contenidos y botones de acceso dificultan la interacción del usuario. Se puede mejorar la colocación de determinados botones para hacer la navegación más limpia e intuitiva.
- ❌ Estética y minimalismo: El aprovechamiento de los espacios se puede mejorar para optimizar la visibilidad, comprensión y funcionalidad de ciertos elementos.
Propuesta
Wireframes
Con el objetivo de mejorar el flujo de navegación de la pantalla principal a la sección de “Mi perfil” y de vuelta, se han elaborado los siguientes wireframes.
En esta imagen se muestra la home. En primer lugar se ha aprovechado la abundancia de espacio libre para mostrar la información de la partida de manera más extensa. Se añaden descripciones en texto, aparte de los iconos ya existentes.
Asimismo se amplía la dimensión de los módulos para acceder a las áreas donde se gestiona la partida, facilitando la navegación táctil con un tamaño adecuado para la interacción con los dedos.
Por otro lado se ha añadido una tab bar en la parte inferior, sustituyendo los iconos que anteriormente flotaban de manera aleatoria. También se les añade texto descriptivo, así como unidad de criterio visual en tamaño y colocación.
Haciendo tap sobre el botón izquierdo de la tab bar, el usuario se dirigiría a la sección “Mi perfil”.
Dicho menú de “Mi perfil” aparece como una ventana modal inferior, donde a su vez se muestran nuevamente los elementos de manera más amplia. Se vuelve a añadir texto descriptivo a los botones y se eliminan aquellos que están duplicados en otras partes de la app.
También se sustituye el botón de salir por uno más pequeño y se coloca en la parte superior derecha, promoviendo el reconocimiento de dicho elemento, donde se sitúa tradicionalmente en las páginas web.
Al acceder a cualquiera de las sub-secciones del menú “Mi perfil”, se daría la posibilidad de volver a este mismo menú.
Alta fidelidad
A continuación se muestra la propuesta de diseño de la pantalla principal.
Se ha ampliado el tamaño de los elementos aprovechando mejor los espacios. Así se consigue una mejor visualización, lo que a su vez facilita la navegación. Además, lo que originalmente eran las pestañas de “Prensa” y “Vestuario” ahora se han unificado únicamente en “Vestuario”, puesto que el contenido de ambas pestañas era prácticamente idéntico. De esta manera se elimina un elemento innecesario a la vez que se da sentido al contenido de la nueva pestaña.
Finalmente, se muestra el nuevo tab bar descrito en el apartado “wireframes”, que aporta unidad de criterio visual tanto en tamaño como en colocación.
A continuación se muestra un breve ejemplo de la visualización propuesta para la ventana modal de “Mi perfil”, con un aspecto más estructurado y elementos cohesionados, así como un icono cláramente definido para salir.
Conclusión
Usando como base un análisis heurístico de la aplicación, se pueden observar diversos aspectos a mejorar. Resulta vital trabajar sobre estas deficiencias si se tiene en cuenta que afectan directamente a la jugabilidad y experiencia de usuario, derivando en momentos de frustración o abandono del juego en los peores casos.
