Recomendaciones para optimizar la percepción y la estética del usuario
Se aplica a esta recomendación de lista de comprobación de optimización de experiencia de buena arquitectura de Power Platform:
| XO:07 | Aplique los principios de diseño clásicos a elementos visuales como esquemas de color, tipografía y diseño. Esfuércese por lograr una jerarquía visual enfocada, equilibrada e intuitiva que guíe la atención de los usuarios hacia elementos y acciones importantes. |
|---|
Esta guía describe las recomendaciones para patrones de diseño visual universales que afectan a la percepción del usuario, lo que puede influir significativamente en la satisfacción y la adopción de una aplicación. Los elementos visuales sirven de bloques de creación que se utilizan para crear experiencias. La aplicación de principios visuales que se alinean con la forma en que las personas perciben y procesan la información de forma natural proporciona métodos estructurados para ayudar a seleccionar y organizar elementos visuales para crear una aplicación eficaz y atractiva.
Estrategias clave de diseño
Una extensa investigación sobre la percepción humana del diseño visual revela que los usuarios no ven los elementos visuales de forma aislada. Más bien, los perciben en relación con otros elementos y el contexto en el que aparecen. Estas relaciones influyen en la percepción del usuario, llamando la atención sobre áreas específicas, provocando emociones, ayudando a la comprensión, mejorando la estética y fortaleciendo la identidad de la marca. La selección y disposición cuidadosas de los elementos visuales pueden crear experiencias de usuario atractivas, memorables y efectivas que tengan eco en el público objetivo.
Efecto de usabilidad estética
El efecto de usabilidad estética se refiere a la tendencia a considerar los productos atractivos como más utilizables. Los usuarios se forman una opinión inicial sobre una aplicación en aproximadamente 50 milisegundos. Esta primera impresión está influida por varios factores, incluida la estructura, los colores, el espaciado, la simetría, la cantidad de texto y las fuentes. Una primera impresión positiva puede mejorar la satisfacción general del usuario. Las investigaciones muestran que los usuarios son más indulgentes con los problemas menores de usabilidad cuando encuentran una interfaz visualmente atractiva. Además, la calidad del diseño puede servir de indicador de credibilidad.
Equilibrio y peso
El equilibrio visual representa una sensación de equilibrio y armonía en la percepción visual. Ayuda a los usuarios a procesar y organizar la información visual de manera más eficiente al reducir la tensión cognitiva. Las composiciones equilibradas generalmente se perciben como más agradables y más fáciles de comprender, lo que permite a los usuarios centrar la atención de forma eficaz y navegar por los estímulos visuales con mayor facilidad. Este aspecto cognitivo del equilibrio visual subraya su importancia para facilitar una comunicación clara y mejorar la experiencia general del usuario.
Una composición está equilibrada cuando todos los elementos tienen equilibrio óptico. A menudo, la colocación matemática requiere ajustes. Algunos de los elementos que afectan el peso visual son el tamaño, el color, la densidad y el espacio en blanco.
Tamaño: Los elementos más grandes tienden a tener más peso visual que los más pequeños. Para lograr el equilibrio, los elementos más grandes se pueden contrarrestar agrupándolos con elementos más pequeños o ajustando su ubicación dentro del diseño.
Color: Los colores brillantes o intensos pueden llamar más la atención y parecer más pesados que los colores apagados o neutros. Equilibrar los colores implica distribuirlos uniformemente por toda la interfaz o utilizar colores complementarios para crear armonía visual.
Densidad: La densidad de los elementos se refiere a qué tan apretados están dentro de un espacio determinado. Equilibrar la densidad implica garantizar que los elementos se distribuyan uniformemente en la interfaz para evitar el hacinamiento o las áreas dispersas.
Espacio en blanco: también conocido como espacio negativo, el espacio blanco se refiere a las áreas vacías entre los elementos. El espacio ayuda a crear un descanso visual y puede equilibrar la composición resaltando y enfatizando ciertos elementos.
Una composición equilibrada es una suma de las fuerzas visuales entre los elementos.
Equilibrar el diseño es una de las tareas más difíciles, porque no se puede medir fácilmente.
Color
Los matices, tintes, matices y tonos pueden transmitir significado, evocar emociones y crear un atractivo estético. El color juega un papel crucial a la hora de guiar la atención del usuario, establecer jerarquías, transmitir información y mejorar la usabilidad. Hay varias razones por las que un diseño de color bien pensado en una interfaz de usuario puede afectar a los usuarios de la forma deseada:
Atención y percepción. Ciertos colores son más llamativos que otros, lo que permite a los diseñadores dirigir la atención de los espectadores hacia elementos específicos. El contraste de color puede mejorar la legibilidad y distinguir entre diferentes componentes, facilitando el procesamiento rápido de la información.
Respuesta emocional. Los colores tienen asociaciones psicológicas que evocan emociones y estados de ánimo. Los colores cálidos como el rojo y el naranja pueden crear una sensación de energía y emoción, mientras que los colores fríos como el azul y el verde pueden evocar calma y tranquilidad. Puede obtener las respuestas deseadas para influir en los usuarios hacia la experiencia deseada.
Identidad de marca. El uso constante del color en los materiales de marca ayuda a establecer una identidad visual sólida y fomenta el reconocimiento de marca. Los usuarios suelen asociar colores específicos con marcas concretas y asocian su experiencia con la fidelidad y la confianza en la marca.
Jerarquía visual. El color se puede utilizar para establecer una jerarquía visual y organizar la información. Asigne diferentes colores a elementos según su importancia o categoría para crear una jerarquía clara y facilitar la navegación y la comprensión.
Proximidad
Los elementos que se colocan más juntos parecen más relacionados. Al organizar los elementos, asegúrese de que haya una diferencia notable en el espaciado entre los elementos que están estrechamente relacionados y los que no lo están.
Este principio de Gestalt sugiere que la distancia espacial entre elementos visuales influye en cómo se perciben y organizan mentalmente y subraya su importancia para facilitar el procesamiento y la comprensión eficientes de los estímulos visuales.
Agrupe elementos relacionados que sean funcionalmente similares o pertenezcan a la misma categoría jerárquica. Por ejemplo, los botones que realizan acciones u opciones similares dentro de un menú desplegable deben agruparse estrechamente para indicar su asociación. En una barra de navegación, los elementos del menú que están muy juntos sugieren un conjunto de opciones relacionadas, mientras que una separación más grande entre las categorías del menú los distingue visualmente. Los elementos del formulario que están relacionados deben agruparse, como los campos de dirección, en una sección llamada "dirección".
Mejore la legibilidad en interfaces con mucho texto ajustando el espacio entre párrafos, oraciones y palabras. Un espaciado más estrecho entre párrafos indica una conexión lógica o una continuación del pensamiento, mientras que un espaciado mayor denota una transición o una interrupción en el contenido. Esta técnica promueve la comprensión eficiente de la información textual.
Asegúrese de que haya una distinción notable en el espaciado entre elementos relacionados y no relacionados para evitar confusiones. Una rampa de espaciado puede ayudar a determinar con coherencia el espaciado adecuado necesario en función del tamaño del elemento.
El círculo de la izquierda está más relacionado con el triángulo que con el otro círculo.
El espacio entre párrafos es menor que el espacio entre secciones.
Continuidad
Los elementos que están dispuestos en una línea o una curva se perciben como más relacionados que los elementos que no están en una línea o una curva.
Disponga los elementos de la interfaz, como los menús de navegación o los pasos de un proceso, a lo largo de una línea o curva para dar a entender una secuencia o progresión. Este diseño ayuda a los usuarios a percibir la relación entre elementos y comprender el flujo lógico de información o acciones.
Coloque elementos relacionados, como las opciones de casilla o radio o elementos de una lista con viñetas, a lo largo de una línea para agruparlos visualmente. Esta disposición sugiere a los usuarios que estos elementos comparten un propósito común o pertenecen a la misma categoría, facilitando una navegación y comprensión más sencillas. Si los elementos de apariencia similar tienen una sangría más hacia dentro, la posición del elemento se correlaciona con una ubicación más baja en la jerarquía visual.
Utilice líneas o curvas para guiar la atención de los usuarios y crear rutas visuales a través de la interfaz. Por ejemplo, una flecha puede dirigir la vista del usuario de una sección de contenido a otra a lo largo de un camino determinado, indicando una conexión o progresión. Esta técnica ayuda a los usuarios a navegar por la interfaz de forma más intuitiva y fomenta la exploración.
Organice los elementos clave de la interfaz, como botones de llamada a la acción o información importante, a lo largo de líneas destacadas para llamar la atención de los usuarios y crear puntos focales. Por ejemplo, el patrón MessageBar de Fluent a menudo se muestra como un mensaje destacado y equilibrado en toda el área de contenido, con el mensaje a la izquierda, lo que lleva a los botones de llamada a la acción a la derecha. Esta estrategia de diseño resalta estos elementos y enfatiza su importancia, aumentando la probabilidad de interacción.
Las curvas/líneas son más fuertes que el color para nuestra percepción.
Los asistentes usan la continuidad para mostrar a los usuarios que los pasos están conectados, sin abrumarlos con demasiada información.
Cierre
El cerebro humano tiende a ver formas completas, reconociendo un patrón único (familiar), sobre objetos individuales, incluso cuando falta alguna información.
Garantice la coherencia visual en los elementos de diseño (como formas, colores y tamaños) para ayudar a los usuarios a aprender los patrones que deberían esperar, incluso si se presentan en contextos diferentes.
Use iconos o símbolos sencillos y familiares que permitan a los usuarios completar la información que falta basándose en sus experiencias previas. Por ejemplo, un icono de lupa se asocia comúnmente con la función de búsqueda, incluso sin texto que lo acompañe.
Presente la información de forma gradual a los usuarios, también conocida como divulgación progresiva. Permita que los usuarios completen los detalles faltantes a medida que interactúan con la interfaz, evitando abrumarlos con demasiada información y fomentando la exploración.
Cree patrones visuales coherentes que animen a los usuarios a percibir los objetos como entidades completas. Por ejemplo, agrupar elementos relacionados puede ayudar a los usuarios a comprender su relación y propósito. Organice visualmente los elementos de forma coherente utilizando los principios Gestalt para indicar la segmentación. Utilice el espacio de forma eficaz para crear una sensación de cierre alrededor de los elementos de la interfaz.
Utilice animaciones y transiciones para guiar la atención de los usuarios y transmitir cambios en los estados de la interfaz. Las transiciones fluidas entre diferentes estados o pantallas pueden ayudar a los usuarios a comprender la relación entre elementos y completar la información que falta. Múltiples controles modernos disponibles en Power Apps muestran animaciones de forma inherente.
Un cuadrado se reconoce antes que cuatro círculos incompletos.
La animación de una tarjeta a un elemento modal ayuda a cerrar la brecha entre ambos y a relacionarlos entre sí.
Punto focal
Un punto focal es un elemento de diseño que llama inmediatamente la atención del espectador. Idealmente, un diseño debería tener una secuencia de puntos focales, normalmente entre uno y tres, dispuestos para guiar al usuario a través del contenido de manera deliberada.
Diseñe la interfaz con una jerarquía clara de información, donde el contenido o las acciones más importantes se enfaticen como puntos focales. Utilice señales visuales como tamaño, color, contraste y posición para hacer que estos elementos se destaquen. Presente la información gradualmente, comenzando con los puntos focales más importantes. Esta técnica ayuda a los usuarios a identificar rápidamente el contenido o las acciones más relevantes y los guía a través de la interfaz en una secuencia lógica.
Coloque los botones principales de llamada a la acción en un lugar destacado dentro de la interfaz, convirtiéndolos en los puntos focales más intensos. Estos botones deben ser visualmente distintos de otros elementos y estar ubicados estratégicamente para guiar a los usuarios hacia las acciones deseadas, como realizar una compra o registrarse. El lenguaje de diseño Fluent recomienda utilizar el color del tema de la marca para estos elementos.
Utilice el contraste de forma eficaz para crear puntos focales. Los elementos que destacan por diferencias de color, brillo, tamaño o tipografía atraen de forma natural la atención del usuario. Contrastar superficies más brillantes con texto más oscuro o elementos de marca crea un punto focal más destacado.
Utilice el espacio en blanco para resaltar puntos focales creando una separación visual de los elementos circundantes. Esta técnica ayuda a prevenir distracciones y permite a los usuarios centrarse en el contenido o las acciones más importantes. Los elementos de la interfaz de usuario con más espacio a su alrededor atraen más atención y tienden a percibirse como de mayor importancia que los elementos con menos espacio.
Mantenga la coherencia en el uso de puntos focales en toda la interfaz para proporcionar una experiencia de usuario coherente. Al establecer un patrón de puntos focales, orienta las expectativas de los usuarios sobre la jerarquía que deben comprender para navegar por la interfaz y les ayuda a encontrar información o acciones importantes en las distintas pantallas o páginas.
Tenga en cuenta que es importante mantener el equilibrio y no abrumar a los usuarios con demasiados puntos focales competitivos.
El ojo del usuario se dirige primero al cuadrado azul.
Elementos como las llamadas a la acción pueden convertirse en puntos focales para que los usuarios se fijen en ellos.
Similitud
Los objetos que parecen similares a menudo se perciben como un grupo o patrón, lo que lleva a los usuarios a esperar que tengan la misma funcionalidad.
Asegúrese de que los elementos de la interfaz con funciones similares tengan estilos visuales coherentes. Por ejemplo, los botones que realizan acciones similares o con el mismo peso deben tener el mismo color, forma y tamaño, indicando a los usuarios su funcionalidad compartida. A la inversa, asegúrese de que los elementos que difieren significativamente en funcionalidad se puedan distinguir claramente. Ambas técnicas previenen la confusión y la frustración al establecer señales visuales claras.
Utilice iconografía y símbolos coherentes para representar acciones o características similares en toda la interfaz. Los usuarios tienden a asociar iconos familiares con funciones específicas basadas en sus experiencias pasadas. Para cumplir con estas expectativas, utilice metáforas de iconos universalmente reconocidas. Garantice la coherencia en el estilo de los iconos mediante el uso de iconos del mismo conjunto, como la biblioteca de iconografía de Fluent UI.
Emplee códigos de colores para indicar similitudes entre elementos o categorías. Por ejemplo, usar el mismo color para resaltar elementos relacionados en una lista o agrupar puntos de datos similares en un gráfico mejora la coherencia visual y ayuda a los usuarios a discernir patrones.
Mantenga la uniformidad en la tipografía y el estilo del texto para elementos que tienen propósitos análogos. Los estilos, tamaños y formatos de fuente coherentes contribuyen a un lenguaje visual cohesivo, lo que facilita el reconocimiento de los usuarios de contenidos o acciones relacionadas.
Proporcione una respuesta interactiva coherente para acciones similares en toda la interfaz. Ya sea al pasar el cursor sobre un botón o hacer clic en un vínculo, los usuarios deben esperar respuestas uniformes para reforzar la asociación entre similitud visual y equivalencia funcional. Aunque la plataforma proporciona de forma inherente la mayoría de los comportamientos de interactividad, como los valores de color de los estados hover y pulsado, tenga presente este principio de diseño cuando cree elementos componentes desde cero o implemente manualmente los estados de respuesta.
Asegúrese de que las similitudes visuales se complementan con otras pistas, como etiquetas de texto o información sonora, para adaptarse a usuarios con necesidades y preferencias diversas. La comunicación eficaz de la funcionalidad a través de múltiples modalidades sensoriales mejora la usabilidad y la inclusión.
Los elementos se agrupan por forma y color, no por disposición (columnas y filas).
Si una tarjeta de un panel se abre como panel lateral, los usuarios esperan que todas se abran de esa manera.
Figura y fondo
La gente percibe instintivamente los elementos como una "figura" (lo que destaca en primer plano) o como un "fondo" (lo que retrocede al fondo). Por lo tanto, el contexto influye en la percepción y es crucial garantizar una delimitación suficiente para distinguir los elementos importantes del fondo. El espacio en blanco (espacio negativo) aumenta la comprensión del contenido.
Utilice contrastes de color, tamaño o estilo visual para establecer una relación clara entre figura y fondo. Los elementos importantes deben destacarse sobre el fondo, haciéndolos fácilmente distinguibles y guiando eficazmente la atención de los usuarios. Tienen más protagonismo las superficies con colores más claros y elementos visuales que contrastan más con el fondo. Este enfoque reduce el desorden visual y ayuda a los usuarios a identificar información clave. Proporcione suficiente contraste entre los elementos de primer plano y de fondo para mejorar la legibilidad de los usuarios con discapacidad visual, mejorando su capacidad para acceder y comprender el contenido.
Mantener la coherencia en la ubicación y el estilo de los elementos de la interfaz refuerza la relación figura-fondo y ayuda a los usuarios a comprender la estructura de la interfaz. El uso coherente de patrones de diseño y señales visuales garantiza que los usuarios puedan discernir rápidamente entre elementos de primer plano y de fondo en diferentes pantallas y contextos. Las incoherencias en el diseño pueden alterar los modelos mentales de los usuarios y dificultar su capacidad para navegar por la interfaz de forma eficaz.
El bajo contraste y el mínimo espacio negativo contribuyen a percibir los rectángulos blancos como parte del fondo.
Una imagen lateral debe pasar a un segundo plano para que los usuarios puedan centrarse en el contenido importante.
Agrupación
Los elementos tienden a percibirse como grupos si comparten un área con un límite claramente definido.
Agrupar elementos relacionados dentro de contenedores visuales, como cajas, tarjetas o bordes, ayuda a los usuarios a percibirlos como unidades cohesivas. Este enfoque organiza visualmente el contenido y la funcionalidad, facilitando la identificación y el procesamiento de la información. Las agrupaciones claras ayudan a evitar una interfaz desordenada y reducen la confusión o la ineficiencia. La agrupación también es eficaz cuando la proximidad no es una opción; por ejemplo, una barra de mensajes que abarca varios controles a lo largo de una pantalla percibida como una unidad relacionada debido a sus bordes y color de fondo.
Mantener un estilo visual coherente para los elementos agrupados fortalece su conexión y mejora la usabilidad. El uso de colores, fuentes o iconos similares para estos elementos destaca que pertenecen a la misma categoría o función. Las incoherencias en la presentación visual pueden debilitar la agrupación percibida y hacer que los usuarios pasen por alto relaciones entre elementos o malinterpreten su significado o propósito.
Agregar bordes alrededor de un elemento o un grupo de elementos crea una separación de los elementos circundantes.
Seccionar el contenido ayuda a los usuarios a comprender que el tema es cambiante.
Señales frente a ruido
Las señales visuales, como líneas, contraste y espaciado, se utilizan para indicar a los usuarios que algo es importante. Sin embargo, demasiadas señales, o señales que resaltan información que no es importante, rápidamente se convierten en ruido.
Emplee principios de puntos focales (como texto en negrita, colores de contraste o iconos) para señalar información o acciones importantes a los usuarios. Por ejemplo, utilice un color brillante para botones o títulos importantes para que destaquen.
Sea selectivo con lo que destaca para evitar abrumar a los usuarios con demasiada información. Señale únicamente elementos que sean realmente importantes para la tarea u objetivo del usuario. Demasiadas señales pueden crear confusión y dificultar que los usuarios establezcan prioridades. Identifique la información que es más importante para el usuario y enfatícela adecuadamente. Normalmente, se recomienda tener solo un botón de llamada a la acción por página. En los formularios, resalte los campos obligatorios para guiar la atención del usuario. Esto evita que los usuarios se pierdan en detalles innecesarios y les ayuda a centrarse en lo esencial.
Asegúrese de que las señales sigan un lenguaje visual coherente en toda la interfaz para que sirva como guía que ayude a los usuarios a reconocer patrones y comprender el significado de las diferentes señales de forma intuitiva.
Adapte las señales al contexto específico y a las necesidades del usuario. Por ejemplo, si los usuarios están escaneando una interfaz que presenta ciertas tareas, señale claramente el estado crítico y los elementos procesables para atraer su atención. Las señales contextuales ayudan a los usuarios a encontrar rápidamente información relevante sin distraerse con detalles no relacionados.
Las señales ayudan a guiar a los usuarios a través del contenido y transmiten lo que es importante.
El ruido visual introduce confusión y tiene el efecto contrario al de las señales.
Facilitación de Power Platform
En las aplicaciones de lienzo, use contenedores de diseño para agrupar elementos relacionados. Lo ideal sería organizar todos los elementos de la página en contenedores y los contenedores de diseño también pueden separar eficientemente los contenedores secundarios ajustando la propiedad de espacio.
En formularios de aplicaciones basadas en modelo, las secciones se pueden utilizar para agrupar campos o elementos relacionados.
Implemente coherencia en elementos visuales comunes con elementos componentes personalizados reutilizables.
En la aplicaciones de lienzo, los controles modernos cuentan con señalización integrada en su diseño. Específicamente, los controles de botón e insignia ofrecen opciones en sus propiedades de estilo, lo que los convierte en señales efectivas. Siga los procedimientos recomendados para cada componente y aplique la señalización de forma selectiva para garantizar una comunicación óptima.
Información relacionada
- Principios de agrupación
- Psicología Gestalt
- Efecto de usabilidad estética
- Rampa de espaciado del sistema de diseño de Fluid UI