Diseño de interfaces, Conceptos de UI, UX, Gameflow, Interfaz, Diagramas de Flujo, Maquetado, Mockup, Demo Interactiva

1. Diseño de interfaces
Herramientas, Conceptos, Gameflow, UI, UX
(El formato de estas filminas ha sido modificado para lectura)
Por Guillermo Averbuj
guille.averbuj@gmail.com
Gentileza de
La bolsa laboral de videojuegos

2. Diseño de interfaces - Proceso
Establecer
Flujo
Maquetado
Layout
Mockups
Versión
Interactiva
Establecer
Identidad
Analizar
producto
Producción

3. Diagramas rápidos de Flujo
Tienen muchos usos! Para esclarecer la
estructura de menús y opciones se
comienza con un diagrama de flujo.
Estos diagramas pueden mostrar como
se mueve el jugador entre menús o bien
puede mostrar el progreso mecánico del
juego (gameflow) si es que el mismo
permite ser comunicado en “estados”.
Incluso sirve para diseñar a grandes
rasgos una inteligencia artificial por
estados.
Herramientas recomendadas:
Bubble.us, Vizio, LucidChart, MindMap

4. Ejemplos de Diagramas de flujo

5. Maquetado - Proceso iterativo
El maquetado es el proceso en el
que se diseña la disposición de los
elementos de la interface para
observar flujo armonía y peso. Es
iterativo porque es el momento
adecuado para realizar cambios y
probar conceptos. Luego de este
punto, realizar cambios, es mucho
más caro (en tiempo y por ende
dinero).
Herramientas recomendadas:
Balsamiq, InPreso, JustProto

6. Mockup de concepto - Assets
Llegado el momento es
necesario que un artista o el
game designer (si puede)
desarrolle una versión pulida a
color de la pantalla para
corroborar contraste,
disposición, peso, composición
y claridad en los diferentes
dispositivos. No es lo mismo el
tamaño de un font en un ipod 3
que en un ipad retina display.
Herramientas recomendadas:
Photoshop, Gimp
Art by Droidarts.com

7. Ejemplos de Mockups
Art by Droidarts.com

8. Demo Interactiva o “Navegable”
(mal llamado prototipo)
Se desarrolla un conjunto de opciones
que mejoren en lo posible la
jugabilidad, pero sobre todo ayuda a
quien es informado
Herramientas recomendadas:
InVission, FileSquare, FramerJS,
MockFlow, Mockup Builder,
Mockingbird, HotGloo, LucidCharts

9. Qué objetivo tiene un “proto”?
Esta es la gran pregunta! No se debería comenzar con un
“prototipo” antes de saber el objetivo.
● Se quiere responder una pregunta específica? Se
quiere explorar un tema extenso?
● Queremos analizar interacciones como gestos y
animaciones? o buscamos comprender el flujo
completo?
● Veremos el prototipo solo nosotros y nuestro equipo?
o será mostrado a posibles inversores? o testers?
El Target
Si son diseñadores UX profesionales, quizás sea suficiente
con un prototipo de papel, o simples diagramas de maquetado.
Si no lo son, probablemente debas desarrollar algo que se
acerque más al objetivo final, y es recomendable usar
imágenes cercanos a la versión final.
La plataforma
Teléfonos, Tablets, PC escritorio, Web, App nativa? Es
momento de definir esto?
Tiempo
Tendrás tiempo para iterar?
Software (Herramienta de desarrollo)
Elegí software que ya conozcas, o que te resulte cómodo
trabajar.

10. Que es UI? Que es UX?
UI y UX son con frecuencia confundidos, mezclados, y usados como reemplazo, o
sinónimo erróneamente.
UI (User Interface)
Se refiere a los métodos (control de teclado, control de mouse..) y las interfaces
(pantalla de inventario, pantalla de mapa..) a través de los cuales un usuario
interactúa con tu juego.
UX (User Experience)
Trata de cuan intuitivas y disfrutables son esas interacciones. Cuan responsive son
los controles, Como se siente el flujo del juego (Gameflow), la curva de aprendizaje,
la curva de dificultad..

11. y el Gameflow?
Clarificando: El Gameflow (o flujo de juego) es la progresión del juego
de un estado a otro. Esto es representable en gráficos de flujo. En
ocasiones el Gameflow y el flujo de menús están íntimamente
relacionadas por la naturaleza del juego.
Los elementos que lo componen son:
● Retos presentados
● Ritmo del juego
● Eventos pre-armados para enseñar mecánicas
● Áreas de entrenamiento
● Prueba y error
● “to Grok” (aprender mecánicas al instinto)

12. Buen UX + Buen UI = Buen Gameflow
“Cuán simple y fácil es para el jugador
convertir una idea, en acción”

13. Buen UI
“Una buena interfaz, te comunica lo que
necesitas saber y luego se aparta de tu
camino.”
1. Esta interfaz me dice lo que necesito saber en este momento?
2. Es fácil encontrar lo que necesito o tengo que buscar un rato?
3. Puedo usar esta interfaz sin leer instrucciones?
4. Mis posibles acciones son obvias en esta pantalla?
5. Tengo que esperar a que cargue la interfaz o a que termine la animación?
6. Hay tareas repetitivas que puedo acortar o remover directamente?

14. “a un click de distancia”
La saga Civilization puede hacerle
sentir a uno que es tonto, pero la UI y
la I.A. de la UX hacen que el CIV5
sea un producto de calidad superior.
En la pantalla de “City Screen” todo
esta a un click de distancia,
accesible, claro, iconográfico y
resumido.
Cada vez que un concepto nuevo o
elemento aparece en el juego un
personaje I.A. aparece para describir
con poco texto la nueva información.

15. Cantidad apropiada de información
A veces:
● “Menos es más”. Pantalla sin
ruido.
● Demasiada información junta
quita inmersión
● La cantidad adecuada de
feedback cambia según el
producto, el target, y el objetivo.
● Un acceso directo, no siempre
ahorra clicks
● Timing correcto para mostrar
información circunstancial

16. 1 imagen > 1000 palabras
El tutorial debe mostrar, en vez de contar o enseñar
con instrucciones de texto. Recorrer al jugador por las
mecánicas en vez de explicar. Pocas palabras!
Buen ejemplo: Angry Birds / Plants Vs Zombies
Mal ejemplo: Full Metal Alchemist Brotherhood

17. No Subestimar al jugador
Mostrar información obvia
en momentos donde el
jugador debería estar
inmerso quita al mismo de
la experiencia sin otorgar
beneficios adecuados.

18. Balancear los “Screen Stoppers”
Hay juegos que monetizan
poniendo ads. Para ello incluyen
en su flujo, pantallas que
permitan disponer publicidad sin
que rompa el flujo de gameplay,
pero que con frecuencia son
disruptivos en la experiencia.
Algunos productos han logrado
ofrecer sin molestar.
Buen Ejemplo: Flappy birds
Mal Ejemplo: Portal Defenders
Flappy Birds:
Adwords en GameOver screen
despues de jugar
Portal Defenders:
Ads x2 + Sponsor x2 antes de
jugar.

19. Optimizar el uso de la pantalla
Usar toda la pantalla para la
interfaz no significa llenarla
de objetos, elementos,
iconos, o texto. Los
conceptos son:
● maximizar su uso con
elementos clarificadores
● simplificar, ordenar y
limpiar
● ser evidente y a simple
vista
● minimizar clicks / taps

20. Recomendaciones
● Jugar muchos juegos exitosos
● Jugar muchos juegos NO exitosos
● Detenerse en las pantallas y evaluar
sensaciones y funcionalidades
● Evaluar cantidad de pasos para lograr core
gameplay y para lograr monetización
● Comparar mejores prácticas y usos
similares

21. Links Útiles
http://www.nngroup.com/articles/#popular-alertboxes
https://www.youtube.com/watch?v=JjliwSJGDiU
Gracias por leer
Recomendaciones, propuestas, y correcciones a:
Guille.Averbuj@gmail.com
Guillermo Averbuj
Gentileza de
La bolsa laboral de videojuegos