La experiencia en computadoras es adaptable desde el principio y admite una variedad de tamaños en pantallas conectadas o dentro de ventanas. Crea una IU adaptable para admitir toda la variedad de dispositivos Android. Los diseños adaptables son fundamentales para las experiencias de escritorio, ya que permiten que los usuarios cambien el tamaño de las ventanas de sus apps sin problemas.
Para preparar tu app para una experiencia en computadoras, comienza por adaptar la IU de tu app y, luego, continúa con el diseño de interacción de entrada y densidad. Para obtener más información, consulta Diseños adaptables. Para practicar con un lab de diseño, consulta el lab de diseño adaptable.
Piensa en paneles
Adopta un enfoque de diseño basado en paneles con agrupamiento y contención. El contenido se puede organizar con contenedores visuales o mediante agrupaciones implícitas con espacio en blanco. Estos paneles ofrecen flexibilidad, ya que se pueden expandir, restringir, ocultar, mover o mostrar como ventanas emergentes. El diseño con paneles simplifica el proceso de creación de experiencias cohesivas en varios dispositivos móviles y se puede integrar con las cuadrículas actuales para optimizar las alineaciones de diseños complejos.
Qué debes hacer
Escala
Si bien las pantallas expansivas brindan más espacio para el contenido, se deben tener en cuenta el espacio adicional y los factores ergonómicos, como la distancia de visualización. La tipografía debe aumentarse ligeramente para que los usuarios que estén más lejos o escriban en un teclado se sientan cómodos.
Los elementos de la IU y el texto se ajustan en las pantallas extendidas y conectadas, y pueden tener diferentes ajustes debido a las resoluciones de pantalla.
Usa uno o dos pasos más en tus diseños de escala de escritura existentes, o bien considera implementar una escala de escritura especializada diseñada para pantallas de escritorio y expandidas. Puedes realizar ajustes basados en opiniones en tus diseños para obtener una mayor calidad editorial.
La imagen también se amplía y abarca toda la pantalla. Esto permite que el usuario vea la planta con más detalle, pero no usa el espacio de manera eficiente. Ten esto en cuenta cuando estructures los elementos de la IU.
Contenido y elementos de la IU
Ahora que el contenido está agrupado y ajustado, parte de la IU del contenido también puede cambiar o actualizarse para adaptarse mejor a los puntos de interrupción.
Dentro de cada panel de contenido, decide si se adaptará y cómo lo hará. Observa el contenido en sí. Si una fila de la lista cambia a una tarjeta, ¿el contenido pierde eficiencia de interacción y capacidad de exploración? Los componentes pueden comportarse de manera diferente en los distintos puntos de interrupción. Puedes adaptar su ancho o visibilidad, o incluso cambiar componentes.
Decide el ancho máximo para cada elemento de la IU y el texto dentro de un panel. Los elementos de la IU no deben estirarse hasta ocupar todo el ancho ni distorsionarse. Establece los márgenes y el relleno máximos dentro de los paneles. El texto debe permitir una lectura cómoda limitando la longitud de las líneas. Limita el texto de formato corto a alrededor de 60 caracteres, mientras que el contenido de formato largo puede ser más extenso.
Qué debes hacer
Usa la divulgación progresiva ordenada. ¿Puede aparecer más contenido cuando el usuario aumenta el tamaño de la ventana? Considera si el contenido adicional aumenta la productividad con menos clics o genera confusión.
El contenido de cada panel puede cambiar de diseño, según el contenido, ya que se redistribuye en diferentes columnas y estructuras de cuadrícula. Por ejemplo, una cuadrícula vertical con un carrusel puede actualizarse a una cuadrícula de mampostería con un carrusel de funciones. Considera el cambio vertical para los elementos y combínalo con restricciones y cambios de presentación. Es posible que no quieras desplazar los componentes de esta manera, según el consumo de contenido.
Considera permitir que el usuario ajuste el diseño según sus preferencias para lograr la máxima legibilidad y productividad.
Navegación
Después de adaptar el contenido y los elementos de la IU, decide cómo interactúan los paneles de contenido entre sí y con la jerarquía de navegación. En lugar de presionar para navegar al contenido de detalles, puedes usar el espacio adicional de la pantalla para mostrar detalles y contenido complementario uno al lado del otro.
- Si se usa una barra de navegación, la barra inferior debe actualizarse a un riel de navegación al costado de la pantalla para aumentar la ergonomía. No estires una barra de navegación inferior.
- Para la navegación secundaria, como las pestañas, considera fijarlas a un ancho máximo para que sea más fácil navegar con precisión.
- Las barras de la aplicación también se pueden fijar en su panel de contenido correspondiente, pero asegúrate de no confundir la jerarquía de navegación.
Densidad
La experiencia en computadoras de escritorio puede cambiar su densidad de interacción y visual debido a la precisión de entrada y el tamaño de la pantalla.
- Puedes aumentar la densidad de los elementos visuales, como los datos de la tabla, sin abrumar al usuario en comparación con un diseño compacto para teléfonos. Considera que la densidad del contenido es opcional y siempre permite el ajuste de escala del texto dentro del diseño. No establezcas tamaños de escritura fijos.
- Los componentes deben tener un objetivo de clic más exacto. Los objetivos de clic intrínsecos alrededor de los componentes pueden generar clics erróneos.
Entradas
Las entradas adicionales significan patrones de interacción adicionales para tus usuarios.
Cuando un usuario tiene un mouse y un teclado, tu app debe tener en cuenta el estado de desplazamiento y el enfoque.
- Agrega estados cuando se coloca el cursor sobre un elemento para las entradas de puntero, como un mouse y un lápiz óptico.
- Captura los estados de enfoque de los elementos cuando los usuarios navegan con la tecla Tab para mejorar la accesibilidad.
- Ten en cuenta los estados del cursor, ya que este también puede ayudar a comunicar la interacción y el estado de la app al usuario.
Los estados adicionales pueden aumentar la eficiencia.
- La funcionalidad de clic derecho puede incluir menús contextuales para acceder rápidamente a las funciones.
- Las sugerencias sobre herramientas pueden ayudar a los usuarios a completar la integración.
- Las combinaciones de teclas ayudan a los usuarios avanzados a aumentar su productividad.
