Este artículo será un análisis de varias lecciones de UX / UI que aprendimos al observar cuidadosamente a un par de cientos de personas en la exposición que estaban probando las primeras versiones de nuestro juego Steamhounds .


Para entender el contexto, diré que Steamhounds es un juego por turnos, una mezcla de JRPG y combate táctico en la parrilla. Los jugadores pueden luchar contra la IA, pero tratamos de motivarlos para que jueguen entre ellos siempre que sea posible, sentados junto a diferentes monitores.

En general, antes de realizar este experimento, el diseño básico y la presentación de la información en nuestro juego no era absolutamente terrible. Los jugadores y usuarios experimentados que están familiarizados con el género generalmente se ocupan del juego sin nuestra interferencia. Pero en tales eventos en vivo, hay personas que nunca antes habían visto tales juegos, y estos jugadores nos ayudan mucho, mostrando esas rarezas y suposiciones ocultas que hicimos en el diseño del juego.

Entonces, sin más preámbulos, pasemos a nuestras observaciones:

Problema 1: la gente no lee el texto

Creo que la mayoría de los desarrolladores son conscientes de este problema. Sorprendentemente, una gran proporción de jugadores omite cualquier texto que les muestres. Descubrimos que la gran mayoría (> 80%) de los jugadores simplemente hicieron clic en la pantalla de instrucciones que agregamos al comienzo de la demostración, que describe los conceptos básicos del juego:


Menú con instrucciones. Solo el 20% de los jugadores se molestan en leerlo (y el 100% de ellos ganan la batalla)

También pecamos esto: para ser sincero, ¿quién lee las instrucciones al comprar un nuevo dispositivo? Esperamos que sea fácil de usar, y podemos aprender más o menos a usarlo con la ayuda de la intuición y la experimentación.

Estábamos esperando esto, el problema más grave era que incluso durante el juego, muchos jugadores también se perdían las indicaciones en pantalla . Esto afectó más la experiencia del usuario cuando no notaron instrucciones que decían qué hacer a continuación:

Solución

Sabemos que generalmente el texto en pantalla es lo último a lo que los jugadores tienden a recurrir cuando se atascan. Así que hagamos que sea imposible perderse:


Usamos el movimiento para llamar la atención sobre la información sobre herramientas cuando aparece, y luego continuamos animándolo hasta que el jugador sigue las instrucciones .

Solía ​​ser difícil de notar. Habiendo forzado al jugador a prestarle atención, prácticamente nos deshicimos de las situaciones en que los jugadores preguntaban: "¿qué debo hacer a continuación?".

Probablemente, podríamos mejorar el sistema animando el texto y organizándolo para que llame la atención sobre los mosaicos en los que debe hacer clic para seleccionar una posición.

---

Problema 2: los objetos interactivos deben ser visibles

Omitimos lo obvio: los botones deben parecerse a botones, y el jugador debe comprender qué opciones están disponibles para él en un momento dado.

En Steamhounds, un jugador debe elegir una acción del menú (alguna habilidad, por ejemplo, "ataque desde la distancia" o "postura defensiva") en su turno. Cuando esto sucede, aparece un menú:


Esto funciona muy bien: se reproduce un mensaje de audio claro y una animación de rotación que llama la atención cuando el menú se expande a una parte más grande de la pantalla. Nadie tuvo problemas para entender que necesita hacer clic en uno de estos botones. El problema es que, después de elegir una acción, el menú desaparece y el jugador debe elegir un lugar en el campo de batalla donde deba apuntar su habilidad.

Notamos que en esta etapa algunos jugadores se atascan, recorriendo la pantalla con el mouse en busca de elementos con los que pueda interactuar :


El jugador está buscando qué hacer clic en la pantalla, y su irritación aumenta cada segundo.

Solución

Aunque destacamos los mosaicos en los que puede hacer clic, se destacan bastante débilmente. La situación se ve agravada por el hecho de que los jugadores a menudo miran brevemente al oponente antes de elegir una acción, sin darse cuenta de que aparecen las asignaciones de fichas. Así es como resolvimos este problema:


Las fichas parpadeantes atraen la atención de un jugador

Si el jugador no mueve el cursor sobre un mosaico adecuado durante algún tiempo, activamos el parpadeo.

Este simple cambio tuvo el efecto deseado: en la siguiente sesión de la prueba raramente teníamos que informar al jugador que para continuar necesitaba hacer clic en el mosaico. Nuevamente aplicamos el conocido principio: puede usar el movimiento / animación para atraer la atención . Cuando el parpadeo atrae su atención, inevitablemente mueven el mouse sobre una de las fichas, y la selección posterior hace que su propósito sea obvio.

---

Problema 3: los llamados a la acción deben ser instantáneos / contextuales

Los desarrolladores independientes a menudo hablan de la idea de una "llamada a la acción" cuando comercializan juegos: los usuarios deben "suscribirse al boletín", "agregar el juego a la lista de deseos". o "escribió comentarios en Steam!" Pero también en el juego hay momentos en que el jugador debe elegir o realizar una determinada acción. Entonces, ¿por qué no aplicar algunos de estos principios para que el siguiente clic o decisión del jugador sea lo más claro posible?

Antes del comienzo de la batalla en Steamhounds, los jugadores deben establecer posiciones iniciales y bastidores ("formaciones") para su escuadrón. El proceso de establecer la formación no se hace evidente de inmediato para todos los jugadores.

Así es como se veía la pantalla:


Instrucciones aburridas y detalladas para establecer una formación de escuadrón

Aunque le dice al jugador todo lo que necesita saber para establecer la formación, surgen un par de problemas: (a) los jugadores no leen el texto y (b) las instrucciones se presentan como un solo bloque de texto que no parece un claro llamado a la acción . Mala cosa

Solución

Como ya hemos implementado un texto hermoso y llamativo, ¿por qué no aplicarlo para romper este aburrido bloque de instrucciones?


Ahora guiamos al jugador paso a paso: primero debe "hacer clic en el personaje para establecer su bastidor", luego "elegir un bastidor", "elegir una posición", etc.

Usa sugerencias contextuales que digan lo que los jugadores deben hacer ahora . Por lo tanto, pasan por todo el proceso por etapas y no se asustan con largas hojas de instrucciones.

---

Problema: la terminología breve y técnica debe usarse con moderación

Estudiamos el diseño del juego y dominamos un lenguaje muy específico utilizado para describir las reglas del juego. Conocemos descripciones con palabras clave que se pueden encontrar en las cartas de Magic: The Gathering o en el libro de reglas del juego de mesa: "ataca a una criatura" , "descarta 3 cartas" , "hace daño a todos los personajes vecinos" . Si está acostumbrado a ese idioma, estas instrucciones son absolutamente claras e inequívocas para usted. Pero estoy seguro de que jugaste juegos con jugadores más casuales que a veces interpretan las reglas de una manera que tu cerebro de diseño piensa que es completamente imprevista.

En Steamhounds, la mayor parte del texto con descripciones largas de las reglas está en la información sobre herramientas que aparece cuando selecciona una de las habilidades del personaje. Inicialmente, queríamos hacer que estas descripciones fueran lo más concisas y rigurosas posibles; al final, no necesitamos grandes líneas emergentes de texto en estas sugerencias. Por lo tanto, tratamos de reducirlos a una, a lo sumo, dos oraciones cortas:


Una descripción agradablemente breve pero problemática de la habilidad Focus: "Da Focus"

Todo parece correcto, ¿verdad? Pero notamos que los jugadores usan esta habilidad muy raramente .

Solución

Pensamos que la razón principal de la impopularidad del Focus es que los jugadores que no leyeron las reglas cuidadosamente mostradas anteriormente, simplemente no tienen el contexto necesario para comprender la importancia o las ventajas de la habilidad . Muchos jugadores se saltan la familiarización con las reglas y se ciernen sobre este botón, por primera vez se encuentran con la mención de la mecánica de Focus. Por lo tanto, hicimos el siguiente cambio:


Una descripción un poco más detallada: “Da foco. Desbloquea tus habilidades más poderosas ".

Sí, la descripción se ha vuelto un poco detallada. Pero notamos que la proporción de personas que usan esta habilidad ha aumentado. El nuevo texto simultáneamente "vende" la habilidad al jugador y proporciona un contexto adicional para que pueda comprender su importancia desde la información sobre herramientas, incluso si no han leído las reglas.

De este problema, extrajimos un principio general: describir las cosas de una manera atractiva o atractiva, y esforzarnos por hacer que los efectos principales de la mecánica sean obvios para todos los jugadores, y no solo para aquellos que ya han aprendido información de otro lugar .

---

Problema 5: las personas están sesgadas sobre ciertas palabras

Hicimos observaciones interesantes sobre cómo el lenguaje que usamos hace que algunos jugadores interpreten las reglas de una manera inesperada. Sentimos que este es el resultado de asociaciones profundamente arraigadas con estas palabras que tienen.


Antigua descripción de Poción Vigor: “Elige un objetivo. Su próximo ataque hará doble daño ".

¿Cuál es el problema aquí? La palabra "objetivo" tiene una connotación agresiva .

La palabra "objetivo" se usa a menudo en el texto de las reglas como un término neutral para todo a lo que apunta la habilidad. Los jugadores experimentados ya pueden acostumbrarse a esto y comprender que la habilidad descrita anteriormente es obviamente una mejora que debes usar en tus propios personajes. Pero la asociación entre la palabra "objetivo" y el ataque fue tan fuerte que algunos jugadores pensaron que esta habilidad debería usarse en el enemigo, de modo que el próximo ataque causaría daño adicional.

Solución

Parecía que teníamos que alejarnos del uso de un lenguaje tan técnico. Así es como resolvimos el problema:


Descripción mejorada: “Fortalece a un aliado. Su próximo ataque hará doble daño.

Para el diseñador, este enfoque es bastante doloroso: esta descripción parece demasiado detallada. Sin embargo, notamos que el nuevo texto esencialmente eliminó el malentendido sobre el efecto de esta habilidad, y los jugadores dejaron de tratar de dirigirlo hacia sus enemigos. Los desarrolladores deben considerar los matices de significado y el público objetivo, y encontrar un equilibrio en lo que le conviene. El texto demasiado largo de las reglas es definitivamente un problema, pero una ligera redundancia permite enfatizar el estilo y el carácter del juego.

Lección útil: mire los probadores de juegos para ver si las opciones de terminología tienen consecuencias inesperadas . Incluso entre los usuarios de habla inglesa, esto puede depender mucho de la cultura.

---

Problema 6: las personas tienen asociaciones con ciertos colores

Este problema es similar al tema anterior sobre connotación de palabras. Los colores también están asociados con ciertos sentimientos o conceptos. Ya hemos usado esto en el juego, creando resaltado de mosaicos para demostrar los efectos de habilidad. Rojo - agresión, verde - soporte / defensa, etc.


Destacando los azulejos rojos de miedo

En la mayoría de los casos, esto funcionó perfectamente. Pero había una asociación que no podíamos prever, y confundió a un par de jugadores. Asociaron el color rojo no con la agresión , sino con la acción incorrecta . Por lo tanto, cuando se cernían sobre un objetivo para atacarlo, se confundieron: pensaron que el juego les dice sobre la imposibilidad de apuntar a este personaje (de hecho, el juego simplemente no muestra la ficha si no es el objetivo correcto).

Solución

Intentamos evitar las "intersecciones" de asociaciones en conflicto. Nuestra solución:


Casi lo mismo (pero no del todo) mosaicos de resaltado rojo-naranja

Simplemente cambiamos la luz de fondo roja más cerca de un tono ligeramente anaranjado. Quedaba por ver si esto realmente resolvió el problema (que en realidad solo afectó a un par de jugadores). Pero lo curioso es que nadie más estaba equivocado de esta manera.

Por lo tanto, repito, verifique que su interpretación no afecte negativamente las asociaciones que existen en la mente de los jugadores .

---

Problema 7: los clics adicionales son malos

Ya sabíamos esto, por lo que diseñamos y configuramos la interfaz de usuario para eliminar clics innecesarios. El problema surgió después de un complemento realizado en el último minuto en el ensamblaje del juego, especialmente diseñado para demostraciones en eventos.

Al final de la batalla, suenan fanfarrias y aparece un gran mensaje "Victoria" o "Derrota" en la pantalla:


Luego, el jugador puede hacer clic en cualquier lugar de la pantalla para salir de la batalla y volver al menú principal. Cambiamos el ensamblaje de demostración para que después de salir de la batalla el jugador vea el diálogo de suscripción a la lista de correo.

Parecía una gran idea, pero tenía un defecto fatal. El momento en que aparece el mensaje de "victoria" o "derrota" en la pantalla es exactamente el momento en que los jugadores se dan la mano (o comienzan a pelear) y se levantan de sus asientos. La batalla ha terminado y ya no tiene sentido sentarse frente a la computadora. Entonces se fueron sin siquiera ver el diálogo de la lista de correo .

Solución

El juego debería aparecer automáticamente después de un par de segundos en la pantalla de suscripción al boletín.


Para ser sincero, deberíamos haber previsto esto de antemano, pero la función se agregó en el último momento. Sin embargo, un simple cambio, eliminar un clic opcional, aumentó el número de suscripciones a nuestro boletín en tres veces en comparación con el resultado anterior. ¡Al diablo con estos clics opcionales!

---

Conclusiones

• Use movimiento / animaciones para llamar la atención sobre las sugerencias de texto
• Hacer obvios los elementos interactivos de la interfaz de usuario
• Piense en las pistas como llamadas a la acción. Hazlos instantáneos y contextuales.
• No busque con lenguaje técnico y trate de transmitir el contexto para ayudar a los jugadores a comprender sus decisiones.
• Verifique asociaciones mentales inesperadas con colores, palabras, etc.
• Navegación fluida de la interfaz de usuario al eliminar clics opcionales

Espero que los principios descritos en este artículo sean útiles en tu propio juego. Pero, sobre todo, esperamos poder convencerte del valor del enfoque estándar: mira a los nuevos jugadores, encuentra momentos en los que se atascan o se confunden, y luego deriva los principios básicos y los aplica a todo el juego.


Datos y observaciones recopilados en PlayExpo London. Me encantan las hojas de cálculo.

Agregamos un código de recopilación de métricas al ensamblaje de demostración sobre los resultados de las batallas, la frecuencia de la elección y la habilidad de cada personaje, información diversa sobre el momento de usar la interfaz de usuario. Esto definitivamente nos ayudó e hizo posible, desde un punto de vista científico, abordar las mediciones del impacto de los cambios que hicimos. Pero probablemente la parte principal de las lecciones fue recibida en la buena forma de "mirar al jugador desde un lado y guardar notas escritas a mano".

Ninguno de nosotros era expertos en UX (y extraoficialmente, este artículo se tituló "7 errores de UX que podemos evitar"). Al igual que la mayoría de los equipos de desarrollo que no tienen un especialista dedicado en UI / UX, tratamos de seguir el sentido común y cumplir con las recomendaciones más simples. Pero cuando estás tan inmerso en tu propio proyecto, es difícil evaluar objetivamente todas sus asperezas. El nuevo aspecto del nuevo probador de juegos es increíblemente valioso: ¡úselos tan a menudo como sea posible!