Ironhack Challenge 2 : Wireframing
¿Quién dijo que un juego app no necesita wireframes ni un estudio de experiencia del usuario?
Hoy en día, en una sociedad en la que necesitamos romper barreras para crear experiencias inclusivas, todo buen producto necesita de una un gran UX detrás. Desde una web de compras hasta una app de yoga, ¿porque un juego de móvil iba a ser diferente?
Os contaré mi experiencia haciendo ingeniería inversa de un juego app de éxito, con un nivel de ventas elevado, Gardenscapes.
Es un juego sencillo para todos los públicos, donde tu objetivo es restaurar un enorme jardín mientras sigues la historia de todos y cada uno de los encantadores personajes. La forma de restaurar el jardín y avanzar con las tareas para desarrollar la historia es jugando a sus puzzles y consiguiendo estrellas. Sin contar que cuenta, además con su parte social y competitiva.
Es un juego a simple vista sencillo pero que ha ido iterando hasta el día de hoy y que nunca para.
Es top ventas dentro de las apps de juego de móvil.
Y por último, es divertido e inclusivo ya que cualquier tipo de usuario independientemente de sexo o edad puede jugar sin problema alguno.
Elementos UI
Los elementos que podemos encontrarnos dentro de la app están clasificados por: inputs de control, componentes de navegación, componentes informativos y contenidos o contenedores.
Inputs de Control
Encontramos estos elementos en distintos puntos de la app.
- Select boxes. Por ejemplo, a la hora de acceder al puzzle donde tienes que seleccionar los power-ups que vas a utilizar durante la partida.
- Botón desplegable. Tenemos uno en la pantalla de acceso, botón de configuración.
- Radio button. En la sección de settings accediendo desde el lobby de la app, para la selección de idioma.
- Toggles con apariencia de icono. En la sección de settings accediendo desde el lobby de la app, para quitar el sonido o audio.
Componentes de navegación
- Progress bar. Según vas avanzando en las tareas y la historia del juego, en la sección de tareas tienes una barra de progresión que se va completando.
- Slider. En la sección de tienda, a la que se accede haciendo click en las monedas del lobby, tenemos las ofertas destacadas. No obstante, haciendo click en ver más, veremos un slider con todas las ofertas disponibles de la app. También lo encontramos dentro de la sección de decoraciones disponibles que se abre a partir del nivel 20. Ahí se van añadiendo decoraciones que puedes conseguir de forma opcional y que vas desbloqueando por niveles.
Componentes de información
- Countdown. Lo encontramos en el lobby debajo de los iconos que representan los eventos o competiciones informando al usuario del tiempo que queda para finalizar el evento o competición.
- Reporting points. Los encontramos de distintas maneras en toda la app, ya sea para informar al usuario cuando accede al puzzle que power ups tiene disponibles y cuáles no, hasta cuando tienes suficientes puntos para avanzar en un evento señalado en el lobby con un icono de exclamación.
- In-apps. Popups internos meramente informativos para el usuario, como la finalización de un puzzle o el comienzo, o incluso el comienzo de un evento en el lobby al acceder.
- Push notifications. Notificaciones informativas que te envía la app cuando no la tienes abierta, es decir, no aparecen dentro de la app. Son enviadas por ejemplo cuando una tarea con tiempo ha finalizado.
- Tooltip. Mensaje con información extra de un icono. Por ejemplo en el lobby, cuando ya llevas un tiempo jugando, te aparece una oferta de hucha. El tooltip te indica que la hucha esta repleta y lista y completa.
Contenidos o contenedores
Encontramos repetidas veces en la app el uso de tabs para mostrar la información, por ejemplo, en la sección de tareas, en la sección de equipos y en la sección de configuración, todas accesibles desde el lobby.
Análisis de las tareas
Antes de comenzar con el wireframe, desglosé el flujo del usuario en pequeñas tareas, de modo que me resultase más sencillo y poder centrarme mejor en la estructura, el flujo y el proceso.
- El usuario inicia sesión
- Accede al lobby y tiene como objetivo conseguir estrellas.
- Comienza el puzzle para conseguir estrellas
- Si las consigue, accede a las tareas y las completa viendo como resultado de la experiencia un avance en la historia y las aventuras del protagonista.
- Si nos las consigue, puede optar por invertir en la app o esperar un tiempo a que se repongan las vidas y pueda volver a jugar.
Flujo del usuario
En esta ocasión he decidido plasmar un “happy path” basándome en la experiencia de juego de un usuario en su día a día donde sus objetivos son conseguir estrellas para avanzar en la historia del juego, tal y como hemos visto en el análisis.
Esta sería la ruta usual de un usuario en su día a día.
Al plasmarlo, haciendo ingeniería inversa, en un wireframe de baja fidelidad, el resultado seria este.
Tras ver rápidamente el resultado, profundice un poco más añadiendo algo de detalle y definición con mi herramienta de preferencia.
Y finalmente use los wireframe para crear un prototipo, que esta disponible en aquí.
¿Qué he aprendido durante el ejercicio?
Este desafío me ha ayudado a fijarme más en aquellos detalles que como usuaria del juego había perdido por completo. Estos detalles son los que hacen que la experiencia del usuario sea más intuitiva y agradable, todo parece obvio, lógico y armonioso, pero no es tan obvio. El trabajo que lleva detrás estos detalles es efectivamente un paso muy importante para todo producto y que contribuye a su éxito.
