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”
Catástrofe
• Un publisher decide no publicar
• Un jugador casual decide no comprar
• Un reviewer opina “No vale la pena”
¿La Experiencia de Usuario?
Arte
Gameplay
Falso!
La Experiencia de Usuario
Arte
Interfaz
de usuario
Gameplay
User Interface (UI)
Es la comunicación entre el jugador y
nuestro juego
Consecuencias de las fallas
• Usuarios frustrados
• Gameplay arruinado
El Rey de los Principios
La UI es para el usuario
Diseñarlas para ellos!
El Usuario
• No lee prácticamente nada
• No memoriza nada
• Cuando se equivoca, se frustra
• Casual vs Hardcore
• Espera divertirse
Oportunidades para Errar
• Controles principales
• Navegación 3D
• Menúes y Diálogos
• Cutscenes
• Fonts y Texto
• Tutoriales
• Modos
• Savegames
• Gerenciamiento de UI
Controles Principales
La comunicación más importante entre
el usuario y el gameplay
Blooper: Controles Torpes
Obligar al usuario a cambiar
continuamente entre mouse y
teclado
Consecuencias
• Cansansancio
• Errores
Blooper: Controles Torpes
(Screenshot Avernum)
Avernum 3
Blooper: Controles Torpes
Solución
• Mouse O teclado, o mouse Y teclado
Blooper: El Mouse Terrorista
Usar acciones dificultosas
innecesariamente
Drag &
Drop
Doble Click
Click
Blooper: El Mouse Terrorista
(Screenshots Grow RPG)
Grow RPG
Blooper: El Mouse Terrorista
Consecuencias
• Cansancio
• Errores
Solución
• Acciones frecuentes: lo más baratas
posible
Blooper: El Mouse Terrorista
(Screenshots arreglados del grow)
Grow RPG
Navegación 3D
Los juegos 3D tienen muchas
libertades de navegación
Traslación
Zoom
Rotación
Blooper: Libertinaje en 3D
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
Rotación contrareloj
(Screenshot etherlords)Rotación reloj
Etherlords
Blooper: Libertinaje en 3D
(Screenshot wc3)
Warcraft 3
Blooper: Libertinaje en 3D
Solución
• No implementar movimientos de
cámara que no sean críticos
Menúes y diálogos
Objetos a través de los cuales el
usuario toma decisiones
Blooper: Menúes y diálogos no
convencionales
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
Cutscenes
• Ambientar al usuario
• Hacerlo empatizar con su personaje
• Recompensar sus avances
Blooper: Cutscenes Insalteables
Cutscenes “La Naranja Mecánica”
Blooper: Cutscenes Insalteables
Consecuencia
• El placer se transforma en dolor
Solución
• Usar cualquier tecla, como mínimo
ESC
Fonts y Texto
• Informar
• Complementar los gráficos
Blooper: Fonts diminutas
Usar fonts menores a 10 pts.
Consecuencias
• Ilegibles para mayores a 45, o con
problemas vista
Blooper: Fonts diminutas
(screenshot SAIIS)
Strange Adventures in Infinite Space
Blooper: Fonts diminutas
Solución
• Mínimo 10 pts.
• Recomendado 12 pts.
Blooper: Fonts divertidas
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: Mucho Texto
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
Casual Blooper: Technobabble
Cuidado con la terminología
Especialmente
• Abort (Cancel)
• Kill (End)
• Execute (Start)
Tutoriales
• Evitan los manuales
• Orientan al usuario
• Enseñan cómo se supone que se
tiene que jugar
Blooper: Instrucciones Efímeras
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
Tips: Tutoriales
• Texto al mínimo
• Tutoriales cortos
• El ser humano es mucho mejor
imitando que siguiendo instrucciones
Tutorials por Imitación
(Screenshot wik)
Wik and the
Fable of Souls
Modos
¿Qué es un modo?
Blooper: Muchos Modos
Implementar modos innecesariamente
Consecuencia
• Errores
• La interfaz se siente “ineficiente”
Blooper: Muchos Modos
Monkey Island
Blooper: Muchos Modos
Solución
• Cambios de modo automáticos
• Cuasimodos
Blooper: Muchos Modos
Full Throttle
Tip: Cuasimodos
• ¿Qué es un cuasimodo?
• ¿Qué ventajas ofrece?
Mantener 5
Presionado
Soltarlo
Savegames y sus Diálogos
• Dejar al usuario hacer algo más
importante que jugar
• Protegerlo de sus propios errores
El Organo Inextirpable
Bloopers: Savegames
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
Blooper general: Savegames
No proteger al usuario de sus propios
errores, o hacerlo torpemente
Solución
• Savegames ordenados
cronológicamente
• No intrusivos
Gerenciamiento (Management)
• 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
Blooper: No hay diseñador de UI
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
Diseñador de Interfases
• ¿Es el artista?
• ¿Los programadores?
• ¿Los testers?
¿Y si no hay “experto”?
UI Designer
Interfases
vs Game Designer
Gameplay
Blooper: Dejar la UI para el final
…cuando el deadline de entrega está
cerca, y no hay tiempo de arreglar
nada
Consecuencia
• La interfaz queda exactamente igual
Tip
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…
Solución para todos los problemas de
UI
User Testing!
• No es caro ni complicado como el
testing de funcionalidad
• Es muy eficiente
• Es divertido
User Testing: Receta
1)
2)
3)
4)
4 o 5 personas
Ponerlas a jugar
Sentarse fuera de su campo de visión
Pedirles que hagan tareas como
•
•
•
Pasar de nivel
Bajar el volumen
Salir del juego
5) Tomar nota de las dificultades que tienen
Testers: Qué hacer
•
•
•
•
Pedirles que piensen en voz alta
No guiarlos
No contestar preguntas
Se está probando el juego, no la
competencia del tester
• Anotar las observaciones
Qué NO hacer
• Implementar los consejos de los
testers
• No verificar los arreglos
• Concluir que los problemas son
culpa de la incompetencia del tester
User Testing: ¿Sirve?
• Los fallos estructurales en las UI
son muy pocos
• Los usuarios los detectan con
facilidad
• Refuerza la autoconfianza
Conclusión
La felicidad es el neto entre nuestras
frustraciones y éxitos cotidianos
Preguntas!
Muchas Gracias!
Daniel Benmergui
[email protected]
Descargar

Diapositiva 1