Disposición en T

El diseño T es un concepto arquitectónico y de diseño para aplicaciones web , diseñado específicamente para mejorar la experiencia del usuario en dispositivos móviles. Cuenta con un contenedor desplazable horizontalmente dividido en tres secciones distintas, cada una de las cuales abarca todo el ancho de la pantalla, y fue desarrollado para optimizar el uso del espacio y agilizar la navegación. ^{[1] [2] [3]}

El diseño T introduce el desplazamiento horizontal como método complementario al sistema de navegación convencional basado en ventanas emergentes en aplicaciones web móviles. ^[4] En este diseño , la sección central que es visible por defecto al acceder a la aplicación, facilita el contenido principal de una dirección URL y está flanqueada por dos secciones "auxiliares". Este enfoque minimiza la necesidad de movimientos extensos del usuario para alcanzar los controles de navegación que normalmente se encuentran en la parte superior de la pantalla. ^{[5] [6]}

Su objetivo es mejorar la experiencia del usuario en dispositivos móviles al proporcionar una forma más sencilla de acceder a contenido esencial, como la navegación principal, pantallas relacionadas con el comercio electrónico o información relacionada con la cuenta de usuario , garantizando que esos elementos sean fácilmente accesibles y requieran un esfuerzo mínimo del usuario. ^[7]

El diseño T fue implementado por primera vez por E (e-streetwear.com) en el diseño de su aplicación web móvil, y se inspiró en las interfaces de aplicaciones móviles nativas bien probadas como Instagram y Revolut . ^{[5] [1]}

Un estudio titulado "Mobile Navigation and User Preferences Survey" (Encuesta sobre preferencias de los usuarios y navegación móvil) indicó que los usuarios de aplicaciones móviles prefieren utilizarlas con una sola mano, navegando principalmente con el pulgar. ^[8] Estos conocimientos dieron lugar al experimento T-Layout, que comparó la eficiencia de utilizar gestos de deslizamiento para acceder a los elementos de navegación frente a los controles de navegación tradicionales. ^[2]

Se lanzó por primera vez como el diseño móvil de E a principios de 2023. Originalmente se desarrolló en base a seis principios: funcionalidad centrada en el usuario , tamaño de archivo liviano , implementación de HTML y CSS con un uso mínimo o nulo de JavaScript requerido, adecuado tanto para arquitecturas de navegador como de renderizado de servidor, diseño intuitivo y SEO mejorado . ^{[4] [7]}

El desarrollo del diseño T surgió de la necesidad de contar con interfaces más ergonómicas y fáciles de usar en las aplicaciones web móviles. Su diseño, que recuerda a la letra "T", surgió como una solución a varios desafíos de usabilidad que enfrentan los usuarios de dispositivos móviles, haciendo hincapié en la facilidad de acceso y la utilización eficiente del espacio en pantalla. ^[1]

En julio de 2023, E formalizó el concepto y sus especificaciones técnicas , presentándolo a la comunidad de diseño y desarrollo web. ^[7]

En octubre de 2023 se realizó la “Encuesta sobre preferencias de usuarios y navegación móvil”, estableciéndose que la gran mayoría de los individuos prefieren utilizar las aplicaciones móviles sosteniendo el teléfono con una sola mano, utilizando solo el pulgar para los gestos cuando sea posible. ^[8]

El posterior "T-Layout Experiment", diseñado para medir el tiempo en segundos y la distancia (esfuerzo del usuario) en píxeles, necesarios para acceder a los elementos de navegación tocando tradicionalmente controles fijos en comparación con deslizar el dedo por cualquier parte de la pantalla, demostró que los gestos de deslizar el dedo requieren menos tiempo y mucho menos esfuerzo. ^[2]

La característica principal del T-Layout es su función de desplazamiento horizontal, que puede mejorar la eficiencia de la navegación al tiempo que preserva la funcionalidad de las interfaces de usuario estructuradas tradicionalmente . ^[5]

Su implementación se puede lograr con una combinación de HTML y estilos con CSS, así como con Scss y Sass precompilados , CSS-in-JS y JSX con estilos . Puede ser una solución puramente HTML/CSS, pero también se puede utilizar JavaScript para agregar funcionalidades más específicas, mientras que se puede implementar tanto en aplicaciones existentes como nuevas. Su aplicación en arquitecturas de renderizado del lado del servidor garantizará que se apliquen todos sus principios subyacentes. ^{[4] [7]}

Aunque principalmente cada sección del diseño tiene un rol distinto y facilita tipos específicos de contenido, el T-Layout como concepto es versátil y adaptable, permitiendo modificaciones en el diseño o en cómo se implementa para atender las necesidades específicas de diferentes aplicaciones. ^[8]

• El experimento de diseño en T. E. Recuperado el 6 de enero de 2024.
• Encuesta sobre preferencias de experiencia de usuario en dispositivos móviles. E. Consultado el 6 de enero de 2024.