Diseño de interfaces (Game Design)

2.831 visualizaciones

Publicado el

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

Publicado en: Diseño

Diseño de interfaces (Game Design)

  1. 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. 2. Diseño de interfaces - Proceso Establecer Flujo Maquetado Layout Mockups Versión Interactiva Establecer Identidad Analizar producto Producción
  3. 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. 4. Ejemplos de Diagramas de flujo
  5. 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. 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. 7. Ejemplos de Mockups Art by Droidarts.com
  8. 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. 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. 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. 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. 12. Buen UX + Buen UI = Buen Gameflow “Cuán simple y fácil es para el jugador convertir una idea, en acción”
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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

×