Shadowlands: Un vistazo detrás de escena a la renovación de la interfaz de creación de personajes
El lanzamiento de Shadowlands nos dio una oportunidad de optimizar y rediseñar el proceso de creación de personajes. Acompaña al diseñador sénior de interfaz, Jeff Liu, que nos dará un vistazo detrás de escena para aprender más sobre cómo fue todo este proceso.
¡Saludos, habitantes de Azeroth! Soy Jeff Liu, diseñador sénior de interfaz en el equipo de interfaz de usuario de World of Warcraft. Estoy aquí para compartir un poco de información sobre la renovación de la interfaz de creación de personajes de Shadowlands. Con todas las nuevas opciones de personalización que se han introducido recientemente, creemos que es un buen momento para mostrar cómo tomamos las decisiones que afectan a la interfaz de usuario (IU).
Yo ya había participado en las renovaciones del sistema de transfiguración y de la casa de subastas. El trabajo de renovación de una interfaz vieja es mi tipo de proyecto favorito, así que me entusiasmó mucho la posibilidad de rediseñar la pantalla de creación de personajes.
Esto era parte de la iniciativa "Experiencia de jugador nuevo", que incluyó Isla del Exilio, la nueva zona inicial. La pantalla de creación de personajes es la primera con la que interactúa un jugador nuevo, por eso queríamos actualizarla para que brinde una buena primera impresión. El equipo de arte de personajes también estaba trabajando para añadir muchas opciones de personalización nuevas para Shadowlands, así que era el momento perfecto.
El nuevo diseño
Para que entiendan, la pantalla de creación de personaje anterior era así:
Una de las primeras cosas que queríamos hacer era dividir las pantallas de selección de raza y clase. De esta forma, la clase se elegía en la primera pantalla y la raza en la segunda:
En este ejemplo, si querías jugar como elfa de la noche, tenías que ir a la pantalla anterior, elegir una clase diferente y luego ir hacia atrás y adelante varias veces entre pantallas para ver todas las opciones.
Sí, era muy molesto.
No funcionaba para nada y estuvimos a punto de mantener el diseño anterior con una simple renovación de arte. Sin embargo, a último momento, a mis colegas diseñadores de interfaz, Crash Reed y Ray Ocampo, se les ocurrió un concepto en el que las razas estuvieran divididas en lados opuestos:
Una de las ventajas de este diseño es que ver a la Horda y la Alianza enfrentadas comunica al instante que hay una guerra entre facciones. ¡Nos encantó la sencillez y la originalidad de este diseño, por lo que lo aplicamos sin pensarlo!
Confía en tu instinto
Con un nuevo diseño en nuestro poder, reevaluamos la cantidad de información presentada a los jugadores en esta pantalla. La pantalla de creación de personaje anterior tenía mucha información en forma de descripciones escritas:
El problema al presentar demasiada información (incluso si es útil) es que puede dificultar una toma de decisión que de otro modo sería simple.
Diseñamos la nueva pantalla de creación de personaje para ayudar a los jugadores nuevos a evitar lo que se conoce como parálisis de análisis. Eliminamos mucho texto y confiamos en que los elementos visuales y auditivos explicarían las razas y clases. Preferimos mostrarte un mago lanzando una bola de fuego en lugar de describírtelo.
Casi todos los jugadores nuevos ya están familiarizados con los arquetipos de fantasía a través de la cultura pop. Todos entienden que un guerrero usa espada, armadura pesada y pelea cuerpo a cuerpo.
Organizamos las clases en un orden que ayudara a los jugadores nuevos a identificar rápidamente una clase y entenderla:
Los tres primeros arquetipos son los más fuertes y los más conocidos. Los siguientes tres son un poco menos conocidos. Por ejemplo, alguien que nunca haya jugado un videojuego tal vez no sepa lo que hace un Sacerdote. Después de eso están las clases híbridas, que son más complejas.
Es importante tener en cuenta que esta elección de diseño no se basó en la dificultad que representa jugar con cada clase, sino en qué tan fácil es entender los conceptos detrás de cada clase y lo que hacen sin necesidad de más explicaciones.
Las razas son en gran parte una decisión estética. No queríamos que los jugadores nuevos se preocuparan por las habilidades raciales, por eso estarán ocultas de manera predeterminada:
Para nosotros, está bien que un jugador no cree su "personaje eterno" en el primer intento. Aprenderán mucho más sobre las razas y clases jugando que lo que podríamos explicar en la pantalla de creación de personajes.
¡Solo queremos que los jugadores nuevos elijan la raza con el aspecto que más les guste, su arquetipo de clase favorito y que empiecen a jugar!
Mejor que decir es mostrar
Después de que eliminamos todo ese texto, empezamos a crear nuevas animaciones capaces de transmitir la esencia de la clase.
Empezamos explorando el grado de detalle que era mejor poner en las animaciones. Nos importaba especialmente la duración, ya que no queríamos que fueran demasiado largas.
Aquí están los primeros borradores creados por el animador principal, Ian Lang:
Nota: El último video muestra un concepto inicial de un fondo grande y negro y tu personaje parado en un pedestal. Aquí hay otro borrador de eso:
Después de tomar una decisión, el equipo de animación creó una secuencia para cada clase junto con el equipo de efectos especiales para seleccionar los efectos correctos que iban a acompañar esas habilidades. Cuando terminamos, un diseñador de sonido creó sonidos para todas las animaciones.
Creo que estarás de acuerdo en que los equipos de animación, de efectos especiales y de sonido hicieron un trabajo increíble para hacer que las clases se sientan heroicas. Las animaciones terminaron siendo uno de los elementos más destacados de la nueva pantalla de creación de personajes.
Presta atención
Uno de nuestros objetivos principales era mantener la atención de los jugadores enfocada en el modelo de personaje que está en el centro de la pantalla. Queríamos que sintieran que estaban creando un superhéroe. Esta es la filosofía que nos guio en muchas de las decisiones que tomamos al diseñar esta pantalla.
En lugar del estilo de arte tradicional de la interfaz de WoW, elegimos una estética minimalista. Eliminamos las piezas de arte elaboradas en los extremos, como los estandartes de facción, que eran molestos visualmente y sacaban el enfoque de tu personaje.
Colocamos una sombra grande en los bordes de la pantalla para resaltar aún más el personaje, y eso dio como resultado una viñeta.
También posicionamos los elementos de la interfaz para captar tu atención hacia donde queremos que mires.
Finalmente, difuminamos el fondo cuando la cámara se acerca durante el modo de personalización. Esto hace que el personaje resalte y ayuda a que te enfoques en las características de tu personaje.
Jugadores nuevos
Los jugadores nuevos ven una versión diferente de la pantalla de creación de personajes de la que ven los veteranos. Quería crear una experiencia más simple y limpia para ellos.
Por ejemplo, solo se ven las razas principales y sus nombres debajo de sus retratos.
Hay algunas diferencias leves.
El primer personaje que verás como jugador veterano es una combinación de raza y clase totalmente aleatoria. Para los jugadores nuevos, el primer personaje que verán siempre será un guerrero humano u orco (de género aleatorio). La idea es facilitar la entrada de los jugadores nuevos mostrándoles algo más fácil de reconocer.
Los personajes se aleatorizan un poco diferente para los jugadores nuevos. Dado que esta puede ser la primera vez que entran al universo de Warcraft, me parecía que era crucial que cada raza se entendiera bien visualmente. Por este motivo, desactivamos las opciones para oscurecer la cara, como los tatuajes, la pintura de guerra y los ornatos para la cabeza, cuando el personaje se generaba aleatoriamente.
Pero no te preocupes, cuando el jugador entra al modo de personalización, esas opciones están disponibles.
Finalmente, los jugadores nuevos ven un consejo en la pantalla de personalización:
Algo que vimos en las pruebas de usuario era que algunos jugadores nuevos sentían ansiedad cuando estaban finalizando la creación de su personaje. Tiene sentido, ¿verdad? Si crees que es la última oportunidad que tienes de personalizar a tu personaje, vas a tomarte el tiempo necesario para asegurarte de que sea perfecto. Este consejo los ayudará a avanzar con confianza y a empezar a jugar más rápido.
Personalización de personaje
Hablando de personalización de personajes, veamos algunos borradores iniciales para esa pantalla. Puedes ver cómo cambió el diseño respecto de la versión anterior:
En un punto, experimenté con un diseño más libre en el que las opciones no estaban dentro de un cuadro:
No nos gustaba el aspecto desordenado pero si nos gustaba el estilo libre, por lo que lo combinamos con algunas de las ideas iniciales en las que agrupamos opciones en categorías:
¡Nos estamos acercando al diseño final!
El selector de opciones
Vas a notar que las opciones del último borrador se controlan con barras deslizantes. Este control de la interfaz necesitó muchas iteraciones durante el desarrollo.
El diseño anterior tenía una vista previa con retratos grandes en la parte derecha. Si miras estos ejemplos, es difícil diferenciar las opciones de caras:
Además, no son expansibles y se oponen a nuestro objetivo de mantener el foco en el personaje, que está en el centro.
Entonces nos propusimos a encontrar una interfaz de control para reemplazar los retratos.
No quería usar una mezcla de diferentes controles (como casillas, botones y opciones de color), ya que la pantalla quedaría muy abarrotada y sería abrumadora. Quería usar un solo control que funcionara para todas los tipos de opciones.
Sin embargo, el objetivo más importante era permitir que pases entre las opciones rápidamente para que puedas compararlas con facilidad.
Las primeras iteraciones no cumplían ese requisito, y era una molestia navegar entre opciones que estaban alejadas una de la otra.
Las barras deslizantes hicieron posible moverse rápidamente entre opciones, pero sin precisión. Por lo general, se usan para moverse entre dos extremos (por ejemplo, alto y bajo), pero la mayoría de las opciones necesitaban más que eso.
Al final, se me ocurrió un menú desplegable con varias columnas que cumplía todos los objetivos que teníamos:
- Te permite pasar entre dos opciones rápidamente.
- Te permite ver todas las opciones al mismo tiempo.
- Es un control único y versátil de la interfaz que se puede usar para los nombres y colores. En algunos casos, incluso mezclamos los dos tipos en el mismo menú desplegable.
- Tu atención se mantiene en tu personaje en el centro.
- Y tal vez lo mejor de todo: te brinda una vista previa de opciones en tiempo real posando el cursor encima de ellas.
Nota: Soy un gran fanático de Overwatch. ¿Cuántas referencias de Overwatch pueden encontrar en los nombres de las opciones?
Los íconos de categoría
Todas las opciones de personalización están en una de tres categorías. Así evolucionaron las categorías y sus íconos:
Originalmente había planeado cinco categorías, pero cambié de opinión después de probarlo en el juego.
Me pareció que era torpe que las opciones de pelo estén en la segunda categoría, ya que los cambios de peinado son de las primeras cosas que uno hace. Así que las moví a la primera categoría con las opciones de cara.
La mayoría de las razas no tienen muchas opciones de cuerpo y tatuajes, por eso también combiné las dos categorías. Y así terminamos con las tres finales.
Peluquería
Quizás recuerdes que la peluquería tenía una interfaz completamente diferente a la pantalla de creación de personajes. Con este nuevo diseño, nos pareció que tenía sentido unificar criterios.
Algunas peluquerías eran inconvenientemente oscuras porque la iluminación estaba basada en su entorno. Esto también hacía que la percepción de los colores fuera imprecisa en algunos casos. Por ejemplo, un color verde podía parecer amarillo.
El equipo de arte resolvió este problema aplicando una luz completamente neutral alrededor de los personajes cuando se activa el asiento de peluquería. Ahora la iluminación es brillante y los colores son precisos.
Una nueva característica de la peluquería es que puede cambiar el género de tu personaje. A continuación está el video del primer cambio de género, grabado por el ingeniero que lo implementó.
Errores
Hubo muchos errores que tuvimos que corregir a lo largo de este proyecto:
¡Dale las gracias al equipo de control de calidad por salvarte de esta pesadilla!
Hasta la próxima
Rediseñar la creación de personajes fue un gran trabajo en equipo de artistas de personajes, animadores, productores, analistas de pruebas, diseñadores de sonido, investigadores de uso e ingenieros (¡puedes leer el artículo que publicaron aquí!). Esperamos haber creado una interfaz flexible y moderna que facilite la creación de millones de personajes en los próximos años.
Espero que hayan disfrutado de este vistazo al detrás de escena del rediseño de la pantalla de creación de personaje. ¡Gracias por leer!
Jeff Liu
diseñador sénior de interfaz, World of Warcraft