Don't you want to read? Try listening to the article in audio mode 🎧
Existen algunas prácticas recomendadas en el diseño de la experiencia del usuario que la mayoría de los diseñadores web seguirán durante décadas. Y hay diseñadores de UX que subvierten las expectativas y rompen las reglas de forma audaz y ambiciosa.
Tanto seguir las normas al pie de la letra como romperlas por completo tienen sus inconvenientes. Pero no hace falta irse a los extremos para ser un buen diseñador de UX. En su lugar, sigue las tendencias recientes en diseño de UX para saber cómo está cambiando el sector en tiempo real y actúa en consecuencia.
Aquí tienes siete tendencias UX que van a definir el 2023.
Source: Unsplash
Source: Clevertap[/caption]
La visualización de datos no solo está reservada a aplicaciones y sitios web basados en datos. También es posible contar una historia con la visualización de datos, una que muestre los puntos fuertes de tu marca.
Y ni siquiera es algo nuevo. Aquí tienes un ejemplo de visualización de datos eficaz de 2012.
[caption id="attachment_12710042" align="aligncenter" width="612"]
Source: Apple[/caption]
Además de contar historias con datos, puedes ofrecer a tus usuarios información sobre cómo utilizan tu aplicación. El mejor ejemplo es la visualización anual que hace Spotify de la música que reproducen los usuarios.
Otras aplicaciones ofrecen visualizaciones del tiempo pasado en la aplicación, los progresos realizados en determinados aspectos de la misma y otras estadísticas de uso.
Source: Ikea[/caption]
Muchas otras marcas retomaron esta idea, y ahora es posible probarse cualquier cosa, desde gafas hasta maquillaje, con una aplicación de marca.
Si estás diseñando la experiencia del comprador para una marca de productos, puede ser una buena idea incorporar la realidad extendida a la mezcla. El inconveniente es que puede resultar caro desarrollar una aplicación de este tipo, pero la adopción de la tecnología está ahí, así que el desembolso puede merecer la pena.
Source: Protonmail[/caption]
Una opción es una barra de progreso que se llena y cambia de color al completarse.
[caption id="attachment_12710045" align="alignnone" width="455"]
Source: Codepen[/caption]
Otra opción creativa para la microinteracción con contraseñas es una lista con viñetas que cambia dinámicamente a medida que el usuario teclea su contraseña.
[caption id="attachment_12710046" align="alignnone" width="506"]
Source: Behance[/caption]
Source: Dribble[/caption]
Al pasar el ratón por encima de un enlace que lleva a una página de categoría, se muestran los precios. La misma información podría transmitirse en forma de tabla, pero de este modo el usuario puede decidir cómo ver el sitio.
Source: Huffington Post[/caption]
La misma página muestra muchos más elementos a tamaño completo, lo que facilita la interacción.
[caption id="attachment_12710049" align="alignnone" width="729"]
Source: Huffington Post[/caption]
Lo mejor es empezar a crear una maqueta a partir del tamaño más pequeño, por ejemplo, el de un smartphone. Es mucho más fácil ampliar los elementos del sitio web a una pantalla más grande una vez que se ha perfeccionado el aspecto en la pantalla de un teléfono.
Dado que las pantallas de los teléfonos permiten ver el sitio web de forma mucho más condensada, es posible ocultar algunos elementos del sitio web para que no se vean en determinados dispositivos. Esto es especialmente importante en el caso de los elementos interactivos, como los scripts para la interacción del cursor. Si quieres hacer una microinteracción, céntrate en interacciones de deslizamiento en lugar de cursores.
Source: Unsplash
Data Visualization
En un mundo donde la información lo es todo, llegar a entenderla puede resultar difícil. El trabajo de un diseñador UX es visualizar esta data y y convertirla en flujos de información fácilmente comprensibles y llenos de ideas. Para aplicaciones que funcionan específicamente con un alto volumen de datos, como CRMs or herramientas de data analytics, una buena visualización de estos datos es primordial. El objetivo es que la forma de visualizar los datos se adapte a la audiencia. No todos los públicos necesitan una visualización muy detallada. El público necesita obtener la información adecuada del flujo de datos. La forma de visualizar los datos debe corresponderse con ello. [caption id="attachment_12710041" align="aligncenter" width="324"] Source: Clevertap[/caption]
La visualización de datos no solo está reservada a aplicaciones y sitios web basados en datos. También es posible contar una historia con la visualización de datos, una que muestre los puntos fuertes de tu marca.
Y ni siquiera es algo nuevo. Aquí tienes un ejemplo de visualización de datos eficaz de 2012.
[caption id="attachment_12710042" align="aligncenter" width="612"] Source: Apple[/caption]
Además de contar historias con datos, puedes ofrecer a tus usuarios información sobre cómo utilizan tu aplicación. El mejor ejemplo es la visualización anual que hace Spotify de la música que reproducen los usuarios.
Otras aplicaciones ofrecen visualizaciones del tiempo pasado en la aplicación, los progresos realizados en determinados aspectos de la misma y otras estadísticas de uso.
Realidad extendida
El diseño de sitios y aplicaciones web es ahora más interactivo que nunca. Algo que ya se ha convertido en una buena práctica es utilizar la realidad extendida. La realidad extendida es un término que engloba la realidad virtual, la realidad aumentada y la realidad mixta. Significa llevar elementos de la realidad digital al mundo real a través de cascos de realidad virtual, gafas inteligentes o simplemente el teléfono. Por supuesto, la RV no tiene la suficiente penetración en el mercado como para que diseñar para ella sea específicamente viable, pero la RV y la RA combinadas ya son utilizadas por un tercio de la población estadounidense, sobre todo en forma de software de RA. Para las marcas que venden productos físicos, esto supone una oportunidad perfecta para mejorar la experiencia del usuario. Mezclar realidad con elementos digitales es posible a través de un smartphone y puede ser extremadamente útil, sobre todo porque ahora muchas compras se hacen online sin opción de probarse el producto. Ikea tiene una aplicación de realidad aumentada que sirve de buen ejemplo para los diseñadores de UX. La aplicación permite a los usuarios colocar muebles de Ikea en sus casas con una cámara. [caption id="attachment_12710043" align="alignnone" width="863"] Source: Ikea[/caption]
Muchas otras marcas retomaron esta idea, y ahora es posible probarse cualquier cosa, desde gafas hasta maquillaje, con una aplicación de marca.
Si estás diseñando la experiencia del comprador para una marca de productos, puede ser una buena idea incorporar la realidad extendida a la mezcla. El inconveniente es que puede resultar caro desarrollar una aplicación de este tipo, pero la adopción de la tecnología está ahí, así que el desembolso puede merecer la pena.
Contenidos basados en IA
El desarrollo de nuevo software también facilita mucho las tareas mundanas de los diseñadores de UX. A pesar de la adopción generalizada de la realidad aumentada y de que el medio visual está a la vanguardia del diseño web, gran parte de la experiencia del usuario sigue siendo el contenido escrito. Entender lo que tus clientes quieren leer y los problemas que necesitan resolver es un trabajo de UX que requiere mucha investigación. La IA facilita mucho esa investigación y cada vez la adoptan más empresas. Sin embargo, la inteligencia artificial aún no está lo suficientemente desarrollada como para crear contenidos de calidad por sí sola. Incluso las aplicaciones GPT-3 más avanzadas sólo pueden producir contenidos genéricos sin mucha profundidad. Sin embargo, donde la IA destaca es en la investigación y optimización de contenidos. Por ejemplo, el software de marketing de contenidos de SE Ranking ayuda a los diseñadores de UX y a los profesionales del marketing a crear resúmenes de contenidos basados en IA y a evaluar sus contenidos en comparación con los de los principales competidores, así como sus requisitos iniciales. La herramienta busca en la web una palabra clave o un tema que se le indique y ayuda a crear un resumen basado en los contenidos con mejor rendimiento. La herramienta también le permite añadir fácilmente subtemas al resumen que se pueden incluir posteriormente en el contenido para mejorar la estructura de la página. También incluye sugerencias SEO, como qué palabras clave específicas es mejor incluir para mejorar la visibilidad en las búsquedas. These insights help to improve the content itself for UX and search visibility and may also improve user interaction and retention and reduce the time needed to arrive at this page structure through experimentation.Microinteracciones
En el mundo del diseño web, donde muchos sitios tienen el mismo aspecto y la misma estructura probada, son los pequeños elementos de interacción con el sitio los que hacen que la experiencia del usuario sea única. Por eso, desarrollar microinteracciones fue una de las tendencias más interesantes de 2022 que no va a desaparecer en 2023. Para entender qué es una microinteracción, piensa en los emojis de Facebook. Cuando reaccionas a una publicación, no te limitas a dejar un emoji ahí, sino que ves una pequeña animación. Lo mismo ocurre al enviar un emoji seleccionado a un chat: se envía con una bonita animación. Podría decirse que estos pequeños detalles forman parte de la interfaz de usuario, pero también tienen un propósito de UX: hacen que la experiencia de uso de tu sitio web sea un poco más agradable. Sin embargo, no tienes que incorporar emojis a tu sitio web para crear una buena microinteracción. En su lugar, céntrate en hacer que las interacciones clave con tu sitio sean más atractivas con un poco de animación JS o CSS. Uno de los ejemplos más sencillos de microinteracción eficaz es añadir una barra de progreso de contraseña. En lugar de limitarte a informar al usuario de cómo debe ser la contraseña, puedes hacer que sea interactiva. [caption id="attachment_12710044" align="alignnone" width="438"] Source: Protonmail[/caption]
Una opción es una barra de progreso que se llena y cambia de color al completarse.
[caption id="attachment_12710045" align="alignnone" width="455"] Source: Codepen[/caption]
Otra opción creativa para la microinteracción con contraseñas es una lista con viñetas que cambia dinámicamente a medida que el usuario teclea su contraseña.
[caption id="attachment_12710046" align="alignnone" width="506"] Source: Behance[/caption]
Interacciones avanzadas del cursor
Una de las microinteracciones más interesantes y creativas que probablemente serán relevantes en 2023 son las interacciones del cursor. En la última década, cambiar el aspecto o el funcionamiento del cursor se ha convertido en un faux-pas, algo reservado a sitios de aficionados o juegos de navegador. Pero la tendencia comenzó a invertirse en 2022, con muchos creadores adoptando formas poco ortodoxas de tratar la entrada del usuario en el sitio web, incluso si esa entrada es simplemente pasar el ratón por encima de un elemento. Por interacción avanzada del cursor se entiende cualquier interacción que se desencadene al pasar el ratón o hacer clic sobre un elemento del sitio web que no sea un cambio de color. Las interacciones del cursor pueden ser realmente imaginativas, como un rastro de pintura que sigue al cursor o la sustitución del cursor por un espejo. Pero esto es más adecuado para sitios web creativos y experimentales, y muy pocas marcas B2B se atreverían a hacer algo tan poco ortodoxo. He aquí un ejemplo de interacción del cursor que rompe con la norma, pero mantiene la experiencia del usuario sencilla e intuitiva. [caption id="attachment_12710047" align="alignnone" width="845"] Source: Dribble[/caption]
Al pasar el ratón por encima de un enlace que lleva a una página de categoría, se muestran los precios. La misma información podría transmitirse en forma de tabla, pero de este modo el usuario puede decidir cómo ver el sitio.
Búsqueda o asistencia de voz a voz
Diseñar pequeñas experiencias es importante. Pero diseñar un gran cambio en la experiencia importa mucho más, sobre todo si tenemos en cuenta la accesibilidad. La búsqueda por voz es cada vez más popular, ya que el 27 % de los usuarios de todo el mundo la utilizan. Es natural llevar esta forma de interacción del motor de búsqueda a los sitios web que utiliza la gente. Puedes adaptar tu sitio web a la búsqueda por voz para que navegar por él desde el móvil sea aún más fácil. También es posible hacer que determinadas acciones del sitio web se basen en la voz, como añadir artículos al carrito y pagar. Otra función de accesibilidad que merece la pena añadir es el software de conversión de texto a voz, capaz de reproducir el texto de una página en voz alta. Básicamente, se trata de una forma totalmente nueva de interactuar con el sitio web, y diseñarla desde cero requiere mucho trabajo. Pero, teniendo en cuenta que la gente está adoptando esta tendencia, bien podría merecer la pena el esfuerzo.Diseño Responsive
Diseñar sitios web que se vean bien en cualquier pantalla no es sólo una tendencia. Es una necesidad. Los usuarios de Internet esperan que los sitios web sean multiplataforma, y si su sitio web no se muestra correctamente en su dispositivo, pueden comprometerse mucho peor. Un sitio web con capacidad de respuesta no es sólo uno que funciona bien en el móvil. Es un sitio web que se adapta al tamaño de la pantalla. El tráfico móvil es una de las principales razones por las que la UX ha adoptado un enfoque receptivo, pero este enfoque no sólo es útil para móviles. La diferencia de tamaño de las pantallas de portátiles y PC y el hecho de que mucha gente vea el sitio en una ventana reducida del navegador hacen que un buen sitio deba adaptarse a cualquier cambio de tamaño de pantalla. He aquí una página del Huffington Post redimensionada a la mitad de la pantalla del portátil. Muestra miniaturas mucho más grandes y en menor número. [caption id="attachment_12710048" align="alignnone" width="455"] Source: Huffington Post[/caption]
La misma página muestra muchos más elementos a tamaño completo, lo que facilita la interacción.
[caption id="attachment_12710049" align="alignnone" width="729"] Source: Huffington Post[/caption]
Lo mejor es empezar a crear una maqueta a partir del tamaño más pequeño, por ejemplo, el de un smartphone. Es mucho más fácil ampliar los elementos del sitio web a una pantalla más grande una vez que se ha perfeccionado el aspecto en la pantalla de un teléfono.
Dado que las pantallas de los teléfonos permiten ver el sitio web de forma mucho más condensada, es posible ocultar algunos elementos del sitio web para que no se vean en determinados dispositivos. Esto es especialmente importante en el caso de los elementos interactivos, como los scripts para la interacción del cursor. Si quieres hacer una microinteracción, céntrate en interacciones de deslizamiento en lugar de cursores.
Conclusiones
El diseño de la experiencia de usuario está cambiando para servir mejor al usuario. Algunas cosas, como el diseño responsive, se han convertido en una práctica recomendada contra la que pocos pueden discutir. Otras, como las interacciones avanzadas del cursor, pueden ser modas de diseño que acaben desapareciendo, pero que seguirán siendo relevantes en 2023. ¿Cuáles de estas tendencias deberías incorporar a tu sitio web? Las que mejor vayan con tus clientes. En UX, siempre es importante diseñar para el usuario final del sitio web o la aplicación. Si el usuario puede tener una mejor experiencia con una nueva tendencia incorporada en el diseño, ya sea con la búsqueda por voz o una microinteracción, el diseñador debe implementarla. Así que asegúrate de hacer una investigación de usuarios para confirmar que a los usuarios les gustan las nuevas funciones que implementas.
Artículo actualizado el: 09 agosto 2023
Seguir leyendo
UX y UI Design: Fundamentos, Diferencias y Tendencias
El diseño de UX y UI a menudo se superponen, al menos en la percepción general, pero de hecho son dos cosas muy ...
18/10/2021
8 tendencias actuales en marketing digital que debes conocer
El mundo cambia constantemente, y cuando hablamos del plano digital todavía más. El marketing digital no se ha quedado ...
29/05/2023
Guía de Diseño UI: Cómo convertirse en un diseñador de interfaz de usuario
Con el crecimiento del entorno online y digital, el trabajo de un diseñador ha ganado complejidad. Hoy en día no solo ...
10/08/2020
Diseñador UX: quién es, qué hace y cuánto gana
La profesión de “Diseñador UX” se ha convertido rápidamente en uno de los trabajos más demandados del sector de la ...
03/07/2019