El puntero del mouse tiene una larga historia de ser una parte fundamental de la interfaz moderna. Los punteros del sistema Windows y Mac han cambiado poco en las últimas décadas. Por otro lado, los videojuegos tienen un historial de reinventar el puntero. Una alta proporción de los videojuegos de escritorio modernos utilizan punteros personalizados que están marcados por sus experiencias. Pero, ¿qué se necesitaría para diseñar un puntero de videojuego que también funcione en una interfaz similar a un sistema operativo como Roblox? Roblox es una plataforma donde los usuarios pueden crear y explorar experiencias virtuales inmersivas. Como sirve como un metaverso perfecto entre juegos y experiencias, la aplicación Roblox presentó un desafío de UX único en el que estaba emocionado de trabajar.
He visto los términos «cursor» y «puntero» usados indistintamente. Principalmente optaré por «puntero» para distinguirlo de los cursores de texto, que se utilizan en campos de entrada e interfaces de comando.
El problema
El nuevo cliente de escritorio Roblox estaba en proceso, pero a la aplicación le faltaba un elemento crucial de UX: los cambios de estado del mouse. A diferencia de cómo navegar y jugar son experiencias separadas para la mayoría de los juegos de escritorio, el nuevo cliente de escritorio Roblox permite a los usuarios navegar y jugar sin problemas en una sola ventana. Sin embargo, la experiencia del puntero del mouse necesitaba trabajo. El estado «Seleccionar enlace» o «Pasar el cursor» tenía prestaciones visuales bajas. Y el estado «Selección de texto», que aparece cuando un usuario se desplaza sobre un campo de entrada de texto, estaba completamente ausente. Esta fue una oportunidad para rediseñar y mejorar el trío del puntero del mouse: Predeterminado, Enlace (Hover) y Texto.
Diseñar un puntero para un sistema operativo y un videojuego es un desafío debido a los diferentes casos de uso. El cursor de un sistema operativo debe ser de un color neutro, con un contraste lo suficientemente alto para que sea visible, lo suficientemente práctico para el uso diario y no demasiado llamativo como para causar fatiga visual. El cursor de un videojuego puede pasar por alto muchas de estas reglas porque a menudo coincide con la apariencia de la marca para brindar una experiencia inmersiva. Pero, ¿existe una forma exitosa de combinar estos dos atributos?
Punteros de mouse de Roblox 2012. No había puntero de texto, por lo que se usó el puntero de desplazamiento.
Echa un vistazo al puntero de 2012 de Roblox. Fue en la dirección correcta al usar colores neutros en escala de grises. Sin embargo, el estado flotante usaba un puntero negro, lo que confundía a los nuevos usuarios en una computadora Mac. Otro error es que los hombros de la flecha se dibujaron utilizando el eje vertical en lugar del eje de la cara de la flecha. Esto significa que la flecha es asimétrica en aproximadamente un 6,8%.
El puntero predeterminado no era simétrico a lo largo del eje de la cara de la flecha.
Mira y siente
Aquí viene la parte divertida. ¿Cuáles son las tendencias actuales en punteros de videojuegos de escritorio? Compilé algunos de los indicadores de juegos más populares y los clasifiqué por gráficos y practicidad. La mayoría de los indicadores de juegos optan por gráficos de marca. El puntero de Roblox tendría que ser un poco más gráfico que el puntero del sistema operativo común, sin dejar de maximizar la practicidad.
Punteros de ratón de los mejores juegos de escritorio de la actualidad. ¡Mira cuántos puedes reconocer!
El puntero de Roblox no solo debe verse adecuado en todos los géneros de experiencia, sino que debe complementar nuestro sistema de diseño, uiBlox. El sistema de diseño uiBlox actualmente usa íconos #FFFFFF en un tema oscuro predeterminado. Nuestro estilo utiliza curvas de radio de 2px y una proporción aproximada de 3:1 de redondeo a cuadrado en cada ícono. Para el cursor de mano, me inspiré en nuestro nuevo arte de gestos ilustrado por uno de nuestros increíbles diseñadores, amy liu.
Izquierda: el estilo de iconografía de Roblox utiliza principalmente esquinas redondeadas con poca nitidez. Derecha: diseño de emoticón de Roblox por Amy Liu.
poniendolo todo junto
Después de recibir comentarios de otros diseñadores, desarrollamos el conjunto final de sugerencias para Roblox. El nuevo puntero predeterminado ahora es simétrico y agrega una cola de flecha para mayor visibilidad. Una sombra paralela ofrece modernidad y profundidad en un entorno 3D. El nuevo puntero flotante aumenta la accesibilidad al diferenciar la forma del puntero estándar. Finalmente, el puntero de texto cambia de forma a un cursor #FFFFFF de 1px para contrastar nuestro tema oscuro. El trazo oscuro crea visibilidad en nuestro tema claro y otras experiencias de Roblox con fondos claros.
Nuevos punteros de mouse 2021 de Roblox.
Un rediseño es tan efectivo como los comentarios de los usuarios. Encuestamos a 215 desarrolladores de Roblox sobre lo que tenían que decir sobre estos nuevos cursores. Una mayoría significativa estuvo de acuerdo en que los cursores eran una mejora tanto en estética como en usabilidad. La estadística más interesante es la respuesta de nuestros desarrolladores al puntero de texto. Del impresionante 89% que estuvo de acuerdo en que fue una mejora general, el 74% de ellos estuvo totalmente de acuerdo con esa afirmación. Saber que nuestros usuarios tienen una reacción positiva a estas mejoras de UX nos ayudará cuando desarrollemos el resto de nuestro conjunto de punteros, así como otros elementos de UI en la experiencia.
Una gran mayoría de los desarrolladores de Roblox están de acuerdo o muy de acuerdo en que los nuevos punteros son una mejora en la usabilidad y la estética.
A medida que Roblox se expande más allá de los juegos hacia una plataforma de comunicación, social e incluso transaccional, este aspecto del producto ayudará a guiar al usuario mientras navega entre la aplicación y sus experiencias. ¡Nuestra esperanza es que esto sirva como un patrón predominante para los metaversos digitales en el futuro!
¿Está interesado en unirse al equipo de diseño de Roblox y resolver problemas como este? Consúltenos en corp.roblox.com/careers/ para las últimas oportunidades.
Derek Wong es diseñador visual en Roblox. Trabaja en el sistema de diseño de Roblox, que da forma a la interfaz de usuario del sitio web y la aplicación de escritorio de Roblox. Ni Roblox Corporation ni este blog respaldan ni respaldan ninguna empresa o servicio. Además, no se garantiza ni promete la precisión, confiabilidad o integridad de la información contenida en este blog.
©2021 Roblox Corporación. Roblox, el logotipo de Roblox y Powering Imagination se encuentran entre nuestras marcas comerciales registradas y no registradas en los EE. UU. y otros países.
