En este post lo que vamos a ver es lo que se conoce como Wireframe, es básicamente un boceto rápido sobre la interfaz que va a tener tu juego o aplicación, elegí un videojuego en donde tome screenshots y me encargue de poner el wireframe a la misma.
Voy a hablar sobre la funcionalidad, ubicación de los botones, lógicas de los mismos y otros temas. El juego que elegí se llama
Papa's Pancakeria, es un juego gratuito, donde debes tomar la orden de tus clientes, preparlas tal cual y al final ellos califican tu desempeño. Tiene muchas pantallas, cada una tiene una función diferente y obviamente muestra información variada. Al final de cada pantalla dare una pequeña conclusion sobre cambios que haría en ubicación de botones o explicando por qué si funciona, etcétera.
Empecemos con la primer imágen, la cual representa la pantalla de inicio del juego, elementos básicos como el título, el estudio que lo llevó a cabo, quien lo publicó, botón de Jugar, también podemos observar elementos como Share, donde puedes mostrar el juego en alguna red social, Mobile App para llevar el juego a donde tu quieras, y Juegos Parecidos, los cuales pueden ser del mismo equipo desarrollador u otras empresas de videojuegos.
Es evidente que la parte social del juego, como el compartir abarca más espacios en la pantalla de presentación, el título también va a ocupar gran parte de la pantalla, normalmente se va a colocar en el centro. Depende de la impresión que se quiera dar al jugador.
A continuación muestro la interfaz final:
Conclusiones:
Esta pantalla en lo personal la veo un poco atascada de información, en lugar de colocar tantos ads como Apps, el Nuevo Juego, etcétera, se lo presentaría de forma oportuna es decir, cuando cierra el juego a lo major mostrarle el Nuevo ad del Juego que acaba de salir, o algo como: Puedes descargar la App y jugar donde sea.
El botón de Play, cambiaría el color, como que el cielo es Amarillo y el botón también, lo haría resaltar un poco más.
El siguiente wireframe es sobre elegir un slot para iniciar tu juego, lo que se puede ver en la siguiente imagen son instrucciones que te dan, la opción de quitar el juego, desactivar el sonido y el Share para las redes sociales. Lo que abarca ahora gran parte de la pantalla son los Slots para elegir tu partida o iniciar una. También podemos notar que movieron el botón de sonido, primero estaba en la parte inferior y ahora paso a la parte superior, y desapareció el nombre y logo de la empresa que lo desarrollo y lo publicó. Pero en las siguientes imagenes los vamos a estar viendo constantemente.
Muestro imagen final:
Conclusiones:
Esta pantalla en general me parece muy bien, él único cambio que haría es invertir el botón de Back con el de Sonido. Y resaltar un poco más el botón de Sonido, hacerlo más grande o cambiar el color.
La siguiente imagen muestra lo que serían los stats del jugador, Opciones quiere decir que hay más botones que te llevan a otras pantallas y cada una de ellas tiene información específica, ahoae, en la mayoria o si no en todas vamos a ver la parte de Share, Sponsor y Empresa.
Lo que me llama la atención del juego es que tiene el botón de Quit o Quitar en la parte izquierda de la pantalla, puede que a una persona le resulte incómodo pero a otra fácil, podría el sistema operativo que utiliza cada persona, por ejemplo: Microsoft siempre tiene en la esquina superior derecha la opción de cerrar, mientras que en iOS es lo contrario.
Muestro imágen final:
Conclusiones:
La pantalla en general me parece bien, es limpia y clara.
La siguiente imagen con wireframe muestra lo que sería la pantalla de Pausa, donde se muestra información sobre tu personaje, stats, la cantidad de dinero que tienes, ahora, tienen una sección de Días, ya que cada que termina la semana te pagan, esa podría ser la razón por la que tiene en el centro, otros elementos en el centro son el personaje y un botón donde puedes cambiar de sombrero de tu personaje solamente, está en el centro para que el jugador pueda relacionarse con el personaje, la innmesión del jugador aumente gracias a la personalización de su personaje, etcétera.
Muestro imágen final:
Conclusiones:
Intentaría poner los stats y dinero en un solo boleto, claro, buscando la manera de romper con la immersion del jugador, y así logras una pantalla más limpia.
Las siguientes imagenes muestran las pantallas a las que te llevan los botones como: Customers, Badges, etcétera. Empezamos con la de Costumers, muestro primero el Wireframe. Podemos apreciar que la pantalla se divide en dos partes, información del cliente y un listado de los clientes. Info de clientes abarca mucho más espacio para poder apreciar y leer la información que se tiene, por ejemplo, lo que ordena cada que va al restaurante.
La existencia de esta sección o botón podría ser la simple immersion del jugador, podría ser que se cree una relación o se identifique con alguno de los clientes además de su personaje.
Pantalla final de Costumers:
Conclusiones:
Solo cambiaría la tipografía.
La siguiente pantalla pertenece al botón de Badges, los cuales son básicamente los logros que ha tenido el jugador, muestro wireframe. Esta vez la pantalla se divide en 3 partes, el número de badges del jugador, la descripción de cada una de ellas, y un botón de avanza o retroceder página.
Obviamente la parte importante es los badges que tiene el jugador, es decir, la descripción de cada uno de ellos, un ejemplo podría ser: Desbloquear a todos los clientes. También se puede apreciar que apartados como Quit, Sonido, Share, Studio, Opciones, Continuar y Sponsor mantienen su lugar original.
Imágen final:
Conclusiones:
La pantalla en sí me parece bien, no hay tanto texto y se entiende perfectamente de que trata cada logro y lo que tienes que hacer para desbloquearlo.
El siguiente Wireframe son simplemente los creditos. se mantienen posiciones de las diferentes áreas de la pantalla, esta ves en Continuar, quiere decir, regresa al juego o al Menú de Inicio. En la sección de Creditos no solo pueden ir los nombres sino enlaces directos a la página de Internet de la empresa, redes sociales, etcétera.
Imagen Final de Créditos:
Conclusiones:
En esta parte, quitaría los botones de Info, Customers, Badges, Help y Credits, solo dejaría el de Back to Game, de manera que la pantalla sea vea limpia y llame la atención los nombres de los integrantes o de la empresa.
El wireframe que sigue, es el juego en sí, esta ves desaparecen el logo de la empresa, publisher y el botón de quit. Creo que solo se encuentran cuando pausas el nivel. En esta pantalla cuentas con diferentes secciones como la de Order, Grill, Build y Drinks, cada una de ellas con interfaces muy diferentes. Tambien se puede encontrar información sobre el estado actual de tu restaurante: abierto / cerrado.
Tengo entendido que el ojo humano recorre la pantalla o cualquier imagen de una manera en específica, es decir, empieza por el lado inferior derecho, sube poco a poco al lado izquiero superior, después baja y recorre la imagen hasta llega al lado superior derecho. Me imagino que es por eso que colocaron el letrero de abierto y cerrado tan cerca de esa esquina.
Muestro imágen final:
Ahora, el Wireframe que sigue es básicamente la calificación que recibes al final del día: Quality Service. Abarca un buen pedazo de la pantalla ya que es lo que dictamina si el jugador debe mejorar su puntuación o supercar la que ya tiene. La forma en que representan el servicio es interesante, ya que lo usan para no romper con lo que se llama Suspension of Disbelief, de esta manera el jugador se submerge aun más al juego.
De esta manera representan el servicio:
El ultimo Wireframe lo que muestra es una sección de mini juegos, los clientes no solo te dan propina, también pueden darte boletos para que participes en mini juegos con un host especial, con eso te puedes ganar muebles o carteles para tu restaurante.
La información la organizan de manera similar a la pantalla de presentación del juego, Título centrado y de tamaño grande, te muestran al host, en la parte baja el número de boletos con los que cuentas y dos opciones: Jugar, o Paso.
Muestro pantalla final:
Conclusiones:
En cuanto a esta pantalla creo que los botones estan bien en cuanto a color, a lo major el botón de PLAY lo haría un poco más grande para que llame la atención del jugador y quiera jugar el mini.