En el especial diseño de septiembre vamos a hablar de sistemas de diseño, de cómo usarlo con Elementor, y también de cómo aplicar principios de diseño para mejorar la usabilidad y la experiencia de los usuarios.

La imagen destacada forma parte del contenido premium de Envato Elements.

Todo lo que necesitas saber sobre sistemas de diseño

El tiempo —la rapidez, realmente— se ha convertido en una variable fundamental a la hora de desarrollar productos digitales.

Por eso, y por la necesidad de establecer procedimientos y estructurar el trabajo, nacen los sistemas de diseño.

¿Qué es un sistema de diseño?

Un sistema no es más que una colección de componentes de diseño reusables y documentados que permiten al equipo de producto —o al desarrollador web, si ponemos los pies en la tierra— a crear un proyecto más rápido y escalable sin renunciar al diseño.

No tiene ningún sentido que un equipo de diseño trabaje en cómo se verán las 40, 100 o 10.000 urls de una página web cuando en realidad se va a trabajar realmente con 20 o 30 bloques distinguibles y una serie de patrones que permitan replicarlo de manera coherente.

El proceso pasa por dividir el diseño en elementos más pequeños y ser capaz de marcar las guías necesarias para utilizarlos correctamente.

¿Qué se incluye en un sistema de diseño?

Cada equipo tiene su forma de trabajo. Y cada proyecto u organización sus necesidades.

Dado que el sistema de diseño debe adaptarse al proyecto, y no al revés, es complicado marcar una pauta de lo que debe incluir.

Aún así, existen una serie de elementos comunes que casi cualquier sistema de diseño incluye:

• Componentes: elementos funcionales de diseño. En las plantillas de Elementor PRO, por ejemplo, serían el equivalente a los bloques que podemos incluir desde la librería de plantillas.
• Patrones: protocolos que utilizan los diseñadores para referirse a la forma en que se ha construido o diseñado un componente.
• Guías de estilo: documentos que se centran en la parte de diseño gráfico (colores, tipografías, iconografía, etc) y en cómo utilizarlos de acuerdo a los valores de la marca.
• Principios de diseño: son las guías o decisiones que han llevado al equipo a tomar el rumbo en el diseño y que permitirán mantenerlo coherente y escalable a lo largo del proceso de creación.

Cómo construir un sistema de diseño

En este artículo publicado en el blog de Elementor (en inglés) nos marcan las pautas y pasos necesarios para empezar a trabajar con sistemas de diseño.

Si ya hemos trabajado el diseño de nuestra página web y queremos homogeneizar el proceso y pasar a implementar un sistema de diseño, lo primero que debemos hacer es realizar una auditoría interna de nuestro diseño, para identificar:

• Qué estructuras de contenido estamos utilizando.
• Colores principales y secundarios.
• Tipografías (tanto familias como pesos, tamaños e interlineados).
• Elementos corporativos.

Este es un proceso fundamental para hacernos una composición global de nuestro diseño actual.

Y, a partir de aquí, tendremos que ir poniendo el foco en lo que resulte más interesante y útil para el objetivo de nuestra web, comenzar a simplificar las estructuras y marcar patrones claros que nos permitan unificar el criterio que debemos aplicar a lo largo de todo el diseño.

Cómo aplicar el sistema de diseño en Elementor

Dentro de las novedades de Elementor 3 vimos cómo este proceso del sistema de diseño pasaba a tener una gran importancia dentro de Elementor.

A partir de las nuevas herramientas resulta mucho más sencillo aplicar este tipo de patrones y guías de trabajo en nuestros diseños.

De hecho, estamos valorando publicar algún contenido nuevo en Elemendas haciendo el proceso de adaptación de un diseño «antiguo» para aplicar las nuevas herramientas de sistemas de diseño y crear un diseño unificado.

En definitiva, un sistema de diseño es la guía que permite al equipo de desarrollo trabajar de manera consistente y alineada con el equipo de diseño de manera ágil y precisa.

Hacer mejores proyectos, más escalables y en menor tiempo siempre es una garantía de éxito.

Principios de diseño web.

Esta sección es una versión reducida, traducida y con estilo propio del artículo publicado en el  blog de Elementor Principles of Website Design Every Web Professional Should Know. Las imágenes ilustrativas también proceden de ese artículo.

En este artículo, explicaremos qué son los principios de diseño y por qué deberías conocerlos. Hablaremos de experiencia de usuario, usabilidad y estética.

Conocer los principios de diseño no te va a convertir en diseñador, pero si eres o quieres ser diseñador, no puedes permitirte no conocerlos.

Los principios de diseño son leyes flexibles que guían a los diseñadores hacia la producción de productos finales eficaces. Facilitan la creación de una experiencia de usuario (UX) e interfaz de usuario (UI) estéticamente agradable y eficiente. 

Seguir los principios del diseño de sitios web puede hacer que tu sitio sea un éxito. Es la diferencia entre que los usuarios se vayan casi tan pronto como llegan a la página de inicio, o que exploren tus servicios y productos y eventualmente se conviertan en clientes.

Si te interesa la experiencia de usuario y la usabilidad, además de leer este artículo te recomiendo que veas el vídeo de Piccia Neri «Mejora la experiencia de usuario y dispara las conversiones en Elementor»

Principios de diseño de sitios web que todo profesional de la web debe conocer

A continuación veremos las diez leyes de la experiencia de usuario y después los diez mandamientos de la usabilidad.

¿Por qué diez más diez? Porque si te dijera, por ejemplo, que te voy a contar diecisiete principios de diseño, se te haría bola, te daría pereza leer tanto.. Si sigues leyendo, verás que estoy aplicando uno de los principios, a ver si descubres cuál es.

Las leyes de la experiencia de usuario (UX)

1. Hacer que los principales objetivos accionables sean fáciles de alcanzar

Esta ley establece que la posición y el tamaño de un elemento influyen directamente en el tiempo que le lleva al usuario navegar e interactuar con él. Esto significa que tus principales objetivos accionables deben ser fáciles de alcanzar.

Además, si tienes múltiples objetivos, debería haber suficiente espacio entre ellos. Por ejemplo, cuando se diseña para un móvil, los iconos sobre los que se puede hacer clic deben ser lo suficientemente grandes como para poder tocarlos:

Como regla, el área mínima de clic para los diseños de móviles debe ser de 40 x 40 píxeles.

2. Mantener las opciones de los usuarios al mínimo

Si alguna vez te has sentido tan abrumado por el número de opciones que tienes delante que te ha costado decidir entre ellas, comprenderás que demasiadas opciones pueden ser paralizantes para los usuarios. Cuantas más opciones haya disponibles, más tiempo tardarán los usuarios en llegar a una decisión.

Este principio significa que se muestre a los usuarios sólo las opciones más esenciales que necesitan. Por ejemplo, la mayoría de los sitios web darán una clara opción entre «Guardar» o «Cancelar» y «Sí» o «No» al confirmar alguna acción:

Asimismo, esta ley también puede aplicarse para racionalizar el menú de navegación, mostrar productos o servicios y otros elementos de diseño del sitio web.

3. Colocación de elementos relacionados en zonas comunes

Esta ley establece simplemente que si los elementos de una página se agrupan estrechamente, se perciben como conectados entre sí. 

Esto se puede lograr con bordes, fondos o espaciamiento. Por ejemplo, los enlaces de navegación se colocan generalmente juntos para formar un menú:

Otro ejemplo, en la página principal de un blog, el título, la descripción y la imagen de cada entrada deben agruparse visualmente.

4. Usar escenarios y lógica familiares

Los usuarios generalmente esperan y prefieren que tu sitio funcione de la misma manera que otros con los que ya están familiarizados. Esto les permite centrarse en lo que quieren lograr en lugar de aprender a manejar una interfaz de usuario desconocida.

Usa las convenciones que ya conocen y no les confundas con escenarios desconocidos. Un icono de hamburguesa, por ejemplo, normalmente abrirá algún tipo de menú:

Si usas este icono en tu diseño, debería comportarse de la manera que tus usuarios esperan que lo haga.

5. Usar estructuras simples y evitar formas complejas

Tus usuarios interpretarán tu diseño usando el menor esfuerzo posible. Las formas complejas serán percibidas con pérdida de información y se reducirán a formas más simples.

Puedes aplicar este principio agrupando y alineando elementos en bloques, columnas y secciones relevantes, en lugar de lanzarlos por toda la página:

6. Colocar los elementos agrupados cerca unos de otros

Según esta ley, los elementos que están cerca unos de otros serán percibidos como un grupo. 

Los elementos que componen un grupo deben estar más cerca unos de otros que de los elementos de otros grupos.

En muchos encabezados de sitios web, los enlaces de menú están agrupados mientras que las llamadas a la acción (CTA) están alineadas a un lado o separadas de los elementos de navegación:

7. Usar la similitud para unir elementos en grupos

La ley de la similitud establece que los objetos similares se percibirán como relacionados independientemente de cuánta separación exista entre ellos. Los sistemas de diseño utilizan esta ley creando conjuntos de características de estilo con esquemas de color, iconos y texto similares:

8. Conectar elementos de diseño para mostrar su relación entre sí

La ley de la conexión uniforme establece que los elementos que están conectados visualmente serán vistos como más relacionados que los elementos que no tienen conexión. Una aplicación de esta ley es usar un escalón de progreso en los flujos:

Esto crea una conexión visual que muestra que todos los pasos son partes del mismo proceso.

9. Dividir el contenido en pequeños trozos

Este principio sugiere separar el contenido en trozos. Por ejemplo, los números de las tarjetas de crédito suelen dividirse en grupos de cuatro para ayudar a la gente a analizarlos.

A medida que una aplicación se hace más grande y adquiere más características, se hace más difícil de usar. 

Una forma de aplicar esta regla es limitando la cantidad de contenido que el usuario tiene que percibir en un momento dado. Divide el contenido en trozos en lugar de mostrarlo todo en un bloque:

Además, diseña teniendo en cuenta los tamaños de pantalla más populares y controla cuántos elementos ven los usuarios de un vistazo.

Tanto en este ámbito como en el de las fantasías sexuales funcionan muy bien los tríos, pero también las parejas y los cuartetos. Grupos más numerosos tienden a confundir. Sin embargo hay agrupaciones más grandes a las que estamos habituados, como los decálogos. 

10. Acentúa el primer y último elemento de una serie

Al igual que en un relato (novela, cuento, película) recordamos mejor el principio y el final que el desarrollo, esta ley establece que los usuarios recordarán mejor el primer y último elemento de una serie. Puedes usar esta tendencia para resaltar las áreas más importantes de tus páginas web.

Por ejemplo, los contenidos clave como los CTA, los formularios o las opciones de compra son más efectivos en la parte superior o inferior de la página.

Ya hemos visto las diez leyes más importantes de la experiencia de usuario, ahora prepárate que vienen otros diez mandamientos muy relacionados, en este caso nos centramos en la usabilidad.

Los diez mandamientos de usabilidad (UI)

1. Mantén a tus usuarios informados con la retroalimentación apropiada

Los usuarios necesitan confiar y sentirse seguros al usar tu aplicación. Esto significa que tu sitio debe comunicar continuamente lo que está sucediendo y hacerles saber si sus interacciones son correctas.

Por ejemplo, una tienda de comercio electrónico permitirá a los usuarios saber que han añadido un artículo a su carrito o lo han guardado para más tarde. 

Se pueden utilizar cambios de color, indicadores de progreso, notificaciones y alertas para informar visualmente al usuario.

2. La información debe mostrarse en un orden lógico y utilizar frases y conceptos familiares

Los usuarios no deberían tener que consultar un diccionario para entender los términos de su sitio web. Cíñete a las palabras con las que ya están familiarizados en el texto de tu interfaz.

Por ejemplo, los términos «deshacer» y «rehacer» tienen significados bastante universales en las interfaces de las aplicaciones. Cambiarlas por términos poco familiares como «revertir» y «repetir» será desorientador para los usuarios. 

3. Habilitar el control y la libertad en la forma en que los usuarios interactúan con su sitio web

Los usuarios a menudo cometen errores y necesitarán una forma de deshacer o rehacer acciones, como el uso de botones como mencionamos anteriormente. Del mismo modo, puedes considerar la posibilidad de proporcionar una opción de modificación cuando sea pertinente. Por ejemplo, esta función suele ser útil para realizar cambios en los comentarios y mensajes de las aplicaciones de medios sociales.

Con estas funciones disponibles, los usuarios se sentirán más en control y estarán menos tensos cuando cometan errores.

4. Seguir las convenciones y normas

La adhesión a las normas puede parecer similar al segundo principio, y puede considerarse una extensión del mismo. Los usuarios deberían encontrar fácil de entender su interfaz y acceder a cualquier elemento que necesiten para interactuar con tu página.

Un informe sobre la usabilidad de la terminología de los carritos de compras ilustra esto: Un diseño utilizó el término «Trineo de compras» en un intento por destacar. Sin embargo, el 50 por ciento de los usuarios no entendió lo que significaba. La otra mitad dedujo su significado sólo porque estaba en el mismo lugar donde normalmente se encuentra un carrito en un sitio web.

5. Prevenir los errores cuando se pueda y advertir a los usuarios antes de que tomen acciones irreversibles

Es inteligente mostrar mensajes de error significativos para que quede claro cómo recuperarse de los problemas y qué los causó. Sin embargo, es aún más efectivo eliminar las situaciones propensas a errores o informar explícitamente a los usuarios de cualquier consecuencia conocida de las acciones que están a punto de tomar.

Por ejemplo, la eliminación de una cuenta de usuario suele ser irreversible. La mayoría de las aplicaciones resaltarán este ajuste en rojo para que se destaque. Si los usuarios hacen clic en el botón Borrar, se suele mostrar un mensaje de ¿Estás seguro de que quieres hacer esto?

6. Mantener visible la información importante

Los usuarios no deberían tener que recordar la información de un paso de un proceso, como una comprobación o configuración técnica, a otro. Los usuarios deberían tener la información a mano, sin tener que recordarla.

Una tienda de comercio electrónico puede aplicar esta regla poniendo a disposición una lista de artículos vistos recientemente, de modo que los usuarios no tengan que recordar los nombres de los productos para los que aún tienen que completar sus compras.

7. Construir sistemas que sean cómodos tanto para los novatos como para los expertos

Querrás hacer tu sitio web fácil para los nuevos visitantes, pero también cómodo para los más familiarizados con el sistema que podrían necesitar aceleradores para acciones frecuentes. Los atajos de teclado, que pueden proporcionar o dar a los usuarios la posibilidad de crear y editar, son un ejemplo de esto.

8. Haga sus diseños tanto estéticamente agradables como simples

Querrás mantener tu interfaz despejada en lugar de abrumar a tus usuarios con demasiadas opciones. Los elementos innecesarios compiten por el espacio y reducen la visibilidad de las características más importantes.

9. Proporciona mensajes de error que sean fáciles de entender

Los mensajes de error claros y comprensibles facilitan la identificación de las fuentes de los problemas y la búsqueda rápida de posibles soluciones. Debe ser directo, cortés (no culpar al usuario) y constructivo, dando consejos sobre cómo recuperarse del problema.

10. Proporcionar documentos de ayuda con capacidad de búsqueda

A veces puede ser necesario que los usuarios consulten información de ayuda adicional. Su documentación debe ser fácil de buscar para que puedan encontrar rápidamente el contenido pertinente a sus situaciones y resolver sus problemas.

¿Cómo pongo en práctica todos estos principios de diseño web?

Aprender sobre tantos principios y pautas puede resultar abrumador. Aquí hay algunos consejos para aplicarlos:

Familiarízate con las mejores prácticas

Sigue aprendiendo y educándote en las mejores prácticas de diseño de UX. Comienza tus proyectos con una fase de investigación o inspiración en la que aprendas más sobre las necesidades de tus usuarios y recopila referencias de calidad para aprender.

Elige qué principios utilizar en cada proyecto

Como cada proyecto es un caso individual, se beneficiará de diferentes principios de diseño. Tendrás que priorizar cuáles pueden ayudarte más para cada sitio web que crees. Ten en cuenta la funcionalidad principal del sitio, sus flujos de usuarios primarios y sus correspondientes objetivos comerciales.

Prueba y mejora tus diseños periódicamente

Tendrás que probar tu sitio web tanto como sea posible con usuarios objetivo reales. Si no puedes hacerlo, solicita ayuda y haz pruebas con compañeros de trabajo, clientes e incluso con sus otros diseñadores para obtener información relevante sobre la usabilidad de tu sitio web.

Practica, practica y practica

A medida que los practiques, comenzarás a aplicar los principios de diseño casi de manera inconsciente. Cuanto más diseñes teniendo en cuenta los principios de usabilidad, más fácil te resultará generar rápidamente soluciones efectivas y evitar problemas.

Forma tu estilo único… pero sólo después de que entiendas lo básico

Las reglas están diseñadas para facilitar los procesos, pero no están pensadas para ser seguidas a ciegas. Sin embargo, sólo serás capaz de romper las reglas con éxito cuando entiendas completamente su propósito.

Utiliza el editor de Elementor

Elementor se basa en principios de diseño y lógica. Utilizando sus características de diseño y la amplia colección de widgets, puedes organizar mejor la estructura de contenido de tu sitio web y asegurarte de que estás construyendo un producto digital fácil de usar.

Por ejemplo, las secciones y columnas de Elementor te ayudan a agrupar el contenido de forma lógica. Los widgets proporcionan una forma fácil de agrupar el contenido, empleando los principios de similitud y conexiones visuales para facilitar la percepción de tus usuarios.

En general, Elementor elimina la molestia de organizar el contenido desde cero. Con la biblioteca de widgets y plantillas, tienes numerosas soluciones para implementar los principios de diseño de la mejor manera posible.

Conclusión

Para crear sitios web profesionales y fáciles de usar, es necesario estar familiarizado con los principios básicos de diseño y aplicarlos sabiamente en su trabajo. Esto te ayudará a mejorar tus diseños haciéndolos más atractivos, más fáciles de usar y, lo mejor de todo, más rentables.

¿Quieres aprender más?

No te pierdas la grabación de la reunión conjunta de Elementor Y WordPress Madrid «Mejora la experiencia de usuario y dispara las conversiones en Elementor».