Diseño de interfacesHerramientas, Conceptos, Gameflow, UI, UX

(El formato de estas filminas ha sido modificado para lectura)

Por Guillermo Averbujguille.averbuj@gmail.com

Gentileza de

La bolsa laboral de videojuegos

Diseño de interfaces - Proceso

Establecer Flujo

MaquetadoLayout Mockups Versión

Interactiva

EstablecerIdentidad

Analizarproducto Producción

Diagramas rápidos de FlujoTienen 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

Ejemplos de Diagramas de flujo

Maquetado - Proceso iterativoEl 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

Mockup de concepto - AssetsLlegado 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

Ejemplos de Mockups

Art by Droidarts.com

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

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.

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..

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)

Buen UX + Buen UI = Buen Gameflow

“Cuán simple y fácil es para el jugador convertir una idea, en acción”

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?

“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.

Cantidad apropiada de informaciónA 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

1 imagen > 1000 palabrasEl 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 ZombiesMal ejemplo: Full Metal Alchemist Brotherhood

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

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 birdsMal Ejemplo: Portal Defenders

Flappy Birds: Adwords en GameOver screen despues de jugar

Portal Defenders: Ads x2 + Sponsor x2 antes de jugar.

Optimizar el uso de la pantallaUsar 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

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

Links Útileshttp://www.nngroup.com/articles/#popular-alertboxeshttps://www.youtube.com/watch?v=JjliwSJGDiU

Gracias por leerRecomendaciones, propuestas, y correcciones a:Guille.Averbuj@gmail.com

Guillermo Averbuj

Gentileza de

La bolsa laboral de videojuegos