Principio de Pareto en el diseño web: diseñe un sitio web más eficaz con la regla del 80/20

El problema de ser perfeccionista en el diseño web

El perfeccionismo puede ser un reto para muchos diseñadores gráficos y de páginas web. La búsqueda de la excelencia es admirable, pero puede llevar a cierta frustración por los interminables cambios y retoques hasta que todos los elementos del sitio web sean perfectos. Para muchos diseñadores es fácil dejarse llevar por el proceso de diseño y perder la noción del tiempo mientras eligen tipos de letra, paletas de colores y reflexionan sobre cientos de decisiones de diseño perfectas. Claro, es importante entregar un gran trabajo, pero como diseñador es fácil perder el foco de lo que esto significa? Un sitio web no debe centrarse en los objetivos del diseñador, sino en lograr el resultado deseado por el cliente y, al mismo tiempo, equilibrar las limitaciones de tiempo, recursos y energía. Sin limitaciones, un sitio web puede acabar fácilmente sobredimensionado, lento, con demasiados elementos y funciones que confundan a los usuarios. Además, es difícil incluir todas las funciones en un tiempo limitado, por lo que el diseñador puede quedarse sin tiempo y no entregar un buen sitio web en el plazo previsto es muy estresante para todos los implicados.

¿Qué es el principio de Pareto?

La "regla 80/20", a veces llamada principio de Pareto, afirma que el 80% de los efectos proceden del 20% de las causas. El principio de Pareto fue introducido por primera vez por un economista italiano llamado Vilfredo Pareto en 1895, cuando observó que el 80% de la riqueza de Italia pertenecía sólo al 20% de su población. También observó que el 20% de las vainas de guisantes de su jardín producían el 80% de los guisantes. El principio de Pareto sugiere que unos pocos elementos clave son responsables de producir la mayor parte de un resultado dado. Desde entonces, se ha aplicado a muchos otros ámbitos, como los negocios, la economía, la psicología e incluso puede ser práctico para la vida cotidiana.

¿Alguna vez se ha dado cuenta de que la mayor parte de sus ingresos proceden de un puñado de clientes fijos? ¿O que parece que siempre llevas las mismas prendas de ropa mientras que la mayor parte de tu vestuario no se utiliza? Aunque la proporción no siempre es exactamente 80/20 y siempre hay excepciones, es una gran herramienta para ayudar a las personas a identificar qué acciones tienen el mayor impacto en su éxito y priorizarlas en consecuencia.

El principio de Pareto en el diseño web y el marketing digital

El principio de Pareto aplicado al diseño web parte de la base de que la mayoría de los resultados proceden de un número reducido de elementos clave. En marketing, algunas campañas funcionarán mucho mejor que otras. Para obtener los mejores resultados, tiene sentido centrarse primero en ese pequeño número de características clave y asegurarse de que reciben la máxima atención, mientras que las partes menos importantes pueden realizarse más rápidamente. Una forma de utilizar el Principio de Pareto es centrarse en la experiencia del usuario y la usabilidad: si se presta atención a cómo interactúan los usuarios con el contenido en línea y se garantiza que puedan encontrar lo que necesitan, es probable que se obtengan mejores resultados que si nos centramos únicamente en la estética. Nos enseña que la perfección no siempre es necesaria y que es posible conseguir un sitio web aún más eficaz optimizando el 20% de las funciones importantes.

A modo de ejemplo, acabamos de examinar los datos de tráfico de una pequeña tienda de comercio electrónico que vende productos hechos a mano y hemos observado varias tendencias de Pareto. Por ejemplo, casi todos sus visitantes acceden al sitio a través del móvil. La mayoría de las ventas de productos proceden de un número reducido de categorías. Facebook era su mayor fuente de tráfico en las redes sociales. Al examinar un mapa de calor de la página de productos, algunas zonas obtienen más engagement. Se puede observar el típico patrón F, con grupos de interacciones en la fila superior y en la parte izquierda de la página.

¿Qué se puede hacer con esta información para mejorar las ventas de este cliente?

En este ejemplo, lo más rápido sería mejorar la experiencia móvil de este sitio web, creado originalmente para ordenadores de sobremesa. Se podrían examinar mapas de calor de todas las páginas para conocer mejor las preferencias de los usuarios. Por ejemplo, las preguntas más consultadas de la sección de preguntas frecuentes podrían trasladarse a la página de inicio en lugar de ocultarse. Los productos más rentables podrían aparecer en las zonas de la página donde es más probable que se hagan más clics.

Empezar siempre por el "por qué

(Fuente de la imagen: Envato Elements)

Por mi experiencia en el sector, me he dado cuenta de que muchos diseñadores aceptan encantados el briefing y empiezan a trabajar en los diseños, aunque les falten datos clave relacionados con el objetivo del proyecto. Quizá la persona que redactó el briefing pensó que esta información estaba implícita, o el cliente no la verbalizó de forma concisa. Tómate un momento para dar un paso atrás antes de empezar a trabajar. Sin una comprensión clara de por qué estás haciendo lo que estás haciendo, tu diseño web carecerá de dirección. Puede que su sitio web le parezca bien a usted e incluso al cliente, pero a pesar de sus muchas horas, el resultado será decepcionante si no consigue los resultados previstos por el cliente.

Pregúntese a sí mismo: ¿Por qué existe este sitio web? ¿Quiénes serán los usuarios finales del sitio web y cómo interactuarán en él? ¿Cómo creará el sitio web valor y éxito para su cliente? ¿Cómo medirá el cliente este éxito? ¿Cómo atraerá el sitio web a los visitantes y captará clientes potenciales? Cuando pueda responder a estas preguntas y entienda el "por qué", le resultará más fácil priorizar el "qué" y el "cómo" de los elementos de diseño. Cuando pueda visualizar el resultado deseado, le ayudará a concentrar su energía en las áreas más importantes para conseguirlo.

Adoptar el enfoque del producto mínimo viable en el diseño web

Con tantas decisiones que tomar a la hora de diseñar un sitio web, puede resultar difícil saber por dónde empezar. El planteamiento del producto mínimo viable (PMV) consiste en construir de entrada sólo los elementos básicos de un sitio web y perfeccionarlos con el tiempo gracias a las opiniones de los clientes. Suele hacerse para ahorrar costes y tiempo, o cuando una idea de negocio se basa en muchas suposiciones. En lugar de intentarlo todo a la vez, los desarrolladores pueden priorizar las características en función de las necesidades del cliente y crear prototipos lo antes posible. Incluso sin presiones de tiempo o presupuesto, adoptar el sitio web como un MVP es una forma fantástica de aplicar el principio de Pareto y combatir las tendencias perfeccionistas. Mentalmente, ayuda saber que siempre puedes añadir más funciones más adelante, pero que por ahora debes centrarte en los elementos más importantes.

El diseño mobile-first puede ayudarle a simplificar su sitio web

Al diseñar un sitio web, lo que se busca es ofrecer a los usuarios una experiencia eficaz e intuitiva. La mejor manera de conseguirlo es diseñar con un enfoque "mobile-first". Este concepto implica crear sitios web optimizados para dispositivos móviles en primer lugar, en lugar de sitios web de escritorio adaptados para móviles. ¿Por qué es necesario? En 2022, según techjury.net, los teléfonos móviles generarán el 60,66 % del tráfico de los sitios web, mientras que los ordenadores de sobremesa y las tabletas juntos serán responsables del 39,34 %. Esto puede variar en diferentes sectores y en diferentes sitios web, pero la tendencia es digna de mención. Si centras tu diseño en la versión móvil del sitio, puedes poner las probabilidades de éxito a tu favor.

Una vez que empiece a diseñar para dispositivos móviles, notará rápidamente que hay menos espacio para la redacción y el desorden. Es bastante difícil adaptarse si llevas mucho tiempo diseñando para ordenadores de sobremesa. Pero este enfoque encaja bien con el principio de Pareto, ya que le ayuda a elegir el contenido con mayor impacto. Esto tiene dos ventajas: su sitio estará optimizado para la plataforma móvil preferida por los usuarios, y cuando lo adapte para escritorio tendrá un aspecto visual moderno y limpio. Más adelante seguirá siendo necesario adaptar el sitio web para escritorio, pero cuando se trabaja desde el enfoque mobile-first resulta mucho más fácil, puesto que ya se dispone de un diseño simplificado.

Investigue y analice los sitios web de la competencia

Cuando se trata de diseño web, a menudo pensamos en la investigación como mirar otros sitios web inspiradores o plantillas con bellos elementos de diseño. Pero la investigación para el diseño web va más allá de admirar la estética de otros sitios web. Es necesario comprender cómo utiliza la gente la web, cómo interactúan los usuarios con los distintos diseños y cómo se organiza el contenido para crear un sitio web eficaz. Solicitando al cliente los datos analíticos que pueda proporcionarnos o utilizando una herramienta de seguimiento como Ranktracker, podemos identificar mejor las áreas de oportunidad de mejora para obtener un sitio web con mejor rendimiento.

La investigación debe incluir el examen de las normas existentes en el sector, el público objetivo y las preferencias de los usuarios mediante el análisis de la competencia. Puedes encontrar competidores preguntando al cliente o haciendo tus propias búsquedas y viendo qué sitios web ocupan los primeros puestos. Una vez identificados algunos competidores, se necesita una fuente fiable de datos sobre ellos. Una de mis características favoritas de Ranktracker es la posibilidad de añadir tus propios competidores identificados y mostrará el rendimiento de la competencia en una columna junto a los resultados de tu propio dominio. Si un competidor te supera en el ranking de tus propias palabras clave, merece la pena analizar su sitio web para aprender de él. Para añadir un competidor, basta con pegar su URL.

Haga clic aquí para leer un excelente artículo sobre cómo realizar un análisis de la competencia.

Mientras investigas, haz una "lista de sueños" con todas las posibles características y elementos que podrías incluir (no te preocupes, ya las reducirás, pero es útil tener todas las ideas juntas).

Planificación: Identificar las características clave del diseño

(Fuente de la imagen: Envato Elements)

El diseño de un sitio web debe basarse en su finalidad. Fíjate en todos los elementos/características de tu lista de sueños y elige los que creas que ayudarán a tu cliente a conseguir su objetivo. Coge papel en blanco y empieza a dibujar esquemas aproximados de tu sitio web. En los esquemas, relaciona cada elemento que pienses incluir con un resultado: si no encuentras un propósito claro para él, descarta esa sección. No pienses en la estética del diseño, céntrate en lo mejor para la experiencia del usuario y la usabilidad.

Contrariamente a la creencia popular, sus primeros wireframes no necesitan ser diseñados con un software de diseño de lujo. El enfoque analógico del lápiz y el papel funcionará bien, y a veces incluso mejor, ya que no te distraes con el software. El papel es más indulgente y menos permanente; es más rápido de usar, lo que puede ayudar durante el proceso creativo. Si necesitas presentar wireframes a tu cliente, puedes hacerlo de forma más profesional una vez que hayas trabajado con los bocetos.

Haga primero una maqueta, no diseñe en la plataforma web para ahorrar tiempo

Hay un viejo refrán que dice que no se puede pilotar un avión mientras se está construyendo. Esto es cierto para el diseño web: tratar de construir un sitio web, mientras que usted todavía está pensando en las decisiones sobre el contenido, características y diseño, es una receta para la frustración. Para que todo sea eficaz, necesitas un plan. Crear una maqueta de cada página parece lento y contraintuitivo, pero sirve para muchas cosas y ahorrará tiempo a largo plazo. Las maquetas permiten al cliente visualizar el sitio web incluso antes de que empiece el desarrollo. Pueden experimentar las diferentes opciones de color y fuente, y anticipar fácilmente lo que hay que cambiar. Hablar de una maqueta da pie a muchas discusiones y preguntas. Aumenta las posibilidades de que el cliente quede satisfecho cuando vea el sitio web en vivo por primera vez. Y lo que es más importante, trabajar con una maqueta permite construir el sitio web mucho más rápido una vez que se llega a la fase de desarrollo, ya que casi todas las decisiones creativas ya se han tomado.

Trabajar con contenidos que se posicionen bien en los buscadores

A veces, un cliente insistirá en que empieces a diseñar con "texto de marcador de posición", ya que piensa que tu función es únicamente diseñar los elementos estéticos. En la medida de lo posible, evita realizar cualquier trabajo de diseño con texto genérico de marcador de posición. Aunque tus diseños sean bonitos, tu sitio web carecerá de propósito si descuidas un ingrediente clave como es el contenido bien escrito.

Un sitio web sólo es valioso si recibe visitas, y la optimización para motores de búsqueda (SEO) es la forma en que los motores de búsqueda encuentran su sitio web de forma orgánica. Las opciones de redacción que se utilizan en una página son fundamentales para el SEO, y los elementos de diseño deben apoyar la redacción. Si usted sabe cuáles son las palabras clave por adelantado, que le da una visión extra. Si trabaja con un redactor para su contenido, asegúrese de que esté familiarizado con el SEO. Aunque no sea un experto en SEO, familiarícese con este tema para tenerlo más en cuenta durante el proceso de diseño de su web.

Algunas herramientas de búsqueda de palabras clave son complicadas (especialmente si eres nuevo en SEO) pero el Buscador de Palabras Clave de Ranktracker es muy sencillo e intuitivo: simplemente añades las palabras clave a una lista y muestra los resultados codificados por colores según la dificultad de la palabra clave. Para un buen SEO es conveniente elegir palabras clave con baja competencia pero con un volumen de búsqueda adecuado, por lo que es muy útil que los volúmenes de búsqueda se muestren ahí mismo.

Así que, antes de empezar, intenta conseguir al menos un borrador de la redacción. Si usted es un diseñador independiente, es probable que también tenga que ayudar al cliente a determinar dónde encaja mejor el texto en el sitio web. Una realidad del proceso de diseño es que este texto puede cambiar varias veces, pero tener algo para empezar es mucho mejor que nada.

Simplifique la elección de fuentes, colores, jerarquía y elementos visuales.

Si eres un diseñador con menos experiencia o simplemente quieres ahorrar algo de tiempo, es útil trabajar con plantillas y utilizarlas como base. Para un CMS como WordPress, hay miles de plantillas estupendas a precios razonables. Estas ya tienen fuentes, colores, jerarquía y elementos visuales diseñados en un estilo cohesivo. Si te preocupa la originalidad, ten por seguro que el resultado será distinto al de la plantilla, ya que la estás adaptando a tus esquemas. Contar con algunos recursos de diseño y un estilo general para empezar puede ayudarte a encontrar una dirección y reducir la fatiga de las decisiones. No incluya demasiados colores: puede limitar con seguridad los colores de su sitio web a 2 colores o a un máximo de 3. Consulte Las 20 mejores combinaciones de colores para probar en su sitio web para obtener algunas ideas y tendencias estupendas a la hora de elegir los colores del sitio web.

Conclusiones: Maximizar el impacto

Saber dónde centrarse puede ayudar a un diseñador a controlar sus tendencias perfeccionistas sin dejar de alcanzar el éxito. El principio de Pareto es una regla empírica del diseño web que establece que el 80% de la experiencia del usuario puede lograrse con el 20% del esfuerzo. Esto significa que los diseñadores web deben centrar sus esfuerzos en optimizar el contenido, los elementos de diseño de la página, la usabilidad y otros factores para crear un sitio web eficaz que se posicione bien en los motores de búsqueda.