Recomendaciones para optimizar el diseño
Se aplica a esta recomendación de lista de comprobación de optimización de experiencia de buena arquitectura de Power Platform:
| XO:06 | Mantenga diseños utilizables y visualmente atractivos en todos los tamaños y resoluciones de pantalla. Utilice técnicas adaptativas para representar dinámicamente el contenido de varias maneras. |
|---|
Esta guía describe las recomendaciones para diseños de pantalla que sean fáciles de navegar y se adapten con fluidez en varios dispositivos. Este enfoque garantiza que los usuarios tengan una experiencia de visualización consistente y óptima independientemente del dispositivo que estén usando.
Definiciones
| Término | Definición |
|---|---|
| Ventanilla | Parte visible de una interfaz digital, como un navegador web o una aplicación móvil, donde se muestra el contenido. Los rangos de ventanillas a menudo se asocian con clases de dispositivos (móviles, tabletas y escritorios) según las dimensiones y las resoluciones de la pantalla. |
| Puntos de interrupción | Valores de píxeles específicos que definen los rangos de la ventanilla utilizados para determinar el comportamiento del diseño adaptable. |
Estrategias clave de diseño
Los diseños dinámicos brindan una experiencia de usuario flexible y eficiente en diferentes tamaños de ventanas. Se adaptan escalando el contenido, reorganizando elementos y mostrando texto e imágenes de forma selectiva. Los diseños responsables satisfacen las necesidades de los usuarios independientemente del tamaño de su pantalla.
Determinar un marco de aplicación coherente
El marco de la aplicación consta de un conjunto de controles que están disponibles de forma constante en todas las pantallas. Consta de tres subcomponentes principales: un encabezado, navegación y una región de contenido. Las aplicaciones simples tienen la flexibilidad de usar el componente de encabezado, mientras que las aplicaciones más sofisticadas a menudo usan la navegación lateral para habilitar varias páginas. Los subcomponentes son personalizables. Por ejemplo, puede incorporar una búsqueda global en el encabezado o agrupar elementos en la navegación lateral para adaptarse a los requisitos de su aplicación.
Los tres subcomponentes principales del marco de la aplicación son:
El encabezado es un componente central diseñado para ser parte de cada aplicación interna. Consta de subcomponentes que brindan a los usuarios acceso a funciones de todo el sistema, les ayuda a orientarse en la interfaz de usuario y proporciona coherencia entre experiencias. Aparece en la parte superior del marco de la aplicación y debe persistir en todas las páginas de la aplicación. Opcionalmente, puede hospedar comandos globales, como búsqueda, configuración, notificaciones, comentarios, perfil o ayuda. El nombre de la aplicación siempre debe mostrarse y, lo ideal, también debe servir como un enlace en el que se pueda hacer clic a la página de inicio o de destino. El encabezado debe responder, con comandos moviéndose al control de desbordamiento en ventanas gráficas de 600 píxeles o menos. El ancho de entrada de búsqueda también responde a 1023 píxeles o menos.
Navegación es un sistema de controles que funcionan en conjunto para ayudar a los usuarios a encontrar información y completar tareas. Ayuda a los usuarios a pasar de una sección a otra de una aplicación. Jerárquicamente, no está adjunto a ninguna página o sección, sino que existe por encima de todo el resto del contenido. Siempre está presente y se puede minimizar a un estado contraído (también llamado estado de carril) para liberar espacio adicional para el contenido de la página. En ventanas de tamaño más pequeño, se puede minimizar en un menú desplegable. Las formas más comunes de navegación incluyen la navegación superior y la navegación lateral. No uses ambos simultáneamente.
La región de contenido contiene el foco de la pantalla. El tamaño de la ventana del navegador influye en el marco de contenido y el espacio disponible en la región de contenido principal. Este marco se adapta en función del punto de interrupción y el comportamiento de respuesta correspondiente de cada componente. Más información en Crear una matriz de puntos de interrupción.
Opcionalmente, la región de contenido puede contener varias subregiones que están disponibles para la colocación coherente de elementos, como un encabezado de página, paneles laterales en línea o paneles que se superponen al contenido.
Adherirse a un lenguaje de diseño consistente con combinaciones de colores, tipografía y estructura de diseño ayuda a los usuarios a identificar e interactuar rápidamente con varios elementos sin confusión. Cuanto más coherentemente se utilice un patrón de marco de aplicación en todas las aplicaciones empresariales internas, más fuerte será el recuerdo o el modelo mental del usuario. Alinearse con los estándares de la industria o los patrones comunes de la plataforma potencia aún más este efecto.
Una vez determinado el marco de la aplicación, el diseño de cada pantalla reside dentro del área de contenido del marco de la aplicación.
Utilice cuidadosamente la región de contenido
Los usuarios anhelan experiencias fluidas en las que la información sea fácilmente accesible, el texto sea fácil de leer y la estética mejore la usabilidad en lugar de entorpecerla. Priorice la visibilidad inicial de la información clave, garantice la legibilidad en todas las columnas y armonice los elementos de diseño para lograr un atractivo estético.
Asegúrese de que la información esencial sea visible inmediatamente al abrir la pantalla sin necesidad de desplazarse. Priorice la visualización de información esencial, como opciones de navegación, contenido crucial y elementos procesables cerca de la parte superior de la pantalla. Lograr un equilibrio entre mostrar suficientes artículos y proporcionar información detallada para cada artículo es un desafío constante. Por el contrario, si bien puede resultar tentador proporcionar toda la información posible en la vista inicial, demasiada información corre el riesgo de abrumar a los usuarios y diluir la importancia de los elementos clave. Considere la posibilidad de emplear resúmenes concisos o vistas previas que ofrezcan un vistazo a contenidos más detallados, incitando a los usuarios a profundizar en ellos. Los paneles están optimizados para cumplir este propósito de visualizar grandes cantidades de datos.
Incorpore múltiples columnas, secciones o agrupaciones para organizar lógicamente el contenido y maximizar el espacio. Preste meticulosa atención al ancho de la columna, asegurándose de que el texto permanezca legible sin tensión excesiva. Evite columnas demasiado estrechas que obliguen a los usuarios a desplazarse horizontalmente constantemente, interrumpiendo el flujo de interacción. Por el contrario, las columnas excesivamente anchas pueden impedir la legibilidad, lo que obliga a los usuarios a seguir líneas a lo largo de largas distancias. Esfuércese por lograr un equilibrio que permita una lectura cómoda y al mismo tiempo haga un uso eficiente del espacio disponible.
Dimensione y coloque los elementos visuales de manera adecuada para crear una interfaz visualmente agradable y equilibrada. Alinee los subtítulos con los elementos visuales o títulos correspondientes, mantenga un espacio constante entre los elementos y respete una jerarquía basada en las necesidades del usuario. Recorte los adornos innecesarios y asigne píxeles con criterio a los elementos más importantes. Priorice y enfatice el contenido y los elementos de navegación, especialmente en las aplicaciones o páginas de inicio de navegación intensiva, y evite la ornamentación superflua que resta usabilidad.
Una cuadrícula subyacente puede resultar útil para organizar elementos de forma coherente. El comportamiento de la cuadrícula elegido debe ser coherente en todas las regiones de contenido de la pantalla de la aplicación y también se puede aplicar a nivel de componente (como tarjetas o paneles laterales). El tipo más común de diseño de cuadrícula utilizado en aplicaciones web es la cuadrícula de columnas. Se recomienda un comportamiento de cuadrícula fluido (o estirado) para implementar pantallas dinámicas.
Utilice diseños y patrones de agrupación establecidos
Utilice estructuras y disposiciones comúnmente reconocidas para organizar contenidos y elementos dentro de una interfaz de usuario. Estos diseños y patrones se han perfeccionado y han demostrado su eficacia con el tiempo, lo que los hace familiares e intuitivos para los usuarios y, al mismo tiempo, facilita la implementación de patrones adaptables. Una vez identificados los escenarios y elementos principales, asigne cada uno a un diseño establecido que proporcione la mejor interacción. Priorice el contenido y las funciones importantes para completar la tarea. Decide qué elementos deben estar siempre visibles y accesibles en la pantalla y cuáles se pueden ocultar o se puede tener acceso a ellos a través de otros menús o acciones.
La siguiente lista, aunque no exhaustiva, describe diseños establecidos comúnmente utilizados para aplicaciones comerciales o de productividad. Todos se pueden colocar dentro de la región de contenido principal.
Pantalla de aterrizaje/inicio
La página de aterrizaje o principal sirve como punto de entrada a una aplicación y proporciona a los usuarios una descripción general de las ofertas o funciones de la aplicación. Por lo general, su objetivo es captar la atención de los visitantes y anima a realizar una acción específica, como completar una tarea por primera vez o explorar más contenido. A menudo contiene imágenes destacadas y opciones de navegación limpias.
Es ideal para dar la bienvenida a los usuarios, ofrecer acceso rápido a funcionalidades clave, opciones de navegación o llamadas a la acción, y establecer el tono de la experiencia de la aplicación. Priorice la claridad, la simplicidad y la navegación intuitiva para guiar a los usuarios de manera efectiva.
Panel
Un panel es un centro centralizado dentro de una aplicación que presenta a los usuarios una descripción general completa de datos o información relevantes. A menudo consta de widgets o módulos personalizables que permiten a los usuarios monitorear métricas específicas o realizar acciones.
Los paneles son adecuados para aplicaciones con conjuntos de datos complejos o funcionalidades multifacéticas, lo que permite a los usuarios realizar un seguimiento del progreso, analizar tendencias y tomar decisiones informadas de un vistazo. Son particularmente útiles en plataformas de análisis, herramientas de administración de proyectos y aplicaciones de administración financiera.
Formulario
Un formulario es un diseño estructurado que facilita la entrada de datos por parte de los usuarios, normalmente compuesto por campos para introducir varios tipos de información, como texto, números, fechas y selecciones. Los formularios son esenciales para recopilar información de los usuarios, procesar transacciones y facilitar las interacciones dentro de las aplicaciones.
Se emplean comúnmente en flujos de registro, procesos de pago, tareas de entrada de datos y cualquier escenario que requiera aportaciones o comentarios del usuario.
Vista de entidad/perfil
La vista de entidad o perfil presenta información detallada sobre una entidad específica, como un perfil de usuario, una lista de productos o un elemento de contenido. Por lo general, incluye texto descriptivo, elementos multimedia y acciones o interacciones relevantes.
Son ideales para mostrar información detallada sobre elementos dentro de una aplicación. Proporcionan a los usuarios información detallada, facilitan la toma de decisiones y respaldan la interacción con entidades específicas, como perfiles de usuario en aplicaciones de redes sociales o listados de productos en plataformas de comercio electrónico.
Página Lista
Una lista o tabla muestra una colección de elementos o entidades en un formato estructurado, a menudo presentado en un diseño lineal o de cuadrícula. Por lo general, incluye breves resúmenes o vistas previas de cada elemento, junto con controles de navegación para explorar o filtrar.
Las páginas de lista son efectivas para presentar grandes conjuntos de contenido o datos en un formato digerible, lo que permite a los usuarios escanear, buscar y navegar de manera eficiente. Si se habilitan acciones en filas específicas, el proceso debe ser claro. Las páginas de lista se utilizan comúnmente en sistemas de administración de contenidos, listados de directorios, resultados de búsqueda y fuentes de noticias.
Mini reseña (pantalla dividida)
Una minipantalla o pantalla dividida divide la interfaz en dos secciones distintas, con una lista mostrada en el lado izquierdo y una vista de elementos en el lado derecho. La lista normalmente contiene una colección de elementos, mientras que la vista de elementos proporciona información detallada sobre el elemento seleccionado en la lista.
Este diseño es particularmente efectivo en escenarios donde los usuarios necesitan navegar a través de una lista de elementos rápidamente y ver información detallada sobre cada elemento simultáneamente, como cuando realizan operaciones masivas. Los catálogos de productos, los sistemas de administración de documentos, los clientes de correo electrónico o comunicación y las herramientas de administración de tareas (por ejemplo, el visor de consultas de Azure Dev Ops) son escenarios que normalmente se ajustan a este patrón.
Asistente
Un asistente guía a los usuarios a través de una serie de pasos o tareas secuenciales, normalmente de forma lineal, para completar un proceso complejo o lograr un objetivo específico. A menudo incluye indicadores de progreso, indicaciones y comprobaciones de validación. Los asistentes son beneficiosos para simplificar procesos complejos, reducir la sobrecarga cognitiva y guiar a los usuarios a través de tareas o flujos de trabajo desconocidos. Se utilizan comúnmente en flujos de incorporación, procesos de configuración, formularios de varios pasos e interacciones basadas en tareas, como la configuración de configuraciones o transacciones complejas.
Personalice y desarrolle el diseño estándar para adaptarse a requisitos específicos. Este proceso puede incluir agregar o eliminar elementos, ajustar el tamaño y la posición de los elementos y aplicar estilo para que coincida con la identidad de la marca o las pautas de diseño visual. Experimente con diferentes configuraciones y variaciones del diseño estándar para encontrar la disposición más eficaz para el contenido y la experiencia general del usuario.
Diseños para todos los dispositivos
Los diseños son la culminación de reglas definidas y una organización intencional del contenido. Integrar su contenido en estructuras bien pensadas es clave, pero lograr que todo fluya junto con una jerarquía clara entre plataformas y tamaños de pantalla requiere una lógica de escalado. Individualmente, el diseño adaptable y dinámico pueden abordar este desafío. En algunos casos, una combinación de diseño adaptable y dinámico es la opción correcta.
El diseño dinámico utiliza un solo diseño donde el contenido es fluido y puede adaptarse a los cambios de tamaño del formato. Esta técnica de diseño utiliza consultas de medios para inspeccionar las características de un dispositivo determinado y presenta el contenido en consecuencia. El diseño dinámico le permite crear una función una vez y hacer que funcione de manera efectiva en todos los tamaños de pantalla.
Un diseño adaptable cambia completamente según el formato en el que se presenta. El diseño adaptable tiene múltiples tamaños de diseño fijos y hace que el navegador cargue un diseño determinado según el espacio disponible. Los sitios web creados con diseño adaptable utilizan consultas de medios para detectar puntos de interrupción, de forma similar al diseño adaptable. También utilizan marcas adicionales basadas en las capacidades del dispositivo. Este proceso se conoce como "mejora progresiva".
Cambio de posición
Modifique la posición de los elementos de la página.
Mantenga su contenido organizado, legible y equilibrado optimizando la composición a medida que aumenta el tamaño de la ventana. Por ejemplo, los elementos apilados verticalmente en una ventana gráfica móvil se pueden reposicionar horizontalmente en ventanas gráficas más grandes. Este cambio sigue un orden de lectura natural de izquierda a derecha, crea equilibrio en el diseño y mantiene el enfoque visual en los elementos clave de la página.
Cambiar tamaño
Ajuste el tamaño y los márgenes de los elementos de la página.
Cambie el tamaño de los elementos de la página para optimizarlos y brindar una experiencia de usuario rica mostrando más contenido en la parte superior de la ventana, lo que reduce la necesidad de desplazamiento vertical. Ajuste los márgenes de la página para agregar espacios en blanco y equilibrio al diseño, lo que permite que el contenido respire y mejora el atractivo visual del diseño. Por ejemplo, un componente principal podría extenderse a todo el ancho de la ventana para mostrar más imagen de fondo. El contenido debajo de la imagen se puede expandir, pero use márgenes diferentes para agregar variedad en el diseño y ayudar a definir la jerarquía visual.
Redistribución
Optimice el flujo de elementos de la página.
Ajuste los elementos de la página para asegurarse de que se muestren en su totalidad, teniendo en cuenta el tamaño y la orientación de la ventana, reorganizando el contenido. Por ejemplo, una sola columna de contenido en una ventana más pequeña se puede redistribuir en una ventana más grande para mostrar dos columnas de texto. Esta técnica permite mostrar más contenido "en la mitad superior de la página".
Mostrar/ocultar
Optimice el contenido para el tamaño de la ventana y su orientación.
Muestre u oculte elementos de la página para optimizar el contenido para el tamaño de la ventana y su orientación. Esta técnica de respuesta adapta la cantidad de información al contexto de visualización. Por ejemplo, las categorías que aparecen en una pantalla pequeña pueden mostrar metadatos limitados, como una imagen, un título y un enlace, de modo que otra información se haga visible para ayudar al usuario a concentrarse. En una pantalla más grande, las categorías pueden mostrar metadatos adicionales como una persona, una fecha y una breve descripción, sin dejar de encajar dentro de la ventana gráfica.
Rediseñar
Bifurque o contraiga los elementos y el contenido de la página para mantener el foco en información y acciones importantes.
Este enfoque es similar a seguir la práctica de "divulgación progresiva" en su diseño, pero para diferentes tamaños y orientaciones de ventanas. Por ejemplo, expandir la ventana permite mostrar una lista de elementos junto a los detalles. Este vínculo visual entre el contenido permite a los usuarios seleccionar fácilmente otro elemento. En una pantalla más pequeña, la atención se centra en mostrar información clave.
Crear una matriz de puntos de interrupción
Una matriz de puntos de interrupción sirve como una representación gráfica de los comportamientos adaptables o con capacidad de respuesta del diseño de una aplicación en diferentes tamaños de pantalla y orientaciones. Por lo general, presenta una cuadrícula o diseño estructurado que detalla la respuesta del diseño en varios puntos de interrupción. Cada segmento corresponde a un ancho de pantalla distinto, lo que ofrece información sobre la estructura, el diseño y la funcionalidad del diseño. Una matriz de puntos de interrupción abarca consideraciones de ancho de pantalla, orientación de la ventana gráfica, elementos de diseño, estructura de diseño, presentación de contenido, navegación, medios y componentes interactivos, para ilustrar cómo responde el diseño de un sitio web o aplicación en diferentes tamaños y orientaciones de pantalla. Este enfoque no solo ayuda a finalizar el diseño de cada pantalla, sino que también facilita la implementación cuando los cambios de propiedades de los componentes clave se rastrean explícitamente y se comunican bien.
Facilitación de Power Platform
Los diseños de formularios de aplicaciones basados en modelos se configuran mediante Power Apps Studio. El diseñador de formularios permite a los creadores agregar elementos en una estructura de cuadrícula, lo que permite que las páginas de formulario sean inherentemente responsivas. Componentes personalizados integrados como páginas personalizadas, componentes de lienzo integrados y Power Apps component framework ( PCF) los componentes de código necesitan incorporar un comportamiento receptivo en sus implementaciones. Por ejemplo, las páginas personalizadas deben implementar un comportamiento dinámico de la misma manera que una aplicación de lienzo pura para funcionar correctamente.
Las aplicaciones de lienzo requieren una configuración explícita para cada componente para implementar un comportamiento dinámico, lo que permite un mayor control sobre la experiencia. Los tamaños de pantalla se determinan en la definición de la aplicación, a la que se puede hacer referencia para determinar la posición, el comportamiento, la visibilidad y otras propiedades relevantes.