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 [email protected]