Una experiencia de usuario agradable y relevante es la base del éxito de los diseños. Sin embargo, es más fácil decirlo que hacerlo. Hay que invertir mucho tiempo y esfuerzo en el proceso de diseño de la experiencia del usuario: investigar, entrevistar, analizar, detectar problemas y diseñar soluciones que los resuelvan. Ahí es donde entran en juego los patrones de diseño de UX, que ofrecen soluciones probadas para los problemas de usabilidad. En este artículo, explicaremos qué son los patrones de diseño de UX, por qué es importante utilizarlos en tus diseños, algunos ejemplos comunes y cómo aplicarlos a tus diseños.
¿Qué son los patrones de diseño UX?
Los patrones de diseño UX son los enfoques aplicados para abordar problemas comunes de diseño. Estos patrones han funcionado con éxito para resolver problemas de usabilidad y crear una experiencia de usuario agradable. Un ejemplo de estos patrones es el gesto de «tirar para actualizar» en los dispositivos táctiles: basta con tirar hacia abajo en cualquier parte de la pantalla para que se actualice el contenido.
Este patrón mejora la usabilidad por su familiaridad y facilidad. El gesto es una forma estándar de actualizar el contenido, por lo que satisface las expectativas del usuario. También es una forma más fácil de recuperar nuevos contenidos sin necesidad de buscar y tocar el botón de actualización. Por lo tanto, el uso de estos patrones de diseño UX en tu diseño facilita las tareas y hace que la interacción sea agradable.
¿Por qué son importantes los patrones de diseño UX?
Los patrones de diseño UX son importantes desde dos perspectivas. La primera es la esencia misma del diseño UX: crear una mejor experiencia de usuario. Y la segunda es desde la perspectiva del diseñador: reducir esfuerzos mediante la reutilización. Entendamos ambas perspectivas.
Los usuarios ya han establecido modelos mentales sobre cómo utilizar una aplicación o una web basándose en experiencias anteriores. De hecho, están tan habituados a ciertos patrones que sus acciones son instintivas. Por eso, cuando utilizan una nueva aplicación, esperan una interfaz similar. Si construyes tu aplicación sin tener esto en cuenta, es más probable que los usuarios se frustren e incluso acaben teniendo una mala experiencia. Técnicamente hablando, los patrones de UX reducen la tensión cognitiva creando interfaces familiares con las que los usuarios pueden interactuar de forma intuitiva.
Mientras que para los diseñadores los patrones de diseños UX funcionan como un enfoque probado y comprobado para abordar un problema de diseño. Esto reduce significativamente el tiempo y el esfuerzo en un diseño. Imagina a un diseñador constantemente con nuevas ideas y reinventando los diseños para cada proyecto. Sería mucho trabajo. Y sería interminable. Así que con los patrones de diseño, los diseñadores no tienen que inventar algo nuevo cada vez y en su lugar sólo tienen que sacar estos patrones de su caja de herramientas.
Sin embargo, el uso de los patrones de UX no significa que sirvan para diseñar cualquier interfaz. Hay que seguir pensando e investigando para conseguir los mejores diseños. Estos patrones sólo funcionan como características estructurales y de comportamiento que puedes adoptar y personalizar cuando sea necesario.
¿Cuáles son los patrones de diseño de UX más comunes?
Existen numerosos patrones de diseño que pueden clasificarse en función de su finalidad y casos de uso. Los más utilizados se dividen en estos cuatro grupos: Input y output, navegación, estructuración de contenidos e información y social. Veámoslos con más detalle.
1. Input y output
Los usuarios tienen que introducir la información en varios lugares de la interfaz. Puede ser para inscribirse, elegir una fecha para reservar, introducir datos de contacto y otros datos personales, números de tarjetas de crédito, etc. Los patrones de entrada y salida tienen como objetivo facilitar la introducción de datos y, al mismo tiempo, proporcionar información sobre la información introducida. Ejemplos de patrones de entrada y salida son los siguientes:
- Medidor de contraseñas seguras: Ayuda a los usuarios a crear contraseñas seguras para evitar el descifrado malintencionado de contraseñas.
- Selector de calendario: El selector de calendario permite a los usuarios elegir la fecha para introducir, ordenar o realizar un seguimiento de los datos. Los gráficos de calendario de la interfaz facilitan la elección de la fecha o el intervalo de fechas y la toma rápida de decisiones.
- Buenos valores por defecto: Los buenos valores predeterminados rellenan previamente ciertos datos del usuario que probablemente coincidan. Es útil cuando el sistema puede hacer las conjeturas apropiadas de los campos de entrada. Por ejemplo, los campos de entrada país o ubicación.
- Captcha: Captcha ayuda a reducir el spam diferenciando a los usuarios humanos de los bots automatizados.
- Previsualizar información y actualizaciones: La previsualización de la información ayuda a los usuarios a comprobar que los datos introducidos son correctos y precisos. Les ayuda a explorar con seguridad la interfaz, lo que se traduce en una mejor interacción y experiencia.
- Asistente: El asistente divide una gran tarea en pequeñas subtareas y ayuda a los usuarios a completarla paso a paso y de una en una. Resulta muy útil cuando el usuario tiene que introducir grandes cantidades de datos complejos y seguir una secuencia de pasos específicos.
2. Navegación
Para realizar las tareas y obtener la información, el usuario tiene que localizar las funciones y navegar por el producto. Los patrones de navegación pretenden facilitar esta tarea reduciendo la fricción y aumentando la facilidad de aprendizaje. Ayudan a los usuarios a comprender dónde están ahora y cómo llegar al punto que desean. Algunos ejemplos habituales de patrones de navegación UX son:
- Pestañas de navegación y módulos: Las pestañas dividen una gran cantidad de datos en secciones separadas, haciéndolas más accesibles y fáciles de navegar. Es el patrón de navegación más común que encontrará en todos los productos digitales.
- Gesto «Pull-to-refresh»: Es el patrón estándar para actualizar el contenido en redes sociales, chat, correo electrónico, noticias y aplicaciones de contenido.
- Breadcrumbs: Las breadcrumbs funcionan como una ayuda visual que ayuda a los usuarios a conocer su ubicación en la jerarquía del sitio. Esto les facilita ir hacia adelante y hacia atrás y, por tanto, simplifica la navegación.
- Divulgación progresiva: para ayudar a los usuarios a concentrarse y navegar con facilidad, hay que minimizar el desorden y la carga cognitiva. La divulgación progresiva les ayuda a hacerlo presentando solo los datos necesarios y mostrando otros detalles a petición.
3. Contenido y estructura de la información
La estructura del contenido y la información es similar a los patrones de navegación. Una estructura de contenidos clara facilita a los usuarios la búsqueda y el acceso a la información. Estos patrones de UX ayudan a organizar la información en un orden lógico que mejora la legibilidad y la accesibilidad. Algunos ejemplos de patrones UX de contenido son:
- Carrusel: Los carruseles permiten mostrar varios contenidos en el mismo lugar de la página. Esto resulta muy útil cuando hay que mostrar un conjunto de elementos o explicar un proceso.
- Etiquetado: El etiquetado ayuda a etiquetar, organizar y categorizar elementos utilizando palabras clave. Puedes utilizarlo en tu producto cuando desees asociar un contenido a varios temas o cuando el contenido pertenezca a varias categorías.
- Thumbnail: Las miniaturas proporcionan una visión general y una vista previa de diferentes tipos de contenido: imágenes, vídeos o texto en la página. Puedes utilizar este patrón cuando se presenta un gran número de imágenes y vídeos a los usuarios, que tienen que examinar la colección y decidir cuál elegir.
- Preguntas frecuentes: La sección de preguntas frecuentes o FAQs es un lugar donde los usuarios obtienen respuestas a preguntas comunes. Esto les proporciona una solución rápida a sus problemas o una mejor comprensión de tu producto/servicio, lo que se traduce en una buena experiencia.
- Panel de control: El panel de control ofrece una visión general de los datos importantes, las funciones y el control de una manera fácilmente comprensible. Ayuda a los usuarios a controlar la información crítica de un vistazo para que puedan tomar una decisión rápida. Un buen dashboard tiene información múltiple pero no confunde a los usuarios y cada elemento se presenta según la jerarquía de su importancia.
- Página de producto: Las páginas de producto de una aplicación o ecommerce muestran detalles del producto para ayudar a los usuarios a tomar una decisión de compra. Una buena página de producto debe tener los elementos necesarios, como imágenes y vídeos de alta calidad del producto, y pruebas reales como reseñas, valoraciones e insignias que reduzcan la fricción e induzcan a la confianza, como la facilidad de devolución y los pagos seguros.
4. Social
Las funciones y componentes sociales se han convertido en una parte esencial de los productos, ya que aumentan la participación y el crecimiento. La mayoría de los juegos y aplicaciones de éxito en el mercado tienen funciones que ayudan a los usuarios a comunicarse, compartir, competir y colaborar con otras personas online. Estos son algunos de los patrones UX sociales más comunes:
- Compartir: Los usuarios quieren compartir determinados contenidos o interacciones en sus redes sociales. Funciones como los botones de compartir rápido y compartir automáticamente facilitan la publicación de actualizaciones.
- Reacciones: Las reacciones ayudan a los usuarios a expresar sus sentimientos sobre algo de forma sencilla. Es útil para conocer los gustos y preferencias de los usuarios.
- Chat: El chat personal y de grupo ayuda a los usuarios a interactuar y formar parte de la comunidad.
- Invitaciones: Las invitaciones permiten a los usuarios compartir sus experiencias agradables con otras personas y acercarlas a tu producto. También proporciona una forma de conectar con sus amigos y tener una mejor experiencia en la plataforma.
- Feeds de actividad: Los feeds de actividad ofrecen a los usuarios una visión general de lo que está ocurriendo y les muestran los contenidos que les interesan.
- Logros coleccionables: Los logros muestran el estatus y la reputación del usuario en la comunidad. Añadir logros coleccionables como insignias, premios, puntos, reconocimientos, etc. a lo largo del recorrido del usuario aumenta la participación.
¿Cómo aplicar patrones de diseño UX a tu diseño?
1. Identificar el problema
Lo primero y más importante es identificar el problema que intentas resolver. Los patrones son soluciones a problemas, y si no hay problema, aplicar patrones no tiene ningún sentido. Hay un par de métodos de investigación que puedes utilizar para descubrir el problema.
- Realizar encuestas. Las encuestas pueden utilizarse como herramienta de retroalimentación para comprender las experiencias de los usuarios. Puedes plantear a los usuarios preguntas como qué es lo que más les ha gustado y lo que menos, hasta qué punto es fácil utilizar el producto o web y qué funciones creen los usuarios que deberían añadirse.
- Realizar pruebas de usabilidad. Las pruebas de usabilidad te ayudan a entender cómo interactúan los usuarios con la interfaz. Puedes realizar pruebas con tu producto actual, con prototipos o incluso con el producto de la competencia. Los datos recogidos te ayudarán a detectar las fricciones y a obtener información crucial para mejorar tu producto.
- Utilizar la analítica. Los análisis pueden ayudarte a obtener información vital sobre tu producto actual: qué funciona bien y qué necesitas mejorar. Ten en cuenta las métricas importantes como la tasa de registro, la tasa de rebote, la tasa de abandono del carrito, etc. para detectar los problemas para optimizar el diseño.
2. Analizar las soluciones disponibles
Una vez que hayas detectado el problema con tu diseño, es hora de buscar diferentes enfoques para solucionarlo. Busca y analiza productos similares en el mercado: ¿Cómo han resuelto el problema los que han tenido éxito? ¿Qué patrones han utilizado? ¿Cuáles gustan más a los usuarios?
Lo más probable es que encuentres más de un patrón como solución. Por ejemplo, para mostrar el contenido en tu aplicación, opciones de diseño como tarjetas, carrusel, pantalla dividida, etc. Haz una lista de todas las soluciones adecuadas para tu diseño.
3. Aplicar los patrones y probar
Una vez que tengas la lista de patrones, selecciona los que mejor se adapten a tu problema. Si hay más de un patrón adecuado, puede que te interese realizar pruebas A/B. Esencialmente, las pruebas te ayudarán a comprender qué patrón funciona mejor para tu problema. Realiza pruebas de usabilidad y recopila datos analíticos de los nuevos patrones y optimice tus diseños.
