El diseño digital nunca se hace: Correo y calendario de Windows 10 en evolución

Cómo nuestro equipo hizo que la funcionalidad de los fanáticos sea más fluida

Antes y después de la animación de la aplicación rediseñada.

Hace dos años, introdujimos aplicaciones de Correo y Calendario completamente reescritas y rediseñadas en Windows 10. (No en las pantallas que se muestran arriba). Si bien las aplicaciones eran funcionales y de aspecto moderno, aún carecían de un aspecto y una sensación más refinados y agradables. En la era del "software como servicio", podemos mejorar nuestras características y diseños con una cadencia que los clientes esperan. Incluso antes del lanzamiento de 2015, comenzamos a pensar en las próximas iteraciones de la aplicación.

Nuestro rediseño inicial estableció los objetivos para alinearse visualmente con Windows, reducir el cromo, darle a la aplicación un aspecto fresco, más refinado y hermoso, al tiempo que eleva la barra de "artesanía" (el nombre interno de nuestros esfuerzos). El equipo estableció pautas de diseño basadas en un uso intencional de la tipografía, el color y el movimiento, para transmitir una aplicación encantadora y altamente funcional.

El tiempo juega un papel en cada historia

No fue hasta principios de 2017 que los recursos de ingeniería estuvieron disponibles para trabajar en nuestro rediseño. Casi al mismo tiempo, el equipo de Fluent (nombre en código NEON) se estaba lanzando e impulsando activamente la adopción del nuevo Sistema de diseño fluido en las aplicaciones de Microsoft. Eso significaba que teníamos un desafío de diseño renovado; (Gracias Satya) repensar lo que guardamos, lo que dejamos atrás y cómo nos volvimos más fluidos en el futuro.

Si bien el lanzamiento de Fluent fue emocionante, nuestro equipo permaneció consciente de que estábamos rediseñando aplicaciones que tenían millones de usuarios y fanáticos. Alterar las cosas a las que estaban acostumbrados, como la barra de título, la cinta y la funcionalidad clave, tuvieron que considerarse cuidadosamente. Obviamente, no queríamos alienar a nuestros usuarios, y no estábamos interesados ​​en ningún paso atrás en la usabilidad.

Una idea que obtuvimos al principio de las pruebas de usuario fue que "diferente" no necesariamente significaba "problema".

La integración de nuevas señales de los primeros trabajos de correo de Fluent Design con las ideas de rediseño antes mencionadas resultó ser bastante sencilla, ya que algunos de los principios generales ya estaban alineados. Incluso algunos de los elementos de diseño Fluent, a saber, "acrílico" con su tratamiento superficial translúcido, ya estaban presentes de alguna forma en nuestra aplicación existente (panel de navegación semitransparente).

Actualización temprana de Actualización temprana de

Elementos de diseño fluidos implementados con correo y calendario

Las exploraciones de diseño provenientes del equipo de Fluent recientemente lanzado no cumplieron con todos los requisitos que teníamos para nuestras aplicaciones en términos de flujo de trabajo, personalización, localización, accesibilidad, etc. Nuestro equipo examinó cada uno de esos requisitos, aplicando aspectos del diseño de Fluent Sistema en nuestras propias exploraciones.

Los primeros elementos de diseño Fluent que buscamos implementar fueron "acrílico", que es el tratamiento de superficie transparente y vidrioso para paneles y "revelar", el efecto de luz que aparece al pasar el mouse para revelar elementos accionables. Cada uno de ellos presentó su propio conjunto de desafíos y nos mantuvimos en estrecha comunicación con Fluent y los demás equipos de Office, aprendiendo qué funcionaba y qué no.

Exploración temprana para Fluent Mail en tema ligeroExploración fluida temprana para el calendarioExperimentar con una barra superior azul, alineándose más con la marca Outlook

Acrílico - Fondo o sin fondo, esa es la pregunta

El acrílico es un componente del sistema de diseño fluido que permite la incorporación de luz, profundidad, movimiento, material y escala en la interfaz de usuario. Agrega una textura (material) parcialmente transparente a ciertos elementos de la interfaz de usuario, como los paneles. Con su introducción, una pregunta natural que surgió fue: “Si puedo ver a través de él, ¿qué veo? ¿Qué hay en el fondo? ”Después de haber establecido una imagen de fondo como predeterminada en nuestra aplicación, nos preguntamos:“ ¿Nuestro fondo choca con el fondo del escritorio? ¿Vamos a deshacernos de nuestra imagen de fondo en favor de la imagen de escritorio del usuario? ¿Qué pasa con otras ventanas de aplicaciones en segundo plano que podrían no verse bonitas? ¿Cómo funciona con los colores (de la marca)? ”Esto condujo a una variedad de exploraciones.

Las primeras exploraciones de Más tarde Más tarde

Finalmente, decidimos a favor de la foto de fondo en la aplicación porque sabíamos que deleitaba a nuestros usuarios. También redujo el desorden de fondo visual en el estado vacío cuando no se selecciona ningún correo electrónico. (Sin embargo, nuestros usuarios tienen la opción de cambiar la imagen o desactivarla en la configuración de personalización).

Revelar en blanco con efecto

¿Revelar o no revelar?

Reveal es un efecto de iluminación que aporta profundidad y enfoque a los elementos interactivos. Al mostrar bordes de controles y botones al pasar el mouse, revela elementos accionables y ayuda a comprender la interfaz de usuario. Si bien el concepto de revelación es genial, el diablo siempre está en los detalles. En la primera iteración, se revelaron no solo elementos interactivos expuestos, sino que también se expusieron los bordes de los controles en los paneles vecinos y se prestó atención a las diferentes alineaciones de controles previamente invisibles. Por ejemplo, los elementos en el panel de navegación izquierdo no se alinearon necesariamente con los elementos de la lista de mensajes porque se desplazan de manera diferente. Eso, a su vez, creó una especie de efecto de ladrillo visible con revelación que agregó más ruido visual a la aplicación, algo de lo que realmente queríamos deshacernos. Entonces, para evitar todo lo que decidimos desactivar revelar en la lista de mensajes, solo aplíquelo en el panel de navegación y también desactive revelar en líneas verticales en la lista de carpetas. Dicho todo esto, sabemos que el equipo de diseño de Fluent está trabajando arduamente para mejorar la revelación en función de nuestros comentarios y en el futuro volveremos a evaluar su uso en otros lugares de nuestra aplicación.

"¿Cómo muevo mi ventana?"

Una parte clave del rediseño fue proporcionar al usuario una jerarquía de información clara y reducir el desorden visual al eliminar la barra de título de la ventana de la aplicación. Aunque no solo es estéticamente agradable, reduce las llamadas a la acción presentes en la pantalla y permite al usuario centrarse en su contenido.

Una preocupación obvia era que este cambio podría causar confusión al eliminar la capacidad visual de los usuarios sobre cómo mover la ventana de la aplicación. Nuestro diseño aún permitía a los usuarios mover la aplicación haciendo clic y arrastrando los 32 píxeles superiores, pero nos preocupaba que los usuarios pudieran confundirse si la capacidad visual no estaba presente. Debatimos llevar a cabo un estudio de usuarios para determinar las consecuencias de este cambio, pero nos dimos cuenta de que, dado que otras aplicaciones en Windows 10 habían realizado cambios similares anteriormente, podríamos comunicarnos con ellos y ver si sus usuarios habían experimentado dificultades cuando se eliminó la barra de título de su aplicación.

Lo que descubrimos fue muy alentador. El equipo de Edge compartió la experiencia que tuvieron al usar la barra de título de su aplicación exclusivamente para organizar pestañas de páginas web. Nos dijeron que los comentarios iniciales de los usuarios fueron mixtos, y aunque algunos usuarios inicialmente tenían reservas, esos comentarios se habían disipado rápidamente y la opinión general sobre la elección del diseño fue positiva.

Cuando Mail and Calendar instituyó el cambio, no vimos prácticamente ningún comentario sobre la eliminación de la barra de título. Por el contrario, los comentarios se refieren a la aplicación como "moderna" y "nueva". Resultó que arrastrar la parte superior de la ventana de una aplicación era un patrón tan común que nuestra aplicación permanecía completamente utilizable sin ese elemento de interfaz de usuario heredado.

Exploración con carpeta desplegable

Momentos de verdad en código

Después de que diseñamos todo y entregamos especificaciones y comps a nuestro socio en ingeniería, surgieron los críticos "momentos de verdad en el código". A menudo hay deltas cuando se trata de fuentes, colores, valores de transparencia, etc. entre el diseño en un programa de diseño y Edificio en código. Aplicar y ajustar en la realidad se convierte en una parte esencial del proceso trabajando directamente con los ingenieros para resolver todos los pequeños problemas.

A través de la fase de prueba (llamada dogfood en Microsoft), realizamos múltiples iteraciones, ya sea para abordar cosas que obviamente habíamos pasado por alto o cosas relacionadas con la accesibilidad en función de los comentarios. Estos problemas incluyeron contraste de color de fuente en acrílico, selección de color con acrílico real en el código, así como pruebas con diferentes imágenes de fondo.

(Los colores de fondo para los elementos seleccionados en el panel de navegación fueron importantes como solución alternativa en escenarios donde Fluent no es compatible debido a restricciones de hardware o software o si el usuario lo desactiva).

Recordatorio: los diseñadores no son los clientes

Un punto constante de discusión había sido el estado seleccionado para las cuentas y la carpeta en el panel de navegación izquierdo. Los controles de diseño fluido utilizan un pequeño indicador de selección vertical a la izquierda del elemento seleccionado que no se parece a la barra de correo no leída comprobada en la lista de mensajes. A pesar de las preocupaciones iniciales de que las apariencias similares pero los diferentes significados podrían confundir a los usuarios, y después de múltiples iteraciones de diseño para el marcador no leído y el estado seleccionado, seguimos adelante y lo implementamos y probamos en comida para perros. Curiosamente, hubo muy pocos comentarios sobre esto. Los usuarios no tuvieron problemas para distinguir los dos.

Las pruebas de usuario siempre son un buen recordatorio de que las cosas que los diseñadores perciben como inconsistencias podrían no ser percibidas como tales por los usuarios. En una de las discusiones con un usuario escuché "Es algo que está marcado porque es importante". Aprendimos que cuando se ve en el contexto de uso, lo que percibimos como inconsistencias se vuelve menos importante y los usuarios se adaptan rápidamente.

Detalles: líneas en la lista de mensajes

Un buen ejemplo donde tratamos de adherirnos a los principios de diseño fluido al celebrar solo el contenido y eliminar la mayor cantidad de cromo posible de la interfaz de usuario son las líneas horizontales en la lista de mensajes. A los usuarios les resultaba difícil distinguir entre mensajes individuales y, en función de los comentarios, tuvimos que recuperar gradualmente las líneas para aumentar la usabilidad. Resultó que el solo uso del espacio para separar los mensajes entre sí no era lo suficientemente claro, especialmente porque habíamos introducido una nueva característica de pequeñas vistas previas de archivos adjuntos (fotos) en la lista de mensajes y los mensajes con diferentes alturas comenzaron a sangrar en cada uno otro. Del mismo modo, reintrodujimos la línea entre la lista de mensajes y el panel de lectura. A veces el ojo necesita esas señales visuales sutiles para no tropezar.

Diseñar una aplicación es una historia en evolución

El diseño de las aplicaciones de hoy es una instantánea en el tiempo. El diseño mejorará y evolucionará constantemente. Ya estamos trabajando en el ajuste con configuraciones de densidad de información, animaciones conectadas fluidas y un tema ligero. ¡Espere ver más evolución de Fluent Design y las aplicaciones de Windows Mail y Calendar en los próximos meses y años!

Estas aplicaciones son solo dos capítulos en una historia mucho más amplia, donde el diseño fluido proporciona inteligencia y consistencia en aplicaciones y dispositivos de 0D a 4D. Lo mejor a considerar como diseñador es esto: si está chateando con Cortana en Invoke, usando el iniciador en su teléfono Android, entintando con Edge en su Surface o creando con Paint 3D en su Cliff House con una pantalla montada en la cabeza, Fluido El diseño asegura que usted (y sus usuarios) tendrán experiencias consistentemente encantadoras.

Fluido es un esfuerzo colaborativo

¡Descubre más sobre Fluent Design y únete a la diversa comunidad de creadores!

Echa un vistazo a #FluentFridays en twitter @MicrosoftDesign

Siga Microsoft Design en Dribbble, Twitter y Medium

Sigueme en Twitter

Gracias al equipo

Esta historia refleja el esfuerzo y la dedicación de una gran cantidad de equipos y compañeros de equipo. Adopté la adopción de Mail y la comunicación general con los equipos de Fluent y Office para el marco y los componentes compartidos mientras Hiroshi Tsukahara lo miraba desde la perspectiva del Calendario. Chris Bimm, quien también contribuyó a este artículo, dirigió el esfuerzo desde el lado del primer ministro. ¡Andrew Falk ayudó con el diseño de movimiento y Barry Li fue un gran colaborador de desarrollo con más paciencia de la que puedas imaginar! También gracias a todos los miembros del equipo de PM, ingeniería y diseño que no se mencionan aquí, pero sin su contribución, esto no hubiera sido posible. Por último, pero no menos importante, un agradecimiento especial a March Rogers y Jason Blackheart, ex colegas que sentaron las bases para esto.

Para mantenerse informado con Microsoft Design, síganos en Dribbble, Twitter y Facebook, o únase a nuestro programa Windows Insider. Y si está interesado en unirse a nuestro equipo, diríjase a aka.ms/DesignCareers.