416
post-template-default,single,single-post,postid-416,single-format-standard,ajax_fade,page_not_loaded,,qode-title-hidden,qode_grid_1300,qode-content-sidebar-responsive,qode-theme-ver-10.1.2,wpb-js-composer js-comp-ver-5.1,vc_responsive
15 Dic

De cómo los pequeños dispositivos han influido en el diseño de interfaces

La proliferación de todo tipo de dispositivos portátiles y la mentalidad mobile-first ha impactado de una manera incontestable en la forma en que hoy funcionan los sitios web.

La búsqueda de un diseño de interface eficaz y la necesidad de dar respuesta a toda esa diversidad de pantallas creando experiencias compatibles entre dispositivos ha popularizado algunas prácticas de diseño que parecen haber llegado para quedarse.

Minimalismo extremo

Las limitaciones de las pantallas portátiles nos llevan a un diseño necesariamente simplificado y centrado en la funcionalidad. Pero esto no es un problema para los diseñadores que están haciendo un uso fantástico del color y la tipografía para resolver el problema con efectos visuales que atraen la atención e interacción del usuario.

Un diseño que optimiza y minimiza. La interfaz incluye mucho más espacio en blanco y se apoya en gráficos e iconos para mostrar la información de forma simple, clara y eficaz.

La demanda de una consistencia UX multiplataforma seguirá creciendo mientras el número de usuarios que deseen acceder a los sitios web desde dispositivos móviles lo siga haciendo. Y hoy por hoy, en lo que a diseño se refiere eso se traduce en minimalismo.

La buena noticia es que el minimalismo es una tendencia de diseño clásica que no pasa de moda. Estilos simples y fáciles de entender proporcionan una amplia oportunidad para que los diseñadores jueguen dándole prioridad al contenido.

Navegación “oculta”

El menú oculto a primera vista y accesible con un sólo clic que comenzó como solución a un problema del diseño mobile se ha convertido rápidamente en un elemento clave en la creación de páginas web.

Sitios como Facebook o Spotify y sus aplicaciones móviles correspondientes son algunas de las razones de que la navegación oculta haya prosperado.

El usuario debe tener la posibilidad de navegar por todo el site, independientemente del dispositivo que esté utilizando y las navegaciones tradicionales suelen utilizar demasiado espacio para resultar totalmente eficaces. Uno de los grandes beneficios del menú oculto es la creación de espacio adicional en la pantalla, lo que incide en la tendencia minimalista del diseño.

Ante el auge de la navegación móvil y del diseño web responsive, el menú emergente, representado principalmente por el tan criticado icono “hamburger”, se ha convertido ya en un patrón de navegación reconocido y aceptado que, sin duda, ha llegado para quedarse.

Este menú, representado con tres líneas horizontales, es una clara representación del diseño limpio y minimalista que mencionábamos anteriormente.

Hegemonía del scroll (Long-scroll)

El scroll infinito tan popular en los últimos años se ha implantado rápidamente como un formato básico del diseño web. A medida que los dispositivos móviles se vuelven más populares, cada vez es más común que los sitios opten por desplazarse en lugar de vincularse.

Este tipo de navegación vertical cuenta con un gran potencial de narración para atraer a los usuarios con animaciones de desplazamiento cada vez más sofisticadas. El scrolling parallax añade un elemento sorpresa a la experiencia de usuario motivando su interacción.

El formato vertical simplifica la navegación y se traduce muy bien a las pequeñas pantallas de los dispositivos móviles y sus controles táctiles.

Diseño modular (Card Layouts)

Una tarjeta, un concepto. Las tarjetas son básicamente pequeños contenedores de información. Cada tarjeta representa un concepto singular, independiente y autónomo que debe tener sentido por sí mismo y debería ser posible distribuirlo independientemente del resto del site.

Popularizado por Pinterest y posteriormente por Facebook, Twitter y Google, el diseño de interface de usuario basado en tarjetas, permite organizar gran cantidad de contenido en partes digeribles,  fáciles de entender y de navegar.

Los diseñadores  tienen una gran flexibilidad en relación al aspecto de la propia tarjeta y a cómo los grupos de tarjetas encajan entre sí. De este modo vemos implementaciones muy diversas y creativas tanto a nivel de impacto visual como de experiencia de usuario.

Al igual que el resto de las tendencias que aquí mencionamos, el layout basado en tarjetas ha llegado a ser popular no sólo por ser atractivas visualmente sino por su gran compatibilidad con la navegación mobile y el diseño responsive.

Diseño de pantallas divididas (Split Content/Screen)

Una pantalla. Dos mensajes. Dos contenidos distintos con dos intenciones distintas.

Ciertamente, no es una de las tendencias más escandalosas que hemos visto en los últimos años pero el diseño de contenido dividido visualmente en dos columnas (una, a menudo, de desplazamiento, mientras que el resto permanece fijo) ha sido repetido en el suficiente número de sitios web como para ganarse una mención en este listado de tendencias.

Lo bueno es la rapidez con la que el estilo ha evolucionado. En un inicio, los diseños de pantallas divididas eran principalmente en su mayoría diseños simétricos, con una estética estilo yin-yang. En las nuevas pantallas divididas verticalmente en dos o más partes, todo vale. Una técnica fresca y versátil con un número casi ilimitado de combinaciones cuando se empieza a jugar con el diseño.

La estética funciona especialmente bien como diseño web responsive dividiendo verticalmente la pantalla en su versión de escritorio y apilando elementos en los dispositivos más pequeños.

Micro-interacciones

Aunque las animaciones son ahora más prominentes que nunca, la tendencia ha cambiado. De animaciones muy obvias se ha pasado a micro-interacciones y animaciones sutiles. Efectos hover, loading animation, sistemas de navegación y elementos de interfaz de usuario más pequeños. Siguiendo el espíritu minimalista, estos nuevos efectos son sencillos y sólo con lo esencial.

Los diseñadores se han dado cuenta de que un enfoque más conservador en cuanto a las animaciones puede ser más efectivo.

Esenciales dentro del UI/UX, las micro-interacciones aportan información, funcionalidad e intención, ayudan a la usabilidad mejorando la experiencia del usuario y al engagement con belleza y fluidez.

Las micro-interacciones  que nacieron con los móviles y se ha popularizado gracias a las apps y a dispositivos wearables se suman para una experiencia de usuario más satisfactoria en general.

El minimalismo, las micro-interacciones o el diseño de tarjetas pueden ser tendencia en este momento, pero por una buena razón, todas ellas son funcionales y se traducen fácilmente a diferentes tamaños de pantalla.

Desde que la web trascendió a las pantallas de escritorio y llegó a los dispositivos móviles, wearables y al “Internet of Things” ya no sólo hablamos de “diseño de páginas web” en un sentido estético, sino desde uno de usabilidad y diseño de experiencias.

Y aunque no les falta razón a los que afirman que muchos sitios web resultan exactamente iguales. En un sentido positivo podemos hablar de la consolidación de un lenguaje visual estable y de un conjunto sólido de patrones de interacción que se han afianzado en el mundo digital.

Por otro lado, la caótica demanda de diseñar cada vez más y mejores interfaces que funcionen en un incalculable número de dispositivos y navegadores obliga (¿o excusa?) a los diseñadores a adoptar convenciones de interface que aseguren la funcionalidad de un producto digital.

NO HAY COMENTARIOS

Escribir comentario