Interfases de usuario

100 maneras de arruinar un juego y cómo evitarlas

Daniel Benmergui

Mitología

“Las interfases de usuario no influyen en el éxito de mi juego”

• Un publisher decide no publicar• Un jugador casual decide no comprar• Un reviewer opina “No vale la pena”

Catástrofe

Arte

Gameplay

Falso!

¿La Experiencia de Usuario?

Arte

Gameplay

Interfaz de usuario

La Experiencia de Usuario

Es la comunicación entre el jugador y nuestro juego

Consecuencias de las fallas• Usuarios frustrados• Gameplay arruinado

User Interface (UI)

La UI es para el usuario

Diseñarlas para ellos!

El Rey de los Principios

• No lee prácticamente nada• No memoriza nada• Cuando se equivoca, se frustra• Casual vs Hardcore• Espera divertirse

El Usuario

• Controles principales• Navegación 3D• Menúes y Diálogos• Cutscenes• Fonts y Texto• Tutoriales• Modos• Savegames• Gerenciamiento de UI

Oportunidades para Errar

La comunicación más importante entre el usuario y el gameplay

Controles Principales

Obligar al usuario a cambiar continuamente entre mouse y teclado

Consecuencias• Cansansancio• Errores

Blooper: Controles Torpes

(Screenshot Avernum)

Blooper: Controles Torpes

Avernum 3

Solución• Mouse O teclado, o mouse Y teclado

Blooper: Controles Torpes

Usar acciones dificultosas innecesariamente

Blooper: El Mouse Terrorista

Click

Doble Click

Drag &Drop

(Screenshots Grow RPG)

Blooper: El Mouse Terrorista

Grow RPG

Consecuencias• Cansancio• Errores

Solución• Acciones frecuentes: lo más baratas

posible

Blooper: El Mouse Terrorista

(Screenshots arreglados del grow)

Blooper: El Mouse Terrorista

Grow RPG

Los juegos 3D tienen muchas libertades de navegación

Navegación 3D

Traslación Zoom Rotación

Soportar innecesarios movimientos de cámara

Consecuencias• El juego es más complejo• El usuario puede romper la

perspectiva por defecto

Blooper: Libertinaje en 3D

(Screenshot etherlords)

Blooper: Libertinaje en 3DRotación contrareloj

Rotación reloj

Etherlords

(Screenshot wc3)

Blooper: Libertinaje en 3D

Warcraft 3

Solución• No implementar movimientos de

cámara que no sean críticos

Blooper: Libertinaje en 3D

Objetos a través de los cuales el usuario toma decisiones

Menúes y diálogos

No respetar las convenciones del género, ni las del sistema operativo

Consecuencias• Usuarios confundidos

Blooper: Menúes y diálogos no convencionales

Atrapar al usuario

• ESC no va al menú• ESC no cancela• No hay “Cancelar”

Blooper: Menúes y diálogos no convencionales

“OK” y “Cancel” en lugares raros

Blooper: Menúes y diálogos no convencionales

No hay valores por defecto

Blooper: Menúes y diálogos no convencionales

No usar los bordes de la pantalla

Blooper: Menúes y diálogos no convencionales

Controles minúsculos

Blooper: Menúes y diálogos no convencionales

Solución• Imitar• Plagiar• Homenajear

Blooper: Menúes y diálogos no convencionales

• Ambientar al usuario• Hacerlo empatizar con su personaje• Recompensar sus avances

Cutscenes

Cutscenes “La Naranja Mecánica”

Blooper: Cutscenes Insalteables

Consecuencia• El placer se transforma en dolor

Solución• Usar cualquier tecla, como mínimo

ESC

Blooper: Cutscenes Insalteables

• Informar• Complementar los gráficos

Fonts y Texto

Usar fonts menores a 10 pts.

Consecuencias• Ilegibles para mayores a 45, o con

problemas vista

Blooper: Fonts diminutas

Blooper: Fonts diminutas

(screenshot SAIIS)

Strange Adventures in Infinite Space

Solución• Mínimo 10 pts. • Recomendado 12 pts.

Blooper: Fonts diminutas

Usar Fonts Divertidas en textos largos del juego, que como pueden ver, son molestas de leer por mucho tiempo

Consecuencias• Dolor de cabeza• Esfuerzo visual

Blooper: Fonts divertidas

Historia: Jorge el Temible volvió de la guerra del Cónclave a través del valle dorado donde se encontró con un dragón que le pidió pan pero como no tenía le dio una piedra marrón y el dragón se atragantó y se murió y por eso ahora tiene un escudo de escamas de dragón que pesa mucho pero es a prueba de cascotes como los que le tiraron un rato antes en el valle dorado y porqué no tenía el escudo cuando pasó eso, porque los que tiran cascotes no son a prueba de dragones, y por axioma de Darwin se exinguieron antes de que los mate un meteorito y…blablabla…

El usuario no va a leer esto, no vale la pena.

Blooper: Mucho Texto

Consecuencia• El usuario pierde tiempo salteándolo• Puede perderse información

importante

Blooper: Mucho Texto

Cuidado con la terminología

Especialmente• Abort (Cancel)• Kill (End)• Execute (Start)

Casual Blooper: Technobabble

• Evitan los manuales• Orientan al usuario• Enseñan cómo se supone que se

tiene que jugar

Tutoriales

Tutoriales con instrucciones que desaparecen

Consecuencias• Desorientación• Pérdida de tiempo

Blooper: Instrucciones Efímeras

Solución• Dejar las instrucciones hasta que se

completen

Blooper: Instrucciones Efímeras

• Texto al mínimo• Tutoriales cortos• El ser humano es mucho mejor

imitando que siguiendo instrucciones

Tips: Tutoriales

(Screenshot wik)

Tutorials por Imitación

Wik and the Fable of Souls

¿Qué es un modo?

Modos

Implementar modos innecesariamente

Consecuencia• Errores• La interfaz se siente “ineficiente”

Blooper: Muchos Modos

Blooper: Muchos Modos

Monkey Island

Solución• Cambios de modo automáticos• Cuasimodos

Blooper: Muchos Modos

Blooper: Muchos Modos

Full Throttle

• ¿Qué es un cuasimodo?• ¿Qué ventajas ofrece?

Tip: Cuasimodos

Mantener 5

Presionado

Soltarlo

• Dejar al usuario hacer algo más importante que jugar

• Protegerlo de sus propios errores

Savegames y sus Diálogos

El Organo Inextirpable

Obligar al usuario a ingresar una descripción

• No mostrar screenshots• No ordenar cronológicamente• No tener quicksave• No tener Autosave• No poder grabar en cualquier

momento

Bloopers: Savegames

No proteger al usuario de sus propios errores, o hacerlo torpemente

Solución• Savegames ordenados

cronológicamente• No intrusivos

Blooper general: Savegames

• Decidir quién es el responsable del diseño de las interfases de usuario

• Decidir cuán importantes son las interfases de usuario en el proyecto en general

Gerenciamiento (Management)

Asignar el diseño de interfases a la persona equivocada

Consecuencias• El diseñador de facto diseña para sí

mismo• No hay “responsables” de la

usabilidad• Intefases plagadas de errores

funcionales

Blooper: No hay diseñador de UI

• ¿Es el artista?• ¿Los programadores?• ¿Los testers?

Diseñador de Interfases

UI Designer Game Designervs

Interfases Gameplay

¿Y si no hay “experto”?

…cuando el deadline de entrega está cerca, y no hay tiempo de arreglar nada

Consecuencia• La interfaz queda exactamente igual

Blooper: Dejar la UI para el final

En muchos casos, las mejores decisiones de UI para un juego son mucho más fáciles de implementar que los malas

Detectar los errores de UI es muy fácil…

Tip

User Testing!

• No es caro ni complicado como el testing de funcionalidad

• Es muy eficiente• Es divertido

Solución para todos los problemas de UI

1) 4 o 5 personas2) Ponerlas a jugar3) Sentarse fuera de su campo de visión4) Pedirles que hagan tareas como

• Pasar de nivel• Bajar el volumen• Salir del juego

5) Tomar nota de las dificultades que tienen

User Testing: Receta

• Pedirles que piensen en voz alta• No guiarlos• No contestar preguntas• Se está probando el juego, no la

competencia del tester• Anotar las observaciones

Testers: Qué hacer

• Implementar los consejos de los testers

• No verificar los arreglos• Concluir que los problemas son

culpa de la incompetencia del tester

Qué NO hacer

• Los fallos estructurales en las UI son muy pocos

• Los usuarios los detectan con facilidad

• Refuerza la autoconfianza

User Testing: ¿Sirve?

La felicidad es el neto entre nuestras frustraciones y éxitos cotidianos

Conclusión

Preguntas!

Muchas Gracias!

Daniel Benmerguidaniel@angrymachine.com.ar