Shadowlands: el rediseño de la IU de creación de personajes
El lanzamiento de Shadowlands fue una ocasión para optimizar y rediseñar el proceso de creación de personajes. Vamos a echar un vistazo entre bastidores con el diseñador sénior de UI Jeff Liu para que nos hable sobre el proceso.
¡Saludos, habitantes de Azeroth! Me llamo Jeff Liu y soy diseñador sénior de UI en el equipo de interfaz de usuario de World of Warcraft. Quiero aprovechar para compartir algunas reflexiones sobre el rediseño de la creación de personajes que llegó con Shadowlands. Aprovechando que hemos implementado varias opciones de personalización nuevas, nos ha parecido oportuno abriros las puertas y mostraros algunas de las decisiones de diseño que tomamos con respecto a la interfaz de usuario (IU).
Yo ya había trabajado con anterioridad en los rediseños del sistema de transfiguración y de la casa de subastas. Trabajar en interfaces de usuario antiguas es, con diferencia, uno de los proyectos que más me gusta, así que estaba entusiasmado con la tarea de rediseñar la pantalla de creación de personajes.
Este cambio formaba parte de la experiencia para los jugadores nuevos e incluía el Confín del Exilio, la zona de inicio para ellos. La creación de personajes es la primera pantalla con la que interactúa un jugador nuevo, así que queríamos modernizarla para que causase una buena primera impresión. El equipo de diseño de personajes también se puso a añadir un montón de opciones de personalización para Shadowlands, así que era la ocasión perfecta para actualizar la IU.
El nuevo diseño
Para que tengáis una referencia, este era el aspecto de la antigua pantalla de creación de personajes:
Una de las primeras cosas que probamos fue a separar las pantallas de selección de clase y de raza. La clase se elegía en la primera pantalla y la raza, en la segunda:
Como se puede ver en este ejemplo, si quisieseis jugar con un elfo de la noche, tendríais que volver a la pantalla anterior, elegir una clase distinta e ir alternando entre pantallas para comprobar todas las opciones.
En efecto, no era muy cómodo.
Este cambio no nos convenció, así que casi nos decidimos por conservar el diseño antiguo y actualizar solo el diseño artístico. Mis compañeros y diseñadores de IU Crash Reed y Ray Ocampo tuvieron una idea en el último minuto y nos mostraron un boceto en el que las razas aparecían separadas en dos lados opuestos:
Un apartado a destacar de este diseño es cómo el cara a cara entre la Horda y la Alianza comunica inmediatamente la guerra entre las facciones. Nos encantó la sencillez y la frescura de este diseño, así empezamos a trabajar con él de inmediato.
Hacer caso al instinto
Ahora que disponíamos de un nuevo diseño, volví a evaluar la información que se mostraba a los jugadores en esta pantalla. La antigua pantalla de creación de personajes ofrecía un montón de información con textos descriptivos:
El riego de ofrecer demasiada información (aunque sea útil) es que puede evitar que se tomen decisiones que, por lo demás, deberían ser sencillas.
Diseñamos la nueva pantalla de creación de personajes para que los jugadores nuevos no se hiciesen un lío. Recortamos buena parte del texto y dimos más peso a las imágenes y al sonido para explicar las razas y clases. Preferimos mostraros a un mago lanzando una bola de fuego en lugar de describirlo.
Muchos jugadores nuevos ya estarán familiarizados con los arquetipos de fantasía gracias a la cultura popular. En general, la gente entiende que los guerreros empuñan espadas, llevan armadura pesada y luchan cuerpo a cuerpo.
Ordenamos las clases de modo que los jugadores pudiesen identificar rápidamente las que entienden:
Los tres primeros arquetipos son los más potentes y conocidos. Los tres siguientes lo son un poco menos. Por ejemplo, es posible que alguien que nunca haya jugado un videojuego desconozca lo que hace un sacerdote. Después se encuentran las clases híbridas, que son algo más complejas.
Es importante tener en cuenta que esta decisión de diseño no representa un orden de dificultad de cada clase, sino lo fácil que es comprender los conceptos que las definen y lo que son capaces de hacer sin más explicaciones.
La elección de la raza es, sobre todo, una cuestión estética. No queríamos que los jugadores se preocupasen por las facultades raciales, así que, por defecto, las ocultamos:
Somos de la opinión de que no pasa nada si un jugador nuevo no crea a su «personaje definitivo» a la primera. Descubrirá mucho más sobre las razas y las clases al jugar que con una explicación en la pantalla de creación de personajes.
Nuestra intención es que los jugadores nuevos elijan la raza que les parezca más chula, su clase preferida y se pongan a jugar.
Mostrar, no contar
Cuando eliminamos todo el texto, nos pusimos a crear animaciones nuevas que pusieran de manifiesto el trasfondo de la clase.
Comenzamos por explorar la complejidad de las animaciones. Hubo que tener cuidado con la duración porque no queríamos que se extendiese demasiado.
Aquí tenéis las primeras versiones que creó el jefe de animación Ian Lang:
Comentario adicional: el último vídeo muestra una prueba inicial en el que aparece una gran tela de fondo con el personaje sobre un pedestal. Aquí tenéis otra versión:
Tras decidirse por una orientación, el equipo de animación creó una secuencia para cada clase en colaboración con el equipo de efectos especiales, que seleccionó los efectos adecuados que acompañarían a las facultades. Una vez completado este paso, un diseñador de sonido completó la parte sonora de todas las animaciones.
Me parece que estaréis de acuerdo con que los equipos de animación, efectos especiales y sonido realizaron un trabajo fantástico a la hora de conferirles heroicidad a estas clases. Las animaciones son uno de los elementos más destacados en la nueva pantalla de creación de personajes.
Centrarse
Uno de nuestros objetivos principales era que vuestra atención se centrase en el modelo del personaje en el centro de la pantalla. Queríamos daros la sensación de estar diseñando un superhéroe. Esta filosofía nos ha guiado en muchas de nuestras decisiones con respecto al diseño de esta pantalla.
En lugar de usar el estilo artístico tradicional de la IU de WoW, optamos por una estética más minimalista. Eliminamos los elementos más complejos de los lados, como los antiguos estandartes de facción, ya que distraían mucho a nivel visual y restaban atención al personaje.
Colocamos una gran sombra en el borde de la pantalla para que el personaje apareciese como situado debajo de unos focos, lo que, en la práctica, equivalía a crear una viñeta.
También colocamos los elementos de la IU para dirigir vuestra vista a donde nos interesaba.
Por último, distorsionamos el fondo cuando la cámara se acerca en el modo de personalización. Esto resalta el personaje y os ayuda a centraros en sus facciones.
Jugadores nuevos
Los jugadores nuevos ven una versión de la creación de personajes distinta a la de los jugadores veteranos. Yo quería que tuviesen una experiencia más sencilla y limpia.
Por ejemplo, solo se muestran las razas principales y sus nombres se encuentran bajo los retratos.
Hay algunas diferencias sutiles.
El primer personaje que veréis si sois jugadores veteranos es una combinación de raza y clase completamente aleatoria. En cuanto a los jugadores nuevos, el primer personaje que verán será siempre un guerrero humano u orco (de un género aleatorio). Esto parte de la idea de presentar el juego a los jugadores nuevos mostrándoles algo fácil de identificar.
Los personajes también presentan elementos aleatorios un poco distintos para los jugadores nuevos. Como es probable que sea su primer contacto con el universo de Warcraft, me pareció muy importante que fuese fácil realizar una lectura visual de cada raza. Por ese motivo deshabilitamos las opciones que ocultan la cara, como tatuajes, pinturas de guerra y tocados, cuando el personaje se genera de forma aleatoria.
No os preocupéis: cuando el jugador pasa al modo de personalización, puede elegir entre esas opciones.
Por último, los jugadores nuevos verán un consejo en la pantalla de personalización:
Una conclusión que sacamos de las pruebas fue que algunos jugadores se ponían nerviosos a la hora de darle el toque final al personaje. Tiene sentido, ¿no? Si entendemos que esta es la última oportunidad para personalizar nuestra creación, los jugadores se lo pensarán bien para asegurarse de que sea perfecta. Este consejo les permite continuar con confianza y entrar en el juego más rápido.
Personalización de personaje
Y hablando de la personalización, vamos a ver algunas de las versiones iniciales para esa pantalla. Aquí podéis comprobar la evolución del diseño desde la versión más antigua:
En un momento dado, experimenté con una versión más libre en la que las opciones no aparecían en un cuadro:
No nos gustó el aspecto desordenado del resultado, pero sí que las opciones fuesen tan abiertas, así que combinamos este aspecto con algunas de las ideas anteriores donde agrupábamos las opciones en categorías:
¡Ya nos estamos acercando a la versión final!
El selector de opciones
En la última versión, veréis que las opciones se manejan mediante controles deslizantes. Hicimos un montón de pruebas a este control de IU durante el desarrollo.
La versión antigua contaba con grandes previsualizaciones de los retratos en el lado derecho. Si os fijáis en estos ejemplos, resulta complicado encontrar las diferencias entre las distintas opciones para las caras:
El tamaño no se puede modificar demasiado y entra en conflicto con nuestro objetivo de fijar la atención sobre el personaje en el centro de la pantalla.
Por eso nos pusimos a buscar un control de IU que pudiese reemplazar los retratos.
No quería usar una mezcla de controles distintos (como casillas, botones y selectores de colores) porque la pantalla transmitiría una sensación desordenada y agobiante. Quería un único control que sirviese para todas las opciones.
No obstante, el objetivo más importante era que pudieseis alternar entre dos opciones rápidamente para compararlas de forma sencilla.
Las primeras pruebas no cumplieron ese requisito, y era un engorro comparar opciones alejadas.
Los controles deslizantes permitían moverse con rapidez, pero no con precisión. Además, este tipo de control se usa generalmente para desplazarse entre dos extremos (como alto y bajo), pero no era aplicable en casi todas estas opciones.
Al final, nos decidimos por un menú desplegable con varias columnas que cumplía todos nuestros objetivos:
- Permite moverse entre dos opciones cualesquiera con rapidez.
- Permite ver todas las opciones a la vez.
- Es un control de IU único y versátil que puede usarse tanto para nombres como para colores. Incluso hay casos en los que combinamos ambos tipos en el mismo menú desplegable.
- La atención se mantiene en el personaje, que está en el centro.
- Y la que posiblemente sea la mejor parte: os permite previsualizar las opciones en tiempo real con tan solo pasar el ratón por encima.
Comentario adicional: soy un gran fan de Overwatch. ¿Cuántas referencias a Overwatch sois capaces de encontrar en las opciones de nombres?
Los iconos de categoría
Todas las opciones de personalización se encuentran en una de las tres categorías que existen. Aquí tenéis la evolución de las categorías y sus iconos:
En principio tenía pensado que hubiese cinco categorías, pero cambié de idea tras probarlas en el juego.
Resultaba extraño que los peinados se ubicasen en la segunda categoría porque esta opción suele ser una de las primeras cosas que se cambian. Por eso los puse en la primera categoría con las opciones para las caras.
La mayoría de las razas no disponen de muchas opciones de cuerpos y tatuajes, así que también combiné esas dos categorías. De este modo acabamos con las tres definitivas.
Peluquería
Puede que recordéis que la IU de la peluquería era completamente diferente a la pantalla de creación de personajes. El rediseño nos demostró que tenía sentido usarla para ambas pantallas.
Algunas peluquerías eran incómodamente oscuras porque la iluminación se basaba en el entorno. Esta circunstancia también provocaba que la percepción de los colores fuese inexacta en algunos casos. Un verde parecía amarillo, por ejemplo.
El equipo de arte resolvió este problema aplicando una luz neutra en torno al personaje en cuanto se activaba la silla de la peluquería. Ahora, la iluminación es brillante y muestra los colores de forma precisa.
Una característica nueva de la peluquería es que podéis cambiarle el género a vuestro personaje. Aquí tenéis un vídeo del primer cambio de género que grabó el ingeniero que se ocupó de esto.
Errores
En el transcurso de este proyecto nos topamos con un montón de errores visuales que tuvimos que pulir:
¡Dadle las gracias al equipo de control de calidad por ahorraros esta pesadilla!
Hasta la próxima
El rediseño de la creación de personajes fue fruto de un gran esfuerzo conjunto en el que participaron artistas de personajes, animadores, productores, analistas de pruebas, diseñadores de sonido, investigadores de usuarios e ingenieros (aquí tenéis una publicación de ellos hablando del tema). Esperamos haber creado una IU moderna y flexible que facilite la creación de millones de personajes en los próximos años.
Confío en que os haya gustado este vistazo al rediseño de la pantalla de creación de personajes. ¡Gracias por leer este artículo!
Jeff Liu
, diseñador sénior de IU, World of Warcraft