Conectate con nosotros
The Last of Us The Last of Us

Articulos

The Last of Us y su evolución de UX y UI 

El mejor diseño es aquel que no se nota.

Sol Neuendorf

Publicado

en

The Last of Us es uno de esos juegos que te quedan grabados a fuego en la retina. A través de una narrativa única, cada pequeño detalle en este juego es una nota más en la gran sinfonía de la experiencia de usuario. La conexión emocional entre jugadores, y el dúo Joel-Ellie cruzando un Estados Unidos devastado por la guerra, e infestado de muertos vivientes es la espina vertebral del juego. 

Cada videojuego es un intrincado conjunto de diferentes elementos. Música, guión, diseño de personajes, narrativa, la lista es interminable. El hilo conductor que los une de manera lógica y ordenada (el director de orquesta, como para seguir con la metáfora) es el diseño de videojuegos y, me permito agregar, la experiencia de usuario.

El diseño de experiencia de usuario (UX) y su complemento, la interfaz de usuario (UI) son aspectos claves en cualquier pieza digital interactiva. Es en estos dos ámbitos que quiero poner la lupa.

Diseño original

Alexandria Neonakis, diseñadora UI de Naughty Dog, cuenta que cuando llegó al proyecto en el 2012, faltaban sólo ocho meses para finalizar el desarrollo del juego. Para hacer más divertido el desafío, sólo estaban diseñados algunos elementos del UI, pero otros como el HUD (o visibilización frontal) todavía no habían sido establecidos.

Ocho meses no es mucho tiempo para terminar una interfaz de usuario completa desde el wireframe hasta el pulido final, sobre todo si tenemos en cuenta que eran solo dos personas dedicadas a ello. Alexandria junto a Paul Burg trabajaron en un sistema para diseñar, implementar e iterar rápidamente en todos los elementos. En pocas palabras: wireframe, implementar, probar, iterar y skin.

Con wireframe se refiere al primer diseño de una pantalla, el que hacemos con lápiz y papel (similares a los croquis). A partir de ahí se va complejizando, implementando y probando. Iterar se refiere a diseñar y rediseñar y rediseñar hasta que se termina el deadline. Podría ser un proceso eterno el de iterar, pero todo tiene una fecha de lanzamiento y hay que llegar.

El sistema de posicionamiento de armas que existía previamente era el mismo que se mostró en la E3. Las armas, munición, salud y consumibles aparecieron en la esquina superior izquierda de la pantalla. Derecha e izquierda en el D-Pad recorrían las armas; arriba y abajo los consumibles. Además la estética era colorida, más cercana al cuaderno de garabatos de Nathan Drake que al estilo final de The Last of Us.

Cuando se implementó este sistema, se asumió que cuando Joel tomara una nueva arma, soltaría la que estaba sosteniendo en ese momento (como en Uncharted). Después de probar este sistema, el equipo de diseño del juego decidió que tendría más sentido que Joel se quedara con todas las armas que encontrara. Esto le permitiría al jugador elegir la que considerara mejor para cualquier encuentro, dándoles más control sobre cómo jugar. También abrió la puerta a un sistema de mejora de armas. Comenzamos a diseñar alternativas al sistema implementado en base a estos requisitos de diseño actualizados.

Alexandria también cuenta que diseñó los wireframes concentrándose en cómo se sentiría y funcionaría, y no en cómo se vería: “Si puedes hacer que algo se sienta bien, entonces puedes vestirlo como quieras más adelante”.

La queja más escuchada acerca de la interfaz de usuario no es cómo se ve, sino que hay demasiado desorden en la pantalla y/o que se siente torpe de usar.

El tutorial

The Last of US

Antes de ser lanzado, The Last of Us pasó por un diseño de interfaz bastante pesado, y luego de mucho rediseñar llegó al producto minimalista que conocemos. Sin embargo, no le tiene miedo a detener el juego en pos de explicar mecánicas más complejas. La premisa parece ser minimalismo y efectividad. Esto no es caprichoso: responde a necesidades reales de enfatizar la crudeza, la brutalidad del combate y su narrativa.

Las primeras horas del juego funcionan como un tutorial. Y hay dos maneras en que la UI nos enseña a jugar: Para los botones, una pequeña oración aparece para mostrar las mecánicas simples, por ejemplo: “presiona L para correr” lo cual es muy útil para no cortar el flujo de la historia.

Pero para mecánicas más complejas, usa mensajes en pantalla completa que directamente detienen el juego y no desaparecen hasta que lo entendiste y apretás la X. Tiene sentido, primero porque si la mecánica es compleja y lleva varios pasos, no se puede resumir en una sola oración (como en el caso de los botones). Y a la vez, como son elementos disruptivos, estos mensajes están diseñados cronológicamente con la narrativa, de modo que no detienen la acción sino que la impulsan.

The Last of Us

Esta manera de presentar mecánicas, de forma dosificada y en relación a la historia, las hacen fáciles de incorporar.

Para cambiar de armas o crear nuevos ítems, decide una combinación de mantener apretado un botón y cambiar con el direccional. Esto funciona para dos aspectos: por un lado, esta funcionalidad sucede en tiempo real, resaltando la tensión del juego. Incluso, busca algún momento de paz para que efectivamente puedas ponerte a construir. Por otro lado, te obliga a prestar atención a lo que hacés, y no desperdiciar recursos tanto a la hora de disparar como de crear. Porque no olvidemos, es un survival, los recursos son escasos.

Mesas de trabajo

Otro objetivo era hacer el menú de mejoras lo más visible que se pueda. Alexandria señala que “En muchos juegos peleo, muero cientos de veces y pienso ¿qué estoy haciendo mal? luego voy a Internet y me doy cuenta de que no mejoré mis armas. Esto se debe generalmente a que vi esa pantalla de actualización una vez y me olvidé de su existencia”. 

Si el menú de adiciones y actualizaciones se designan en su propia pantalla, y para colmo se hace muy abarrotada, es probable que el usuario tienda a ignorarla. 

Por lo tanto, decidieron separar los sistemas. No hay un menú integrado con el carrusel de armas para hacer las mejoras. Los diseñadores del juego encontraron una solución a este problema en forma de mesas de trabajo. Estos bancos serían puntos específicos (y escasos) del mundo donde podrías mejorar tus armas. Les jugadores estarían reuniendo piezas, conscientes de que estaban obteniendo algo, pero no estaban seguros de cuánto tenían o incluso de qué podían hacer con esas piezas hasta que llegaran a la mesa.

En la misma, les jugadores podían tomarse el tiempo para analizar todas sus opciones y experimentar con la actualización. Esto resultó en un estilo de juego más variado. Las personas mejoraron las armas que más disfrutaban usar, no sólo la que tenía los costos de actualización más baratos. ¿Te funciona mejor el sigilo, o preferís la pelea cuerpo a cuerpo? Es en este lugar que podés definir las herramientas que te ayudan a mejorar tu estilo de juego. Además, muy poca gente pasó corriendo junto a los bancos, la mayoría se tomó el tiempo y realmente utilizó el sistema. 

Dado que es el único lugar donde se pueden mejorar las armas, la cantidad de recursos que hay que recolectar no es parte de la carga mental del jugador. Es decir, no se está mostrando todo el tiempo. Pero esa información sí está disponible durante el juego para chequear cuántos necesitamos para la próxima mejora, dado que estos puntos son escasos y hay que aprovechar al máximo cada vez que se encuentra uno.

Esto refuerza la experiencia del survival. Cada escenario debe ser recorrido meticulosamente en búsqueda de recursos, si es que queremos progresar. Y en el ínterin, podemos toparnos con notas, cartas y otras curiosidades que nos permiten aprender más sobre este universo.

La distribución es simple: un menú superior con todas las armas obtenidas y los espacios disponibles para nuevas. Al seleccionar una, debajo vemos a la izquierda las mejoras posibles y a la derecha una breve descripción de en qué consiste la mejora. De vuelta, conocer estos detalles nos permite personalizar el juego y formular la estrategia

También detalla en blanco los recursos disponibles, y en rojo cuando nos está faltando algo para mejorar. Sin ningún tipo de adorno o espectáculo. Cada elemento dentro del menú es necesario para su propósito.

Esa es una revisión general de los elementos más significativos del diseño de interfaz en esta pieza. Lo más importante, a mi entender, es que se pudo implementar un sistema de producción (Wireframe, implementar, probar, iterar y skin) tan eficiente que lograron una obra maestra en tan sólo ocho meses de trabajo.

Esto funcionó de la mejor manera. Lograron una interfaz de usuario mínima y fluida, perfectamente funcional al juego. El mejor diseño, es el que no se nota.

The Last of Us: Parte II

Para la segunda vuelta de esta historia tuvimos que esperar siete años. Si cumplió o no las expectativas, si gustó o no, se lo dejo a otres analistas. A mi me interesa cómo mejoró la experiencia de usuario e interfaz.

Avanzando hacia la próxima generación de consola, se siguen utilizando las funcionalidades plantadas en ese primer juego, manteniendo la identidad pero mejorando los procesadores en los modelos mentales de usuaries, y demás obligando al diseño a ir un paso más adelante.

Las mejoras gráficas son impresionantes. Venas saltadas que responden al enojo del personaje; qué tan rojos o lacrimosos podían llegar a estar los ojos; reacción de los personajes al ambiente y a las diferentes conversaciones; el enrojecimiento de la piel; ropa mojada hasta cierto nivel; y más.

Lo primero que se puede notar es que la interfaz es cada vez más inmersiva, y los elementos indicativos más intuitivosNo hay una luz sobre el piso diciendo a dónde ir sino que se resuelve con otro personaje guiándote por el escenario mientras habla casualmente. Puede ser una luz más brillante entre las hojas o una tonalidad especial sobre el ambiente.

Spoiler Alert!!!!! Por ejemplo, en esta escena la cola de un dinosaurio tiene una saturación especial (tirando una pista de que te podés subir) y Joel se para específicamente al lado de la punta, indicando hacia donde ir. Es mucho más sutil, más inmersivo.

El camino que buscaron fue profundizar el minimalismo, y en gran medida es un acierto. El juego es bellísimo, y está tan lleno de detalles que no quiero perder el tiempo viendo una interfaz intrusiva. Peeeero… nunca hay que perder de vista que un exceso de minimalismo repercute directamente en la usabilidad. Si la UI es tan finita e invisible que no puedo ver a dónde disparo, estamos en un problema.

También se introduce un sistema de armas cuerpo a cuerpo. Esto permite más versatilidad en el juego y siempre acompaña a la historia. En este universo han pasado años desde que se fabricó la última bala, y los infectados no disparan. Había que ingeniárselas. 

A diferencia de las armas largas y de corto alcance que el jugador encuentra una vez y puede usar hasta el final del juego, las armas cuerpo a cuerpo tienen un límite de uso. El jugador las encuentra y puede usarlas una cantidad limitada de veces. El límite es visible en la pantalla y tiene mejoras posibles. La rueda de ítems con el D-Pad se mantuvo, pero la eficiencia pasó por mostrar todos los elementos al mismo tiempo, y poder seleccionarlos más rápido. 

En cuanto a las mesas de trabajo, se dividió el menú en dos: por un lado las armas posibles de mejorar, y por otro el menú específico de cada arma. De vuelta, la idea es bajar la carga de memoria en le usuarie y a la vez, que te concentres en esas animaciones preciosas.

¿Y la accesibilidad? Estas semanas encontré este meme sobre diseño UX/UI muy pertinente. Y es la realidad del diseño de interfaces. La mayoría de los diseñadores (y obviamente, de quienes aprueban estos diseños) se olvidan por completo de la experiencia total y muuuuy en el fondo del mar queda olvidado el cadáver de la accesibilidad.

Bueno, eso no es aceptable. Y Naughty Dog hizo un gran trabajo en este aspecto.

Una de las cosas más impresionantes del juego es lo grandes y variadas que son sus opciones de accesibilidad. Se puede navegar por el mundo en gran parte mediante el sonido o acercar la pantalla como si estuviera usando un teléfono inteligente. Hay una asombrosa variedad de cosas para elegir.

Para nosotros, la accesibilidad consiste en eliminar las barreras que impiden que los jugadores completen un juego”, dice. “No se trata de simplificar un juego o hacerlo fácil. ¿Qué necesitan nuestros jugadores para jugar el juego en paridad con todos los demás?”, comenta Emilia Schatz, lead designer.

Hay alrededor de 60 opciones de accesibilidad diferentes en el menú del juego, que cubren aspectos como controles, ayudas visuales, pistas de audio, navegación, recorrido y combate. Algunas son características bastante estándar, como poder hacer que la interfaz de usuario sea más grande o modificar los subtítulos para los usuarios daltónicos. Otros elementos están mucho más integrados. Hay una opción de texto a voz que lee todo en el juego, desde los menús hasta las notas que Ellie recoge en su viaje, y señales de audio para indicar cuándo hay elementos cerca o una repisa por la que puedes escalar. 

Un nuevo modo de alto contraste cambia las imágenes por completo para los jugadores con baja visión, lo que hace que el mundo se vuelva gris claro y que los aliados se vuelvan azules y los enemigos rojos, cosa que se inspiró en el filtro desbloqueable de “visión de ladrón” de Uncharted 4. Incluso puede utilizar el panel táctil del controlador Dual Shock para acercar y ver el mundo más de cerca.

The Last of Us: Parte II ha demostrado que este tipo de características son vitales para abrir los juegos del estudio a una audiencia mucho más amplia. “Se siente como una falla de nuestra parte si un jugador llega a una parte del juego que es inaccesible para él de alguna manera”, dice Gallant (game designer) “Nos corresponde a nosotros ser los que encontremos las soluciones. La accesibilidad simplemente mejora estos juegos “, afirma.

Me encantó este diseño UX/UI. El esfuerzo realizado para tratar de reducir la interfaz de usuario al mínimo es increíble: parece que no estamos en el juego, estamos en una historia. Así mismo, ver como trabajaron cada parte del diseño para poder hacerlo accesible es un ejemplo a seguir para otros estudios.

Diseñadora gráfica UBA, ilustradora y experta en cosas. Con una confianza y autodeterminación superiores a las de Milazzo, si la mandamos, ella solita nos diseña un Arkham nacional y popular. Cinéfila, lectora, neófita gamer y consumidora de cuanto dato inútil haya.

Advertisement

Suscribite al Newsletter

Tendencias

Copyright © 2018 PressOver.news - Buenos Aires, Argentina.