Compartir vía

Recomendaciones para seguir los estándares de diseño

  • Artículo

Se aplica a esta recomendación de lista de comprobación de optimización de experiencia de buena arquitectura de Power Platform:

XO:02 Siga los estándares, convenciones y directrices establecidos. Utilice patrones de diseño comunes. Mantenga la coherencia en los elementos de diseño, la terminología y las interacciones en toda la interfaz. Utilice patrones y estándares uniformes para guiar a los usuarios a través de la interfaz y crear una experiencia de usuario coherente.

Esta guía describe las recomendaciones para establecer estándares de diseño, convenciones y procedimientos recomendados para desarrollar interfaces de usuario que mejoren la experiencia del usuario y el éxito general de la aplicación. La desviación de los estándares debe considerarse cuidadosamente para evitar afectar negativamente la experiencia del usuario y la usabilidad de la aplicación.

Estrategias clave de diseño

Seguir los estándares de diseño ayuda a reducir el esfuerzo de toma de decisiones en el proceso de diseño al identificar los aspectos importantes del diseño. Conocer los estándares detalla y optimiza la capacidad de un equipo para lograr interfaces de usuario bien diseñadas. Este enfoque da como resultado ciclos de desarrollo más rápidos, una mejor usabilidad y una mayor satisfacción del usuario, lo que, en última instancia, conduce a una mayor productividad y eficacia de los sistemas de software internos.

Conocer los principios de diseño

Una exhaustiva investigación sobre la cognición humana da información a nuestra comprensión del diseño visual y la interacción con productos digitales. Este conocimiento sustenta muchos procedimientos recomendados y estándares y representa aproximadamente el 80 % del producto final. Los principios de diseño pueden cerrar la brecha creativa restante del 20 % que no está cubierta por los estándares. La familiaridad con este conocimiento mejora la comprensión del equipo de desarrollo de las consideraciones de diseño durante la planificación, lo que reduce la dependencia o mejora la colaboración con los recursos de diseño.

Seguir patrones y metáforas comunes

Los patrones y metáforas universales son ampliamente reconocidos y esperados en los productos digitales. La incorporación de estos patrones cuando sea apropiado puede simplificar la incorporación de usuarios y el uso a largo plazo, reduciendo los costes de formación y soporte, y potencialmente disminuyendo la necesidad de actualizaciones o rediseños. Estas prácticas abarcan varios aspectos del diseño, incluida la composición del diseño, la estructura de navegación, la jerarquía de la información y el diseño de interacción.

Es fundamental respetar las metáforas de iconos y los colores semánticos estándar. Los iconos deben utilizar asociaciones visuales establecidas para transmitir funcionalidad de forma rápida y eficaz a los usuarios. De manera similar, los colores semánticos, como el rojo para el error o el verde para el éxito, brindan retroalimentación visual inmediata que se alinea con las expectativas y los modelos mentales de los usuarios. Seguir estas convenciones ayuda a reducir la carga cognitiva y mejora la usabilidad al fomentar una sensación de familiaridad y comodidad.

Establecer un sistema de diseño

Un sistema de diseño es una colección de bloques de creación funcionales reutilizables que se utilizan para crear una interfaz de usuario. Están diseñados específicamente para una organización para que cada elemento se alinee con los estándares establecidos de la marca. Los cuatro componentes clave de un sistema de diseño son tokens de diseño, componentes, bibliotecas de patrones y directrices.

Los tokens de diseño son elementos visuales fundamentales de una interfaz de usuario, incluidos aspectos como el color, la tipografía y el espaciado. Se expresan como variables en un formato estándar, facilitando la creación y el mantenimiento de una aplicación mediante el sistema de diseño. Independientemente del diseño específico, los tokens de diseño agilizan la traducción del diseño en código. Por ejemplo, al definir un token llamado "primary-color" con un valor designado, los desarrolladores pueden integrar el diseño sin problemas utilizando el token en lugar de incrustar un valor específico directamente en el código. Los tokens de diseño se pueden alinear con la guía de estilo de una organización y administrarse de forma centralizada para producir tokens fáciles de usar.

Un componente representa una unidad modular y discreta de una interfaz de usuario. Sirve como elemento visual para ensamblar interfaces de aplicaciones. Los componentes bien diseñados exhiben dos características clave: reutilización y modularidad. Deben diseñarse para garantizar que mantengan la coherencia visual en múltiples aplicaciones dentro del ecosistema de una marca, lo que reduce la necesidad de recrear el diseño cada vez. Un solo componente debe servir sin problemas en múltiples contextos.

Power Apps proporciona un conjunto completo de componentes universales básicos, como botones y listas desplegables, y componentes compuestos, como la tabla moderna. Utilice estos controles tanto como sea posible para las necesidades básicas y considere crear componentes compuestos donde existan brechas para patrones de interfaz de usuario repetibles.

Los componentes compuestos deben ser lo suficientemente versátiles como para usarse tal cual o con ligeras variaciones (a través de parámetros) en diferentes contextos de aplicaciones, sin necesidad de modificaciones. Algunos ejemplos de componentes personalizados:

  • Un encabezado o pie de página con la marca de la empresa
  • Un componente de página de recursos del tamaño de una pantalla para que los usuarios proporcionen comentarios y obtengan ayuda de TI
  • Contenido universal como avisos de propiedad intelectual o vínculos

Una biblioteca de patrones ofrece un conjunto de patrones de diseño predefinidos para que los creadores los utilicen como punto de partida para construir interfaces de usuario. Estos patrones sirven como soluciones estandarizadas para desafíos de diseño comunes. El objetivo principal de una biblioteca de patrones es ofrecer una colección centralizada de patrones bien elaborados, permitiendo la creación de interfaces de usuario coherentes y efectivas. Las bibliotecas de patrones permiten a los desarrolladores utilizar un patrón específico y seguir directrices de uso establecidas, lo que garantiza coherencia y eficiencia en todos los diseños de interfaces de usuario.

Las directrices ofrecen reglas y procedimientos recomendados para los equipos de proyecto sobre cómo utilizar componentes y estilos visuales de forma eficaz. A diferencia de las directrices de estilo, que se centran en la estética, las directrices del sistema de diseño definen el comportamiento funcional de los componentes y las expectativas de interacción del usuario. Por ejemplo, si un sistema de diseño proporciona un conjunto de tokens de diseño para hacer referencia a los colores, las directrices deben aclarar cuándo usar estos colores y cómo los desarrolladores pueden acceder al color correspondiente en Power Apps. Para los componentes, debe haber documentación sobre el uso correcto, los parámetros de entrada y salida y las variaciones de estado que se pueden esperar del componente.

Los esfuerzos del sistema de diseño centralizado también pueden albergar activos de medios universales, como logotipos de empresas y otros activos de diseño en un repositorio para permitir un desarrollo rápido y generalizado.

Fluent UI de Microsoft es un ejemplo de un sistema de diseño de código abierto ampliamente adoptado. Puede ser una referencia eficaz para muchas decisiones de diseño tomadas en Power Apps porque todos los controles modernos utilizan los componentes del sistema de diseño Fluent (2). Los sistemas de diseño como Fluent UI son el resultado de una cantidad significativa de esfuerzo de investigación y desarrollo en la creación de componentes para garantizar que satisfagan las necesidades de los usuarios. También están diseñados de manera que puedan ser ubicuos y utilizarse fácilmente en diversos productos y plataformas digitales. Cada componente tiene directrices específicas para garantizar que la aplicación se alinee con la experiencia prevista. Aproveche el conocimiento respaldado por la investigación consultando la orientación de Fluent 2.

Compartir para evitar implementaciones duplicadas no solo aumenta la eficiencia de la producción, sino que también garantiza que las experiencias permanezcan coherentes a lo largo del tiempo. Las contribuciones a elementos compartidos ayudan a mantener las experiencias frescas y reflejan la experiencia de toda la organización. Actualmente, la coherencia es un desafío porque los componentes, los sistemas, los procesos y la cultura a menudo no se comparten, no promueven la coherencia y dificultan las contribuciones.

Realizar revisiones de diseño

El acceso a recursos destinados a guiar el diseño de la experiencia del usuario es crucial para garantizar que una aplicación cumpla con los estándares de UI/UX establecidos. Los equipos centralizados deben intentar familiarizarse con los estándares de diseño básicos y los procedimientos recomendados. Si bien los diseñadores suelen tener conocimientos sobre la experiencia del usuario, los jefes de proyectos también pueden beneficiarse al aprender estas habilidades para contribuir de manera efectiva al equipo.

La forma más eficaz de validar una experiencia es recorrerla físicamente. Sin embargo, también puede leer mediante programación los metadatos de aplicación de Power Apps. Los métodos para lograr esto pueden incluir verificar que se aplique el tema correcto a la aplicación o verificar si se hace referencia a los valores del token del tema en los controles heredados. Por ejemplo, si elementos de texto específicos deben usar ciertos tokens de diseño, el nombre del componente de texto podría corresponder a un valor concreto y las propiedades del componente deberían coincidir con una asignación de token de diseño específica.

Evalúe el número de elementos que son de un tipo de componente específico y cumplen ciertos criterios frente a los que no los cumplen. Por ejemplo, considere los componentes de texto que tienen nombres incorrectos o correctos pero que no siguen las directrices de valores de propiedad. Para aplicar un diseño dinámico, ciertos contenedores de diseño podrían asignarse a convenciones de nomenclatura y valores de propiedad específicos (como LayoutWrap).

Cumplir con los estándares de accesibilidad para aumentar la base de usuarios

La incorporación de principios de diseño inclusivos garantiza que los productos se adapten a un público diverso, incluidas personas de todas las capacidades. El diseño inclusivo busca identificar barreras potenciales para que los usuarios de todas las capacidades creen productos que aborden los desafíos antes de la implementación final. Es esencial comprender y discutir los aspectos funcionales que podrían generar barreras de interacción para superarlos de manera efectiva.

Function Objetivo
Cognición Nuestra capacidad para recibir, interpretar y procesar información está influenciada por muchos factores. Estos factores incluyen atención, conciencia, concentración, memoria, juicio, comprensión, resolución de problemas y razonamiento. La cognición de una persona puede afectar a la forma en que aprende, ya sea aprendiendo a usar un nuevo dispositivo o aprendiendo nueva información en un aula. Muchos aspectos de la cognición se ven afectados entre sí.
Movilidad Nuestra anatomía y músculos nos dan movilidad y dependen de las señales cerebrales, que controlan los músculos. La movilidad implica agarre, habilidades motoras finas, coordinación, control (movimiento voluntario frente a involuntario), velocidad, tono muscular, resistencia, postura y lesiones temporales. La movilidad puede verse influenciada por condiciones situacionales, temporales, progresivas o permanentes.
Vista Nuestra capacidad para ver y comprender información visual de nuestro entorno guía el pensamiento y el movimiento. La visión está influenciada por factores tanto físicos como neurológicos. Las limitaciones de la visión incluyen ceguera, visión deficiente (visión parcial), disminución de la agudeza visual, pérdida del campo visual, daltonismo, fotofobia (sensibilidad a la luz) e incluso la luz solar intensa que afecta a la legibilidad del texto en una pantalla.
Audición Nuestra capacidad para recibir y comprender el audio de nuestro entorno también guía el pensamiento y el movimiento. Los grados de pérdida auditiva varían en un amplio espectro, lo que genera barreras para el uso diario de la tecnología. Los ejemplos temporales o situacionales incluyen entornos ruidosos o zonas silenciosas donde no es posible la reproducción de sonido.
Voz, habla y comunicación Nuestra capacidad de comunicarnos (verbal o no verbalmente) es esencial para expresar nuestros deseos y necesidades, establece relaciones, transmitir información a los demás e interactuar con nuestro entorno.
Sensación y percepción La sensación es nuestra capacidad de detectar sentidos como el tacto o la posición de nuestro cuerpo. La percepción es la forma en que el cerebro procesa y comunica estos sentidos. Las limitaciones de la sensibilidad incluyen trastornos vestibulares, dolor crónico, integridad de la piel, sensibilidad (hipersensible e hiposensible) y propiocepción.

Métodos de acceso al contenido

Los usuarios acceden al contenido digital de diversas formas. Además de la entrada del mouse y el puntero, también pueden usar el teclado y las tecnologías de asistencia, como lectores de pantalla y braille, lupas, subtítulos, reconocimiento de voz y configuraciones de alto contraste, todas las cuales adaptan la experiencia para satisfacer las necesidades del usuario.

Herramientas de asistencia

Las herramientas de asistencia comunes incluyen:

  • Teclado: Las personas con discapacidad visual interactúan con sitios web y aplicaciones mediante un software lector de pantalla, que lee el contenido y los controles en voz alta mediante la tecnología de texto a voz y utiliza el teclado como entrada alternativa a la interacción de apuntar y hacer clic con un mouse estándar. Además de admitir el conjunto básico de comandos de teclado, los lectores de pantalla también proporcionan un conjunto complejo de comandos de teclado. Estos comandos brindan a los usuarios un eficaz conjunto adicional de herramientas para interactuar con las interfaces de usuario de manera más eficiente.

  • Lector de pantalla: Los lectores de pantalla convierten el texto digital en voz sintetizada y salida braille. Permiten a los usuarios escuchar contenido y navegar con el teclado. Esta tecnología permite a las personas con ceguera o poca visión utilizar la tecnología de la información con el mismo nivel de independencia y privacidad que cualquier otro usuario. Los lectores de pantalla también los utilizan personas con discapacidades cognitivas o de aprendizaje, y usuarios que simplemente prefieren el contenido de audio al texto. Estas herramientas van más allá del uso web y ayudan en la navegación de documentos, hojas de cálculo y sistemas operativos.

  • Toque: los objetivos táctiles están dirigidos principalmente a personas con dificultad motriz, que pueden tener problemas al tocar la pantalla. Más concretamente, el tacto está diseñado para ayudar a las personas a limitar la cantidad de entradas espurias provenientes de toques no intencionados (o no registrados).

  • Contenido dinámico: los roles de punto de referencia, o etiquetas ARIA, ofrecen beneficios inmediatos a los usuarios de lector de pantalla. Hay ocho roles, cada uno de los cuales representa un bloque de contenido que ocurre comúnmente en las páginas web. Para usarlos, agregue el atributo de rol relevante a un contenedor adecuado en su código HTML, lo que permitirá a los usuarios del lector de pantalla navegar rápidamente a esa sección de la página.

Estilos visuales

Para crear productos inclusivos para usuarios con diferentes capacidades de visión, es esencial considerar estilos visuales como el color, el contraste y el tamaño del texto. Esto implica garantizar un contraste adecuado entre el texto y su fondo, incluido el texto en imágenes, iconos y botones, para mejorar la legibilidad para los usuarios con baja sensibilidad al contraste o daltonismo. El contenido con buen contraste mejora la legibilidad en diversas condiciones de iluminación, lo que beneficia a todos los usuarios.

El texto estándar debe mantener una relación de contraste de al menos 4,5:1 con el fondo. Para texto más grande, componentes interactivos y visualizaciones de datos, se requiere una relación de contraste mínima de 3:1 con el color de fondo. Los indicadores de estado deben utilizar colores, tipos e imágenes semánticos de manera efectiva para transmitir información, asegurando que el contenido pueda ser percibido por todos los usuarios. Considere admitir una paleta de colores de alto contraste, que normaliza la paleta de colores para mostrar contenido con una relación de contraste de al menos 7:1, lo que garantiza visibilidad y claridad. Ofrecer un modo oscuro puede mejorar significativamente la legibilidad y reducir la fatiga visual.

Tipografía

La tipografía juega un papel crucial a la hora de garantizar la legibilidad para usuarios con necesidades diversas. El texto debe ser lo suficientemente grande y estar adecuadamente espaciado como para adaptarse a los diferentes requisitos de los usuarios. Los usuarios deberían poder ajustar configuraciones como la orientación y los niveles de zoom, y las aplicaciones adaptarán perfectamente el diseño de su contenido en consecuencia. Una tipografía bien configurada no solo ayuda a la legibilidad, sino que también facilita la orientación y navegación de la página, lo que beneficia a las personas con baja visión, discapacidades cognitivas y daltonismo, y a las que dependen de lectores de pantalla.

Los encabezados deben incluir texto grande o en negrita para permitir un escaneo y una comprensión rápidos, especialmente para los usuarios orientados a la visualización. Los elementos de encabezado aplicados correctamente garantizan una navegación eficiente para todos los usuarios. El ancho y el espaciado de las líneas afectan significativamente a la legibilidad; por ejemplo, las líneas excesivamente anchas cansan la vista, mientras que las líneas demasiado cortas alteran el ritmo y la comprensión. Procure una longitud de línea de 50 a 70 caracteres y una altura de línea que sea del 120 % al 145 % del tamaño de la fuente para mejorar la legibilidad.

En dispositivos móviles, el tamaño del texto debe poder cambiarse hasta un 200 % sin comprometer el contenido ni la funcionalidad. Esta flexibilidad garantiza que los usuarios puedan ajustar el tamaño del texto según sus preferencias o necesidades, mejorando la accesibilidad general. Además, los usuarios deberían tener la capacidad de hacer zoom en la interfaz, con diseños de página diseñados para redistribuir el contenido sin problemas sin desplazamiento horizontal para niveles de zoom de hasta el 400 %. Garantizar que el contenido siga siendo accesible y legible, independientemente del tamaño de la pantalla del dispositivo, contribuye a una experiencia más fácil de usar para todos los usuarios.

Imágenes, gráficos y movimiento

Las imágenes y los gráficos hacen que el contenido sea más agradable y fácil de entender para muchas personas, y en particular para aquellas con discapacidad cognitiva y de aprendizaje. Si bien las imágenes pueden servir como pistas para las personas con discapacidades visuales, ayudándolas a orientarse dentro del contenido, el uso extensivo en sitios web puede crear barreras importantes para los usuarios.

Las prácticas accesibles en torno al contenido multimedia benefician a los usuarios de braille y lectores de pantalla, a los usuarios que navegan con las imágenes desactivadas para ahorrar ancho de banda y a los rastreadores de los motores de búsqueda. También pueden ayudar a personas con pérdida auditiva o discapacidad cognitiva.

Utilice texto alternativo para que el contenido visual sea accesible. Los atributos Alt describen contenido visual, por ejemplo, texto que se muestra mientras se descargan las imágenes. Adapte el texto alternativo al contexto de la imagen. Sea conciso e informativo (use de 150 a 250 caracteres). Recuerde marcar las imágenes que duplican el contenido del texto como decorativas.

Interacción

La interacción es donde más importa la accesibilidad. Si un usuario no puede navegar por un producto sin problemas y completar las tareas, el producto no es realmente accesible. Las interacciones táctiles y de teclado eficientes ayudan a los usuarios de lectores de pantalla, lectores braille y a quienes navegan utilizando un teclado. Entre las interacciones típicas se incluyen:

  • Navegación: los usuarios de tecnología de asistencia navegan por una página web mediante tabulaciones, búsquedas y, en el caso de los lectores de pantalla, mediante listas de encabezados y enlaces. Garantice una navegación eficiente con el teclado con puntos de referencia, títulos y accesos directos como saltar al contenido principal".

  • Hipervínculos: La usabilidad y accesibilidad de los hipervínculos se pueden mejorar haciéndolos claros, concisos y significativos fuera de contexto. Aplique suficiente contraste de color y establezca una diferencia visual del resto del contenido.

  • Tablas: Confiar solo en las indicaciones visuales no es suficiente para crear una tabla accesible. El marcado estructural permite que la tecnología de asistencia reconozca encabezados y celdas de datos.

  • Formularios: Los campos de entrada, utilizados para diversas interacciones web, a menudo plantean problemas de accesibilidad para las personas que usan lectores de pantalla o teclados.

  • Foco: la visibilidad de foco ayuda a los usuarios que dependen del teclado para navegar por la página, indicando visualmente el elemento con el que interactúan a continuación. A veces, es necesario mover el foco mediante programación o limitarlo a un área específica para optimizar la experiencia.

  • Cambios de estado: especifique el texto para cualquier cambio de estado y anuncios. Comunicar los estados de error y guiar a los usuarios a través de la recuperación de errores, como la falta de información o un problema del sistema, es fundamental.

Facilitación de Power Platform

Los controles modernos están disponibles tanto para aplicaciones de lienzo como para aplicaciones basadas en modelo.

Las aplicaciones de lienzo son compatibles con los temas modernos, lo que le permite implementar una paleta de marcas coherente en todos los controles de la aplicación. Las aplicaciones basadas en modelo admiten temas para modificar los elementos básicos de la marca, como los colores del encabezado de la aplicación, los vínculos y algunos iconos de formulario.

Los componentes reutilizables y compatibles con soluciones están disponibles en múltiples formas para varios tipos de aplicaciones. Los componentes de lienzo personalizados se pueden usar en aplicaciones de lienzo o en páginas personalizadas y se crean con poco código. El Power Apps component framework se puede usar para implementar componentes de código para aplicaciones de lienzo, aplicaciones basadas en modelo y Power Pages.

Las aplicaciones de lienzo admiten propiedades accesibles que se asignan a funciones específicas de la tecnología de asistencia. Use herramientas en el estudio para validar el cumplimiento de la accesibilidad.

Aunque las aplicaciones basadas en modelo son accesibles sin necesidad de configuración, asegúrese de que todos los recursos web agregados a la aplicación sean accesibles. Las experiencias de lienzo insertadas, incluidas las páginas personalizadas, deben configurarse manualmente para cumplir las normas de accesibilidad.

Las aplicaciones basadas en modelo proporcionan métodos abreviados de teclado estándar incorporados para navegar por formularios y vistas.

Las aplicaciones de lienzo requieren componentes de código para habilitar los métodos abreviados de teclado, que pueden configurarse mediante los métodos abreviados de teclado del Kit Creator.

Lista de comprobación de optimización de la experiencia

Lista de comprobación de optimización de la experiencia