10 Tendencias Ui (interfaz de usuario) para 2017

El mundo de la web y el diseño de interfaz de usuario está en constante cambio, y puede ser difícil mantenerse al día en la cima de las tendencias en constante evolución y los desarrollos. Segunda parte de las tendencias más importantes que creemos que deberías implementar en 2017 y por qué.

06. Parallax

tendencias ui

Epicurrence, un encuentro de acción y deporte para los creativos, opta por un uso muy obvio del parallax, creando una experiencia rápida y atractiva, que refleja el evento que está promoviendo

Después de no usar el diseño en caja y del scroll infinito, viene el uso del parallax, algo que a menudo funciona muy bien en combinación con diseños menos tradicionales. En pocas palabras, el parallax es el efecto donde el fondo se mueve a una velocidad más lenta que el primer plano, dando una sensación de profundidad y dinamismo a medida que los usuarios se desplazan. No es un nuevo mecanismo, sino algo que se está implementando cada vez más a medida que las marcas experimentan con su funcionalidad.

tendencias ui

Bang & Olufsen, el fabricante de productos de audio premium, opta por un uso más sutil y refinado del parallax, que refleja su elegante y sofisticada identidad de marca

¿Por qué usarlos?

Parallax es algo que debe ser utilizado con cuidado, ya que puede convertirse rápidamente en excesivo para los usuarios. Pero, cuando se implementa cuidadosamente, proporciona un gran sentido de dinamismo para ayudar a levantar el contenido de la página y comprometer a los usuarios. Úsalo en conjunto con imágenes, texto y un diseño menos rígido para crear contenido fluido y estratificado.

07. Más tarjetas

tendencias ui

El ejemplo anterior muestra cómo se pueden implementar tarjetas para trabajar en interfaces de usuario de pantalla más grande, desde tarjetas de menú desplazables hasta opciones para modelos de precios diferenciados

Las tarjetas, una vez más, no son una nueva tendencia de avance, pero son una interfaz de usuario funcional que han ganado consistentemente prominencia en diseño web después de su éxito en el diseño de interfaz de usuario móvil y su inclusión en Google Material Design.

De acuerdo con Google, 2015 vio oficialmente dispositivos móviles superar a los escritorios como la plataforma más popular para navegar por la web, por lo que más diseñadores están difuminando las líneas entre las interfaces de usuario móviles y de escritorio para crear una experiencia de usuario más transparente.

Las tarjetas son una interfaz de usuario versátil que trabajan a través del tablero, de dispositivos blindados más pequeños hasta los más grandes. Son una gran manera de organizar y mostrar grandes cantidades de datos en la pantalla en una sola vez, lo que permite a los usuarios mirar rápidamente a través de lo que está disponible y hacer su elección de qué ver. Facebook, Twitter, Netflix y Pinterest son potentes plataformas digitales que utilizan tarjetas para este propósito.

tendencias ui

Las tarjetas proporcionan una solución eficaz que permite a los usuarios escanear rápidamente el contenido disponible para encontrar la información que necesitan

¿Por qué usarlos?

Las tarjetas son una gran manera de organizar pequeñas ráfagas de información y su flexibilidad es invaluable en pantallas más pequeñas para organizar y consumir contenido. Son una solución que puede mostrar texto, imágenes, video y todo lo demás, ampliándose desde los dispositivos más pequeños a los más grandes. Las tarjetas ofrecen versatilidad sin fin, lo que permite a los diseñadores darle la vuelta, girar, apilar y filtrarlos para todo tipo de funcionalidades UX – más de lo que se explicará con micro-interacciones.

08. Microinteracciones

tendencias ui

Un gran ejemplo de cómo las micro-interacciones pueden ser implementadas para mostrar un cambio de estado en una interfaz de usuario de menú

Las microinteracciones, generalmente en forma de pequeñas animaciones en pantalla, están desempeñando un papel vital en el diseño de UI y UX, especialmente en dispositivos móviles y de pantalla más pequeña.

Desde una perspectiva de la experiencia del usuario, las microinteracciones no sólo son pequeñas y entretenidas animaciones o transiciones en pantalla, sino que son formas de retroalimentación visual para el usuario y sus acciones. Las microinteracciones permiten a los usuarios saber lo que está sucediendo, lo que ha sucedido y lo que ocurrirá después al interactuar con la interfaz de usuario.

Usando el famoso ‘me gusta’ de Facebook como ejemplo: cuando un usuario hace clic en el icono de pulgar hacia arriba, aumenta de tamaño y se vuelve azul antes de volver a su tamaño original, todo en una animación fluida, informando al usuario que su acción (Me Gusta) se ha completado.

Los diseñadores inteligentes son capaces de poner la ‘diversión’ de manera ‘funcional’ también, entreteniendo a los usuarios, así como informándoles. Desde animaciones de carga lúdica, hasta transiciones de iconos lisos, las microinteracciones efectivas se involucran e informan al mismo tiempo.

tendencias ui

Este ejemplo indica claramente al usuario que su acción se ha implementado ya que alternan entre los estados disponibles

¿Por qué usarlos?

Las microinteracciones proporcionan una retroalimentación útil y humanizada para permitir a los usuarios saber qué hacer y qué está sucediendo, de una manera reflexiva y entretenida. Pueden ayudar a que los procesos sencillos y mundanos sean divertidos, además de proporcionar una retroalimentación crucial.

09. Tipografía

tendencias ui

MailChimp utiliza una mezcla de fuentes, colores y opacidades para crear una introducción tipográfica inspirada en la Navidad lúdica para su guía de marketing para las vacaciones de 2016

Con una gama cada vez mayor de servicios de fuentes web (Google Fonts, Typekit) que ofrecen familias de fuentes gratuitas o rentables, esperan ver más marcas que abracen tipografía grande, audaz y hermosa en lugar de fuentes de sistema y obsoletas, a la moda San serifs.

Como hemos visto a lo largo de 2016, y con previsiblemente más por venir, la tipografía web se basará en el diseño gráfico y editorial tradicional, experimentando con tipos de letra más creativos que son piezas grandes y audaces, tomando el centro del diseño.

tendencias ui

Citroen también opta por una mezcla creativa de fuentes en capas e imágenes para su página interactiva Origins of Citroen

¿Por qué usarlos?

La tipografía es otro medio creativo para las marcas y los diseñadores de experimentar con la creación de contenido que está lleno de personalidad. Como se ha discutido a lo largo de este artículo, muchas de estas tendencias trabajan juntas, y la tipografía creativa es definitivamente un buen ejemplo de esto. Utiliza la tipografía en conjunto con imágenes, video, ilustraciones, colores y diseños no convencionales para crear experiencias únicas.

10. Navegación Experimental

tendencias ui

Adult Swim lleva la navegación a un nuevo nivel con sus singles de 2016

Navegaciones y menús han sido un tema muy discutido para los diseñadores. Con las líneas entre las interfaces de usuario de equipos móviles y de escritorio comenzando a difuminarse y el creciente uso de menús de hamburguesas en interfaces de usuario de mayor tamaño, existe un margen mucho más creativo para diseñar menús y navegaciones.

Siguiendo con las hamburguesas como ejemplo, lo que proporcionan es la consistencia en el diseño y construcción de sitios de respuesta, como se puede (en esencia) el diseño de una única estructura de navegación que escala y funciona a través de todos los dispositivos. Lo que es más interesante aquí, sin embargo, es la cantidad de libertad creativa proporcionada por el uso de una hamburguesa.

Con el menú oculto fuera de la lona, los diseñadores pueden darse a sí mismos toda la ventana de ventanas para crear una solución creativa. El cielo es el límite para las posibilidades creativas, pero como siempre, la navegación desempeña un papel importante dentro de UX, así que asegúrese de que nunca se forma sobre la función – los usuarios deben ser capaces de encontrar rápidamente su contenido!

No todos los diseñadores están de acuerdo con el uso de hamburguesas para la aplicación de escritorio (o en absoluto). Es un tema en sí que es digno de su propio blog, pero 2017 y más allá está seguro de ver más experimentación con las opciones de navegación y menús, para bien o para mal!

tendencias ui

Adult Swim cuenta con una rejilla tridimensional de miniaturas en movimiento, que tienen estados de cambio de color tipográficos y que cambian de color

¿Por qué usarlos?

Las navegaciones ya no se limitan a una sola fila de enlaces pegados a la parte superior de la ventana gráfica, y definitivamente hay más soluciones creativas disponibles para ayudar a los usuarios a encontrar su camino. Aunque la creatividad y la estética son importantes, los diseñadores siempre deben priorizar la usabilidad, asegurando que los usuarios puedan encontrar rápida y fácilmente el contenido que necesitan, en lugar de confundirse con soluciones exageradas o rebuscadas.

Conclusiones

Al igual que con las tendencias de cualquier naturaleza, algunos vienen y van, mientras que otras siguen el curso y se convierten en fundamentos. No todas las tendencias o predicciones que he discutido aquí pueden ser relevantes para el proyecto en el que estás trabajando; como diseñador, es tu propio juicio el que decide lo que es correcto y lo que no, y es algo que va a cambiar por el cliente y el proyecto.

Sin embargo, el cambio ocurre a la velocidad del rayo en esta industria creativa y es importante mantenerse al día con lo que sucede para mantenerse relevante. Las opciones de UI siempre deben ser alimentadas para lograr un gran UX, y lograr un gran UX siempre va a cambiar a medida que las nuevas tecnologías emergen y se desarrollan. Es un paisaje en constante cambio que requiere constante aprendizaje e innovación.

Espero que desde este post hayas aprendido un poco acerca de cómo las cosas han progresado durante 2016 y, lo que es más importante, cómo estos cambios influirán en el diseño digital en 2017 y más allá.

Tagged with: , , , , ,