Descifrando el nuevo lenguaje de diseño de YouTube
28 Nov, 2022 – [[read-time]] mins de lectura
Bienvenido a la última entrega de nuestra Innovation Series, un vistazo detrás de escenas de cómo las funciones de YouTube llegan a tu pantalla, según lo que cuentan las personas que lo crean.
A estas alturas, probablemente hayas notado que YouTube se ve y se siente un poco diferente. A finales de octubre, lanzamos una actualización de diseño más limpia y envolvente que, hasta ahora, ha sido recibida positivamente.
Desde el principio, queríamos que los cambios de diseño se sintieran como una evolución natural de nuestro producto, así que nos embarcamos en un viaje, creamos cientos de conceptos y los probamos con decenas de miles de usuarios a través de la investigación, la experimentación y los estudios diarios. En el camino, obtuvimos los puntos de datos para confirmar, informar y finalizar nuestras decisiones de diseño.
Para abrir un poco el telón, analicemos cómo implementamos actualizaciones en algunos elementos fundamentales e introdujimos un nuevo patrón visual, el modo ambiental, para mejorar nuestras colecciones y observar la experiencia.
Botones redondeados y miniaturas
Cuando YouTube nació hace 17 años, las capacidades web de escritorio no eran tan avanzadas como lo son hoy. Ahora, estamos diseñando para una interacción mucho más compleja y sofisticada, ya sea viendo un video de pantalla completa, deslizando fotos o comentando una publicación.
Para dar inicio a nuestra actualización visual, decidimos abordar dos elementos muy visibles en nuestro ecosistema: botones y miniaturas de video. Comenzamos a investigar y probar cosas tan pequeñas como variaciones de píxeles para crear una interfaz de usuario más amigable y más táctil. Eventualmente, confirmamos nuestra teoría de que las formas redondeadas se sienten más amigables, atractivas y cómodas para hacer tap.
Dicho esto, redondear objetos en nuestra interfaz de usuario no fue tan simple como elegir un número y aplicarlo a radii. Tuvimos que tener en cuenta algunas cosas, como las miniaturas insertadas y los contenedores. Así que, nuestro diseñador principal en el equipo de diseño del sistema, Marshall Bock, ideó una filosofía de redondeo que escala el radii del elemento de la interfaz de usuario con respecto a su ubicación, tamaño y relación con otros objetos en la pantalla.
Piensa en mirar televisión por la noche y cómo la habitación se llena de colores brillantes y vibrantes. Tu entorno se convierte rápidamente en una extensión de la fuente de luz y transforma el espacio oscuro”
Color y luz
Al trabajar en un producto principalmente de video, el equipo sintió que había una oportunidad de explorar un concepto que capturaba la magia de una experiencia teatral.
Piensa en mirar televisión por la noche y cómo la habitación se llena de colores brillantes y vibrantes. Tu entorno se convierte rápidamente en una extensión de la fuente de luz y transforma el espacio oscuro en una experiencia de vista envolvente. Pensamos que era un efecto realmente genial, por lo que exploramos varias formas de replicarlo dentro de la configuración del tema oscuro de nuestro producto.
¿De dónde viene la fuente del color?
Otro desafío fue descubrir la fuente del color mientras nos aseguramos de que el video y la miniatura siguieran siendo las mayores influencias visuales en nuestras páginas de visualización y listas de reproducción.
Para sentirse auténtico, el brillo ambiental tenía que incluir todos los colores utilizados en una sola miniatura de un cuadro de video en constante cambio. Probamos muchas formas diferentes de extracción de color, pero a medida que profundizamos en la implementación, sentimos que algunas técnicas no escalarían para adaptarse a nuestros casos de uso deseados.
Así que volvimos al tablero de dibujo y la respuesta estaba justo frente a nuestros ojos: miniaturas y storyboards (vista previa de fotogramas del video que se muestra durante la scrubbing experience).
Nos emocionamos y exploramos formas de usar los recursos del storyboard en bruto, que sentimos que eran realmente la fuente de color más precisa y auténtica. En colaboración con Ingeniería, extrajimos, estiramos, difuminamos y escaneamos los recursos de la miniatura y el storyboard para brindar la experiencia ambiental que ves en nuestro producto hoy.
Dispositivos de gama baja vs alta
Queríamos ofrecer excelentes experiencias a dispositivos de gama alta y baja, pero sabíamos que la carga adicional del efecto del storyboard sería difícil en algunos dispositivos. Así que recurrimos a nuestra nueva tecnología llamada "lithium", que se lanzó el año pasado, y la aprovechamos para orientar las experiencias a clases de dispositivos específicos. Pero nuestra experiencia con dispositivos de gama baja aún necesitaba un impulso adicional para imitar un brillo neutro emitido por los televisores en una habitación.
Uno de nuestros diseñadores principales para la superficie de vista, Dominique Brown, ideó una gran solución: las escalas Kelvin. Descubrimos cómo asignar el rango de temperatura de color Kelvin a una paleta de colores que representa los tonos fríos o cálidos agregados que se usan en el video. Cuando se aplica este color neutro en relación con el cuadro de video, el ojo se ajusta, percibiendo más tonos fríos para cuadros fríos y tonos cálidos para cuadros cálidos.
Más allá de los números
Los comentarios de los espectadores también jugaron un papel muy importante en nuestro proceso de diseño. Nuestro equipo de UXR fue pionero en un programa que combina métodos cualitativos y cuantitativos para medir la experiencia de si algo se siente más moderno.
Hicimos que nuestros usuarios miraran un control y nuestro concepto y les preguntamos: ¿el cambio se siente más moderno, limpio o atractivo? Cuando realizamos docenas de estudios, vimos un aumento significativo en la sensación de nuestros usuarios de que el producto alcanzó estas marcas. Por primera vez, pudimos atribuir un valor a la estética y al diseño visual.
¿Qué sigue?
No nos detendremos aquí. A continuación, nos centraremos en los patrones de diseño básicos, como mejorar el equilibrio y la alineación a través de actualizaciones de diseño y profundizar el efecto ambiental del color.
A nivel de marca, estamos entusiasmados de comenzar a identificar momentos de celebración dentro de la experiencia del producto para construir una conexión más significativa con nuestros usuarios. Nuestro objetivo, sin embargo, seguirá siendo el mismo: mejorar los productos de YouTube para que se sientan YouTubey de la manera más natural. En otras palabras, no estamos hablando de una revolución, estamos hablando de una evolución.