Habiendo comenzado recientemente a leer un poco más sobre principios de diseño, encontré un principio interesante llamado Regla 80/20 , también conocido como el Principio de Pareto , el Principio de Juran , la Regla Vital Pocos y Triviales , y el Principio de Escala de Factor .

Este principio, al que me referiré en esta pieza simplemente como la regla 80/20, cuando se considera en el contexto del diseño de la página web y la aplicación web puede tener un profundo efecto en la experiencia del usuario y, en última instancia, en la eficacia del contenido o funcionalidad de su sitio web o aplicación web.

En esta publicación, primero proporcionaré una definición básica, luego consideraré algunos ejemplos específicos de cómo la regla 80/20 resulta beneficiosa, y luego resumiré algunas lecciones que pueden obtenerse al conocer esta regla.

¿Cuál es la regla?

La regla 80/20 fue observada originalmente por el economista italiano Vilfredo Pareto, y el principio actual fue llamado el Principio de Pareto por Joseph M. Juran.

A continuación se encuentran las definiciones de dos fuentes diferentes. Primero del libro Principios universales de diseño :

La regla 80/20 afirma que aproximadamente el 80 por ciento de los efectos generados por cualquier sistema grande son causados ​​por el 20 por ciento de las variables en ese sistema.


Y después, de Wikipedia :

El principio de Pareto ... establece que, para muchos eventos, aproximadamente el 80% de los efectos provienen del 20% de las causas


Entonces, de inmediato notará que este no es siempre un principio sobre el que los diseñadores tenemos control directo, sino que es un principio que observamos que ocurre de forma casi natural.

Con el conocimiento de la existencia de este principio o patrón de ocurrencia, estamos equipados con información valiosa para tomar decisiones que ayudarán a mejorar la usabilidad y efectividad de nuestros diseños.

No importa la naturaleza hipotética de la regla ...

Sí, hay críticos y aquellos que sienten que la regla del 80/20 no es más que una hipótesis o una teoría demasiado general que no siempre se aplica.

Pero dejando eso de lado, el concepto en sí es ciertamente beneficioso para aquellos que trabajan en interfaces de usuario y funcionalidades que requieren examen y optimización, incluso si la regla es más parecida a 70/30 o 90/10.

¿Cómo podemos aplicarlo a la experiencia del usuario?

En cualquier sitio web, aplicación web o entorno de software, la regla 80/20 nos dice que el 20% de la funcionalidad y las funciones en cualquier entorno serán responsables del 80% de los resultados o las acciones tomadas en ese entorno.

En algunos casos, es fácil descubrir qué constituye el 20% que tiene un impacto tan grande. Las estadísticas de análisis web, los envíos de formularios y las cookies de sesión se pueden usar para rastrear el comportamiento del usuario. El análisis de esos elementos nos ayudará a determinar con qué áreas de la interfaz de usuario se interactúa más.

Por otro lado, las tareas más pequeñas que no se rastrean con esos métodos pueden ser más difíciles de analizar. En este caso, se pueden realizar estudios de usabilidad donde se observa a los usuarios mientras interactúan con la IU de su sitio web.

Algunos ejemplos que reconocen la regla 80/20

Ya sea intencional o no, hay mucha evidencia de que los diseñadores de UI y UX están considerando el valor de este principio.

Tomemos, por ejemplo, un elemento de IU simple como una lista desplegable de países presentados en un formulario de registro. La mayoría de los desarrolladores de sitios o creadores de contenido reconocen que el 80% del tiempo se seleccionarán ciertos países.

Entonces, aunque aparentemente sería una mala práctica para una lista tan larga romper la alfabetización de la lista, la regla 80/20 permite que esa convención se rompa poniendo a los países más seleccionados en la parte superior, como se muestra en la captura de pantalla a continuación de Fenn Wright Manson's página de pago:

Las opciones de país más probables de Fenn Wright Manson


En otros casos, como cuando se agrega una nueva dirección a su libreta de direcciones en Amazon.com , la opción predeterminada es el país más seleccionado, en este caso, los Estados Unidos:

La opción de país predeterminada de Amazon


Aquí hay otro ejemplo, esta vez de un negocio basado en el Reino Unido llamado Galería de North Rock , que tiene la opción de Reino Unido seleccionada por defecto:

Opción de país por defecto de la Galería de Norht Rock

Estos simples ejemplos anteriores muestran la importancia de optimizar las funciones y opciones que se usan o se seleccionan con más frecuencia.

¿Dónde mira el usuario?

los F-Pattern los hábitos de lectura y escaneo de los usuarios de la web ya se han establecido bastante. Por supuesto, el F-Pattern no siempre es un indicador en todos los mercados, pero es un buen punto de partida para considerar dónde se verán sus usuarios cuando interactúen con sus diseños.

Eche un vistazo a los mapas de calor que se muestran a continuación del conocido artículo de Alertbox vinculado anteriormente:

Heatmaps mostrando el patrón F

Suponiendo que este es un buen indicador de dónde se enfoca el ojo de un usuario, esto respalda el concepto de la regla 80/20. Las áreas más intensas del mapa podrían representar el 20% de la página con la que los ojos del usuario interactúan el 80% del tiempo.

A partir de ese conocimiento, como diseñadores, podemos tomar decisiones que ayudarán a mejorar y optimizar las áreas que habitualmente atraerán al usuario.

Por supuesto, el diseño a menudo será el factor determinante de dónde se ve el usuario, por lo que esta sugerencia debería ser solo una guía básica y no necesariamente una forma dogmática de decidir qué cae debajo del 20%.

Tendencias de diseño móvil y la regla 80/20

Recientemente, con la explosión de dispositivos móviles en todo el mundo, algunos diseñadores y desarrolladores, especialmente Luke Wroblewski , han sido alentadores primer diseño web móvil . Es decir, al diseñar y desarrollar un sitio web, la versión móvil debe hacerse primero, y no al revés, para obtener ciertos beneficios.

En un sitio web tradicional o aplicación web, ciertas áreas de su sitio caerán naturalmente en el 20% que se utilizan con más frecuencia e interactúan. Cuando se diseña un sitio móvil, se concentra en ese 20% (aproximadamente).

Entonces, si bien la versión móvil de un sitio web puede tener su propia opción del 20% más utilizada, en relación con el contenido completo disponible en un sitio web tradicional, la versión móvil normalmente solo tendrá las funciones más importantes.

Aquí hay un ejemplo simple a continuación usando el PETCO.com sitio web:

Sitio web completo de Petco

Se muestra arriba la versión completa del sitio, en toda su gloria abarrotada. Si bien hay algunas áreas de llamado a la acción, y ciertamente no es el peor diseño del mundo, en general no está muy enfocado y hay demasiadas opciones.

Compare eso con la versión móvil, a continuación:

Petco mobile

Por el contrario, la interfaz móvil que se muestra arriba es simple y ayuda al usuario a llegar primero a las áreas más importantes, sin abrumarlas. Las opciones y las áreas de contenido más utilizadas en la versión completa son las únicas opciones disponibles en la versión móvil.

Por lo tanto, las aplicaciones web móviles bien enfocadas son excelentes ejemplos de diseñadores que canalizan sus energías en los aspectos más importantes de sus proyectos, permaneciendo enfocados en la funcionalidad y el contenido (el 20%) que se usa la mayor parte del tiempo (el 80%).

Lecciones resumidas

Teniendo conocimiento de cómo funciona la regla 80/20, los diseñadores están equipados para actuar de varias maneras, que se resumen a continuación:

  • Siempre que sea posible, analice los datos analíticos y de usabilidad con cuidado para determinar las funciones más utilizadas del 20% de su sitio web.
  • Priorizar; es decir, enfóquese en los aspectos más importantes de su sitio web o aplicación web, y mejore esos
  • No pierda demasiado tiempo optimizando cosas que caen en el 80% que no se usa con frecuencia
  • Simplifique sus diseños y diseños en base a datos que determinen qué corresponde a las funciones más utilizadas al 20%
  • Eliminar la funcionalidad no crítica o el contenido que no se usa con frecuencia
  • No invierta demasiado tiempo y dinero optimizando la funcionalidad menos utilizada, ya que el rendimiento de su inversión probablemente sea bajo
  • Encuentre maneras de mejorar la funcionalidad y el diseño de los elementos más críticos y menos utilizados que podrían tener un mayor impacto en las conversiones si esos elementos del diseño se usaran con mayor frecuencia.


Si bien la regla 80/20 es un principio discutible con algunos defectos inherentes, no carece de valor. Por lo tanto, considere esta regla durante el proceso de rediseños, realineamientos o incluso para nuevos proyectos.

Esto debería ayudar a sus usuarios a mantenerse enfocados en la funcionalidad y el contenido más importantes, y finalmente ayudará a mejorar las tasas de conversión.


Esta publicación fue escrita exclusivamente para Webdesigner Depot por Louis Lazaris, un escritor independiente y desarrollador web. Louis corre Webs impresionantes donde publica artículos y tutoriales sobre diseño web. Usted puede sigue a Louis en Twitter o póngase en contacto con él a través de su sitio web.

¿Has considerado la regla 80/20 en tus decisiones de diseño? ¿Qué efecto ha tenido en el éxito de su sitio web o aplicación web? Comparte tus comentarios a continuación.