Equilibrio de estilo y coherencia

Nota: Este artículo es un borrador temprano para Windows 10 RS2. Los nombres de características, la terminología y la funcionalidad no son finales.

Al diseñar un producto, es el promotor del cliente. Todos nos esforzamos por crear el mejor diseño adecuado y fiel a nuestra intención. En este artículo se explora el equilibrio entre las convenciones siguientes para crear una experiencia de usuario coherente frente a la creación de características y experiencias únicas que diferencian la aplicación.

La importancia de la coherencia

¿Por qué importa la coherencia? La coherencia puede facilitar el uso de una aplicación. Una parte clave del buen diseño es la capacidad de aprendizaje; tener un diseño coherente entre aplicaciones reduce el número de veces que el usuario final tiene que "volver a aprender" a usarlos. Mira los ejemplos reales: un pedal de gas siempre está a la derecha, una perilla de puerta siempre gira en sentido contrario a las agujas del reloj para abrir, un signo de parada siempre es rojo.

Sin embargo, hacer que una aplicación sea coherente no significa que todas las aplicaciones se vean y se comporten de forma idéntica entre sí. Volviendo a ejemplos reales, hay un número casi infinito de diseños de silla, pero muy pocos requieren volver a aprender a sentarse. Esto se debe a que los elementos importantes(la superficie de estar) son lo suficientemente coherentes para que el usuario los comprenda.

Uno de los desafíos para crear un buen diseño de aplicaciones es comprender dónde es importante ser coherente y dónde es importante ser único.

Espectro de coherencia

Resulta útil pensar en la coherencia como un espectro con dos extremos opuestos:

Entre los elementos de experiencia conocidos se incluyen:

• Paradigmas de interfaz de usuario establecidos (comportamiento en un clic del mouse, presionando y manteniendo presionado un elemento, iconos que tienen un aspecto similar)
• Elementos de tu marca que quieres aplicar en todos los productos (tipografía, colores)

Los diferenciadores incluyen:

• Elementos que forman el "alma" única de los productos
• Elementos que te ayudan a adaptar la experiencia al factor de forma deseado

Vamos a crear un modelo de diseño tomando este espectro y lo aplica a los elementos principales de una aplicación.

En este modelo, las capas base proporcionan una base probada de coherencia, mientras que las capas superiores se centran en la flexibilidad y la personalización.

1. Los conceptos básicos de la aplicación componen la primera capa de nuestro modelo: la cuadrícula de diseño, la paleta de colores, las convenciones de tipografía y los estilos de icono. Estas características fundamentales deben aplicarse de forma coherente.

2. Para la segunda capa, UWP proporciona un conjunto básico de controles comunes que equilibran la eficacia con flexibilidad. También hemos creado directrices para ayudar a establecer una voz y un tono coherentes, usando las mismas palabras para describir y guiar a las personas a través de experiencias de la aplicación. Hemos creado un conjunto de patrones que las aplicaciones pueden usar para su diseño, para asegurarnos de que nuestros diseños se pueden escalar en diferentes dispositivos y entradas de tamaño.

3. La capa tres es donde se adapta la navegación a diferentes dispositivos y contextos. Por ejemplo, la forma de navegar con la función táctil en un teléfono probablemente será diferente de en un monitor de 32" con teclado y mouse o hololens con gestos y 100 puntos de toque en una superficie de 84".

4. La capa cuatro es donde defines tu personalidad de marca. ¿Qué elementos de diseño de firma refuerzan su marca y lo diferencian de la competencia? Aquí también se adapta la aplicación para distintos usuarios finales. Es tu aplicación para jugadores, para trabajadores de la información o estudiantes o educadores de K-12. ¿Cuáles son las necesidades únicas de estos diferentes clientes y podemos mejorar el diseño para ellos? No solo hagas lo mismo, continúa buscando crear más valor para tus diversos clientes.

Principios de diseño

Para usar este modelo de forma eficaz, necesitamos un conjunto de principios de diseño que nos ayuden a hacer los compromisos adecuados. Estos son nuestros principios de coherencia de diseño en funcionamiento:

Si tiene el mismo aspecto, haga que actúe igual

• Cuando el usuario ve un cuadro de texto o el control hamburguesa, probablemente esperará que se comporte de la misma manera en diferentes dispositivos. Si tiene una buena razón para desviarse de un comportamiento establecido, establezca también las expectativas del usuario haciendo que parezca diferente.

Si un elemento tiene un aspecto muy similar a un elemento o convención existente, considere la posibilidad de convertirlo en el mismo

• Necesita un icono de "nuevo documento". Por qué diseñar uno nuevo que sea un poco diferente, cuando se puede usar uno que ya reconoce el usuario.

La facilidad de uso supera la coherencia

• Es mejor ser utilizable que ser coherente. En algunos casos, es posible que tenga que desarrollar nuevos controles o comportamientos para ayudar a la facilidad de uso. El uso del teléfono con una mano tiene desafíos únicos. También trabajar con una pantalla de 80” ayuda. Un buen diseño hace que el usuario se sienta experto.

La interacción es importante

• No lo hagas aburrido. Si todo es plano y el mismo color con cuadrados, ¿nuestros clientes querrán recogerlo y usarlo? Crea alegría. Introduce nuevos elementos que sorprenden sin romper la capacidad de aprendizaje.

Los comportamientos de evolucionan

• Esta es la complicada: a medida que la industria evoluciona las nuevas convenciones se establecen. Es posible que los comportamientos actuales se desvanezcan y que muchos de nuestros comportamientos coherentes necesiten adoptar nuevos estándares. Observa el gesto de pellizcar y hacer zoom. Antes era común esperar aumentar o reducir con la interfaz de usuario +/-; mientras que en la interfaz de usuario moderna se espera pellizcar y hacer zoom. Examine los nuevos paradigmas de experiencia y evolucione.